fix(card): titles trim (#1124)

* viv-753-card-ellipsis #comment: fix test * viv-753-card-ellipsis #comment: fix test * disable styleint for vendor prefix * viv-753-card-ellipsis #comment: css fix * viv-753-card-ellipsis #comment: css property name change * viv-753-card-ellipsis #comment: css property was missing * viv-753-card-ellipsis #comment: use vwc-text as card header * viv-753-card-ellipsis #comment: test snapshot * viv-753-card-ellipsis #comment: revert vwc-text back to div * viv-753-card-ellipsis #comment: regenerate test md * viv-753-card-ellipsis #comment: extract variables to separate file Co-authored-by: yinonov <yinon@hotmail.com>
Vonage · Nov 15, 2021 · f69d051 · f69d051
1 parent 1dadbc4
commit f69d051
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 69 deletions.
diff --git a/__snapshots__/Card.md b/__snapshots__/Card.md
@@ -9,19 +9,19 @@
     </slot>
   </div>
   <div class="vwc-card-info">
-    <header class="no-header-content">
+    <header class="no-content">
       <div class="vwc-card-header">
         <slot name="graphics">
         </slot>
-        <div class="vwc-card-header-text">
+        <div class="vwc-card-title">
         </div>
       </div>
       <div class="vwc-card-subtitle">
       </div>
     </header>
-    <div class="vwc-card-content">
+    <div class="vwc-card-supportText">
     </div>
-    <div class="no-actions-content vwc-card-actions">
+    <div class="no-content vwc-card-actions">
       <slot name="actions">
       </slot>
     </div>

diff --git a/components/card/package.json b/components/card/package.json
@@ -18,7 +18,7 @@
 	},
 	"scripts": {
 		"build:typescript": "tsc -b",
-		"build:styles": "umbrella-style-modules",
+		"build:styles": "umbrella-style-modules --path=\"./src\"",
 		"build": "yarn run build:styles && yarn run build:typescript"
 	},
 	"bugs": {

diff --git a/components/card/readme.md b/components/card/readme.md
@@ -58,3 +58,9 @@ Then your style should have:
 
 Please see this example: [Grid Example](https://vivid.vonage.com?path=/story/alpha-components-card--in-a-grid)
 
+## CSS Custom Properties
+
+| Property                       | Default                                          | Description                                      |
+|--------------------------------|--------------------------------------------------|--------------------------------------------------|
+| `--title-line-clamp` | none | Controls the number of lines of the title that will be present before trim & ellipsis |
+| `--subtitle-line-clamp` | none | Controls the number of lines of the sub-title that will be present before trim & ellipsis |
diff --git a/components/card/src/partials/_vwc-card-variables.scss b/components/card/src/partials/_vwc-card-variables.scss
@@ -0,0 +1,3 @@
+// clamp variables
+$title-line-clamp: --title-line-clamp;
+$subtitle-line-clamp: --subtitle-line-clamp;
diff --git a/components/card/src/vwc-card.scss b/components/card/src/vwc-card.scss
@@ -1,3 +1,4 @@
+@use 'partials/vwc-card-variables' as card-variables;
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 
@@ -9,52 +10,77 @@
 	border-radius: 6px;
 	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05), 0 8px 8px rgba(0, 0, 0, 0.05), 0 2px 16px rgba(0, 0, 0, 0.1);
 	color: var(#{scheme-variables.$vvd-color-on-canvas});
-}
 
-.vwc-card-info {
-	display: flex;
-	flex-flow: column;
-	padding: 24px;
+	&-info {
+		display: flex;
+		flex-flow: column;
+		padding: 24px;
+	}
+
+	&-header {
+		display: flex;
+	}
+
+	&-title,
+	&-subtitle {
+		/* stylelint-disable property-no-vendor-prefix */
+		/* stylelint-disable value-no-vendor-prefix */
+		display: -webkit-box;
+		overflow: hidden;
+		-webkit-box-orient: vertical;
+		/* stylelint-enable property-no-vendor-prefix */
+		/* stylelint-enable value-no-vendor-prefix */
+	}
+
+	&-title {
+		@include typography.typography-cat-shorthand('subtitle-2');
+		margin-bottom: 4px;
+		-webkit-line-clamp: var(#{card-variables.$title-line-clamp});
+	}
+
+	&-subtitle {
+		-webkit-line-clamp: var(#{card-variables.$subtitle-line-clamp});
+	}
+
+	&-subtitle,
+	&-supportText {
+		@include typography.typography-cat-shorthand('body-2');
+		color: var(#{scheme-variables.$vvd-color-neutral-70});
+	}
+
+	&-actions {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: flex-end;
+		margin-top: 16px;
+	}
 }
 
 header {
 	display: inline-flex;
 	flex-direction: column;
 	align-content: space-between;
-}
 
-:host([supporting-text]) header {
-	margin-bottom: 8px;
-}
-
-.vwc-card-header {
-	display: flex;
-}
-
-.vwc-card-header-text {
-	@include typography.typography-cat-shorthand('subtitle-2');
-	margin: auto 0;
+	:host([supporting-text]) & {
+		margin-bottom: 12px;
+	}
 }
 
 ::slotted([slot="graphics"i]),
 .header-icon {
 	flex-shrink: 0;
-	margin-right: 12px;
+	align-self: baseline;
+	margin: 4px 10px 0 0;
 }
 
-.vwc-card-content,
-.vwc-card.subtitle {
-	@include typography.typography-cat-shorthand('body-2');
-}
-
-.vwc-card-actions {
-	display: inline-flex;
-	flex-direction: column;
-	align-items: flex-end;
-	margin-top: 16px;
+.header-icon {
+	width: 20px;
+	height: 20px;
 }
 
-.no-header-content,
-.vwc-card-actions.no-actions-content {
+.no-content {
 	display: none;
 }
+
+
+
diff --git a/components/card/src/vwc-card.ts b/components/card/src/vwc-card.ts
@@ -13,6 +13,11 @@ declare global {
 	}
 }
 
+/**
+ * @cssprop [--title-line-clamp] defines the number of lines presented before trim + ellipsis in the card title
+ * @cssprop [--subtitle-line-clamp] defines the number of lines presented before trim + ellipsis in the card subtitle
+ * */
+
 @customElement('vwc-card')
 export class VWCCard extends LitElement {
 	/**
@@ -54,12 +59,12 @@ export class VWCCard extends LitElement {
 	}
 
 	private get headerClass(): string {
-		return (this.headerContentExists) ? '' : 'no-header-content';
+		return (this.headerContentExists) ? '' : 'no-content';
 	}
 
 	protected override render(): unknown {
 		const actionsClassMap = {
-			'no-actions-content': !(this.shouldShowActionsSlot)
+			'no-content': !(this.shouldShowActionsSlot)
 		};
 		return html`
 			<div class="vwc-card">
@@ -68,8 +73,8 @@ export class VWCCard extends LitElement {
 				</div>
 				<div class="vwc-card-info">
 					${this.renderHeader()}
-					<div class="vwc-card-content">
-						${this.supportingText ? this.supportingText : ''}
+					<div class="vwc-card-supportText">
+							${this.supportingText ? this.supportingText : ''}
 					</div>
 					<div class="vwc-card-actions ${classMap(actionsClassMap)}">
 							<slot name="actions" @slotchange="${this.actionsSlotChanged}"></slot>
@@ -86,26 +91,24 @@ export class VWCCard extends LitElement {
 					<slot name="graphics" @slotchange="${this.graphicsSlotChanged}">
 						${this.headerIcon ? this.renderIcon() : ''}
 					</slot>
-					<div class="vwc-card-header-text">
-						${this.heading}
-					</div>
+					<div class="vwc-card-title">${this.heading}</div>
 				</div>
 				<div class="vwc-card-subtitle">${this.subtitle}</div>
 			</header>`;
 	}
 
 	private renderIcon() {
-		return html`<vwc-icon class="header-icon" size="medium" type="${this.headerIcon}"></vwc-icon>`;
+		return html`<vwc-icon class="header-icon" inline type="${this.headerIcon}"></vwc-icon>`;
 	}
 
 	private graphicsSlotChanged() {
 		const headerElement = this.shadowRoot?.querySelector('header');
 		const slot = headerElement?.querySelector('slot[name="graphics"]') as HTMLSlotElement;
 		this.headerIconSlottedItems = slot.assignedNodes();
 		if (this.headerContentExists) {
-			headerElement?.classList.remove('no-header-content');
+			headerElement?.classList.remove('no-content');
 		} else {
-			headerElement?.classList.add('no-header-content');
+			headerElement?.classList.add('no-content');
 		}
 	}
 

diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
@@ -28,6 +28,8 @@ const Template = args => html`
 
 		vwc-card {
 			margin: 15px;
+			--title-line-clamp: 2;
+			--subtitle-line-clamp: 2
 		}
 	</style>
 	<vwc-card ...=${spread(args)}>
@@ -48,6 +50,14 @@ Subtitle.args = {
 	'supporting-text': 'Supporting Text'
 };
 
+export const TrimmedTitles = Template.bind({});
+TrimmedTitles.args = {
+	label: 'Trimmed titles',
+	heading: 'A Long Title that can get up to an infinite number of rows or you can set the number of rows that will be shown until they are trimmed',
+	subtitle: 'Subtitle that can get up to an infinite number of rows or you can set the number of rows that will be shown until they are trimmed',
+	'supporting-text': 'Supporting Text'
+};
+
 const IconTemplate = args => html`
 	<style>
 		#root-inner {
@@ -158,14 +168,11 @@ const InAGridTemplate = args => html`
 	<style>
 		.card-wrapper {
 			display: grid;
-			grid-template-columns: auto auto auto;
-			padding: 10px;
+			grid-template-columns: repeat(3, 250px);
+			gap: 2rem;
+			padding: 1rem;
 		}
 
-		vwc-card {
-			width: 250px;
-			margin: 5px;
-		}
 	</style>
 	<div class="card-wrapper">
 		<vwc-card heading="Card 1" header-icon="chat-line" subtitle="Card no. 1"

diff --git a/components/card/test/card.test.js b/components/card/test/card.test.js
@@ -37,7 +37,7 @@ describe('Card', () => {
 
 			const headerElement = actualElement.shadowRoot.querySelector('header');
 
-			expect(headerElement.classList.contains('no-header-content'))
+			expect(headerElement.classList.contains('no-content'))
 				.to
 				.equal(true);
 		});
@@ -51,7 +51,7 @@ describe('Card', () => {
 
 			const headerElement = actualElement.shadowRoot.querySelector('header');
 
-			expect(headerElement.classList.contains('no-header-content'))
+			expect(headerElement.classList.contains('no-content'))
 				.to
 				.equal(false);
 		});
@@ -140,7 +140,7 @@ describe('Card', () => {
 
 			await actualElement.updateComplete;
 
-			const headerElement = actualElement.shadowRoot.querySelector('.vwc-card-header-text');
+			const headerElement = actualElement.shadowRoot.querySelector('.vwc-card-title');
 
 			expect(headerElement.innerText)
 				.to
@@ -156,7 +156,7 @@ describe('Card', () => {
 
 			await actualElement.updateComplete;
 
-			const headerElement = actualElement.shadowRoot.querySelector('.vwc-card-header-text');
+			const headerElement = actualElement.shadowRoot.querySelector('.vwc-card-title');
 
 			expect(headerElement.innerText)
 				.to
@@ -255,7 +255,7 @@ describe('Card', () => {
 
 			await actualElement.updateComplete;
 
-			const supportingElement = actualElement.shadowRoot.querySelector('.vwc-card-content');
+			const supportingElement = actualElement.shadowRoot.querySelector('.vwc-card-supportText');
 
 
 			expect(supportingElement.innerText)
@@ -272,7 +272,7 @@ describe('Card', () => {
 
 			await actualElement.updateComplete;
 
-			const supportingTextElement = actualElement.shadowRoot.querySelector('.vwc-card-content');
+			const supportingTextElement = actualElement.shadowRoot.querySelector('.vwc-card-supportText');
 
 			expect(supportingTextElement.innerText)
 				.to
@@ -316,7 +316,7 @@ describe('Card', () => {
 			const actionsElement = actualElement.shadowRoot.querySelector('.vwc-card-actions');
 
 
-			expect(actionsElement.classList.contains('no-actions-content'))
+			expect(actionsElement.classList.contains('no-content'))
 				.to
 				.equal(true);
 		});
@@ -336,7 +336,7 @@ describe('Card', () => {
 
 			const actionsElement = actualElement.shadowRoot.querySelector('.vwc-card-actions');
 
-			expect(actionsElement.classList.contains('no-actions-content'))
+			expect(actionsElement.classList.contains('no-content'))
 				.to
 				.equal(false);
 		});

diff --git a/ui-tests/snapshots/vwc-card.png b/ui-tests/snapshots/vwc-card.png