MWPW-166012: [CCD - Suggested Cards] Enable ABM text under price (#3520)

* MWPW-166012: ABM text styling on suggested card * updated deps * Add styling for 'ccd-suggested' variant in merch-card component * Removed css not required
adobecom · Jan 29, 2025 · 2082fe4 · 2082fe4
1 parent 56128d6
commit 2082fe4
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
@@ -1412,6 +1412,11 @@ merch-card[variant='twp'] merch-offer-select {
     line-height: var(--consonant-merch-card-body-xxs-line-height);
   }
 
+  merch-card[variant="ccd-suggested"] [slot="price"] em {
+      font-size: var(--consonant-merch-card-body-xxs-font-size);
+      line-height: var(--consonant-merch-card-body-xxs-line-height);
+  }
+
 .spectrum--darkest merch-card[variant="ccd-suggested"] {
   --consonant-merch-card-background-color:rgb(30, 30, 30);
   --consonant-merch-card-heading-xs-color:rgb(239, 239, 239);
@@ -1531,7 +1536,6 @@ merch-card[variant='twp'] merch-offer-select {
         :host([variant='ccd-suggested']) ::slotted([slot='price']) {
             font-size: var(--consonant-merch-card-body-xs-font-size);
             line-height: var(--consonant-merch-card-body-xs-line-height);
-            min-width: fit-content;
         }
 
         :host([variant='ccd-suggested']) ::slotted([slot='cta']) {

diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/src/variants/ccd-suggested.css.js b/libs/features/mas/src/variants/ccd-suggested.css.js
@@ -10,6 +10,11 @@ export const CSS = `
     line-height: var(--consonant-merch-card-body-xxs-line-height);
   }
 
+  merch-card[variant="ccd-suggested"] [slot="price"] em {
+      font-size: var(--consonant-merch-card-body-xxs-font-size);
+      line-height: var(--consonant-merch-card-body-xxs-line-height);
+  }
+
 .spectrum--darkest merch-card[variant="ccd-suggested"] {
   --consonant-merch-card-background-color:rgb(30, 30, 30);
   --consonant-merch-card-heading-xs-color:rgb(239, 239, 239);

diff --git a/libs/features/mas/src/variants/ccd-suggested.js b/libs/features/mas/src/variants/ccd-suggested.js
@@ -163,7 +163,6 @@ export class CCDSuggested extends VariantLayout {
         :host([variant='ccd-suggested']) ::slotted([slot='price']) {
             font-size: var(--consonant-merch-card-body-xs-font-size);
             line-height: var(--consonant-merch-card-body-xs-line-height);
-            min-width: fit-content;
         }
 
         :host([variant='ccd-suggested']) ::slotted([slot='cta']) {