fix(card): integrate elevation (#1273)

* fix(card): integrate elevation * typo fix * update test md * style for elevation part * clean code * card block-size * add elevation story + meta * content slot story * change dp to elevation * containment * updates * update snapshot * Fix Safari test * remove only :) * typo * typo Co-authored-by: yinonov <yinon@hotmail.com> Co-authored-by: yonatankra <yonatan.kra@vonage.com>
Vonage · Apr 24, 2022 · 6bd7e09 · 6bd7e09
1 parent b0533c4
commit 6bd7e09
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 71 deletions.
diff --git a/__snapshots__/Card.md b/__snapshots__/Card.md
@@ -3,36 +3,40 @@
 #### `should internal contents`
 
 ```html
-<div class="vwc-card">
-  <div class="vwc-card-media">
-    <slot name="media">
-    </slot>
-  </div>
-  <div class="vwc-card-content">
-    <slot name="content">
-      <header class="no-content vwc-card-header">
-        <div class="vwc-card-header-content">
-          <slot name="graphic">
-          </slot>
-          <div>
-            <div class="vwc-card-title">
-            </div>
-            <div class="vwc-card-subtitle">
+<vwc-elevation>
+  <div class="vwc-card">
+    <div class="vwc-card-container">
+      <div class="vwc-card-media">
+        <slot name="media">
+        </slot>
+      </div>
+      <div class="vwc-card-content">
+        <slot name="content">
+          <header class="no-content vwc-card-header">
+            <div class="vwc-card-header-content">
+              <slot name="graphic">
+              </slot>
+              <div>
+                <div class="vwc-card-title">
+                </div>
+                <div class="vwc-card-subtitle">
+                </div>
+              </div>
             </div>
+            <slot name="meta">
+            </slot>
+          </header>
+          <div class="vwc-card-text">
           </div>
-        </div>
-        <slot name="meta">
         </slot>
-      </header>
-      <div class="vwc-card-text">
       </div>
-    </slot>
-  </div>
-  <div class="no-content vwc-card-footer">
-    <slot name="footer">
-    </slot>
+      <div class="no-content vwc-card-footer">
+        <slot name="footer">
+        </slot>
+      </div>
+    </div>
   </div>
-</div>
+</vwc-elevation>
 
 ```
 
diff --git a/components/card/readme.md b/components/card/readme.md
@@ -17,22 +17,23 @@ Cards contain content and actions about a single subject.
 
 ### Properties/Attributes
 
-|name|attr/prop/reflected|type| description          |
-|--- |--- |--- |----------------------|
-|`heading`|reflected|string| The heading text     |
-|`subtitle`|reflected|string| The sub-heading text |
-|`card-text`|reflected|string| The card text        |
-|`header-icon`|reflected|string| A valid vivid icon type |
+| name   |attr/prop/reflected|type| description                   |
+|--------|--- |--- |-------------------------------|
+| `heading` |reflected|string| The heading text              |
+| `subtitle` |reflected|string| The sub-heading text          |
+| `text` |reflected|string| The card text                 |
+| `icon` |reflected|string| A valid vivid icon type       |
+| `elevation` |reflected|string| control the card elevation dp |
 
 ### Slots
 
-| name       | description                                                                                        |
-|------------|----------------------------------------------------------------------------------------------------|
-| `graphics` | Content to show in the header icon section. If exists, overrides the `header-icon` attribute’s definition |
-| `meta`     | Slot for action content in the card header                                                         |
-| `media`    | Slot to add anything inside the `media` area                                                       |
-| `footer`   | Slot for action content placed the card footer                                                     |
-| `content`  | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
+| name      | description                                                                                        |
+|-----------|----------------------------------------------------------------------------------------------------|
+| `graphic` | Content to show in the header icon section. If exists, overrides the `header-icon` attribute’s definition |
+| `meta`    | Slot for action content in the card header                                                         |
+| `media`   | Slot to add anything inside the `media` area                                                       |
+| `footer`  | Slot for action content placed the card footer                                                     |
+| `content` | Slot for content of the card. If exist, overrides the `heading`, `subtitle`, `card-text` and `header-icon`
 ## Styling tips
 
 ### Setting card's width

