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

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,3 @@
+.merch-mnemonic-list {
+  display: contents;
+}

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,26 @@
   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);
+    window.addEventListener('milo:modal:closed', (event) => {
+    // Check if whatsIncludedSlot has the 'hidden' class
+      if (!whatsIncludedSlot.classList.contains('hidden')) {
+        event.preventDefault(); // Prevent the default behavior of the event
+        whatsIncludedSlot.classList.toggle('hidden'); // Toggle the 'hidden' class on 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,21 @@
+.merch-whats-included-container > .fragment {
+  width: inherit;
+  height: inherit;
+}
+
+.merch-whats-included-container .fragment .container {
+  display: grid;
+  grid-auto-flow: column;
+  width: auto;
+}
+
+@media screen and (max-width: 767px) {
+  .merch-whats-included-container {
+    position: fixed;
+    overflow: hidden scroll;
+  }
+
+  .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;

libs/deps/merch-mnemonic-list.js

@@ -0,0 +1,48 @@
+// branch: MWPW-142267 commit: db56fa6d1f49aa580f3da94842ffb9e73516ee18 Mon, 08 Jul 2024 21:06:50 GMT
+
+// src/merch-mnemonic-list.js
+import { html, css, LitElement } from "/libs/deps/lit-all.min.js";
+var MerchMnemonicList = class extends LitElement {
+  static styles = css`
+        :host {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            margin-bottom: 10px;
+            align-items: flex-end;
+        }
+
+        ::slotted([slot='icon']) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: max-content;
+        }
+
+        ::slotted([slot='description']) {
+            font-size: 14px;
+            line-height: 21px;
+            margin: 0;
+        }
+
+        :host .hidden {
+            display: none;
+        }
+    `;
+  static properties = {
+    description: { type: String, attribute: true }
+  };
+  constructor() {
+    super();
+  }
+  render() {
+    return html`
+            <slot name="icon"></slot>
+            <slot name="description">${this.description}</slot>
+        `;
+  }
+};
+customElements.define("merch-mnemonic-list", MerchMnemonicList);
+export {
+  MerchMnemonicList
+};