MWPW-135160: Mnemonics inside merch card (#2024)

* MWPW-135160: Mnemonics inside merch card * Update merch-card.js --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
adobecom · Apr 30, 2024 · 3b3149a · 3b3149a
1 parent be17d65
commit 3b3149a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 14 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -1,5 +1,5 @@
 import { decorateButtons, decorateBlockHrs } from '../../utils/decorate.js';
-import { getConfig, createTag } from '../../utils/utils.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';
@@ -9,6 +9,8 @@ const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
 
 const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart'];
 
+const CARD_SIZES = ['wide', 'super-wide'];
+
 const TEXT_STYLES = {
   H5: 'detail-m',
   H4: 'body-xxs',
@@ -52,10 +54,21 @@ const appendSlot = (slotEls, slotName, merchCard) => {
   merchCard.append(newEl);
 };
 
-const parseContent = (el, merchCard) => {
-  const innerElements = [
-    ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
-  ];
+export async function loadMnemonicList(foreground) {
+  try {
+    const { base } = getConfig();
+    const stylePromise = new Promise((resolve) => {
+      loadStyle(`${base}/blocks/mnemonic-list/mnemonic-list.css`, resolve);
+    });
+    const loadModule = import(`${base}/blocks/mnemonic-list/mnemonic-list.js`)
+      .then(({ decorateMnemonicList }) => decorateMnemonicList(foreground));
+    await Promise.all([stylePromise, loadModule]);
+  } catch (err) {
+    window.lana?.log(`Failed to load mnemonic list module: ${err}`);
+  }
+}
+
+const parseContent = async (el, merchCard) => {
   let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
   let headingMCount = 0;
 
@@ -69,7 +82,13 @@ const parseContent = (el, merchCard) => {
 
   let headingSize = 3;
   const bodySlot = createTag('div', { slot: bodySlotName });
-
+  const mnemonicList = el.querySelector('.mnemonic-list');
+  if (mnemonicList) {
+    await loadMnemonicList(mnemonicList);
+  }
+  const innerElements = [
+    ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
+  ];
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
@@ -103,6 +122,7 @@ const parseContent = (el, merchCard) => {
       bodySlot.append(element);
       merchCard.append(bodySlot);
     }
+    if (mnemonicList) bodySlot.append(mnemonicList);
   });
 
   if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) {
@@ -283,6 +303,7 @@ const init = async (el) => {
   }
   const merchCard = createTag('merch-card', { class: styles.join(' '), 'data-block': '' });
   merchCard.setAttribute('variant', cardType);
+  merchCard.setAttribute('size', styles.find((style) => CARD_SIZES.includes(style)) || '');
   if (el.dataset.removedManifestId) {
     merchCard.dataset.removedManifestId = el.dataset.removedManifestId;
   }
@@ -322,10 +343,11 @@ const init = async (el) => {
     intersectionObserver.observe(merchCard);
     footerRows = getMiniCompareChartFooterRows(el);
   }
-  const images = el.querySelectorAll('picture');
+  const allPictures = el.querySelectorAll('picture');
+  const pictures = Array.from(allPictures).filter((picture) => !picture.closest('.mnemonic-list'));
   let image;
   const icons = [];
-  images.forEach((img) => {
+  pictures.forEach((img) => {
     const imgNode = img.querySelector('img');
     const { width, height } = imgNode;
     const isSquare = Math.abs(width - height) <= 10;
@@ -416,7 +438,6 @@ const init = async (el) => {
       }
     }
   }
-
   decorateBlockHrs(merchCard);
   simplifyHrs(merchCard);
   if (merchCard.classList.contains('has-divider')) {

diff --git a/libs/blocks/mnemonic-list/mnemonic-list.css b/libs/blocks/mnemonic-list/mnemonic-list.css
@@ -2,6 +2,15 @@
   margin: var(--spacing-xs) 0 ;
 }
 
+.merch-card .mnemonic-list {
+  padding: var(--consonant-merch-spacing-xs) 0;
+}
+
+.merch-card .mnemonic-list .product-list {
+  justify-content: flex-start;
+  align-items: center;
+}
+
 .mnemonic-list .product-list {
   display: inline-flex;
   flex-wrap: wrap;
@@ -22,6 +31,7 @@
   flex: none;
   gap: var(--spacing-xxs);
   min-height: 32px;
+  line-height: initial;
 }
 
 .mnemonic-list .product-list .product-item strong {

diff --git a/libs/blocks/mnemonic-list/mnemonic-list.js b/libs/blocks/mnemonic-list/mnemonic-list.js
@@ -1,6 +1,6 @@
 import { createTag } from '../../utils/utils.js';
 
-export const decorateMnemonicList = (container) => {
+export const decorateMnemonicList = async (container) => {
   const mnemonicListElement = container.querySelector('.mnemonic-list');
   const targetElement = mnemonicListElement || container;
   const rows = targetElement.querySelectorAll(':scope p:not([class])');

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
@@ -72,7 +72,6 @@ describe('Plans Card', () => {
     expect(merchCard.getAttribute('badge-background-color')).to.be.equal('#EDCC2D');
     expect(merchCard.getAttribute('badge-color')).to.be.equal('#000000');
     expect(merchCard.getAttribute('badge-text')).to.be.equal('LOREM IPSUM DOLOR');
-    expect(JSON.parse(merchCard.getAttribute('icons'))).to.have.lengthOf(2);
     expect(merchCard.getAttribute('checkbox-label')).to.be.equal('Add a 30-day free trial of Adobe Stock.*');
     expect(body.textContent).to.be.equal('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.MaecenasSee terms about lorem ipsum');
     expect(detail.textContent).to.be.equal('Maecenas porttitor enim.');
@@ -100,7 +99,6 @@ describe('Plans Card', () => {
     expect(merchCard.getAttribute('badge-background-color')).to.be.equal('#EDCC2D');
     expect(merchCard.getAttribute('badge-color')).to.be.equal('#000000');
     expect(merchCard.getAttribute('badge-text')).to.be.equal('LOREM IPSUM DOLOR');
-    expect(JSON.parse(merchCard.getAttribute('icons'))).to.have.lengthOf(2);
     expect(merchCard.getAttribute('checkbox-label')).to.be.equal('Add a 30-day free trial of Adobe Stock.*');
     expect(body.textContent).to.be.equal('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.MaecenasSee terms about lorem ipsum');
     expect(detail.textContent).to.be.equal('Maecenas porttitor enim.');
@@ -126,7 +124,6 @@ describe('Plans Card', () => {
     expect(detail).to.exist;
     expect(merchCard.getAttribute('variant')).to.be.equal('plans');
     expect(merchCard.getAttribute('badge')).to.not.exist;
-    expect(JSON.parse(merchCard.getAttribute('icons'))).to.have.lengthOf(2);
     expect(body.textContent).to.be.equal('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.See terms about lorem ipsum');
     expect(detail.textContent).to.be.equal('Maecenas porttitor enim.');
     expect(buttons.length).to.be.equal(2);

diff --git a/test/blocks/merch-card/mocks/plans-card.html b/test/blocks/merch-card/mocks/plans-card.html
@@ -108,4 +108,51 @@ <h5>Maecenas porttitor enim.</h5>
       <div></div>
     </div>
   </div>
+  <div class="merch-card plans icons mnemonic">
+    <div>
+      <div> </div>
+      <div>LOREM IPSUM DOLOR</div>
+    </div>
+    <div>
+      <div>
+        <picture>
+          <source type="image/webp" srcset="" media="(min-width: 600px)">
+          <source type="image/webp" srcset="">
+          <source type="image/png" srcset="" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="" width="80" height="78">
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="" media="(min-width: 600px)">
+          <source type="image/webp" srcset="">
+          <source type="image/png" srcset="" media="(min-width: 600px)">
+          <img loading="lazy" alt="" src="" width="80" height="78">
+        </picture>
+        <h2 id="lorem-ipsum-dolor-sit-amet"><em>Lorem ipsum dolor sit amet</em></h2>
+        <h3 id="lorem-ipsum-dolor">Lorem ipsum dolor</h3>
+        <h5>Maecenas porttitor enim.</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>
+        <p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
+        <p>
+          <div class="mnemonic-list">
+            <div>
+              <div data-valign="middle">
+                <p><strong>Key apps:</strong></p>
+                <p><a href="/assets/img/acrobat-pro.svg">https://main--milo--adobecom.hlx.page/assets/img/acrobat-pro.svg | Acrobat Pro</a> <strong>Acrobat</strong></p>
+                <p><a href="/assets/img/photoshop.svg">https://main--milo--adobecom.hlx.page/assets/img/photoshop.svg | Photoshop</a> <strong>Photoshop</strong></p>
+                <p><a href="/assets/img/premiere.svg">https://main--milo--adobecom.hlx.page/assets/img/premiere.svg | Premiere Pro</a> <strong>Premiere Pro</strong></p>
+                <p><a href="/assets/img/illustrator.svg">https://main--milo--adobecom.hlx.page/assets/img/illustrator.svg | Illustrator</a> <strong>Illustrator</strong></p>
+                <p><a href="/assets/img/cc-express.svg">https://main--milo--adobecom.hlx.page/assets/img/cc-express.svg | Adobe Express</a> <strong>Adobe Express</strong></p>
+                <p><a href="/assets/img/mnemonic/lightroom.svg">https://main--milo--adobecom.hlx.page/assets/img/mnemonic/lightroom.svg | Lightroom</a> <strong>Lightroom</strong></p>
+              </div>
+            </div>
+          </div>
+        </p>
+        <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
+      </div>
+    </div>
+    <div>
+      <div>Lorem ipsum dolor sit amet</div>
+      <div></div>
+    </div>
+  </div>
 </div>