From 2082fe44ce06edd184c171d7ccd52fc294163942 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Wed, 29 Jan 2025 10:01:56 -0800 Subject: [PATCH] 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 --- libs/deps/mas/mas.js | 6 +++++- libs/deps/mas/merch-card.js | 6 +++++- libs/features/mas/dist/mas.js | 6 +++++- libs/features/mas/src/variants/ccd-suggested.css.js | 5 +++++ libs/features/mas/src/variants/ccd-suggested.js | 1 - 5 files changed, 20 insertions(+), 4 deletions(-) diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js index 475483275a..ff69a700fc 100644 --- a/libs/deps/mas/mas.js +++ b/libs/deps/mas/mas.js @@ -1387,6 +1387,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); @@ -1506,7 +1511,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/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js index ff0e309ea0..c05b8979b1 100644 --- 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 index 475483275a..ff69a700fc 100644 --- a/libs/features/mas/dist/mas.js +++ b/libs/features/mas/dist/mas.js @@ -1387,6 +1387,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); @@ -1506,7 +1511,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/src/variants/ccd-suggested.css.js b/libs/features/mas/src/variants/ccd-suggested.css.js index 1c85a2a9f2..06ed97994d 100644 --- 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 index 03ab900fc7..421d7ef4af 100644 --- 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']) {