MWPW-146326 layout changes (#9)

adobecom · Jun 25, 2024 · fbbefe1 · fbbefe1
1 parent fb3b749
commit fbbefe1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/web-components/src/global.css.js b/web-components/src/global.css.js
@@ -10,7 +10,6 @@ const styles = document.createElement('style');
 
 styles.innerHTML = `
 :root {
-
     --consonant-merch-card-detail-font-size: 12px;
     --consonant-merch-card-detail-font-weight: 500;
     --consonant-merch-card-detail-letter-spacing: 0.8px;
@@ -21,7 +20,7 @@ styles.innerHTML = `
     --consonant-merch-card-heading-secondary-font-size: 14px;
     --consonant-merch-card-body-font-size: 14px;
     --consonant-merch-card-body-line-height: 21px;
-    --consonant-merch-card-promo-text-height: 17px;
+    --consonant-merch-card-promo-text-height: var(--consonant-merch-card-body-font-size);
 
     /* responsive width */
     --consonant-merch-card-mobile-width: 300px;
@@ -424,7 +423,14 @@ merch-card [slot="promo-text"] {
     padding: 0;
 }
 
+
+merch-card[variant="mini-compare-chart"] [slot="body-xxs"] {
+    font-size: var(--consonant-merch-card-body-xs-font-size);
+    padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0;    
+}
+
 merch-card[variant="mini-compare-chart"] [slot="promo-text"] {
+    font-size: var(--consonant-merch-card-body-m-font-size);
     padding: var(--consonant-merch-spacing-xs) var(--consonant-merch-spacing-s) 0;
 }
 
@@ -506,9 +512,14 @@ merch-card[variant="mini-compare-chart"] .footer-row-cell-description a {
         padding: 0 var(--consonant-merch-spacing-xs);
     }
 
+    merch-card[variant="mini-compare-chart"] [slot="body-xxs"] {
+        font-size: var(--consonant-merch-card-body-xs-font-size);
+        padding: 0 var(--consonant-merch-spacing-xs);
+    }
+
     merch-card[variant="mini-compare-chart"] [slot="promo-text"] {
         font-size: var(--consonant-merch-card-body-xs-font-size);
-        padding: var(--consonant-merch-spacing-xs);
+        padding: 0 var(--consonant-merch-spacing-xs);
     }
 
     merch-card[variant="mini-compare-chart"] .footer-row-cell {

diff --git a/web-components/src/merch-card.js b/web-components/src/merch-card.js
@@ -354,6 +354,7 @@ export class MerchCard extends LitElement {
         return html` ${this.badge}
             <div class="body">
                 <slot name="heading-xs"></slot>
+                <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
                 <slot name="body-xs"></slot>
             </div>
@@ -366,16 +367,21 @@ export class MerchCard extends LitElement {
             <div class="body">
                 <slot name="icons"></slot>
                 <slot name="heading-xs"></slot>
-                <slot name="promo-text"></slot>
                 <slot name="heading-m"></slot>
                 <slot name="body-xxs"></slot>
-                <slot name="body-xs"></slot>
+                <slot name="promo-text"></slot>
+                <slot name="body-xs"></slot>                
                 ${this.stockCheckbox}
             </div>
             <slot name="quantity-select"></slot>
             ${this.secureLabelFooter}`;
     }
 
+
+    get promoBottom() {
+        return this.classList.contains('promo-bottom');
+    }
+
     renderCatalog() {
         return html` <div class="body">
                 <div class="top-section">
@@ -397,8 +403,10 @@ export class MerchCard extends LitElement {
                 >
                 <slot name="heading-xs"></slot>
                 <slot name="heading-m"></slot>
-                <slot name="promo-text"></slot>
+                <slot name="body-xxs"></slot>
+                ${!this.promoBottom ? html`<slot name="promo-text"></slot>`: ''}
                 <slot name="body-xs"></slot>
+                ${this.promoBottom ? html`<slot name="promo-text"></slot>`: ''}
             </div>
             ${this.secureLabelFooter}`;
     }
@@ -408,8 +416,8 @@ export class MerchCard extends LitElement {
             <div class="body">
                 <slot name="icons"></slot>
                 <slot name="heading-xs"></slot>
-                <slot name="promo-text"></slot>
                 <slot name="body-xxs"></slot>
+                <slot name="promo-text"></slot>
                 <slot name="body-xs"></slot>
             </div>
             ${this.evergreen
@@ -444,6 +452,7 @@ export class MerchCard extends LitElement {
             <div class="body">
                 <slot name="icons"></slot>
                 <slot name="heading-xs"></slot>
+                <slot name="body-xxs"></slot>
                 <slot name="promo-text"></slot>
                 <slot name="body-xs"></slot>
             </div>
@@ -459,6 +468,7 @@ export class MerchCard extends LitElement {
             <slot name="heading-m"></slot>
             <slot name="body-m"></slot>
             <slot name="heading-m-price"></slot>
+            <slot name="body-xxs"></slot>
             <slot name="price-commitment"></slot>
             <slot name="offers"></slot>
             <slot name="promo-text"></slot>