Merge remote-tracking branch 'upstream/stage' into killwcs

.github/codeql/codeql-config.yml

@@ -5,3 +5,4 @@ paths-ignore:
   - 'tools/floodgate/**'
   - 'tools/translation/**'
   - node_modules
+  - libs/deps/mas

.github/workflows/label-zero-impact.js

@@ -12,6 +12,7 @@ const zeroImpactDirs = [
   'LICENSE',
   'codecov.yaml',
   '.gitignore',
+  'package.json',
   'package-lock.json',
 ];
 const zeroImpactLabel = 'zero-impact';

.gitignore

@@ -2,9 +2,9 @@
 .aem/*
 coverage
 logs/*
-node_modules
+*node_modules
 .DS_Store
 .idea
 .iml
 .env
-**/mas/stats.json
+**/mas/*/stats.json

libs/blocks/accordion/accordion.css

@@ -12,6 +12,10 @@ dl.accordion {
   border-bottom: 1px solid var(--color-gray-500);
 }
 
+.accordion-container.no-borders dl.accordion {
+  border: none;
+}
+
 .accordion dd {
   margin: 0;
   padding: var(--spacing-xs);
@@ -42,6 +46,10 @@ dl.accordion {
   color: var(--color-black);
 }
 
+.accordion-container.no-borders .accordion dt button {
+  border: none;
+}
+
 .accordion dt .accordion-heading {
   margin: 0;
 }

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

@@ -187,7 +187,10 @@ export default async function init(el) {
   const cardsDataPromise = fetchCardsData(config, type, el);
 
   const merchCardCollectionDep = import('../../deps/mas/merch-card-collection.js');
+  const polyfills = import('../merch/merch.js');
+  await polyfills;
   let deps = [
+    polyfills,
     merchCardCollectionDep,
     import('../merch-card/merch-card.js'),
     import('../../deps/mas/merch-card.js'),

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_-].*$/;
@@ -154,6 +153,53 @@ const parseTwpContent = async (el, merchCard) => {
   }
 };
 
+const appendPaymentDetails = (element, merchCard) => {
+  if (element.firstChild.nodeType !== Node.TEXT_NODE) return;
+  const paymentDetails = createTag('div', { class: 'payment-details' }, element.innerHTML);
+  const headingM = merchCard.querySelector('h4[slot="heading-m"]');
+  headingM?.append(paymentDetails);
+};
+
+const appendCalloutContent = (element, merchCard) => {
+  if (element.firstElementChild?.tagName !== 'EM') return;
+  let calloutSlot = merchCard.querySelector('div[slot="callout-content"]');
+  let calloutContainer = calloutSlot?.querySelector('div');
+  if (!calloutContainer) {
+    calloutSlot = createTag('div', { slot: 'callout-content' });
+    calloutContainer = createTag('div');
+    calloutSlot.appendChild(calloutContainer);
+    merchCard.appendChild(calloutSlot);
+  }
+
+  const calloutContentWrapper = createTag('div');
+  const calloutContent = createTag('div');
+  const emElement = element.firstElementChild;
+  const fragment = document.createDocumentFragment();
+  let imgElement = null;
+
+  emElement.childNodes.forEach((child) => {
+    if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'A' && child.innerText.trim().toLowerCase() === '#icon') {
+      const [imgSrc, tooltipText] = child.getAttribute('href')?.split('#') || [];
+      imgElement = createTag('img', {
+        src: imgSrc,
+        title: decodeURIComponent(tooltipText),
+        class: 'callout-icon',
+      });
+    } else {
+      const clone = child.cloneNode(true);
+      fragment.appendChild(clone);
+    }
+  });
+
+  calloutContent.appendChild(fragment);
+  calloutContentWrapper.appendChild(calloutContent);
+
+  if (imgElement) {
+    calloutContentWrapper.appendChild(imgElement);
+  }
+  calloutContainer.appendChild(calloutContentWrapper);
+};
+
 const parseContent = async (el, merchCard) => {
   let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
   let headingMCount = 0;
@@ -175,7 +221,6 @@ const parseContent = async (el, merchCard) => {
   const innerElements = [
     ...el.querySelectorAll(INNER_ELEMENTS_SELECTOR),
   ];
-  const calloutContainer = createTag('div');
 
   innerElements.forEach((element) => {
     let { tagName } = element;
@@ -210,36 +255,9 @@ const parseContent = async (el, merchCard) => {
       }
       return;
     }
-    if (tagName === 'H6' && element.firstElementChild?.tagName === 'EM') {
-      const calloutContentWrapper = createTag('div');
-      const calloutContent = createTag('div');
-      const emElement = element.firstElementChild;
-      let imgElement = null;
-      const fragment = document.createDocumentFragment();
-
-      emElement.childNodes.forEach((child) => {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'A' && child.innerText.trim().toLowerCase() === '#icon') {
-          const [imgSrc, tooltipText] = child.getAttribute('href')?.split('#') || [];
-          imgElement = createTag('img', {
-            src: imgSrc,
-            title: decodeURIComponent(tooltipText),
-            class: 'callout-icon',
-          });
-        } else {
-          const clone = child.cloneNode(true);
-          fragment.appendChild(clone);
-        }
-      });
-
-      calloutContent.appendChild(fragment);
-      calloutContentWrapper.appendChild(calloutContent);
-
-      if (imgElement) {
-        calloutContentWrapper.appendChild(imgElement);
-      }
-
-      calloutContainer.appendChild(calloutContentWrapper);
-      return;
+    if (tagName === 'H6') {
+      appendPaymentDetails(element, merchCard);
+      appendCalloutContent(element, merchCard);
     }
     if (isParagraphTag(tagName)) {
       bodySlot.append(element);
@@ -248,12 +266,6 @@ const parseContent = async (el, merchCard) => {
     if (mnemonicList) bodySlot.append(mnemonicList);
   });
 
-  if (calloutContainer.children.length > 0) {
-    const calloutSlot = createTag('div', { slot: 'callout-content' });
-    calloutSlot.appendChild(calloutContainer);
-    merchCard.appendChild(calloutSlot);
-  }
-
   if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) {
     merchCard.insertBefore(bodySlot, merchCard.childNodes[1]);
   }
@@ -403,6 +415,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 +560,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 +597,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);

libs/blocks/merch/merch.js

@@ -161,7 +161,7 @@ export async function polyfills() {
     polyfills.promise = Promise.resolve();
   } else {
     const { base } = getConfig();
-    polyfills.promise = loadScript(`${base}/deps/custom-elements.js`);
+    polyfills.promise = await loadScript(`${base}/deps/custom-elements.js`);
   }
   return polyfills.promise;
 }