Merge branch 'stage' into MWPW-160681

adobecom · Feb 20, 2025 · c867cf3 · c867cf3
2 parents cadcdd8 + fd32858
commit c867cf3
Show file tree

Hide file tree

Showing 72 changed files with 1,104 additions and 456 deletions.
diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
@@ -567,7 +567,7 @@
 }
 
 .aside.promobar .action-area .con-button {
-  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .aside.promobar .promo-text.desktop-up,

diff --git a/libs/blocks/global-footer/global-footer.js b/libs/blocks/global-footer/global-footer.js
@@ -66,7 +66,7 @@ class Footer {
       observer.disconnect();
       this.decorateContent();
     }, CONFIG.delays.decoration);
-  }, 'Error in global footer init', 'errorType=error,module=global-footer');
+  }, 'Error in global footer init', 'global-footer', 'error');
 
   decorateContent = () => logErrorFor(async () => {
     // Fetch footer content
@@ -114,7 +114,7 @@ class Footer {
     this.block.setAttribute('daa-lh', `gnav|${getExperienceName()}|footer${mepMartech}`);
 
     this.block.append(this.elements.footer);
-  }, 'Failed to decorate footer content', 'errorType=error,module=global-footer');
+  }, 'Failed to decorate footer content', 'global-footer', 'error');
 
   loadMenuLogic = async () => {
     this.menuLogic = this.menuLogic || new Promise(async (resolve) => {
@@ -154,7 +154,8 @@ class Footer {
       lanaLog({
         message: 'Issue with loadIcons',
         e: `${file.statusText} url: ${file.url}`,
-        tags: 'errorType=info,module=global-footer',
+        tags: 'global-footer',
+        errorType: 'info',
       });
     }
     const content = await file.text();
@@ -199,7 +200,7 @@ class Footer {
     try {
       url = new URL(regionSelector.href);
     } catch (e) {
-      lanaLog({ message: `Could not create URL for region picker; href: ${regionSelector.href}`, tags: 'errorType=error,module=global-footer' });
+      lanaLog({ message: `Could not create URL for region picker; href: ${regionSelector.href}`, tags: 'global-footer', errorType: 'error' });
       return this.elements.regionPicker;
     }
 
@@ -229,14 +230,7 @@ class Footer {
     if (url.hash !== '') {
       // 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);
@@ -261,12 +255,6 @@ class Footer {
 
       if (modal) await loadRegionNav(); // just in case the modal is already open
 
-      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',
-        });
-      }
       regionPickerElem.addEventListener('click', () => {
         if (!isRegionPickerExpanded()) {
           regionPickerElem.setAttribute('aria-expanded', 'true');

diff --git a/libs/blocks/global-navigation/base.css b/libs/blocks/global-navigation/base.css
@@ -27,8 +27,8 @@
   --feds-background-link--hover: #e9e9e9;
   --feds-borderColor-link: #e9e9e9;
   --feds-color-link: #292929;
-  --feds-color-blue-link: #3b63fb;
-  --feds-color-link--hover: #274dea;
+  --feds-color-blue-link: #274dea;
+  --feds-color-link--hover: #1d3ecf;
   --feds-color-navLink-description: #505050;
   --feds-color-link-breadcrumbs: #707070;
   /* Footer */

diff --git a/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js b/libs/blocks/global-navigation/features/breadcrumbs/breadcrumbs.js
@@ -81,7 +81,7 @@ const createWithBase = async (el) => {
     element.querySelector('ul')?.prepend(...base.querySelectorAll('li'));
     return createBreadcrumbs(element);
   } catch (e) {
-    lanaLog({ e, message: 'Breadcrumbs failed fetching base', tags: 'errorType=info,module=gnav-breadcrumbs' });
+    lanaLog({ e, message: 'Breadcrumbs failed fetching base', tags: 'gnav-breadcrumbs', errorType: 'info' });
     return null;
   }
 };
@@ -110,7 +110,7 @@ export default async function init(el) {
     setBreadcrumbSEO(breadcrumbsEl);
     return breadcrumbsEl;
   } catch (e) {
-    lanaLog({ e, message: 'Breadcrumbs failed rendering', tags: 'errorType=error,module=gnav-breadcrumbs' });
+    lanaLog({ e, message: 'Breadcrumbs failed rendering', tags: 'gnav-breadcrumbs', errorType: 'error' });
     return null;
   }
 }
diff --git a/libs/blocks/global-navigation/features/profile/dropdown.js b/libs/blocks/global-navigation/features/profile/dropdown.js
@@ -55,7 +55,7 @@ class ProfileDropdown {
     this.sections = sections;
     this.openOnInit = openOnInit;
     this.localMenu = rawElem.querySelector('h5')?.parentElement;
-    logErrorFor(this.init.bind(this), 'ProfileDropdown.init()', 'errorType=error,module=gnav-profile');
+    logErrorFor(this.init.bind(this), 'ProfileDropdown.init()', 'gnav-profile', 'error');
   }
 
   async init() {

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -986,12 +986,13 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .title .breadcrumb
   box-sizing: inherit;
 }
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup .title h7 {
-  height: 25px;
+  min-height: 25px;
   font-size: 28px;
   font-weight: 700;
   line-height: 25px;
   padding: 8px 0 24px;
   box-sizing: inherit;
+  white-space: break-spaces;
 }
 
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs {
@@ -1058,6 +1059,10 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content a {
   font-weight: 700;
 }
 
+header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content a.feds-navLink:not(:has(div)) {
+  white-space: break-spaces;
+}
+
 header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds-navLink-title {
   font-weight: 700;
   white-space: break-spaces;
@@ -1338,7 +1343,16 @@ html:has(body.disable-ios-scroll) { /* this class is only added on iOS */
   position: fixed;
 }
 
-/* GNAV popup height fix in case of app banner */
-.branch-banner-is-active header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
-  height: calc(100dvh - var(--app-banner-height));
+/* Adjustments for app banner non-sticky behavior */
+.branch-banner-is-active.branch-banner-inline {
+  transition: 0ms !important;
+}
+
+.disable-ios-scroll.branch-banner-is-active.branch-banner-inline {
+  margin-top: 0 !important;
+}
+
+.disable-ios-scroll.branch-banner-is-active.branch-banner-inline #branch-banner-iframe {
+  position: relative;
+  display: block;
 }
diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -42,6 +42,8 @@ import {
   disableMobileScroll,
   enableMobileScroll,
   setAsyncDropdownCount,
+  branchBannerLoadCheck,
+  getBranchBannerInfo,
 } from './utilities/utilities.js';
 import { getFedsPlaceholderConfig } from '../../utils/federated.js';
 
@@ -115,8 +117,8 @@ export const CONFIG = {
                   trace: () => {},
                   debug: () => {},
                   info: () => {},
-                  warn: (e) => lanaLog({ message: 'Profile Menu warning', e, tags: 'errorType=warn,module=universalnav' }),
-                  error: (e) => lanaLog({ message: 'Profile Menu error', e, tags: 'errorType=error,module=universalnav' }),
+                  warn: (e) => lanaLog({ message: 'Profile Menu warning', e, tags: 'universalnav', errorType: 'warn' }),
+                  error: (e) => lanaLog({ message: 'Profile Menu error', e, tags: 'universalnav', errorType: 'error' }),
                 },
               },
               ...getConfig().unav?.profile?.config,
@@ -186,7 +188,7 @@ export const LANGMAP = {
 // signIn, decorateSignIn and decorateProfileTrigger can be removed if IMS takes over the profile
 const signIn = (options = {}) => {
   if (typeof window.adobeIMS?.signIn !== 'function') {
-    lanaLog({ message: 'IMS signIn method not available', tags: 'errorType=warn,module=gnav' });
+    lanaLog({ message: 'IMS signIn method not available', tags: 'gnav', errorType: 'warn' });
     return;
   }
   window.adobeIMS.signIn(options);
@@ -222,7 +224,7 @@ const decorateSignIn = async ({ rawElem, decoratedElem }) => {
         signIn(SIGNIN_CONTEXT);
       });
     } else {
-      lanaLog({ message: 'Sign in link not found in dropdown.', tags: 'errorType=warn,module=gnav' });
+      lanaLog({ message: 'Sign in link not found in dropdown.', tags: 'gnav', errorType: 'warn' });
     }
 
     decoratedElem.append(dropdownElem);
@@ -352,6 +354,7 @@ class Gnav {
   };
 
   init = () => logErrorFor(async () => {
+    branchBannerLoadCheck(this.updatePopupPosition);
     this.elements.curtain = toFragment`<div class="feds-curtain"></div>`;
 
     // Order is important, decorateTopnavWrapper will render the nav
@@ -386,7 +389,7 @@ class Gnav {
 
     document.addEventListener('click', (e) => closeOnClickOutside(e, this.isLocalNav(), this.elements.navWrapper));
     isDesktop.addEventListener('change', closeAllDropdowns);
-  }, 'Error in global navigation init', 'errorType=error,module=gnav');
+  }, 'Error in global navigation init', 'gnav', 'error');
 
   ims = async () => (window.adobeIMS?.initialized ? this.imsReady() : loadIms()
     .then(() => this.imsReady())
@@ -395,7 +398,7 @@ class Gnav {
         window.addEventListener('onImsLibInstance', () => this.imsReady());
         return;
       }
-      lanaLog({ message: 'GNAV: Error with IMS', e, tags: 'errorType=info,module=gnav' });
+      lanaLog({ message: 'GNAV: Error with IMS', e, tags: 'gnav', errorType: 'info' });
     }));
 
   decorateProductEntryCTA = () => {
@@ -429,15 +432,16 @@ class Gnav {
     const localNavItems = this.elements.navWrapper.querySelector('.feds-nav').querySelectorAll('.feds-navItem:not(.feds-navItem--section, .feds-navItem--mobile-only)');
     const firstElem = localNavItems[0]?.querySelector('a');
     if (!firstElem) {
-      lanaLog({ message: 'GNAV: Incorrect authoring of localnav found.', tags: 'errorType=info,module=gnav' });
+      lanaLog({ message: 'GNAV: Incorrect authoring of localnav found.', tags: 'gnav', errorType: 'info' });
       return;
     }
     const [title, navTitle = ''] = this.getOriginalTitle(firstElem);
     let localNav = document.querySelector('.feds-localnav');
     if (!localNav) {
       lanaLog({
         message: 'GNAV: Localnav does not include \'localnav\' in its name.',
-        tags: 'errorType=info,module=gnav',
+        tags: 'gnav',
+        errorType: 'info',
       });
       localNav = toFragment`<div class="feds-localnav"/>`;
       this.block.after(localNav);
@@ -574,7 +578,7 @@ class Gnav {
 
         resolve();
       } catch (e) {
-        lanaLog({ message: 'GNAV: Error within loadDelayed', e, tags: 'errorType=warn,module=gnav' });
+        lanaLog({ message: 'GNAV: Error within loadDelayed', e, tags: 'gnav', errorType: 'warn' });
         resolve();
       }
     });
@@ -593,7 +597,12 @@ class Gnav {
         await task();
       }
     } catch (e) {
-      lanaLog({ message: 'GNAV: issues within onReady', e, tags: 'errorType=info,module=gnav' });
+      lanaLog({
+        e,
+        tags: 'gnav',
+        errorType: 'info',
+        message: `GNAV: issues within imsReady - ${this.useUniversalNav ? 'decorateUniversalNav' : 'decorateProfile'}`,
+      });
     }
   };
 
@@ -619,7 +628,8 @@ class Gnav {
       lanaLog({
         message: 'GNAV: decorateProfile has failed to fetch profile data',
         e: `${profileData.statusText} url: ${profileData.url}`,
-        tags: 'errorType=info,module=gnav',
+        tags: 'gnav',
+        errorType: 'info',
       });
       return;
     }
@@ -884,7 +894,7 @@ class Gnav {
       if (this.isToggleExpanded()) setHamburgerPadding();
     };
 
-    toggle.addEventListener('click', () => logErrorFor(onToggleClick, 'Toggle click failed', 'errorType=error,module=gnav'));
+    toggle.addEventListener('click', () => logErrorFor(onToggleClick, 'Toggle click failed', 'gnav', 'error'));
 
     const onDeviceChange = () => {
       if (isDesktop.matches) {
@@ -897,7 +907,7 @@ class Gnav {
       }
     };
 
-    isDesktop.addEventListener('change', () => logErrorFor(onDeviceChange, 'Toggle logic failed on device change', 'errorType=error,module=gnav'));
+    isDesktop.addEventListener('change', () => logErrorFor(onDeviceChange, 'Toggle logic failed on device change', 'gnav', 'error'));
 
     return toggle;
   };
@@ -1044,6 +1054,28 @@ class Gnav {
     return 'link';
   };
 
+  // update GNAV popup position based on branch banner
+  updatePopupPosition = (activePopup) => {
+    const popup = activePopup || this.elements.mainNav.querySelector('.feds-navItem--section.feds-dropdown--active .feds-popup');
+    if (!popup) return;
+    const yOffset = window.scrollY || Math.abs(parseInt(document.body.style.top, 10)) || 0;
+    const navOffset = this.block.classList.contains('has-promo')
+      ? 'var(--feds-height-nav) - var(--global-height-navPromo)'
+      : 'var(--feds-height-nav)';
+    popup.removeAttribute('style');
+    popup.style.top = `calc(${yOffset}px - ${navOffset} - 2px)`;
+    const { isPresent, isSticky, height } = getBranchBannerInfo();
+    if (isPresent) {
+      const delta = yOffset - height;
+      if (isSticky) {
+        popup.style.height = `calc(100dvh - ${height}px + 2px)`;
+      } else {
+        popup.style.top = `calc(0px - var(--feds-height-nav) + ${Math.max(delta, 0)}px - 2px)`;
+        popup.style.height = `calc(100dvh + ${Math.min(delta, 0)}px + 2px)`;
+      }
+    }
+  };
+
   decorateMainNavItem = (item, index) => {
     const itemType = this.getMainNavItemType(item);
 
@@ -1148,7 +1180,7 @@ class Gnav {
             decorateLocalNavItems(item, template);
           }
         }
-      }, 'Decorate dropdown failed', 'errorType=info,module=gnav');
+      }, 'Decorate dropdown failed', 'gnav', 'info');
 
       template.addEventListener('click', decorateDropdown);
       decorationTimeout = setTimeout(decorateDropdown, CONFIG.delays.mainNavDropdowns);
