Merge branch 'stage' of github.com:adobecom/milo into content-navigation

.hlxignore

@@ -9,3 +9,4 @@ LICENSE
 web-test-runner.config.mjs
 codecov.yaml
 libs/features/mas/*
+!libs/features/mas/docs

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

@@ -36,6 +36,8 @@ import {
   addMepHighlightAndTargetId,
   isDarkMode,
   darkIcons,
+  setDisableAEDState,
+  getDisableAEDState,
 } from './utilities/utilities.js';
 
 import { replaceKey, replaceKeyArray } from '../../features/placeholders.js';
@@ -837,8 +839,9 @@ class Gnav {
 
     if (!hasActiveLink()) {
       const sections = this.elements.mainNav.querySelectorAll('.feds-navItem--section');
+      const disableAED = getDisableAEDState();
 
-      if (sections.length === 1) {
+      if (!disableAED && sections.length === 1) {
         sections[0].classList.add(selectors.activeNavItem.slice(1));
         setActiveLink(true);
       }
@@ -1024,7 +1027,11 @@ const getSource = async () => {
 export default async function init(block) {
   try {
     const { mep } = getConfig();
-    const url = await getSource();
+    const sourceUrl = await getSource();
+    const [url, hash = ''] = sourceUrl.split('#');
+    if (hash === '_noActiveItem') {
+      setDisableAEDState();
+    }
     const content = await fetchAndProcessPlainHtml({ url });
     if (!content) return null;
     const gnav = new Gnav({

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

@@ -133,7 +133,7 @@ export function getAnalyticsValue(str, index) {
 
 export function getExperienceName() {
   const experiencePath = getMetadata('gnav-source');
-  const explicitExperience = experiencePath?.split('/').pop();
+  const explicitExperience = experiencePath?.split('#')[0]?.split('/').pop();
   if (explicitExperience?.length
     && explicitExperience !== 'gnav') return explicitExperience;
 
@@ -257,14 +257,24 @@ export function setActiveDropdown(elem) {
   });
 }
 
+// Disable AED(Active Element Detection)
+export const [setDisableAEDState, getDisableAEDState] = (() => {
+  let disableAED = false;
+  return [
+    () => { disableAED = true; },
+    () => disableAED,
+  ];
+})();
+
 export const [hasActiveLink, setActiveLink, getActiveLink] = (() => {
   let activeLinkFound;
 
   return [
     () => activeLinkFound,
     (val) => { activeLinkFound = !!val; },
     (area) => {
-      if (hasActiveLink() || !(area instanceof HTMLElement)) return null;
+      const disableAED = getDisableAEDState();
+      if (disableAED || hasActiveLink() || !(area instanceof HTMLElement)) return null;
       const { origin, pathname } = window.location;
       const url = `${origin}${pathname}`;
       const activeLink = [

libs/blocks/hero-marquee/hero-marquee.css

@@ -17,7 +17,6 @@
   align-items: center;
 }
 
-.hero-marquee.no-min-height { min-height: unset; }
 .hero-marquee.s-min-height { min-height: var(--s-min-height); }
 .hero-marquee.l-min-height { min-height: var(--l-min-height); }
 

libs/blocks/hero-marquee/hero-marquee.js

@@ -164,16 +164,14 @@ function loadBreakpointThemes() {
 export default async function init(el) {
   el.classList.add('con-block');
   let rows = el.querySelectorAll(':scope > div');
-  if (rows.length <= 1) return;
-  const [head, ...tail] = rows;
-  rows = tail;
-  if (head.textContent.trim() === '') {
-    head.remove();
-  } else {
+  if (rows.length > 1 && rows[0].textContent !== '') {
     el.classList.add('has-bg');
+    const [head, ...tail] = rows;
     handleObjectFit(head);
     decorateBlockBg(el, head, { useHandleFocalpoint: true });
+    rows = tail;
   }
+
   // get first row that's not a keyword key/value row
   const mainRowIndex = rows.findIndex((row) => {
     const firstColText = row.children[0].textContent.toLowerCase().trim();

libs/blocks/library-config/library-config.css

@@ -205,7 +205,8 @@ input.sk-library-search-input:focus {
  * Fixes block list getting cut off with search
  * Margin height equal to search bar height
 */
