Mwpw-142267: Merch What's Included and Merch Mnemonic List (TwP) (#2554)

* MWPW-142267: What's Included screen (TwP)

* Update merch-whats-included.css

* Update merch-whats-included.css

* Update merch-whats-included.css

* updated libs from main

* Update merch-whats-included.js

* updated deps

* address review comments. 'HEAD' branch instead of main because I had to reset to Axels commit to avoid 'callout' change

* Update merch-whats-included.css

* Update merch-whats-included.css

* Update merch-whats-included.css

* Update merch-whats-included.css

* Update merch-whats-included.css

* style fixes

* updated deps

* h3 styles

* responsive width

* Update merch-whats-included.css

* removed event listener

* unit tests

---------

Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com>

libs/blocks/merch-card/merch-card.js

@@ -135,6 +135,11 @@ const parseTwpContent = async (el, merchCard) => {
       const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul');
       const bodySlot = createTag('div', { slot: 'body-xs' }, content);
       merchCard.append(bodySlot);
+
+      const whatsIncludedLink = bodySlot.querySelector('a[href*="merch-whats-included"]');
+      if (whatsIncludedLink) {
+        whatsIncludedLink.classList.add('merch-whats-included');
+      }
     } else if (index === 2) { // Footer section
       const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase()));
       const footer = createTag('div', { slot: 'footer' }, footerContent);

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.css

@@ -0,0 +1,6 @@
+.merch-mnemonic-list {
+  display: flex;
+  height: 380px;
+  flex-flow: column;
+  flex-wrap: wrap;
+}

libs/blocks/merch-mnemonic-list/merch-mnemonic-list.js

@@ -0,0 +1,21 @@
+import '../../deps/merch-mnemonic-list.js';
+import '../../deps/merch-card.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const rows = el.querySelectorAll(':scope p:not([class])');
+  if (rows.length < 1) return;
+  [...rows].forEach((paragraph) => {
+    const merchMnemonicList = createTag('merch-mnemonic-list');
+    paragraph.setAttribute('slot', 'description');
+    const picture = paragraph.querySelector('picture');
+    const img = picture.querySelector('img');
+    const icon = createTag('merch-icon', { slot: 'icon', size: 's', src: img.src });
+    picture.remove();
+    if (icon) merchMnemonicList.appendChild(icon);
+    if (paragraph) merchMnemonicList.appendChild(paragraph);
+    el.appendChild(merchMnemonicList);
+  });
+};
+
+export default init;

libs/blocks/merch-twp/merch-twp.js

@@ -72,6 +72,19 @@ export default async function init(el) {
   content.querySelector('h4').setAttribute('slot', 'detail-xl');
   twp.append(...[...content.querySelectorAll(':scope > h4, merch-card')]);
 
+  const whatsIncludedFragment = el.querySelector('.fragment[data-path*="merch-whats-included"]');
+  if (whatsIncludedFragment) {
+    const whatsIncludedSlot = createTag(
+      'div',
+      {
+        slot: 'merch-whats-included',
+        class: 'hidden merch-whats-included-container',
+      },
+      whatsIncludedFragment,
+    );
+    twp.append(whatsIncludedSlot);
+  }
+
   const cciFooter = createTag('div', { slot: 'cci-footer' });
   cciFooter.append(...[...content.querySelectorAll('p:not(hr ~ p)')]);
   const cctFooter = createTag('div', { slot: 'cct-footer' });

libs/blocks/merch-whats-included/merch-whats-included.css

@@ -0,0 +1,37 @@
+.merch-whats-included-container > .fragment {
+  width: inherit;
+  height: inherit;
+  max-height: 100%;
+  display: block;
+}
+
+.merch-whats-included-container .content h3 {
+  margin: 0;
+}
+
+.merch-whats-included-container .fragment .container {
+  display: contents;
+}
+
+.merch-whats-included-container .fragment .content {
+  float: right;
+}
+
+.merch-whats-included-container .fragment .content a[is="checkout-link"] {
+  margin-inline-start: var(--spacing-xxs);
+}
+
+@media screen and (max-width: 767px) {
+  .merch-whats-included-container {
+    position: fixed;
+    overflow: hidden scroll;
+  }
+
+  .merch-mnemonic-list {
+    height: auto;
+  }
+
+  .merch-whats-included-container .fragment .container {
+    grid-auto-flow: row;
+  }
+}

libs/blocks/merch-whats-included/merch-whats-included.js

@@ -0,0 +1,30 @@
+import '../../deps/merch-whats-included.js';
+import { createTag } from '../../utils/utils.js';
+
+const init = async (el) => {
+  const styles = Array.from(el.classList);
+  const mobileRows = styles.find((style) => /\d/.test(style));
+  const heading = el.querySelector('h3, h4');
+  const content = el.querySelector('.section');
+
+  const contentSlot = createTag(
+    'div',
+    { slot: 'content' },
+    content.innerHTML,
+  );
+  const whatsIncluded = createTag(
+    'merch-whats-included',
+    { mobileRows: mobileRows || 1 },
+  );
+  if (heading) {
+    heading.setAttribute('slot', 'heading');
+    whatsIncluded.appendChild(heading);
+  }
+
+  whatsIncluded.appendChild(contentSlot);
+  const divsWithoutClass = contentSlot.querySelectorAll('div:not([class])');
+  divsWithoutClass.forEach((div) => div.remove());
+  el.replaceWith(whatsIncluded);
+};
+
+export default init;