@@ -1183,12 +1215,7 @@ class Gnav {
             // document.body.style.top should always be set
             // at this point by calling disableMobileScroll
             if (popup && this.isLocalNav()) {
-              const y = window.scrollY;
-              const iOSy = Math.abs(parseInt(document.body.style.top, 10));
-              const offset = this.block.classList.contains('has-promo')
-                ? 'var(--feds-height-nav) - var(--global-height-navPromo)'
-                : 'var(--feds-height-nav)';
-              popup.style = `top: calc(${iOSy || y || 0}px - ${offset} - 2px`;
+              this.updatePopupPosition(popup);
             }
             makeTabActive(popup);
           } else if (isDesktop.matches && this.newMobileNav && isSectionMenu) {
@@ -1313,14 +1340,15 @@ export default async function init(block) {
     setDisableAEDState();
   }
   const content = await fetchAndProcessPlainHtml({ url });
-  setAsyncDropdownCount(content.querySelectorAll('.large-menu').length);
   if (!content) {
     const error = new Error('Could not create global navigation. Content not found!');
-    error.tags = 'errorType=error,module=gnav';
+    error.tags = 'gnav';
     error.url = url;
-    lanaLog({ message: error.message, error, tags: 'errorType=error,module=gnav' });
+    error.errorType = 'error';
+    lanaLog({ message: error.message, ...error });
     throw error;
   }
+  setAsyncDropdownCount(content.querySelectorAll('.large-menu').length);
   const gnav = new Gnav({
     content,
     block,

diff --git a/libs/blocks/global-navigation/utilities/keyboard/index.js b/libs/blocks/global-navigation/utilities/keyboard/index.js
@@ -82,7 +82,7 @@ class KeyboardNavigation {
       }
       this.desktop = window.matchMedia('(min-width: 900px)');
     } catch (e) {
-      lanaLog({ message: 'Keyboard Navigation failed to load', e, tags: 'errorType=error,module=gnav-keyboard' });
+      lanaLog({ message: 'Keyboard Navigation failed to load', e, tags: 'gnav-keyboard', errorType: 'error' });
     }
   }
 
@@ -93,7 +93,7 @@ class KeyboardNavigation {
           const { default: LnavNavigation } = await import('./localNav.js');
           return new LnavNavigation();
         } catch (e) {
-          lanaLog({ message: 'Keyboard Navigation failed to load for LNAV', e, tags: 'errorType=info,module=gnav-keyboard' });
+          lanaLog({ message: 'Keyboard Navigation failed to load for LNAV', e, tags: 'gnav-keyboard', errorType: 'info' });
           return null;
         }
       })();
@@ -153,7 +153,7 @@ class KeyboardNavigation {
             default:
               break;
           }
-        }, `KeyboardNavigation index failed. ${e.code}`, 'errorType=error,module=gnav-keyboard'));
+        }, `KeyboardNavigation index failed. ${e.code}`, 'gnav-keyboard', 'error'));
       });
   };
 }

diff --git a/libs/blocks/global-navigation/utilities/keyboard/mainNav.js b/libs/blocks/global-navigation/utilities/keyboard/mainNav.js
@@ -109,7 +109,7 @@ class MainNavItem {
           default:
             break;
         }
-      }, `mainNav key failed ${e.code}`, 'errorType=error,module=gnav-keyboard'));
+      }, `mainNav key failed ${e.code}`, 'gnav-keyboard', 'error'));
   }
 
   getState = () => {