cta and image styles

adobecom · Jan 21, 2025 · aef94f3 · aef94f3
1 parent 8b65317
commit aef94f3
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 101 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
diff --git a/libs/features/mas/dist/mas.js b/libs/features/mas/dist/mas.js
diff --git a/libs/features/mas/src/variants/ah-single-plan.css.js b/libs/features/mas/src/variants/ah-single-plan.css.js
@@ -19,7 +19,7 @@ export const CSS = `
         line-clamp: 3;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
-        margin-bottom: 12px;
+        margin-bottom: 16px;
         box-sizing: border-box;
         color: var(--merch-card-ah-single-plan-text-color);
     }

diff --git a/libs/features/mas/src/variants/ah-single-plan.js b/libs/features/mas/src/variants/ah-single-plan.js
@@ -13,13 +13,6 @@ const AEM_FRAGMENT_MAPPING = {
 };
 
 export class AHSinglePlan extends VariantLayout {
-
-  constructor(card) {
-    super(card);
-    this.card.spectrum = 'swc';
-    this.updateComplete;
-  }
-
   getGlobalCSS() {
     return CSS;
   }
@@ -85,9 +78,9 @@ export class AHSinglePlan extends VariantLayout {
         flex-direction: row;
         align-items: center;
         gap: var(--consonant-merch-spacing-xxs);
-        padding-bottom: 4px;
+        padding-block: 6px;
     }
-    :host([variant='ah-single-plan']) ::slotted([slot='heading-xxxs']) {
+    :host([variant='ah-single-plan']) ::slotted([slot='heading-xs']) {
         letter-spacing: normal;
         font-size: 12px;
         line-height: 18px;
@@ -100,6 +93,7 @@ export class AHSinglePlan extends VariantLayout {
         font-size: 12px;
         line-height: 18px;
         color: var(--merch-card-ah-single-plan-heading-color);
+        gap: 4px;
     }
     :host([variant='ah-single-plan']) .footer {
         display: flex;
@@ -119,8 +113,11 @@ export class AHSinglePlan extends VariantLayout {
     }
 
     :host([variant='ah-single-plan']) ::slotted([slot='image']) img {
-        border-radius: 16px;
+        width: 100%;
+        height: 100%;
         object-fit: cover;
+        border-radius: 16px;
+        overflow: hidden;
     }
   `;
 }

diff --git a/libs/features/mas/src/variants/variants.js b/libs/features/mas/src/variants/variants.js
@@ -36,7 +36,7 @@ const getVariantLayout = (card, mustMatch = false) => {
         case 'ccd-slice':
             return new CCDSlice(card);
         case 'ah-single-plan':
-                return new AHSinglePlan(card);
+            return new AHSinglePlan(card);
         default:
             return mustMatch ? undefined : new Product(card);
     }