MWPW-152160 and MWPW-152155 card widths and gray divider (#3382)

* MWPW-152155 Product & Image Card Widths: Merch Cards - Consonant Parity

* MWPW-152160 Product Card gray divider line Padding: Merch Cards - Consonant Parity

* Trigger Build

* Trigger Build

* MWPW-152160 Product Card gray divider line Padding: Merch Cards - Consonant Parity

* Build mas and merch-card

* Trigger Build

* Build mas

* Trigger Build

* MWPW-152160 Product Card gray divider line Padding: Merch Cards - Consonant Parity

* MWPW-152160 Product Card gray divider line Padding: Merch Cards - Consonant Parity

* Trigger Build

* Rebuild mas

* Trigger Build

---------

Co-authored-by: Bozo Jovicic <bozo@hitthecode.com>

libs/features/mas/src/global.css.js

@@ -157,11 +157,15 @@ merch-card.background-opacity-70 {
 }
 
 merch-card.has-divider hr {
-    margin-bottom: var(--consonant-merch-spacing-xs);
+    margin: var(--consonant-merch-spacing-xs) 0;
     height: 1px;
     border: none;
 }
 
+merch-card.has-divider div[slot='body-lower'] hr {
+    margin: 0;
+}
+
 merch-card p, merch-card h3, merch-card h4 {
     margin: 0;
 }
@@ -370,6 +374,14 @@ merch-card div[slot="footer"] {
     display: contents;
 }
 
+merch-card.product div[slot="footer"] {
+    display: block;
+}
+
+merch-card.product div[slot="footer"] a + a {
+    margin: 5px 0 0 5px;
+}
+
 merch-card [slot="footer"] a {
     word-wrap: break-word;
     text-align: center;

libs/features/mas/src/merch-card.css.js

@@ -78,6 +78,14 @@ export const styles = css`
 
         padding: var(--consonant-merch-spacing-xs);
     }
+    
+    footer.footer-column {
+        flex-direction: column;
+    }
+    
+    footer.footer-column .secure-transaction-label {
+        align-self: flex-start;
+    }
 
     hr {
         background-color: var(--merch-color-grey-200);

libs/features/mas/src/merch-card.js

@@ -403,12 +403,23 @@ export class MerchCard extends LitElement {
         return this.querySelector('merch-quantity-select');
     }
 
+    displayFooterElementsInColumn() {
+        if (!this.classList.contains('product')) return;
+
+        const secureTransactionLabel = this.shadowRoot.querySelector('.secure-transaction-label');
+        const checkoutLinkCtas = this.footerSlot?.querySelectorAll('a[is="checkout-link"].con-button')
+        if (checkoutLinkCtas.length === 2 && secureTransactionLabel) {
+            secureTransactionLabel.parentElement.classList.add('footer-column');
+        }
+    }
+
     merchCardReady() {
         if (this.offerSelect && !this.offerSelect.planType) return;
         // add checks for other properties if needed
         this.dispatchEvent(
             new CustomEvent(EVENT_MERCH_CARD_READY, { bubbles: true }),
         );
+        this.displayFooterElementsInColumn();
     }
 
     // TODO enable with TWP //

libs/features/mas/src/variants/image.css.js

@@ -1,4 +1,4 @@
-import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js';
+import { TABLET_UP, DESKTOP_UP, } from '../media.js';
 export const CSS = `
 :root {
   --consonant-merch-card-image-width: 300px;
@@ -22,17 +22,15 @@ export const CSS = `
 @media screen and ${DESKTOP_UP} {
   :root {
     --consonant-merch-card-image-width: 378px;
+    --consonant-merch-card-image-width-4clm: 276px;
   }
     
-  .three-merch-cards.image,
-  .four-merch-cards.image {
+  .three-merch-cards.image {
       grid-template-columns: repeat(3, var(--consonant-merch-card-image-width));
   }
-}
 
-@media screen and ${LARGE_DESKTOP} {
   .four-merch-cards.image {
-      grid-template-columns: repeat(4, var(--consonant-merch-card-image-width));
+      grid-template-columns: repeat(4, var(--consonant-merch-card-image-width-4clm));
   }
 }
 `;

libs/features/mas/src/variants/product.css.js

@@ -1,4 +1,4 @@
-import { TABLET_UP, DESKTOP_UP, LARGE_DESKTOP,} from '../media.js';
+import { TABLET_UP, DESKTOP_UP, } from '../media.js';
 export const CSS = `
 :root {
   --consonant-merch-card-product-width: 300px;
@@ -25,18 +25,15 @@ export const CSS = `
 @media screen and ${DESKTOP_UP} {
   :root {
     --consonant-merch-card-product-width: 378px;
+    --consonant-merch-card-product-width-4clm: 276px;
   }
     
-  .three-merch-cards.product,
-  .four-merch-cards.product {
+  .three-merch-cards.product {
       grid-template-columns: repeat(3, var(--consonant-merch-card-product-width));
   }
-}
 
-/* Large desktop */
-@media screen and ${LARGE_DESKTOP} {
   .four-merch-cards.product {
-      grid-template-columns: repeat(4, var(--consonant-merch-card-product-width));
+      grid-template-columns: repeat(4, var(--consonant-merch-card-product-width-4clm));
   }
 }
 `;

libs/features/mas/test/merch-card-product.test.html

@@ -159,7 +159,12 @@ <h4 id="price---abm---acrobat-standard-dc" class="card-heading" slot="heading-xs
             min="2" max="10" step="1" default-value="undefined" max-input="undefined" closed=""></merch-quantity-select>
         </div>
         <div slot="footer">
-          <p class="action-area"><a is="checkout-link" data-checkout-workflow="UCv3"
+          <span class="secure-transaction-label">Secure transaction</span>
+          <p class="action-area">
+            <a is="checkout-link" data-checkout-workflow="UCv3" data-checkout-workflow-step="commitment" data-quantity="1"
+               data-wcs-osi="abm" data-extra-options="{}" class="con-button"
+               daa-ll="Free trial-4--Creative Cloud All Apps"><span>Free trial</span></a>
+            <a is="checkout-link" data-checkout-workflow="UCv3" class="con-button"
               data-checkout-workflow-step="recommendation" data-quantity="2" data-wcs-osi="abm" data-extra-options="{}"
               daa-ll="Buy now-2--Acrobat Standard for"><span>Buy now</span></a></p>
         </div>