Merge branch 'stage' into sarchibeque/mwpw-146263-job

.github/workflows/dispatch.yml

@@ -17,6 +17,7 @@ jobs:
       - uses: dorny/paths-filter@v2
         id: changes
         with:
+          base: ${{ github.ref }}
           filters: |
             src:
               - 'libs/**'    

libs/blocks/marquee/marquee.css

@@ -432,6 +432,10 @@
     padding: var(--spacing-xl) 0;
   }
 
+  html[dir="rtl"] .marquee.split .foreground.container {
+    flex-direction: row-reverse;
+  }
+
   .marquee.split .foreground.container .text {
     max-width: calc(50% - var(--grid-column-width));
   }
@@ -472,6 +476,10 @@
     justify-content: flex-end;
   }
 
+  html[dir="rtl"] .marquee.split.row-reversed .foreground.container {
+    justify-content: flex-start;
+  }
+
   .marquee.split .asset img,
   .marquee.split.small .asset img,
   .marquee.split.large .asset img,

libs/blocks/marquee/marquee.js

@@ -86,7 +86,7 @@ function decorateSplit(el, foreground, media) {
 
   let mediaCreditInner;
   const txtContent = media?.lastChild?.textContent?.trim();
-  if (txtContent.match(/^http.*\.mp4/)) return;
+  if (txtContent?.match(/^http.*\.mp4/)) return;
   if (txtContent) {
     mediaCreditInner = createTag('p', { class: 'body-s' }, txtContent);
   } else if (media.lastElementChild?.tagName !== 'PICTURE') {

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

@@ -1,5 +1,5 @@
 import { decorateButtons, decorateBlockHrs } from '../../utils/decorate.js';
-import { getConfig, createTag } from '../../utils/utils.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';
@@ -9,6 +9,8 @@ const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
 
 const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart'];
 
+const CARD_SIZES = ['wide', 'super-wide'];
+
 const TEXT_STYLES = {
   H5: 'detail-m',
   H4: 'body-xxs',
@@ -52,10 +54,21 @@ const appendSlot = (slotEls, slotName, merchCard) => {
   merchCard.append(newEl);
 };
 
-const parseContent = (el, merchCard) => {
-  const innerElements = [
-    ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
-  ];
+export async function loadMnemonicList(foreground) {
+  try {
+    const { base } = getConfig();
+    const stylePromise = new Promise((resolve) => {
+      loadStyle(`${base}/blocks/mnemonic-list/mnemonic-list.css`, resolve);
+    });
+    const loadModule = import(`${base}/blocks/mnemonic-list/mnemonic-list.js`)
+      .then(({ decorateMnemonicList }) => decorateMnemonicList(foreground));
+    await Promise.all([stylePromise, loadModule]);
+  } catch (err) {
+    window.lana?.log(`Failed to load mnemonic list module: ${err}`);
+  }
+}
+
+const parseContent = async (el, merchCard) => {
   let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
   let headingMCount = 0;
 
@@ -69,7 +82,13 @@ const parseContent = (el, merchCard) => {
 
   let headingSize = 3;
   const bodySlot = createTag('div', { slot: bodySlotName });
-
+  const mnemonicList = el.querySelector('.mnemonic-list');
+  if (mnemonicList) {
+    await loadMnemonicList(mnemonicList);
+  }
+  const innerElements = [
+    ...el.querySelectorAll('h2, h3, h4, h5, p, ul, em'),
+  ];
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
@@ -103,6 +122,7 @@ const parseContent = (el, merchCard) => {
       bodySlot.append(element);
       merchCard.append(bodySlot);
     }
+    if (mnemonicList) bodySlot.append(mnemonicList);
   });
 
   if (merchCard.variant === MINI_COMPARE_CHART && merchCard.childNodes[1]) {
@@ -283,6 +303,7 @@ const init = async (el) => {
   }
   const merchCard = createTag('merch-card', { class: styles.join(' '), 'data-block': '' });
   merchCard.setAttribute('variant', cardType);
+  merchCard.setAttribute('size', styles.find((style) => CARD_SIZES.includes(style)) || '');
   if (el.dataset.removedManifestId) {
     merchCard.dataset.removedManifestId = el.dataset.removedManifestId;
   }
@@ -322,10 +343,11 @@ const init = async (el) => {
     intersectionObserver.observe(merchCard);
     footerRows = getMiniCompareChartFooterRows(el);
   }
-  const images = el.querySelectorAll('picture');
+  const allPictures = el.querySelectorAll('picture');
+  const pictures = Array.from(allPictures).filter((picture) => !picture.closest('.mnemonic-list'));
   let image;
   const icons = [];
-  images.forEach((img) => {
+  pictures.forEach((img) => {
     const imgNode = img.querySelector('img');
     const { width, height } = imgNode;
     const isSquare = Math.abs(width - height) <= 10;
@@ -416,7 +438,6 @@ const init = async (el) => {
       }
     }
   }
-
   decorateBlockHrs(merchCard);
   simplifyHrs(merchCard);
   if (merchCard.classList.contains('has-divider')) {

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

@@ -2,6 +2,15 @@
   margin: var(--spacing-xs) 0 ;
 }
 
+.merch-card .mnemonic-list {
+  padding: var(--consonant-merch-spacing-xs) 0;
+}
+
+.merch-card .mnemonic-list .product-list {
+  justify-content: flex-start;
+  align-items: center;
+}
+
 .mnemonic-list .product-list {
   display: inline-flex;
   flex-wrap: wrap;
@@ -22,6 +31,7 @@
   flex: none;
   gap: var(--spacing-xxs);
   min-height: 32px;
+  line-height: initial;
 }
 
 .mnemonic-list .product-list .product-item strong {

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

@@ -1,6 +1,6 @@
 import { createTag } from '../../utils/utils.js';
 
-export const decorateMnemonicList = (container) => {
+export const decorateMnemonicList = async (container) => {
   const mnemonicListElement = container.querySelector('.mnemonic-list');
   const targetElement = mnemonicListElement || container;
   const rows = targetElement.querySelectorAll(':scope p:not([class])');

libs/blocks/tabs/tabs.js

@@ -2,9 +2,10 @@
  * tabs - consonant v6
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
  */
+import { debounce } from '../../utils/action.js';
 import { createTag, MILO_EVENTS } from '../../utils/utils.js';
 
-const RIGHT_PADDLE = '<svg viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.50001 13.25C1.22022 13.25 0.939945 13.1431 0.726565 12.9292C0.299315 12.5019 0.299315 11.8096 0.726565 11.3823L5.10938 7L0.726565 2.61768C0.299315 2.19043 0.299315 1.49805 0.726565 1.0708C1.15333 0.643068 1.84669 0.643068 2.27345 1.0708L7.4297 6.22656C7.63478 6.43164 7.75001 6.70996 7.75001 7C7.75001 7.29004 7.63478 7.56836 7.4297 7.77344L2.27345 12.9292C2.06007 13.1431 1.7798 13.2495 1.50001 13.25Z" fill="currentColor"/></svg>';
+const PADDLE = '<svg viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.50001 13.25C1.22022 13.25 0.939945 13.1431 0.726565 12.9292C0.299315 12.5019 0.299315 11.8096 0.726565 11.3823L5.10938 7L0.726565 2.61768C0.299315 2.19043 0.299315 1.49805 0.726565 1.0708C1.15333 0.643068 1.84669 0.643068 2.27345 1.0708L7.4297 6.22656C7.63478 6.43164 7.75001 6.70996 7.75001 7C7.75001 7.29004 7.63478 7.56836 7.4297 7.77344L2.27345 12.9292C2.06007 13.1431 1.7798 13.2495 1.50001 13.25Z" fill="currentColor"/></svg>';
 
 const isTabInTabListView = (tab) => {
   const tabList = tab.closest('[role="tablist"]');
@@ -24,6 +25,14 @@ const scrollTabIntoView = (e, inline = 'center') => {
   if (!isElInView) e.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline });
 };
 
+const setAttributes = (el, attrs) => {
+  Object.keys(attrs).forEach((key) => el.setAttribute(key, attrs[key]));
+};
+
+const removeAttributes = (el, attrsKeys) => {
+  attrsKeys.forEach((key) => el.removeAttribute(key));
+};
+
 function changeTabs(e) {
   const { target } = e;
   const parent = target.parentNode;
@@ -128,6 +137,13 @@ function initPaddles(tabList, tabPaddles) {
     }
   });
 
+  tabList.addEventListener('scroll', debounce(() => {
+    tabPaddles.setAttribute(
+      'aria-valuenow',
+      ((tabList.scrollLeft / (tabList.scrollWidth - tabList.clientWidth)) * 100).toFixed(0),
+    );
+  }, 500));
+
   const options = {
     root: tabList,
     rootMargin: '0px',
@@ -138,15 +154,15 @@ function initPaddles(tabList, tabPaddles) {
     entries.forEach((entry) => {
       if (entry.target === firstTab) {
         if (entry.isIntersecting) {
-          left.setAttribute('disabled', '');
+          setAttributes(left, { disabled: '', 'aria-hidden': true });
         } else {
-          left.removeAttribute('disabled');
+          removeAttributes(left, ['disabled', 'aria-hidden']);
         }
       } else if (entry.target === lastTab) {
         if (entry.isIntersecting) {
-          right.setAttribute('disabled', '');
+          setAttributes(right, { disabled: '', 'aria-hidden': true });
         } else {
-          right.removeAttribute('disabled');
+          removeAttributes(right, ['disabled', 'aria-hidden']);
         }
       }
     });
@@ -243,9 +259,9 @@ const init = (block) => {
   }
 
   // Tab Paddles
-  const tabPaddles = createTag('div', { class: 'tab-paddles', role: 'scrollbar' });
-  const paddleLeft = createTag('button', { class: 'paddle paddle-left', disabled: '' }, RIGHT_PADDLE);
-  const paddleRight = createTag('button', { class: 'paddle paddle-right', disabled: '' }, RIGHT_PADDLE);
+  const tabPaddles = createTag('div', { class: 'tab-paddles', role: 'scrollbar', 'aria-valuenow': 0 });
+  const paddleLeft = createTag('button', { class: 'paddle paddle-left', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to left' }, PADDLE);
+  const paddleRight = createTag('button', { class: 'paddle paddle-right', disabled: '', 'aria-hidden': true, 'aria-label': 'Scroll tabs to right' }, PADDLE);
   tabPaddles.append(paddleLeft, paddleRight);
   tabList.after(tabPaddles);
   initPaddles(tabList, tabPaddles);

libs/features/jarvis-chat.js

@@ -1,6 +1,7 @@
 let chatInitialized = false;
 let loadScript;
 let loadStyle;
+let getMetadata;
 
 const isSilentEvent = (data) => (data['event.workflow'] === 'init' && data['event.type'] === 'request')
   || (data['event.workflow'] === 'Chat' && data['event.type'] === 'load' && data['event.subtype'] === 'window');
@@ -202,7 +203,7 @@ const openChat = (event) => {
   }
 };
 
-const startInitialization = async (config, event) => {
+const startInitialization = async (config, event, onDemand) => {
   const asset = 'https://client.messaging.adobe.com/latest/AdobeMessagingClient';
   await Promise.all([
     loadStyle(`${asset}.css`),
@@ -217,8 +218,8 @@ const startInitialization = async (config, event) => {
   }
 
   window.AdobeMessagingExperienceClient.initialize({
-    appid: config.jarvis.id,
-    appver: config.jarvis.version,
+    appid: getMetadata('jarvis-surface-id') || config.jarvis.id,
+    appver: getMetadata('jarvis-surface-version') || config.jarvis.version,
     env: config.env.name !== 'prod' ? 'stage' : 'prod',
     clientId: window.adobeid?.client_id,
     accessToken: window.adobeIMS?.isSignedInUser()
@@ -237,7 +238,7 @@ const startInitialization = async (config, event) => {
         chatInitialized = !!data?.releaseControl?.showAdobeMessaging;
       },
       onReadyCallback: () => {
-        if (config.jarvis.onDemand) {
+        if (onDemand) {
           openChat(event);
         }
       },
@@ -278,23 +279,31 @@ const startInitialization = async (config, event) => {
   });
 };
 
-const initJarvisChat = async (config, loadScriptFunction, loadStyleFunction) => {
+const initJarvisChat = async (
+  config,
+  loadScriptFunction,
+  loadStyleFunction,
+  getMetadataFunction,
+) => {
   if (!config?.jarvis) return;
 
   loadScript = loadScriptFunction;
   loadStyle = loadStyleFunction;
+  getMetadata = getMetadataFunction;
+
+  const onDemandMeta = getMetadata('jarvis-on-demand')?.toLowerCase();
+  const onDemand = onDemandMeta ? onDemandMeta === 'on' : config.jarvis.onDemand;
 
   document.addEventListener('click', async (event) => {
     if (!event.target.closest('[href*="#open-jarvis-chat"]')) return;
     event.preventDefault();
-    if (config.jarvis.onDemand && !chatInitialized) {
-      await startInitialization(config, event);
+    if (onDemand && !chatInitialized) {
+      await startInitialization(config, event, onDemand);
     } else {
       openChat(event);
     }
   });
-
-  if (!config.jarvis.onDemand) {
+  if (!onDemand) {
     await startInitialization(config);
   }
 };