Merge branch 'stage' into MWPW-154662

.gitignore

@@ -10,3 +10,4 @@ logs/*
 **/mas/*/stats.json
 test-html-results/
 test-results/
+test-a11y-results/

libs/blocks/article-feed/article-feed.js

@@ -342,7 +342,6 @@ async function buildFilter(type, tax, block, config) {
   applyBtn.classList.add('button', 'small', 'apply');
   applyBtn.textContent = await replacePlaceholder('apply');
   applyBtn.addEventListener('click', () => {
-    // sampleRUM('apply-topic-filter');
     delete config.selectedProducts;
     delete config.selectedIndustries;
     closeCurtain();

libs/blocks/bulk-publish-v2/services.js

@@ -63,7 +63,7 @@ const setUserData = (event) => {
 
 const isPushedDown = async () => {
   const callback = () => {
-    const sidekick = document.querySelector('helix-sidekick');
+    const sidekick = document.querySelector('aem-sidekick, helix-sidekick');
     const pushdown = sidekick?.getAttribute('pushdown');
     const bulkPub = document.querySelector('.bulk-publish-v2');
     if (pushdown && !bulkPub.classList.contains('pushdown')) {
@@ -81,13 +81,13 @@ const isPushedDown = async () => {
 const authenticate = async (tool = null) => {
   isPushedDown();
   const setUser = (event) => { tool.user = setUserData(event); };
-  const openSideKick = document.querySelector('helix-sidekick');
+  const openSideKick = document.querySelector('aem-sidekick, helix-sidekick');
   if (openSideKick) {
     openSideKick.addEventListener('statusfetched', setUser);
     /* c8 ignore next 6 */
   } else {
     document.addEventListener('sidekick-ready', () => {
-      const sidekick = document.querySelector('helix-sidekick');
+      const sidekick = document.querySelector('aem-sidekick, helix-sidekick');
       sidekick.addEventListener('statusfetched', setUser);
     }, { once: true });
   }

libs/blocks/editorial-card/editorial-card.css

@@ -44,6 +44,10 @@
   box-shadow: 0 3px 6px 0  rgba(0 0 0 / 16%);
 }
 
+.editorial-card .action-area a:not([class*="button"]) {
+  font-size: var(--type-body-s-size);
+}
+
 .editorial-card.static-links-copy .foreground a:not([class*="button"]) {
   color: inherit;
   text-decoration: underline;

libs/blocks/global-navigation/global-navigation.css

@@ -136,12 +136,22 @@ header.global-navigation {
   flex-shrink: 0;
 }
 
+.feds-brand-image.brand-image-only {
+  height: 36px;
+  width: auto;
+}
+
 .feds-brand-image picture, .feds-brand-image img, .feds-brand-image svg,
 .feds-logo-image picture, .feds-logo-image img, .feds-logo-image svg {
   width: 100%;
   display: block;
 }
 
+.feds-brand-image.brand-image-only picture, .feds-brand-image.brand-image-only img, .feds-brand-image.brand-image-only svg {
+  width: auto;
+  height: 100%;
+}
+
 .feds-brand-label,
 .feds-logo-label {
   flex-shrink: 0;

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

@@ -228,9 +228,9 @@ const setupKeyboardNav = async () => {
   });
 };
 
