fix(card): extract meta from header (#1288)

Vonage · Apr 27, 2022 · 41b4681 · 41b4681
1 parent 2f4f541
commit 41b4681
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git a/__snapshots__/Card.md b/__snapshots__/Card.md
@@ -12,8 +12,8 @@
       </div>
       <div class="vwc-card-content">
         <slot name="content">
-          <header class="no-content vwc-card-header">
-            <div class="vwc-card-header-content">
+          <div class="vwc-card-wrapper">
+            <header class="no-content vwc-card-header">
               <slot name="graphic">
               </slot>
               <div>
@@ -22,10 +22,10 @@
                 <div class="vwc-card-subtitle">
                 </div>
               </div>
-            </div>
+            </header>
             <slot name="meta">
             </slot>
-          </header>
+          </div>
           <div class="vwc-card-text">
           </div>
         </slot>

diff --git a/components/card/src/vwc-card.scss b/components/card/src/vwc-card.scss
@@ -21,19 +21,20 @@
 		padding: 1.5rem;
 	}
 
-	&-header {
+	&-wrapper {
 		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 0.5rem;
-
+		width: 100%;
+		column-gap: 0.5rem;
 		:host([text]) & {
 			margin-bottom: 12px;
 		}
+	}
 
-		&-content {
-			display: inline-flex;
-		}
+	&-header {
+		display: inline-flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		column-gap: 0.5rem;
 	}
 
 	&-title,
@@ -80,7 +81,7 @@
 .icon {
 	flex-shrink: 0;
 	align-self: baseline;
-	margin: 4px 10px 0 0;
+	margin: 4px 2px 0 0;
 }
 
 .icon {
@@ -93,6 +94,7 @@
 	align-self: flex-start;
 	margin-block-start: -0.5rem;
 	margin-inline-end: -0.5rem;
+	margin-inline-start: auto;
 }
 
 .no-content {

diff --git a/components/card/src/vwc-card.ts b/components/card/src/vwc-card.ts
@@ -90,7 +90,10 @@ export class VWCCard extends LitElement {
 						</div>
 						<div class="vwc-card-content">
 							<slot name="content">
-								${this.renderHeader()}
+								<div class="vwc-card-wrapper">
+									${this.renderHeader()}
+									<slot name="meta"></slot>
+								</div>
 								<div class="vwc-card-text">
 									${this.text ? this.text : nothing}
 								</div>
@@ -108,16 +111,13 @@ export class VWCCard extends LitElement {
 	private renderHeader() {
 		return html`
 			<header class="vwc-card-header ${this.headerClass}">
-				<div class="vwc-card-header-content">
-						<slot name="graphic" @slotchange="${this.graphicSlotChanged}">
-							${this.icon ? this.renderIcon() : ''}
-						</slot>
-						<div>
-							<div class="vwc-card-title">${this.heading}</div>
-							<div class="vwc-card-subtitle">${this.subtitle}</div>
-						</div>
+				<slot name="graphic" @slotchange="${this.graphicSlotChanged}">
+					${this.icon ? this.renderIcon() : ''}
+				</slot>
+				<div>
+					<div class="vwc-card-title">${this.heading}</div>
+					<div class="vwc-card-subtitle">${this.subtitle}</div>
 				</div>
-				<slot name="meta"></slot>
 			</header>`;
 	}
 

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
@@ -100,6 +100,10 @@ export async function createElementVariations(wrapper) {
 		<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>
+		
+		<vwc-card label="card with meta-no header" text="I'm a Supporting text, cant be line trimmed. Lorem ipsum dolor sit amet, consectet adipiscing elit">
+			<vwc-icon-button-toggle onicon="bookmark-full" officon="bookmark" connotation="cta" slot="meta"></vwc-icon-button-toggle>
+		</vwc-card>
 		`;
 	wrapper.appendChild(elementWrapper);
 }