[Release] Stage to Main (#4515)

Author: milo-pr-merge[bot]

libs/blocks/caas-config/caas-config.js

@@ -14,13 +14,13 @@ import {
   getConfig,
   parseEncodedConfig,
   loadStyle,
+  isValidHtmlUrl,
 } from '../../utils/utils.js';
 import Accordion from '../../ui/controls/Accordion.js';
 import {
   decodeCompressedString,
   defaultState,
   initCaas,
-  isValidHtmlUrl,
   isValidUuid,
   loadCaasFiles,
   loadCaasTags,

libs/blocks/caas/utils.js

@@ -189,10 +189,6 @@ export function getPageLocale(currentPath, locales = pageLocales) {
   return '';
 }
 
-export const isValidHtmlUrl = (url) => {
-  const regex = /^https:\/\/[^\s]+$/;
-  return regex.test(url);
-};
 export const isValidUuid = (id) => /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(id);
 
 export const loadStrings = async (

libs/blocks/global-navigation/global-navigation.js

@@ -1193,6 +1193,7 @@ class Gnav {
         header.style.top = 0;
         localNav.style.top = promoHeight;
       }
+      if (!isDesktop.matches) this.updatePopupPosition();
     };
 
     if (this.elements.aside.clientHeight > fedsPromoWrapper.clientHeight) {
@@ -1547,7 +1548,7 @@ class Gnav {
               return !this.customLinks.includes(linkHash);
             };
             [...customLinksSection.classList].splice(1).forEach((className) => {
-              customLinkModifier = ` feds-navItem--${className}`;
+              customLinkModifier += ` feds-navItem--${className}`;
             });
             removeCustomLink = removeLink();
           } else if (itemHasActiveLink) {

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

@@ -105,6 +105,56 @@ function getSidenav(collection) {
   return sidenav;
 }
 
+function handleCustomAnalyticsEvent(eventName, element) {
+  let daaLhValue = '';
+  let daaLhElement = element.closest('[daa-lh]');
+  while (daaLhElement) {
+    if (daaLhValue) {
+      daaLhValue = `|${daaLhValue}`;
+    }
+    const daaLhAttrValue = daaLhElement.getAttribute('daa-lh');
+    daaLhValue = `${daaLhAttrValue}${daaLhValue}`;
+    daaLhElement = daaLhElement.parentElement.closest('[daa-lh]');
+  }
+  if (daaLhValue) {
+    // eslint-disable-next-line no-underscore-dangle
+    window._satellite?.track('event', {
+      xdm: {},
+      data: { web: { webInteraction: { name: `${eventName}|${daaLhValue}` } } },
+    });
+  }
+}
+
+function enableAnalytics(el) {
+  const tabs = el.closest('.tabs');
+  if (!tabs || tabs.analyticsInitiated) return;
+  tabs.analyticsInitiated = true;
+
+  window.addEventListener('merch-sidenav:select', ({ target }) => {
+    if (!target || target.oldValue === target.selectedValue) return;
+    handleCustomAnalyticsEvent(`${target.selectedValue}--cat`, target);
+    target.oldValue = target.selectedValue;
+  });
+
+  window.addEventListener('mas:ready', ({ target }) => {
+    target.querySelectorAll('merch-addon').forEach((ao) => {
+      ao.addEventListener('change', (aoe) => {
+        handleCustomAnalyticsEvent(`addon-${aoe.detail.checked ? 'checked' : 'unchecked'}`, aoe.target);
+      });
+    });
+    target.querySelectorAll('merch-quantity-select').forEach((qs) => {
+      qs.addEventListener('merch-quantity-selector:change', (qse) => {
+        handleCustomAnalyticsEvent(`quantity-${qse.detail.option}`, qse.target);
+      });
+    });
+  });
+
+  window.addEventListener('milo:tab:changed', () => {
+    const tab = tabs.querySelector('button[role="tab"][aria-selected="true"]');
+    if (tab) handleCustomAnalyticsEvent(`tab-change--${tab.getAttribute('daa-ll')}`, tab);
+  });
+}
+
 export async function checkReady(masElement) {
   const readyPromise = masElement.checkReady();
   const success = await Promise.race([readyPromise, getTimeoutPromise()]);
@@ -152,11 +202,13 @@ export async function createCollection(el, options) {
     if (sidenav) {
       container.insertBefore(sidenav, collection);
       collection.sidenav = sidenav;
+      sidenav.setAttribute('daa-lh', 'b3|filters');
     }
   }
 
   postProcessAutoblock(collection);
   collection.requestUpdate();
+  enableAnalytics(collection);
 }
 
 export default async function init(el) {

libs/blocks/merch/merch.css

@@ -44,17 +44,6 @@ a[is='checkout-link'].con-button > span {
   visibility: hidden;
 }
 
-.three-in-one sp-theme {
-  height: 100%;
-  width: 100%;
-  align-content: center;
-}
-
-.three-in-one sp-theme sp-progress-circle {
-  inset-inline-start: 50%;
-  transform: translate(-50%);
-}
-
 .error-wrapper {
   display: flex;
   justify-content: space-between;

libs/blocks/merch/three-in-one.js

@@ -133,7 +133,7 @@ export const handleTimeoutError = () => {
 
 export function createContent(iframeUrl) {
   const content = createTag('div', { class: 'milo-iframe' });
-  content.innerHTML = `<sp-theme system="light" color="light" scale="medium" dir="ltr">
+  content.innerHTML = `<sp-theme system="light" color="light" scale="medium" dir="ltr" style="display: flex; justify-content: center; align-items: center; height: 100%;">
   <sp-progress-circle label="progress circle" indeterminate="" size="l" dir="ltr" role="progressbar" aria-label="progress circle"></sp-progress-circle>
   </sp-theme>
   <iframe src="${iframeUrl}" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="true" loading="lazy" class="loading" style="height: 100%;"></iframe>`;

libs/blocks/reading-time/reading-time.css

@@ -1,7 +1,7 @@
 @import '../../styles/inline.css';
 
 .reading-time > span {
-  color: #adadad;
+  color: rgb(80 80 80);
   font-style: italic;
   font-weight: 700;
   font-size: var(--type-body-s-size);
@@ -40,7 +40,7 @@ main > .section > .inline-wrapper > .inline.reading-time + .inline.share {
     border-left: none;
     padding-left: 0;
   }
-  
+
   main > .section > .inline-wrapper > .inline + .inline.reading-time {
     border-top: 1px solid #adadad;
   }

libs/blocks/table/table.css

@@ -149,24 +149,6 @@
   border-radius: 0 !important;
 }
 
-.table .col-heading:first-child {
-  border-top-left-radius: var(--border-radius);
-}
-
-[dir="rtl"] .table .col-heading:first-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: var(--border-radius);
-}
-
-.table .col-heading:last-child {
-  border-top-right-radius: var(--border-radius);
-}
-
-[dir="rtl"] .table .col-heading:last-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: var(--border-radius);
-}
-
 .table .row-heading .col-heading.col.no-rounded,
 [dir="rtl"] .table .row-heading .col-heading.col.no-rounded {
   border-radius: 0;
@@ -396,7 +378,7 @@
 /* rtl */
 [dir="rtl"] .table .col {
   border-right: 1px var(--border-color) solid;
-  border-left: 1px solid transparent;
+  border-left: 1px var(--border-color) solid;
 }
 
 [dir="rtl"] .table.merch .col {
@@ -435,6 +417,16 @@
     border-right: 1px solid var(--hover-border-color);
   }
 
+  [dir="rtl"] .table .col-heading:first-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: var(--border-radius);
+  }
+
+  [dir="rtl"] .table .col-heading:last-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: var(--border-radius);
+  }
+
   .table .row-heading .col-heading.hover {
     border-top: 1px solid var(--hover-border-color);
   }
@@ -587,6 +579,14 @@
 }
 
 @media (min-width: 769px) {
+  .table .col-heading:first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+
+  .table .col-heading:last-child {
+    border-top-right-radius: var(--border-radius);
+  }
+
   .table-section .filters {
     display: none;
   }
@@ -657,12 +657,27 @@
   margin-right: 16px;
 }
 
+.table .col-heading:only-child {
+  border-top-right-radius: var(--border-radius);
+  border-top-left-radius: var(--border-radius);
+}
+
 /* Start tablet styles */
 @media (max-width: 899px) {
   .table,
   .table.merch {
     margin: 0 30px;
   }
+  
+  .table .right-round, [dir="rtl"] .table .left-round {
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: 0;
+  }
+  
+  .table .left-round, [dir="rtl"] .table .right-round {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: 0;
+  }
 
   .section[class *= "grid-width-"] .table {
     margin: 0;

libs/blocks/table/table.js

@@ -542,7 +542,17 @@ function applyStylesBasedOnScreenSize(table, originTable) {
       }
 
       rows.forEach((row) => {
+        const firstFilterCol = row.querySelector(`.col-${filters[0] + 1}`);
         const secondFilterCol = row.querySelector(`.col-${filters[1] + 1}`);
+
+        if (firstFilterCol?.classList.contains('col-heading')) {
+          firstFilterCol.classList.remove('right-round');
+          firstFilterCol.classList.add('left-round');
+        }
+        if (secondFilterCol?.classList.contains('col-heading')) {
+          secondFilterCol.classList.remove('left-round');
+          secondFilterCol.classList.add('right-round');
+        }
         if (secondFilterCol) secondFilterCol.classList.add('force-last');
       });
 
@@ -552,11 +562,17 @@ function applyStylesBasedOnScreenSize(table, originTable) {
           const selectedColumn = row.querySelector(`.col-${selectedCol}`);
           if (!selectedColumn) return;
 
-          selectedColumn.classList.remove('force-last');
-          selectedColumn.classList.remove('rounded-left', 'rounded-right');
           const clone = selectedColumn.cloneNode(true);
           clone.setAttribute('data-cloned', 'true');
-          clone.classList.remove('rounded-left', 'rounded-right');
+          selectedColumn.classList.remove('force-last');
+
+          if (selectedColumn.classList.contains('col-heading')) {
+            selectedColumn.classList.remove('right-round');
+            selectedColumn.classList.add('left-round');
+            clone.classList.remove('left-round');
+            clone.classList.add('right-round');
+          }
+
           row.appendChild(clone);
         });
       }
@@ -616,7 +632,7 @@ function applyStylesBasedOnScreenSize(table, originTable) {
   if (deviceBySize === 'MOBILE' || (isMerch && deviceBySize === 'TABLET')) {
     mobileRenderer();
   } else {
-    table.querySelectorAll('.hide-mobile').forEach((col) => { col.classList.remove('hide-mobile'); });
+    table.querySelectorAll('.hide-mobile, .left-round, .right-round').forEach((col) => { col.classList.remove('hide-mobile', 'left-round', 'right-round'); });
     [...(table.querySelector('.row-heading')?.children || [])]
       .forEach((column) => [...column.children].forEach((row) => row.style.removeProperty('height')));
     table.parentElement.querySelectorAll('.filters select').forEach((select, index) => {