Merge branch 'stage' of github.com:adobecom/milo into MWPW-159374

libs/blocks/library-config/library-config.js

@@ -112,9 +112,7 @@ async function loadList(type, content, list) {
   }
 }
 
-async function fetchLibrary(domain) {
-  const { searchParams } = new URL(window.location.href);
-  const suppliedLibrary = searchParams.get('library');
+async function fetchLibrary(domain, suppliedLibrary) {
   const library = suppliedLibrary || `${domain}${LIBRARY_PATH}`;
   try {
     const resp = await fetch(library);
@@ -129,8 +127,9 @@ async function getSuppliedLibrary() {
   const { searchParams } = new URL(window.location.href);
   const repo = searchParams.get('repo');
   const owner = searchParams.get('owner');
+  const library = searchParams.get('library');
   if (!repo || !owner) return null;
-  return fetchLibrary(`https://main--${repo}--${owner}.hlx.live`);
+  return fetchLibrary(`https://main--${repo}--${owner}.hlx.live`, library);
 }
 
 async function fetchAssetsData(path) {

libs/blocks/merch-card/merch-card.css

@@ -30,9 +30,12 @@ div[class*="-merch-card"] > div,
   color: var(--text-color);
 }
 
-.twp.merch-card .merch-card-price {
+.merch-card .merch-card-price {
   font-weight: 700;
-  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  font-size: 18px;
+  line-height: 22.5px;
 }
 
 merch-card.special-offers del span[is="inline-price"] {

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

@@ -155,7 +155,7 @@ const parseTwpContent = async (el, merchCard) => {
 };
 
 const appendPaymentDetails = (element, merchCard) => {
-  if (element.firstChild.nodeType !== Node.TEXT_NODE) return;
+  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);
@@ -204,6 +204,7 @@ const appendCalloutContent = (element, merchCard) => {
 const parseContent = async (el, merchCard) => {
   let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
   let headingMCount = 0;
+  let headingXsCount = 0;
 
   if (merchCard.variant === MINI_COMPARE_CHART) {
     bodySlotName = 'body-m';
@@ -229,6 +230,7 @@ const parseContent = async (el, merchCard) => {
       let slotName = SLOT_MAP[merchCard.variant]?.[tagName] || SLOT_MAP_DEFAULT[tagName];
       if (slotName) {
         if (['H2', 'H3', 'H4', 'H5'].includes(tagName)) {
+          if (tagName === 'H3') headingXsCount += 1;
           element.classList.add('card-heading');
           if (merchCard.badgeText) {
             element.closest('div[role="tabpanel"')?.classList.add('badge-merch-cards');
@@ -247,6 +249,8 @@ const parseContent = async (el, merchCard) => {
           }
         }
         element.setAttribute('slot', slotName);
+        tagName = (headingXsCount === 1 && tagName === 'H3')
+        || (merchCard.variant === MINI_COMPARE_CHART && slotName === 'heading-m') ? 'h3' : 'p';
         const newElement = createTag(tagName);
         Array.from(element.attributes).forEach((attr) => {
           newElement.setAttribute(attr.name, attr.value);

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

@@ -11,8 +11,7 @@ function createDynamicSlots(el, bodySlot) {
   if (pricePlaceholder) {
     pricePlaceholder.setAttribute('slot', 'price');
   } else {
-    const tagName = isTWP ? 'p' : 'h5';
-    const priceSlot = createTag(tagName, { class: 'merch-card-price' });
+    const priceSlot = createTag('p', { class: 'merch-card-price' });
     createTag('span', { slot: 'price', is: 'inline-price' }, null, { parent: priceSlot });
     bodySlot.append(priceSlot);
   }

libs/blocks/modal/modal.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-cycle */
 import { createTag, getMetadata, localizeLink, loadStyle, getConfig } from '../../utils/utils.js';
+import { decorateSectionAnalytics } from '../../martech/attributes.js';
 
 const FOCUSABLES = 'a:not(.hide-video), button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]';
 const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
@@ -179,7 +180,7 @@ export async function getModal(details, custom) {
       closeModal(dialog);
     }
   });
-
+  decorateSectionAnalytics(dialog, `${id}-modal`, getConfig());
   dialog.append(close);
   document.body.append(dialog);
   dialogLoadingSet.delete(id);

libs/blocks/table/table.css

@@ -466,7 +466,6 @@
 
 .table.has-addon .row-heading .col.col-heading:not(.col-1) .buttons-wrapper {
   align-items: flex-end;
-  height: 100%;
 }
 
 .table.has-addon p.body {
@@ -485,7 +484,6 @@
   text-align: start;
   font-style: normal;
   font-weight: 400;
-  gap: var(--spacing-xxs);
   color: black;
   padding: 5px 10px;
   box-sizing: border-box;
@@ -495,7 +493,7 @@
   background-color: var(--color-gray-300);
 }
 
-.table.has-addon .addon-label :first-child {
+.table.has-addon .addon-label .icon {
   display: flex;
   align-self: center;
 }

libs/blocks/table/table.js

@@ -129,14 +129,19 @@ function handleAddOnContent(table) {
     const [position, order, style] = addOn.innerText.split('-')
       .filter((key) => key.toUpperCase() !== addOnKey).map((key) => key.toLowerCase());
     if (!position || !order) return;
-    const indexAttr = 'data-col-index';
+    const dataIndex = 'data-col-index';
     [...table.querySelector('.row-heading').children].forEach((headCol) => {
       headCol.querySelector('.heading-content')?.classList.add('content');
-      const colIndex = headCol.getAttribute(indexAttr);
+      const colIndex = headCol.getAttribute(dataIndex);
       if (colIndex <= 1) return; // skip the key column
       const tagName = `${position}-${order}`;
-      const content = [...addOnRow.children]
-        .find((col) => col.getAttribute(indexAttr) === colIndex).childNodes;
+      const column = [...addOnRow.children].find((el) => el.getAttribute(dataIndex) === colIndex);
+      let content = column.childNodes;
+      const icon = column.querySelector('.icon');
+      if (style === 'label' && icon) {
+        const text = [...content].filter((node) => !node.classList?.contains('icon'));
+        content = [createTag('span', null, text), icon];
+      }
       const tag = createTag('div', { class: tagName }, [...content].map((node) => node));
       if (style) tag.classList.add(`addon-${style}`);
       const el = headCol.querySelector(`.${position}`);