Merge pull request #86 from mokimo/main

Main

.eslintrc-code-compatibility.js

@@ -14,7 +14,6 @@ module.exports = {
   ],
   ignorePatterns: [
     '/libs/deps/*',
-    '/libs/navigation/dist/*',
     '/tools/loc/*',
   ],
 };

.eslintrc.js

@@ -62,7 +62,6 @@ module.exports = {
     '/libs/features/mas/*',
     '/tools/loc/*',
     '/libs/features/spectrum-web-components/*',
-    '/libs/navigation/dist/*',
   ],
   plugins: [
     'chai-friendly',

.gitignore

@@ -11,4 +11,3 @@ logs/*
 test-html-results/
 test-results/
 test-a11y-results/
-libs/navigation/dist/

libs/blocks/global-footer/global-footer.css

@@ -252,20 +252,6 @@
   height: 12px;
 }
 
-@media (min-width: 600px) {
-  dialog.feds-dialog {
-    max-width: 80vw;
-    width: fit-content;
-  }
-}
-
-@media (min-width: 1200px) {
-  dialog.feds-dialog {
-    width: 1200px;
-    max-width: calc((100% - 6px) - 2em);
-  }
-}
-
 @media (min-width: 900px) {
   /* If there is too much content, float it on multiple rows */
   .feds-footer-wrapper .feds-menu-content {

libs/blocks/global-footer/global-footer.js

@@ -4,8 +4,8 @@ import {
   decorateLinks,
   getMetadata,
   getConfig,
+  loadBlock,
   localizeLink,
-  loadStyle,
 } from '../../utils/utils.js';
 
 import {
@@ -217,8 +217,6 @@ class Footer {
         </svg>
         ${regionPickerTextElem}
       </a>`;
-    regionPickerElem.dataset.modalPath = `${url.pathname}#_inline`;
-    regionPickerElem.dataset.modalHash = url.hash;
     const regionPickerWrapperClass = 'feds-regionPicker-wrapper';
     this.elements.regionPicker = toFragment`<div class="${regionPickerWrapperClass}">
         ${regionPickerElem}
@@ -232,48 +230,24 @@ class Footer {
       // Hash -> region selector opens a modal
       decorateAutoBlock(regionPickerElem); // add modal-specific attributes
       // TODO remove logs after finding the root cause for the region picker 404s -> MWPW-143627
-      regionPickerElem.href = url.hash;
       if (regionPickerElem.classList[0] !== 'modal') {
         lanaLog({
           message: `Modal block class missing from region picker pre loading the block; locale: ${locale}; regionPickerElem: ${regionPickerElem.outerHTML}`,
           tags: 'errorType=warn,module=global-footer',
         });
       }
-      loadStyle(`${base}/blocks/modal/modal.css`);
-      const { default: initModal } = await import('../modal/modal.js');
-      const modal = await initModal(regionPickerElem);
-
-      const loadRegionNav = async () => {
-        const block = document.querySelector('.region-nav');
-        if (block && getConfig().standaloneGnav) {
-          // on standalone the region-nav will fail to load automatically through
-          // the modal calling fragment.js. In that case we will have data-failed=true
-          // and we should manually load region nav
-          // If that's not the case then we're not a standalone gnav
-          // and we mustn't load region-nav twice.
-          if (block.getAttribute('data-failed') !== 'true') return;
-          block.classList.add('hide');
-          loadStyle(`${base}/blocks/region-nav/region-nav.css`);
-          const { default: initRegionNav } = await import('../region-nav/region-nav.js');
-          initRegionNav(block);
-          // decoratePlaceholders(block, getConfig());
-          block.classList.remove('hide');
-        }
-      };
-
-      if (modal) await loadRegionNav(); // just in case the modal is already open
-
+      await loadBlock(regionPickerElem); // load modal logic and styles
       if (regionPickerElem.classList[0] !== 'modal') {
         lanaLog({
           message: `Modal block class missing from region picker post loading the block; locale: ${locale}; regionPickerElem: ${regionPickerElem.outerHTML}`,
           tags: 'errorType=warn,module=global-footer',
         });
       }
+      // 'decorateAutoBlock' logic replaces class name entirely, need to add it back
+      regionPickerElem.classList.add(regionPickerClass);
       regionPickerElem.addEventListener('click', () => {
         if (!isRegionPickerExpanded()) {
           regionPickerElem.setAttribute('aria-expanded', 'true');
-          // wait for the modal to load before we load the region nav
-          window.addEventListener('milo:modal:loaded', loadRegionNav, { once: true });
         }
       });
       // Set aria-expanded to false when region modal is closed
@@ -288,8 +262,7 @@ class Footer {
       regionSelector.href = localizeLink(regionSelector.href);
       decorateAutoBlock(regionSelector); // add fragment-specific class(es)
       this.elements.regionPicker.append(regionSelector); // add fragment after regionPickerElem
-      const { default: initFragment } = await import('../fragment/fragment.js');
-      await initFragment(regionSelector); // load fragment and replace original link
+      await loadBlock(regionSelector); // load fragment and replace original link
       // Update aria-expanded on click
       regionPickerElem.addEventListener('click', (e) => {
         e.preventDefault();
@@ -305,7 +278,7 @@ class Footer {
       });
     }
 
-    return this.elements.regionPicker;
+    return this.regionPicker;
   };
 
   decorateSocial = () => {

libs/blocks/global-navigation/base.css

@@ -118,8 +118,8 @@
   align-items: center;
 }
 
-header.global-navigation.ready {
-  visibility: visible !important;
+header.global-navigation {
+  visibility: visible;
 }
 
 /* Desktop styles */

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

@@ -1,4 +1,3 @@
-/* eslint import/no-relative-packages: 0 */
 /* eslint-disable no-async-promise-executor */
 import {
   getConfig,
@@ -21,6 +20,7 @@ import {
   isTangentToViewport,
   lanaLog,
   loadBaseStyles,
+  loadBlock,
   loadDecorateMenu,
   rootPath,
   loadStyles,
@@ -222,7 +222,7 @@ const decorateProfileTrigger = async ({ avatar }) => {
 let keyboardNav;
 const setupKeyboardNav = async () => {
   keyboardNav = keyboardNav || new Promise(async (resolve) => {
-    const { default: KeyboardNavigation } = await import('./utilities/keyboard/index.js');
+    const KeyboardNavigation = await loadBlock('./keyboard/index.js');
     const instance = new KeyboardNavigation();
     resolve(instance);
   });
@@ -428,17 +428,17 @@ class Gnav {
         this.block.removeEventListener('keydown', this.loadDelayed);
         if (this.searchPresent()) {
           const [
-            { default: Search },
+            Search,
           ] = await Promise.all([
-            import('./features/search/gnav-search.js'),
+            loadBlock('../features/search/gnav-search.js'),
             loadStyles(rootPath('features/search/gnav-search.css')),
           ]);
           this.Search = Search;
         }
 
         if (!this.useUniversalNav) {
-          const [{ default: ProfileDropdown }] = await Promise.all([
-            import('./features/profile/dropdown.js'),
+          const [ProfileDropdown] = await Promise.all([
+            loadBlock('../features/profile/dropdown.js'),
             loadStyles(rootPath('features/profile/dropdown.css')),
           ]);
           this.ProfileDropdown = ProfileDropdown;
@@ -543,7 +543,7 @@ class Gnav {
     const unavVersion = new URLSearchParams(window.location.search).get('unavVersion') || '1.3';
     await Promise.all([
       loadScript(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.js`),
-      loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`, true),
+      loadStyles(`https://${environment}.adobeccstatic.com/unav/${unavVersion}/UniversalNav.css`),
     ]);
 
     const getChildren = () => {
@@ -913,7 +913,7 @@ class Gnav {
 
         const menuLogic = await loadDecorateMenu();
 
-        await menuLogic.decorateMenu({
+        menuLogic.decorateMenu({
           item,
           template,
           type: itemType,
@@ -1024,7 +1024,7 @@ class Gnav {
     const breadcrumbsElem = this.block.querySelector('.breadcrumbs');
     // Breadcrumbs are not initially part of the nav, need to decorate the links
     if (breadcrumbsElem) decorateLinks(breadcrumbsElem);
-    const { default: createBreadcrumbs } = await import('./features/breadcrumbs/breadcrumbs.js');
+    const createBreadcrumbs = await loadBlock('../features/breadcrumbs/breadcrumbs.js');
     this.elements.breadcrumbsWrapper = await createBreadcrumbs(breadcrumbsElem);
     return this.elements.breadcrumbsWrapper;
   };
@@ -1094,6 +1094,5 @@ export default async function init(block) {
   const mepMartech = mep?.martech || '';
   block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`);
   if (isDarkMode()) block.classList.add('feds--dark');
-  block.classList.add('ready');
   return gnav;
 }

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

@@ -1,4 +1,3 @@
-/* eslint import/no-relative-packages: 0 */
 /* eslint-disable camelcase */
 import { getConfig } from '../../../utils/utils.js';
 

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

@@ -1,4 +1,3 @@
-/* eslint import/no-relative-packages: 0 */
 /* eslint-disable no-promise-executor-return, no-async-promise-executor */
 import { getConfig } from '../../../utils/utils.js';
 

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

@@ -1,4 +1,3 @@
-/* eslint import/no-relative-packages: 0 */
 import {
   getConfig, getMetadata, loadStyle, loadLana, decorateLinks, localizeLink,
 } from '../../../utils/utils.js';
@@ -135,9 +134,7 @@ export function rootPath(path) {
   return url;
 }
 
-export function loadStyles(url, override = false) {
-  const { standaloneGnav } = getConfig();
-  if (standaloneGnav && !override) return;
+export function loadStyles(url) {
   loadStyle(url, (e) => {
     if (e === 'error') {
       lanaLog({
@@ -158,8 +155,6 @@ export function isDarkMode() {
 // since they can be independent of each other.
 // CSS imports were not used due to duplication of file include
 export async function loadBaseStyles() {
-  const { standaloneGnav } = getConfig();
-  if (standaloneGnav) return;
   if (isDarkMode()) {
     new Promise((resolve) => { loadStyle(rootPath('base.css'), resolve); })
       .then(() => loadStyles(rootPath('dark-nav.css')));
@@ -169,6 +164,10 @@ export async function loadBaseStyles() {
   }
 }
 
+export function loadBlock(path) {
+  return import(path).then((module) => module.default);
+}
+
 let cachedDecorateMenu;
 export async function loadDecorateMenu() {
   if (cachedDecorateMenu) return cachedDecorateMenu;
@@ -178,12 +177,15 @@ export async function loadDecorateMenu() {
     resolve = _resolve;
   });
 
-  const [menu] = await Promise.all([
-    import('./menu/menu.js'),
+  const [{ decorateMenu, decorateLinkGroup }] = await Promise.all([
+    loadBlock('./menu/menu.js'),
     loadStyles(rootPath('utilities/menu/menu.css')),
   ]);
 
-  resolve(menu.default);
+  resolve({
+    decorateMenu,
+    decorateLinkGroup,
+  });
   return cachedDecorateMenu;
 }
 

libs/blocks/region-nav/region-nav.css

@@ -56,10 +56,6 @@
   column-count: 1;
 }
 
-.region-nav.hide {
-  display: none;
-}
-
 @media (min-width: 600px) {
   .region-nav > div:nth-of-type(2) {
     column-count: 3;

libs/navigation/bootstrapper.js

@@ -1,7 +1,10 @@
-/* eslint import/no-relative-packages: 0 */
-export default async function bootstrapBlock(initBlock, blockConfig) {
+export default async function bootstrapBlock(miloLibs, blockConfig) {
   const { name, targetEl, layout, noBorder, jarvis } = blockConfig;
-  const { getConfig, createTag, loadScript } = await import('../utils/utils.js');
+  const { getConfig, createTag, loadLink, loadScript } = await import(`${miloLibs}/utils/utils.js`);
+  const { default: initBlock } = await import(`${miloLibs}/blocks/${name}/${name}.js`);
+
+  const styles = [`${miloLibs}/blocks/${name}/${name}.css`, `${miloLibs}/navigation/navigation.css`];
+  styles.forEach((url) => loadLink(url, { rel: 'stylesheet' }));
 
   const setNavLayout = () => {
     const element = document.querySelector(targetEl);
@@ -38,7 +41,7 @@ export default async function bootstrapBlock(initBlock, blockConfig) {
 
   await initBlock(document.querySelector(targetEl));
   if (blockConfig.targetEl === 'footer') {
-    const { loadPrivacy } = await import('../scripts/delayed.js');
+    const { loadPrivacy } = await import(`${miloLibs}/scripts/delayed.js`);
     setTimeout(() => {
       loadPrivacy(getConfig, loadScript);
     }, blockConfig.delay);