diff --git a/components/card/src/vwc-card.scss b/components/card/src/vwc-card.scss
@@ -3,14 +3,17 @@
 @use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
 
 .vwc-card {
-	display: flex;
-	overflow: hidden;
-	flex-flow: column;
-	background-color: var(#{scheme-variables.$vvd-color-canvas});
-	block-size: inherit;
+	block-size: 100%;
 	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});
+
+	&-container {
+		display: flex;
+		overflow: hidden;
+		flex-flow: column;
+		block-size: inherit;
+		border-radius: inherit;
+		color: var(#{scheme-variables.$vvd-color-on-canvas});
+	}
 
 	&-content {
 		display: flex;
@@ -96,5 +99,11 @@
 	display: none;
 }
 
+vwc-elevation {
+	block-size: inherit;
+	&::part(base) {
+		block-size: inherit;
+	}
+}
 
 
diff --git a/components/card/src/vwc-card.ts b/components/card/src/vwc-card.ts
@@ -7,14 +7,17 @@ import { property } from 'lit-element/lib/decorators.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import '@vonage/vwc-button';
 import '@vonage/vwc-icon';
-
+import '@vonage/vwc-elevation';
 
 declare global {
 	interface HTMLElementTagNameMap {
 		'vwc-card': VWCCard;
 	}
 }
 
+const elevationSets = ['0' , '2', '4', '8', '12' , '16' , '24'];
+export type IndicatorElevationSets = typeof elevationSets;
+
 /**
  * @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
@@ -53,6 +56,13 @@ export class VWCCard extends LitElement {
 	})
 		text: string | undefined;
 
+	@property({
+		reflect: false,
+		attribute: 'elevation',
+		type: String
+	})
+		elevation: IndicatorElevationSets[number] = '4';
+
 	private IconSlottedItems?: Node[];
 	#shouldShowFooterSlot: boolean | undefined;
 
@@ -64,27 +74,34 @@ export class VWCCard extends LitElement {
 		return (this.headerContentExists) ? '' : 'no-content';
 	}
 
+
 	protected override render(): unknown {
 		const footerClassMap = {
 			'no-content': !(this.#shouldShowFooterSlot)
 		};
 		return html`
-			<div class="vwc-card">
-				<div class="vwc-card-media">
-					<slot name="media"></slot>
-				</div>
-				<div class="vwc-card-content">
-					<slot name="content">
-						${this.renderHeader()}
-						<div class="vwc-card-text">
-							${this.text ? this.text : nothing}
+			<vwc-elevation .dp=${this.elevation}>
+			<!-- there are 2 wrapper due to a safari bug failing 'filter: drop-shadow'
+			from rendering shadow on an element with 'overflow: hidden' -->
+				<div class="vwc-card">
+					<div class="vwc-card-container">
+						<div class="vwc-card-media">
+							<slot name="media"></slot>
 						</div>
-					</slot>
-				</div>
-				<div class="vwc-card-footer ${classMap(footerClassMap)}">
-					<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
+						<div class="vwc-card-content">
+							<slot name="content">
+								${this.renderHeader()}
+								<div class="vwc-card-text">
+									${this.text ? this.text : nothing}
+								</div>
+							</slot>
+						</div>
+						<div class="vwc-card-footer ${classMap(footerClassMap)}">
+							<slot name="footer" @slotchange="${this.footerSlotChanged}"></slot>
+						</div>
+					</div>
 				</div>
-			</div>
+			</vwc-elevation>
 		`;
 	}
 

diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
@@ -58,7 +58,7 @@ TrimmedTitles.args = {
 	'text': 'Supporting Text'
 };
 
-const TopActionTemplate = args => html`
+const MetaTemplate = args => html`
 	<style>
 		#root-inner {
 			width: 400px
@@ -68,12 +68,21 @@ const TopActionTemplate = args => html`
 		<vwc-icon-button-toggle onicon="more-vertical-solid" officon="more-vertical-solid" slot="meta"></vwc-icon-button-toggle>
 	</vwc-card>
 	`;
-export const TopAction = TopActionTemplate.bind({});
-TopAction.args = {
+export const Meta = MetaTemplate.bind({});
+Meta.args = {
+	label: 'Meta Slot Example',
+	heading: 'Meta Slot Example',
+	text: 'Meta slot can be used fo extra date on the card like icon or a button icon'
+};
+
+
+
+export const Elevation = Template.bind({});
+Elevation.args = {
 	label: 'Top Action Example',
-	heading: 'A card with a long, very long card title',
-	subtitle: 'Long secondary text very long secondary text secondary text very long secondary text ',
-	'text': 'Lorem ipsum dolor sit amet, consectet adipiscing elit'
+	heading: 'A card with a higher elevation',
+	text: 'To emphasize its content',
+	elevation: '16'
 };
 
 
@@ -149,6 +158,33 @@ CardFooter.args = {
 	'text': 'Use the \'footer\' slot in order to add actionable items.'
 };
 
+
+const ContentSlotTemplate = args => html`
+	<style>
+		#root-inner {
+			width: 300px
+		}
+
+		vwc-card {
+			margin: 15px;
+		}
+	</style>
+	<vwc-card>
+		<img style="width: 100%;" alt="test" src="https://www.w3schools.com/tags/img_girl.jpg" slot="media"/>
+		<div slot="content">
+			<p>A card with no heading + Subtitle or text</p>
+			<p>Can contain whatever is needed.</p>
+			<p>Media slot and Footer Slot are still available if needed</p>
+		</div>
+		<vwc-button slot="footer" shape="pill" layout="outlined" icon="info">Click</vwc-button>
+	</vwc-card>`;
+
+export const ContentSlot = ContentSlotTemplate.bind({});
+ContentSlot.args = {
+	label: 'content Slot',
+};
+
+
 const AllTemplate = args => html`
 	<style>
 		#root-inner {
@@ -192,7 +228,7 @@ const InAGridTemplate = args => html`
 			height: 100%;
 		}
 	</style>
-	<vwc-layout column-basis="sm" column-spacing="md" gutters="xl" style="--layout-grid-template-columns: repeat(4, 250px)">
+	<vwc-layout column-basis="md" column-spacing="md" gutters="xl">
 		<vwc-card heading="Card 1" icon="chat-line" subtitle="Card no. 1"
 							text="This is the right card for you!">
 			<div style="height: 150px; width: 100%; background-color: #871EFF;" slot="media"></div>

diff --git a/components/card/test/card.test.js b/components/card/test/card.test.js
@@ -246,6 +246,9 @@ describe('Card', () => {
 	});
 
 	describe(`supportingText`, function () {
+		function trimText(text) {
+			return text.replace(/(\t|\n)/gm, "");
+		}
 		const supportingText = 'This is the supporting text';
 
 		it(`should set the text according to the attribute`, async function () {
@@ -258,7 +261,7 @@ describe('Card', () => {
 			const textElement = actualElement.shadowRoot.querySelector('.vwc-card-text');
 
 
-			expect(textElement.innerText)
+			expect(trimText(textElement.textContent))
 				.to
 				.equal(supportingText);
 		});
@@ -274,7 +277,7 @@ describe('Card', () => {
 
 			const supportingTextElement = actualElement.shadowRoot.querySelector('.vwc-card-text');
 
-			expect(supportingTextElement.innerText)
+			expect(trimText(supportingTextElement.textContent))
 				.to
 				.equal(supportingText);
 		});

diff --git a/ui-tests/snapshots/vwc-card.png b/ui-tests/snapshots/vwc-card.png
diff --git a/ui-tests/tests/vwc-card/index.js b/ui-tests/tests/vwc-card/index.js
@@ -11,7 +11,7 @@ export async function createElementVariations(wrapper) {
 				display: grid;
 				grid-template-columns: repeat(3, 300px);
 				gap: 1rem;
-				background-color: gray;
+				background-color: lightgray;
 				padding: 1rem;
   		}
 		</style>
@@ -97,7 +97,7 @@ export async function createElementVariations(wrapper) {
 			<div slot="content">I'm the card content that overrides the content from attributes. I have no text styles or any styles for that metter :) You can do whatever you want here</div>
 		</vwc-card>
 
-		<vwc-card >
+		<vwc-card elevation="24">
 			<div slot="content">I'm the card content that overrides the content from attributes. I have no text styles or any styles for that matter :) You can do whatever you want here</div>
 		</vwc-card>
 		`;