-const getBrandImage = (image) => {
+const getBrandImage = (image, brandImageOnly) => {
   // Return the default Adobe logo if an image is not available
-  if (!image) return CONFIG.icons.company;
+  if (!image) return brandImageOnly ? CONFIG.icons.brand : CONFIG.icons.company;
 
   // Try to decorate image as PNG, JPG or JPEG
   const imgText = image?.textContent || '';
@@ -242,7 +242,7 @@ const getBrandImage = (image) => {
   }
 
   // Return the default Adobe logo if the image could not be decorated
-  return CONFIG.icons.company;
+  return brandImageOnly ? CONFIG.icons.brand : CONFIG.icons.company;
 };
 
 const closeOnClickOutside = (e) => {
@@ -760,8 +760,9 @@ class Gnav {
     if (!link) return '';
 
     // Check which elements should be rendered
+    const isBrandImage = rawBlock.matches(selectors.brandImageOnly);
     const renderImage = !rawBlock.matches('.no-logo');
-    const renderLabel = includeLabel && !rawBlock.matches('.image-only');
+    const renderLabel = !isBrandImage && includeLabel && !rawBlock.matches('.image-only');
 
     if (!renderImage && !renderLabel) return '';
 
@@ -773,18 +774,19 @@ class Gnav {
 
         const images = blockLinks.filter((blockLink) => imgRegex.test(blockLink.href)
         || imgRegex.test(blockLink.textContent));
-        if (images.length === 2) return getBrandImage(images[1]);
+        if (images.length === 2) return getBrandImage(images[1], isBrandImage);
       }
       const svgImg = rawBlock.querySelector('picture img[src$=".svg"]');
       if (svgImg) return svgImg;
 
       const image = blockLinks.find((blockLink) => imgRegex.test(blockLink.href)
         || imgRegex.test(blockLink.textContent));
-      return getBrandImage(image);
+      return getBrandImage(image, isBrandImage);
     };
 
+    const brandImageClass = isBrandImage ? ` ${selectors.brandImageOnly.slice(1)}` : '';
     const imageEl = renderImage
-      ? toFragment`<span class="${classPrefix}-image">${getImageEl()}</span>`
+      ? toFragment`<span class="${classPrefix}-image${brandImageClass}">${getImageEl()}</span>`
       : '';
 
     // Create label element

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

@@ -22,16 +22,19 @@ export const selectors = {
   menuColumn: '.feds-menu-column',
   gnavPromo: '.gnav-promo',
   columnBreak: '.column-break',
+  brandImageOnly: '.brand-image-only',
 };
 
 export const icons = {
+  brand: '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 64.57 35"><defs><style>.cls-1{fill: #eb1000;}</style></defs><path class="cls-1" d="M6.27,10.22h4.39l6.2,14.94h-4.64l-3.92-9.92-2.59,6.51h3.08l1.23,3.41H0l6.27-14.94ZM22.03,13.32c.45,0,.94.04,1.43.16v-3.7h3.88v14.72c-.89.4-2.81.89-4.73.89-3.48,0-6.47-1.98-6.47-5.93s2.88-6.13,5.89-6.13ZM22.52,22.19c.36,0,.65-.07.94-.16v-5.42c-.29-.11-.58-.16-.96-.16-1.27,0-2.45.94-2.45,2.92s1.2,2.81,2.47,2.81ZM34.25,13.32c3.23,0,5.98,2.18,5.98,6.02s-2.74,6.02-5.98,6.02-6-2.18-6-6.02,2.72-6.02,6-6.02ZM34.25,22.13c1.11,0,2.14-.89,2.14-2.79s-1.03-2.79-2.14-2.79-2.12.89-2.12,2.79.96,2.79,2.12,2.79ZM41.16,9.78h3.9v3.7c.47-.09.96-.16,1.45-.16,3.03,0,5.84,1.98,5.84,5.86,0,4.1-2.99,6.18-6.53,6.18-1.52,0-3.46-.31-4.66-.87v-14.72ZM45.91,22.17c1.34,0,2.56-.96,2.56-2.94,0-1.85-1.2-2.72-2.5-2.72-.36,0-.65.04-.91.16v5.35c.22.09.51.16.85.16ZM58.97,13.32c2.92,0,5.6,1.87,5.6,5.64,0,.51-.02,1-.09,1.49h-7.27c.4,1.32,1.56,1.94,3.01,1.94,1.18,0,2.27-.29,3.5-.82v2.97c-1.14.58-2.5.82-3.9.82-3.7,0-6.58-2.23-6.58-6.02s2.61-6.02,5.73-6.02ZM60.93,18.02c-.2-1.27-1.05-1.78-1.92-1.78s-1.58.54-1.87,1.78h3.79Z"/></svg>',
   company: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.5 118.1"><defs><style>.cls-1 {fill: #eb1000;}</style></defs><g><g><polygon class="cls-1" points="84.1 0 133.5 0 133.5 118.1 84.1 0"/><polygon class="cls-1" points="49.4 0 0 0 0 118.1 49.4 0"/><polygon class="cls-1" points="66.7 43.5 98.2 118.1 77.6 118.1 68.2 94.4 45.2 94.4 66.7 43.5"/></g></g></svg>',
   search: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false"><path d="M14 2A8 8 0 0 0 7.4 14.5L2.4 19.4a1.5 1.5 0 0 0 2.1 2.1L9.5 16.6A8 8 0 1 0 14 2Zm0 14.1A6.1 6.1 0 1 1 20.1 10 6.1 6.1 0 0 1 14 16.1Z"></path></svg>',
   home: '<svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 18 18" width="25"><path fill="#6E6E6E" d="M17.666,10.125,9.375,1.834a.53151.53151,0,0,0-.75,0L.334,10.125a.53051.53051,0,0,0,0,.75l.979.9785A.5.5,0,0,0,1.6665,12H2v4.5a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5v-5a.5.5,0,0,1,.5-.5h3a.5.5,0,0,1,.5.5v5a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5V12h.3335a.5.5,0,0,0,.3535-.1465l.979-.9785A.53051.53051,0,0,0,17.666,10.125Z"/></svg>',
 };
 
 export const darkIcons = {
   ...icons,
+  brand: '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 64.57 35"><defs><style>.cls-1{fill: #fff;}</style></defs><path class="cls-1" d="M6.27,10.22h4.39l6.2,14.94h-4.64l-3.92-9.92-2.59,6.51h3.08l1.23,3.41H0l6.27-14.94ZM22.03,13.32c.45,0,.94.04,1.43.16v-3.7h3.88v14.72c-.89.4-2.81.89-4.73.89-3.48,0-6.47-1.98-6.47-5.93s2.88-6.13,5.89-6.13h0ZM22.52,22.19c.36,0,.65-.07.94-.16v-5.42c-.29-.11-.58-.16-.96-.16-1.27,0-2.45.94-2.45,2.92s1.2,2.81,2.47,2.81h0ZM34.25,13.32c3.23,0,5.98,2.18,5.98,6.02s-2.74,6.02-5.98,6.02-6-2.18-6-6.02,2.72-6.02,6-6.02ZM34.25,22.13c1.11,0,2.14-.89,2.14-2.79s-1.03-2.79-2.14-2.79-2.12.89-2.12,2.79.96,2.79,2.12,2.79ZM41.16,9.78h3.9v3.7c.47-.09.96-.16,1.45-.16,3.03,0,5.84,1.98,5.84,5.86,0,4.1-2.99,6.18-6.53,6.18-1.52,0-3.46-.31-4.66-.87v-14.72h0ZM45.91,22.17c1.34,0,2.56-.96,2.56-2.94,0-1.85-1.2-2.72-2.5-2.72-.36,0-.65.04-.91.16v5.35c.22.09.51.16.85.16h0ZM58.97,13.32c2.92,0,5.6,1.87,5.6,5.64,0,.51-.02,1-.09,1.49h-7.27c.4,1.32,1.56,1.94,3.01,1.94,1.18,0,2.27-.29,3.5-.82v2.97c-1.14.58-2.5.82-3.9.82-3.7,0-6.58-2.23-6.58-6.02s2.61-6.02,5.73-6.02ZM60.93,18.02c-.2-1.27-1.05-1.78-1.92-1.78s-1.58.54-1.87,1.78c0,0,3.79,0,3.79,0Z"/></svg>',
   company: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.5 118.1"><defs><style>.cls-1 {fill: currentColor;}</style></defs><g><g><polygon class="cls-1" points="84.1 0 133.5 0 133.5 118.1 84.1 0"/><polygon class="cls-1" points="49.4 0 0 0 0 118.1 49.4 0"/><polygon class="cls-1" points="66.7 43.5 98.2 118.1 77.6 118.1 68.2 94.4 45.2 94.4 66.7 43.5"/></g></g></svg>',
 };
 
@@ -340,9 +343,9 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   if (mepFragment?.targetManifestId) body.dataset.adobeTargetTestid = mepFragment.targetManifestId;
   const commands = mepGnav?.commands;
   if (commands?.length) {
-    const { handleCommands, deleteMarkedEls } = await import('../../../features/personalization/personalization.js');
+    /* c8 ignore next 3 */
+    const { handleCommands } = await import('../../../features/personalization/personalization.js');
     handleCommands(commands, body, true, true);
-    deleteMarkedEls(body);
   }
   const inlineFrags = [...body.querySelectorAll('a[href*="#_inline"]')];
   if (inlineFrags.length) {

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

@@ -103,7 +103,7 @@ async function loadList(type, content, list) {
     case 'assets':
       loadAssets(content, list);
       break;
-    case 'personalization_tags':
+    case 'MEP_personalization':
       loadPersonalization(content, list);
       break;
     default:
@@ -153,7 +153,7 @@ async function combineLibraries(base, supplied) {
     blocks: base.blocks.data,
     templates: base.templates?.data,
     icons: base.icons?.data,
-    personalization_tags: base.personalization?.data,
+    MEP_personalization: base.personalization?.data,
     placeholders: base.placeholders?.data,
   };
 
@@ -197,7 +197,6 @@ function createList(libraries) {
       list.classList.add('inset');
       skLibrary.classList.add('allow-back');
       loadList(type, libraries[type], list);
-      window.hlx?.rum.sampleRUM('click', { source: e.target });
     });
   });
 

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

@@ -285,7 +285,6 @@ export default async function loadBlocks(blocks, list, query, type) {
         setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
         const blob = new Blob([`${BLOCK_SPACING}${containerHtml}${BLOCK_SPACING}`], { type: 'text/html' });
         createCopy(blob);
-        window.hlx?.rum.sampleRUM('click', { source: e.target });
       });
       item.append(name, copy);
 

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

