MWPW-155057: Lets authors add "starting at" to merch cards (adobecom#…

…2717) * MWPW-155057: [Merch cards] Add ability for authors to add "starting at" Preview: https://main--cc--adobecom.hlx.page/drafts/axel/stories/mwpw-155057-starting-at?milolibs=MWPW-155057--milo--adobecom * improved impl * unit tests * Update merch-card.js * Update merch-card.test.js * Update segment-card.html * unit test * Update merch-card.js * Update merch-card.js * Update merch-card.test.js * Update merch-card.js * Update merch-card.js * Update merch-card.js * Update merch-card.js * Update merch-card.js * Update merch-card.js * unit test and pr feedback * conflicts resolved
mokimo · Aug 20, 2024 · 2abe70f · 2abe70f
1 parent cfedb3c
commit 2abe70f
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 8 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -2,7 +2,6 @@ import { decorateButtons, decorateBlockHrs } from '../../utils/decorate.js';
 import { getConfig, createTag, loadStyle } from '../../utils/utils.js';
 import { getMetadata } from '../section-metadata/section-metadata.js';
 import { processTrackingLabels } from '../../martech/attributes.js';
-import { replaceKey } from '../../features/placeholders.js';
 import '../../deps/mas/merch-card.js';
 
 const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
@@ -403,6 +402,19 @@ const updateBigPrices = (merchCard) => {
   });
 };
 
+const addStartingAt = async (styles, merchCard) => {
+  if (styles.includes('starting-at')) {
+    const { replaceKey } = await import('../../features/placeholders.js');
+    await replaceKey('starting-at', getConfig()).then((key) => {
+      const startingAt = createTag('div', { slot: 'starting-at' }, key);
+      const price = merchCard.querySelector('span[is="inline-price"]');
+      if (price) {
+        price.parentNode.prepend(startingAt);
+      }
+    });
+  }
+};
+
 export default async function init(el) {
   if (!el.querySelector(INNER_ELEMENTS_SELECTOR)) return el;
   const styles = [...el.classList];
@@ -535,6 +547,7 @@ export default async function init(el) {
 
   addStock(merchCard, styles);
   if (styles.includes('secure')) {
+    const { replaceKey } = await import('../../features/placeholders.js');
     await replaceKey('secure-transaction', getConfig()).then((key) => merchCard.setAttribute('secure-label', key));
   }
   merchCard.setAttribute('filters', categories.join(','));
@@ -571,7 +584,9 @@ export default async function init(el) {
         }
       }
     }
+
     updateBigPrices(merchCard);
+    await addStartingAt(styles, merchCard);
     decorateBlockHrs(merchCard);
     simplifyHrs(merchCard);
     if (merchCard.classList.contains('has-divider')) merchCard.setAttribute('custom-hr', true);

diff --git a/libs/deps/mas/merch-card.js b/libs/deps/mas/merch-card.js
diff --git a/libs/deps/mas/plans-modal.js b/libs/deps/mas/plans-modal.js
diff --git a/libs/features/mas/web-components/src/global.css.js b/libs/features/mas/web-components/src/global.css.js
@@ -206,6 +206,12 @@ merch-card:not([variant='inline-heading']) [slot='heading-xs'] a {
     color: var(--merch-color-grey-80);
 }
 
+merch-card [slot='starting-at'] {
+  font-size: var(--consonant-merch-card-body-xs-font-size);
+  line-height: var(--consonant-merch-card-body-xs-line-height);
+  font-weight: 500;
+}
+
 merch-card [slot='heading-xs'] a:not(:hover) {
     text-decoration: inherit;
 }

diff --git a/libs/features/mas/web-components/src/merch-card.js b/libs/features/mas/web-components/src/merch-card.js
@@ -375,7 +375,11 @@ export class MerchCard extends LitElement {
 
     get promoBottom() {
       return this.classList.contains('promo-bottom');
-  }
+    }
+
+    get startingAt() {
+      return this.classList.contains('starting-at');
+    }
 
     renderSegment() {
         return html` ${this.badge}

diff --git a/libs/features/mas/web-components/test/merch-card.test.html b/libs/features/mas/web-components/test/merch-card.test.html
@@ -950,7 +950,7 @@ <h3 slot="heading-m">
                     <a href="https://business.adobe.com/" class="con-button blue">Save now</a>
                 </div>
             </merch-card>
-            <merch-card variant="catalog" action-menu="true" badge-color="#EDCC2D" badge-background-color="#000000"
+            <merch-card variant="catalog" action-menu="true" class="starting-at" badge-color="#EDCC2D" badge-background-color="#000000"
                 badge-text="Best value">
                 <merch-icon slot="icons" size="l" src="../test/img/cc-logo.png"
                     alt="Creative Cloud All Apps"></merch-icon>

diff --git a/test/blocks/merch-card/mocks/plans-card.html b/test/blocks/merch-card/mocks/plans-card.html
@@ -47,7 +47,7 @@ <h5>this promo is great <a href="#terms">see terms</a></h5>
     </div>
   </div>
 
-  <div class="merch-card plans icons secure add-stock edu">
+  <div class="merch-card plans icons secure add-stock edu starting-at">
     <div>
       <div>#EDCC2D, #000000</div>
       <div>LOREM IPSUM DOLOR</div>

diff --git a/test/blocks/merch-card/mocks/segment-card.html b/test/blocks/merch-card/mocks/segment-card.html
@@ -1,9 +1,10 @@
 <div class="fragment">
 <div class="section">
   <div class="before"></div>
-  <div class="merch-card segment">
+  <div class="merch-card segment starting-at">
     <div>
       <div>
+        <span is="inline-price">$59.99</span>
         <h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet</h3>
         <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>