-.sk-library ul.con-blocks-list.inset {
+.sk-library ul.con-blocks-list.inset,
+.sk-library ul.con-templates-list.inset  {
   margin-bottom: 39px;
 }
 
@@ -242,7 +243,8 @@ input.sk-library-search-input:focus {
   font-weight: 700;
 }
 
-.sk-library .block-group.is-hidden {
+.sk-library .block-group.is-hidden,
+.con-templates-list .template.is-hidden {
   display: none;
 }
 

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

@@ -2,14 +2,14 @@ import { createTag } from '../../utils/utils.js';
 
 const LIBRARY_PATH = '/docs/library/library.json';
 
-async function loadBlocks(content, list, query) {
+async function loadBlocks({ content, list, query, type }) {
   const { default: blocks } = await import('./lists/blocks.js');
-  blocks(content, list, query);
+  blocks(content, list, query, type);
 }
 
-async function loadTemplates(content, list) {
+async function loadTemplates({ content, list, query, type }) {
   const { default: templates } = await import('./lists/templates.js');
-  templates(content, list);
+  templates(content, list, query, type);
 }
 
 async function loadPlaceholders(content, list) {
@@ -32,27 +32,47 @@ async function loadPersonalization(content, list) {
   personalization(content, list);
 }
 
-function addSearch(content, list) {
+function addSearch({ content, list, type }) {
   const skLibrary = list.closest('.sk-library');
   const header = skLibrary.querySelector('.sk-library-header');
   let search = skLibrary.querySelector('.sk-library-search');
   if (!search) {
     search = createTag('div', { class: 'sk-library-search' });
     const searchInput = createTag('input', { class: 'sk-library-search-input', placeholder: 'Search...' });
     const clear = createTag('div', { class: 'sk-library-search-clear is-hidden' });
+
     searchInput.addEventListener('input', (e) => {
       const query = e.target.value;
       if (query === '') {
         clear.classList.add('is-hidden');
       } else {
         clear.classList.remove('is-hidden');
       }
-      loadBlocks(content, list, query);
+
+      switch (type) {
+        case 'blocks':
+          loadBlocks({ content, list, query, type });
+          break;
+        case 'templates':
+          loadTemplates({ content, list, query, type });
+          break;
+        default:
+      }
     });
     clear.addEventListener('click', (e) => {
       e.target.classList.add('is-hidden');
       e.target.closest('.sk-library-search').querySelector('.sk-library-search-input').value = '';
-      loadBlocks(content, list);
+      const query = e.target.value;
+
+      switch (type) {
+        case 'blocks':
+          loadBlocks({ content, list, query, type });
+          break;
+        case 'templates':
+          loadTemplates({ content, list, query, type });
+          break;
+        default:
+      }
     });
     search.append(searchInput);
     search.append(clear);
@@ -67,11 +87,12 @@ async function loadList(type, content, list) {
   const query = list.closest('.sk-library').querySelector('.sk-library-search-input')?.value;
   switch (type) {
     case 'blocks':
-      addSearch(content, list);
-      loadBlocks(content, list, query);
+      addSearch({ content, list, type });
+      loadBlocks({ content, list, query, type });
       break;
     case 'templates':
-      loadTemplates(content, list);
+      addSearch({ content, list, type });
+      loadTemplates({ content, list, query, type });
       break;
     case 'placeholders':
       loadPlaceholders(content, list);
@@ -198,6 +219,10 @@ function createHeader() {
       el.classList.remove('inset');
     });
     skLibrary.classList.remove('allow-back');
+
+    // Remove library search if it's been added
+    const search = skLibrary.querySelector('.sk-library-search');
+    if (search) search.remove();
   });
   return header;
 }

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

@@ -1,4 +1,24 @@
-/* global ClipboardItem */
+import { getSearchTags } from './lists/blocks.js';
+import { getTemplateSearchTags } from './lists/templates.js';
+
+/* search utility */
+export function isMatching(container, query, type, titleText) {
+  let tagsString;
+
+  switch (type) {
+    case 'blocks':
+      tagsString = getSearchTags(container);
+      break;
+    case 'templates':
+      tagsString = getTemplateSearchTags(container, titleText);
+      break;
+    default:
+  }
+  if (!query || !tagsString) return false;
+  const searchTokens = query.split(' ');
+  return searchTokens.every((token) => tagsString.toLowerCase().includes(token.toLowerCase()));
+}
+
 export default function createCopy(blob) {
   const data = [new ClipboardItem({ [blob.type]: blob })];
   navigator.clipboard.write(data);

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

@@ -1,5 +1,5 @@
 import { createTag } from '../../../utils/utils.js';
-import createCopy from '../library-utils.js';
+import createCopy, { isMatching } from '../library-utils.js';
 import { getMetadata } from '../../section-metadata/section-metadata.js';
 
 const LIBRARY_METADATA = 'library-metadata';
@@ -132,13 +132,6 @@ export function getSearchTags(container) {
   return containerName;
 }
 
-export function isMatching(container, query) {
-  const tagsString = getSearchTags(container);
-  if (!query || !tagsString) return false;
-  const searchTokens = query.split(' ');
-  return searchTokens.every((token) => tagsString.toLowerCase().includes(token.toLowerCase()));
-}
-
 function getBlockType(subSection, withinContainer) {
   if (subSection.className === LIBRARY_CONTAINER_START) return CONTAINER_START_BLOCK;
   if (subSection.className === LIBRARY_CONTAINER_END) return CONTAINER_END_BLOCK;
@@ -247,7 +240,7 @@ export function getContainers(doc) {
   return containers;
 }
 
-export default async function loadBlocks(blocks, list, query) {
+export default async function loadBlocks(blocks, list, query, type) {
   list.textContent = '';
   blocks.forEach(async (block) => {
     const titleText = createTag('p', { class: 'item-title' }, block.name);
@@ -277,7 +270,6 @@ export default async function loadBlocks(blocks, list, query) {
     const html = await resp.text();
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
-
     const containers = getContainers(doc);
     let matchingContainerFound = false;
 
@@ -298,7 +290,7 @@ export default async function loadBlocks(blocks, list, query) {
       item.append(name, copy);
 
       if (query) {
-        if (isMatching(container, query)) {
+        if (isMatching(container, query, type)) {
           matchingContainerFound = true;
         } else {
           item.classList.add('is-hidden');

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

@@ -1,12 +1,23 @@
 import { createTag } from '../../../utils/utils.js';
-import createCopy from '../library-utils.js';
+import createCopy, { isMatching } from '../library-utils.js';
+import { getMetadata } from '../../section-metadata/section-metadata.js';
 import { getTable, decorateImages, handleLinks } from './blocks.js';
 
 function createSpace() {
   const br = createTag('br');
   return createTag('p', null, br);
 }
 
+export function getTemplateSearchTags(template, titleText) {
+  const templateName = titleText.textContent;
+
+  if (template.searchtags?.text) {
+    const terms = template.searchtags?.text.trim().toLowerCase();
+    return `${terms} ${templateName}`;
+  }
+  return templateName;
+}
+
 function formatDom(aemDom, path) {
   // Decorate Links
   handleLinks(aemDom, path);
@@ -16,11 +27,27 @@ function formatDom(aemDom, path) {
 
   // Decorate Blocks
   const divs = aemDom.querySelectorAll('main > div > div');
+  const template = {};
+
   divs.forEach((div) => {
+    // If there is library-metadata, extract searchTags. Remove library-metadata.
+    if (div.classList.contains('library-metadata')) {
+      const libraryMetadata = getMetadata(div);
+      template.searchtags = libraryMetadata.searchtags;
+      div.remove();
+      return;
+    }
     // Give table some space
     div.insertAdjacentElement('afterend', createSpace());
 
     const table = getTable(div, true);
+    const th = table.querySelector('th');
+
+    // Converts to a metadata block so it can be copied/pasted.
+    if (th.textContent === 'template-metadata') {
+      th.textContent = 'metadata';
+    }
+
     div.parentElement.replaceChild(table, div);
   });
 
@@ -38,7 +65,8 @@ function formatDom(aemDom, path) {
   });
   const flattedDom = createTag('div');
   flattedDom.append(...formattedSections);
-  return flattedDom;
+  template.flattedDom = flattedDom;
+  return template;
 }
 
 async function formatTemplate(path) {
@@ -50,13 +78,14 @@ async function formatTemplate(path) {
   return formatDom(dom, path);
 }
 
-export default async function loadTemplates(templates, list) {
+export default async function loadTemplates(templates, list, query, type) {
+  list.textContent = '';
+
   templates.forEach(async (template) => {
     const titleText = createTag('p', { class: 'item-title' }, template.name);
     const title = createTag('li', { class: 'template' }, titleText);
     const previewButton = createTag('button', { class: 'preview-group' }, 'Preview');
     const copy = createTag('button', { class: 'copy' });
-    const formatted = await formatTemplate(template.path);
 
     list.append(title);
     title.append(previewButton, copy);
@@ -66,10 +95,22 @@ export default async function loadTemplates(templates, list) {
       window.open(template.path, '_templatepreview');
     });
 
+    // Returns an object with flattedDom and searchtags.
+    const formatted = await formatTemplate(template.path);
+    if (query) {
+      if (isMatching(formatted, query, type, titleText)) {
+        title.classList.remove('is-hidden');
+      } else {
+        title.classList.add('is-hidden');
+      }
+    } else {
+      title.classList.remove('is-hidden');
+    }
+
     copy.addEventListener('click', (e) => {
       e.target.classList.add('copied');
       setTimeout(() => { e.target.classList.remove('copied'); }, 3000);
-      const blob = new Blob([formatted.outerHTML], { type: 'text/html' });
+      const blob = new Blob([formatted.flattedDom.outerHTML], { type: 'text/html' });
       createCopy(blob);
     });
   });