MWPW-169143: AH Try/Buy Widget sizing fixes (#3780)

adobecom · Mar 5, 2025 · eae36ba · eae36ba
2 parents 751309a + 25b55a0
commit eae36ba
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 180 deletions.
diff --git a/libs/deps/mas/commerce.js b/libs/deps/mas/commerce.js
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/docs/styles.css b/libs/features/mas/docs/styles.css
@@ -247,6 +247,10 @@ h5 {
     margin: 0;
 }
 
+.one-merch-card.ah-try-buy-widget {
+    grid-template-columns: minmax(484px, 0);
+}
+
 .two-merch-cards.ah-try-buy-widget {
     grid-template-columns: repeat(2, minmax(238px, 0px));
     gap: 8px;

diff --git a/libs/features/mas/src/variants/ah-try-buy-widget.css.js b/libs/features/mas/src/variants/ah-try-buy-widget.css.js
@@ -102,7 +102,6 @@ export const CSS = `
 
     merch-card[variant="ah-try-buy-widget"][size='single'] [slot="image"] img {
       width: 100%;
-      height: 207px;
       object-fit: cover;
       border-radius: 16px;
       overflow: hidden;

diff --git a/libs/features/mas/src/variants/ah-try-buy-widget.js b/libs/features/mas/src/variants/ah-try-buy-widget.js
@@ -27,8 +27,6 @@ export class AHTryBuyWidget extends VariantLayout {
     return AH_TRY_BUY_WIDGET_AEM_FRAGMENT_MAPPING;
   }
 
-
-
   renderLayout() {
     return html`
       <div class="content">
@@ -37,7 +35,9 @@ export class AHTryBuyWidget extends VariantLayout {
             <slot name="heading-xxxs"></slot>
         </div>
         <slot name="body-xxs"></slot>
-        <slot name="price"></slot>
+        <div class="price">
+            <slot name="price"></slot>
+        </div>
         <div class="footer">
           <slot name="cta"></slot>
         </div>
@@ -50,19 +50,14 @@ export class AHTryBuyWidget extends VariantLayout {
   static variantStyle = css`
     :host([variant='ah-try-buy-widget']) {
         --merch-card-ah-try-buy-widget-min-width: 132px;
-        --merch-card-ah-try-buy-widget-max-width: 132px;
         --merch-card-ah-try-buy-widget-content-min-width: 132px;
-        --merch-card-ah-try-buy-widget-content-max-width: 245px;
-        --merch-card-ah-try-buy-widget-height: 206px;
         --merch-card-ah-try-buy-widget-header-min-height: 36px;
         --merch-card-ah-try-buy-widget-gray-background: rgba(248, 248, 248);
         --merch-card-ah-try-buy-widget-text-color: rgba(19, 19, 19);
         --merch-card-ah-try-buy-widget-price-line-height: 17px;
         --merch-card-ah-try-buy-widget-outline: transparent;
         --merch-card-custom-border-width: 1px;
         min-width: var(--merch-card-ah-try-buy-widget-min-width);
-        max-width: var(--merch-card-ah-try-buy-widget-max-width);
-        min-height: var(--merch-card-ah-try-buy-widget-height);
         background-color: var(--merch-card-custom-background-color, var(--consonant-merch-card-background-color));
         color: var(--consonant-merch-card-heading-xxxs-color);
         border-radius: 10px;
@@ -71,35 +66,25 @@ export class AHTryBuyWidget extends VariantLayout {
         flex-direction: column;
         overflow: hidden;
         padding: 12px !important;
-        gap: 24px;
+        gap: 16px;
         box-sizing: content-box !important;
         justify-content: space-between;
     }
 
     :host([variant='ah-try-buy-widget'][size='single']) {
-        --merch-card-ah-try-buy-widget-max-width: 460px;
-        max-height: 230px;
-        flex-direction: column;
-        flex-wrap: wrap;
-        column-gap: 0;
-        justify-content: space-around;
+        flex-direction: row;
     }
 
     :host([variant='ah-try-buy-widget'][size='single']) ::slotted(div[slot="cta"])  {
         display: flex;
         flex-grow: 0;
     }
 
-    :host([variant='ah-try-buy-widget'][size='double']) {
-        --merch-card-ah-try-buy-widget-max-width: 214px;
-    }
-
     :host([variant='ah-try-buy-widget']) .content {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         min-width: var(--merch-card-ah-try-buy-widget-content-min-width);
-        max-width: var(--merch-card-ah-try-buy-widget-content-max-width);
         flex-basis: var(--merch-card-ah-try-buy-widget-content-min-width);
         flex-grow: 1;
     }
@@ -113,12 +98,15 @@ export class AHTryBuyWidget extends VariantLayout {
         margin-bottom: 4px;
     }
 
+    :host([variant='ah-try-buy-widget']) .price {
+        display: flex;
+        flex-grow: 1;
+    }
 
     :host([variant='ah-try-buy-widget']) ::slotted([slot='price']) {
         margin-left: var(--spacing-xs);
         display: flex;
         flex-direction: column;
-        flex-grow: 1;
         justify-content: end;
         font-size: var(--consonant-merch-card-detail-s-font-size);
         font-style: italic;
@@ -133,26 +121,6 @@ export class AHTryBuyWidget extends VariantLayout {
       gap: 8px;
       flex-direction: row;
     }
-
-    :host([variant='ah-try-buy-widget'][size='single']) .image {
-      display: flex;
-      width: 199px;
-      overflow: hidden;
-      height: 100%;
-      order: 1;
-    }
-
-    :host([variant='ah-try-buy-widget']) .image {
-        display: none;
-    }
-
-    :host([variant='ah-try-buy-widget']) .image img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 16px;
-        overflow: hidden;
-    }
   `;
 }