@@ -18,7 +18,6 @@ export default async function iconList(content, list) {
       const formatted = `:${key}:`;
       const blob = new Blob([formatted], { type: 'text/plain' });
       createCopy(blob);
-      window.hlx?.rum.sampleRUM('click', { source: e.target });
     });
     title.append(copy);
     list.append(title);

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

@@ -1,23 +1,24 @@
 import { createTag } from '../../../utils/utils.js';
 import createCopy from '../library-utils.js';
 
-const fetchTags = async (path) => {
-  const resp = await fetch(path);
-  if (!resp.ok) return [];
-  const json = await resp.json();
-  return json.data || [];
-};
-
-const categorize = (tagData) => tagData
+const categorize = (tagData, category) => tagData
   .reduce((tags, tag) => {
-    tags[tag.category] ??= [];
-    tags[tag.category].push({
+    const tagCategory = tag.category || category;
+    tags[tagCategory] ??= [];
+    tags[tagCategory].push({
       tagname: tag.tagname,
       description: tag.description,
     });
     return tags;
   }, {});
 
+const fetchTags = async (path, category) => {
+  const resp = await fetch(path);
+  if (!resp.ok) return [];
+  const json = await resp.json();
+  return categorize(json.data, category);
+};
+
 const getCopyBtn = (tagName) => {
   const copy = createTag('button', { class: 'copy' });
   copy.id = `${tagName}-tag-copy`;
@@ -26,14 +27,20 @@ const getCopyBtn = (tagName) => {
     setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
     const blob = new Blob([tagName], { type: 'text/plain' });
     createCopy(blob);
-    window.hlx?.rum.sampleRUM('click', { source: e.target });
   });
   return copy;
 };
 
 export default async function loadPersonalization(content, list) {
-  const tagData = await fetchTags(content[0].path);
-  const tagsObj = categorize(tagData);
+  let tagsObj = {};
+  for (const item of content) {
+    const { category, path } = item;
+    tagsObj = {
+      ...tagsObj,
+      ...await fetchTags(path, category),
+    };
+  }
+
   list.textContent = '';
 
   Object.entries(tagsObj).forEach(([category, tags]) => {

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

@@ -21,7 +21,6 @@ export default async function placeholderList(content, list) {
       const formatted = `{{${placeholder.key}}}`;
       const blob = new Blob([formatted], { type: 'text/plain' });
       createCopy(blob);
-      window.hlx?.rum.sampleRUM('click', { source: e.target });
     });
     title.append(copy);
     list.append(title);

libs/blocks/marketo/marketo.js

@@ -38,6 +38,7 @@ const FORM_MAP = {
   'co-partner-names': 'program.copartnernames',
   'sfdc-campaign-id': 'program.campaignids.sfdc',
 };
+export const FORM_PARAM = 'form';
 
 export const formValidate = (formEl) => {
   formEl.classList.remove('hide-errors');
@@ -69,7 +70,7 @@ export const decorateURL = (destination, baseURL = window.location) => {
     return destinationUrl.href;
   } catch (e) {
     /* c8 ignore next 4 */
-    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`);
+    window.lana?.log(`Error with Marketo destination URL: ${destination} ${e.message}`, { tags: 'error,marketo' });
   }
 
   return null;
@@ -91,6 +92,38 @@ export const setPreferences = (formData) => {
   Object.entries(formData).forEach(([key, value]) => setPreference(key, value));
 };
 
+const showSuccessSection = (formData, scroll = true) => {
+  const show = (el) => {
+    el.classList.remove('hide-block');
+    if (scroll) el.scrollIntoView({ behavior: 'smooth' });
+  };
+  const successClass = formData[SUCCESS_SECTION]?.toLowerCase().replaceAll(' ', '-');
+  if (!successClass) {
+    window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    return;
+  }
+  const section = document.querySelector(`.section.${successClass}`);
+  if (section) {
+    show(section);
+    return;
+  }
+  // For Marquee use case
+  const maxIntervals = 6;
+  let count = 0;
+  const interval = setInterval(() => {
+    const el = document.querySelector(`.section.${successClass}`);
+    if (el) {
+      clearInterval(interval);
+      show(el);
+    }
+    count += 1;
+    if (count > maxIntervals) {
+      clearInterval(interval);
+      window.lana?.log('Error showing Marketo success section', { tags: 'warn,marketo' });
+    }
+  }, 500);
+};
+
 export const formSuccess = (formEl, formData) => {
   const el = formEl.closest('.marketo');
   const parentModal = formEl?.closest('.dialog-modal');
@@ -108,18 +141,8 @@ export const formSuccess = (formEl, formData) => {
   }
 
   if (formData?.[SUCCESS_TYPE] !== 'section') return true;
-
-  try {
-    const section = formData[SUCCESS_SECTION].toLowerCase().replaceAll(' ', '-');
-    const success = document.querySelector(`.section.${section}`);
-    success.classList.remove('hide-block');
-    success.scrollIntoView({ behavior: 'smooth' });
-    setPreference(SUCCESS_TYPE, 'message');
-  } catch (e) {
-    /* c8 ignore next 2 */
-    window.lana?.log('Error showing Marketo success section', { tags: 'errorType=warn,module=marketo' });
-  }
-
+  showSuccessSection(formData);
+  setPreference(SUCCESS_TYPE, 'message');
   return false;
 };
 
@@ -161,7 +184,7 @@ export const loadMarketo = (el, formData) => {
     .catch(() => {
       /* c8 ignore next 2 */
       el.style.display = 'none';
-      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'errorType=error,module=marketo' });
+      window.lana?.log(`Error loading Marketo form for ${munchkinID}_${formID}`, { tags: 'error,marketo' });
     });
 };
 
@@ -198,6 +221,15 @@ export default function init(el) {
     return;
   }
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const ungated = searchParams.get(FORM_PARAM) === 'off';
+
+  if (formData[SUCCESS_TYPE] === 'section' && ungated) {
+    el.classList.add('hide-block');
+    showSuccessSection(formData, false);
+    return;
+  }
+
   formData[SUCCESS_TYPE] = formData[SUCCESS_TYPE] || 'redirect';
 
   if (formData[SUCCESS_TYPE] === 'redirect') {

libs/blocks/media/media.css

@@ -165,8 +165,8 @@ div[class*="-up"] .media .foreground > .media-row {
 }
 
 .media.qr-code .qr-button-container {
-  display: inline;
-  margin-right: var(--spacing-s);
+  display: inline-block;
+  margin: 0;
 }
 
 .media.qr-code .google-play,
@@ -179,7 +179,8 @@ div[class*="-up"] .media .foreground > .media-row {
   justify-content: center;
   padding: 0;
   display: inline-flex;
-  margin: var(--spacing-xs) var(--spacing-s) 0 0;
+  margin-top: var(--spacing-xs);
+  margin-inline-end: var(--spacing-s);
 }
 
 .media.qr-code .google-play {