[Release] Stage to Main (#3707)

.github/workflows/run-nala-default.yml

@@ -10,6 +10,8 @@ on:
       - stage
       - main
     types: [opened, synchronize, reopened]
+
+  workflow_dispatch:
 
 jobs:
   run-nala-tests:

libs/blocks/adobetv/adobetv.js

@@ -3,7 +3,7 @@ import { createTag } from '../../utils/utils.js';
 
 export default function init(a) {
   a.classList.add('hide-video');
-  const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
+  const bgBlocks = ['aside', 'marquee', 'hero-marquee', 'long-from'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
     if (!a.parentNode) return;

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

@@ -1343,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;
 }

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';
 
@@ -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
@@ -1051,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);
 
@@ -1190,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) {

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

@@ -353,14 +353,13 @@ const decorateMenu = (config) => logErrorFor(async () => {
         config.template.classList.remove(selectors.deferredActiveNavItem.slice(1));
       };
 
+      config.template.classList.add(selectors.activeNavItem.slice(1));
       if (isDesktop.matches) {
         config.template.style.width = `${config.template.offsetWidth}px`;
         config.template.classList.add(selectors.deferredActiveNavItem.slice(1));
         isDesktop.addEventListener('change', resetActiveState, { once: true });
         window.addEventListener('feds:navOverflow', resetActiveState, { once: true });
       }
-
-      config.template.classList.add(selectors.activeNavItem.slice(1));
     }
 
     asyncDropDownCount += 1;

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

@@ -555,3 +555,77 @@ export const dropWhile = (xs, f) => {
   if (f(xs[0])) return dropWhile(xs.slice(1), f);
   return xs;
 };
+
+/**
+ * Initializes a MutationObserver to monitor the body
+  for the addition or removal of a branch banner iframe.
+ * When the branch banner is added or removed, updates the branch banner
+  information and adjusts the local navigation and popup position accordingly.
+ * A callback function to update the popup position when the branch banner is added or removed.
+ * @param {Function} updatePopupPosition
+ */
+export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => {
+  const branchBannerInfo = {
+    isPresent: false,
+    isSticky: false,
+    height: 0,
+  };
+  return [
+    (updatePopupPosition) => {
+      // Create a MutationObserver instance to monitor the body for new child elements
+      const observer = new MutationObserver((mutationsList) => {
+        mutationsList.forEach((mutation) => {
+          if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach((node) => {
+              // Check if the added node has the ID 'branch-banner-iframe'
+              if (node.id === 'branch-banner-iframe') {
+                branchBannerInfo.isPresent = true;
+                // The element is added, now check its height and sticky status
+                // Check if the element has a sticky position
+                branchBannerInfo.isSticky = window.getComputedStyle(node).position === 'fixed';
+                branchBannerInfo.height = node.offsetHeight; // Get the height of the element
+                if (branchBannerInfo.isSticky) {
+                  // Adjust the top position of the lnav to account for the branch banner height
+                  document.querySelector('.feds-localnav').style.top = `${branchBannerInfo.height}px`;
+                } else {
+                  // Add a class to the body to indicate the presence of a non-sticky branch banner
+                  document.body.classList.add('branch-banner-inline');
+                }
+                // Update the popup position when the branch banner is added
+                updatePopupPosition();
+              }
+            });
+
+            mutation.removedNodes.forEach((node) => {
+              // Check if the removed node has the ID 'branch-banner-iframe'
+              if (node.id === 'branch-banner-iframe') {
+                branchBannerInfo.isPresent = false;
+                branchBannerInfo.isSticky = false;
+                branchBannerInfo.height = 0;
+                // Remove the top style attribute when the branch banner is removed
+                document.querySelector('.feds-localnav')?.removeAttribute('style');
+                // Remove the class indicating the presence of a non-sticky branch banner
+                document.body.classList.remove('branch-banner-inline');
+                // Update the popup position when the branch banner is removed
+                updatePopupPosition();
+                // Optional: Disconnect the observer if you no longer need to track it
+                observer.disconnect();
+              }
+            });
+          }
+        });
+      });
+
+      // Start observing the body element for added child nodes
+      observer.observe(document.body, {
+        childList: true, // Watch for added or removed child nodes
+        subtree: false, // Only observe direct children of <body>
+      });
+    },
+    /**
+     * Retrieves the current status of the branch banner.
+     * @returns {Object} An object containing the presence and sticky status of the branch banner.
+     */
+    () => branchBannerInfo,
+  ];
+})();

libs/blocks/section-metadata/section-metadata.css

@@ -257,6 +257,10 @@ main > .section[class*='-up'] > .content {
     order: 1;
   }
 
+  .section[class*='grid-width-'] {
+    display: block;
+  }
+
 }
 
 @media screen and (min-width: 600px) and (max-width: 1200px) {

libs/blocks/video/video.css

@@ -131,7 +131,7 @@ video {
   height: fit-content;
 }
 
-:is(.media .background, .hero-marquee.asset-left .foreground-media) .video-container {
+:is(.media .background, .hero-marquee .foreground-media) .video-container {
   width: 100%;
 }
 

libs/features/personalization/personalization.js

@@ -64,12 +64,12 @@ export const DATA_TYPE = {
 
 const IN_BLOCK_SELECTOR_PREFIX = 'in-block:';
 
+const isDamContent = (path) => path?.includes('/content/dam/');
+
 export const normalizePath = (p, localize = true) => {
   let path = p;
 
-  if (!path?.includes('/')) {
-    return path;
-  }
+  if (isDamContent(path) || !path?.includes('/')) return path;
 
   const config = getConfig();
   if (path.startsWith('https://www.adobe.com/federal/')) {
@@ -123,6 +123,7 @@ const CREATE_CMDS = {
 const COMMANDS_KEYS = {
   remove: 'remove',
   replace: 'replace',
+  updateAttribute: 'updateattribute',
 };
 
 function addIds(el, manifestId, targetManifestId) {
@@ -222,6 +223,34 @@ const COMMANDS = {
       createContent(el, cmd),
     );
   },
+  [COMMANDS_KEYS.updateAttribute]: (el, cmd) => {
+    const { manifestId, targetManifestId } = cmd;
+    if (!cmd.attribute || !cmd.content) return;
+    const [attribute, parameter] = cmd.attribute.split('_');
+
+    let value;
+
+    if (attribute === 'href' && parameter) {
+      const href = el.getAttribute('href');
+      try {
+        const url = new URL(href);
+        const parameters = new URLSearchParams(url.search);
+        parameters.set(parameter, cmd.content);
+        url.search = parameters.toString();
+        value = url.toString();
+      } catch (error) {
+        /* c8 ignore next 2 */
+        console.log(`Invalid updateAttribute URL: ${href}`, error.message || error);
+      }
+    } else {
+      value = cmd.content;
+    }
+
+    if (value) {
+      el.setAttribute(attribute, value);
+      addIds(el, manifestId, targetManifestId);
+    }
+  },
 };
 
 const log = (...msg) => {
@@ -433,22 +462,34 @@ function getModifiers(selector) {
   }
   return { sel, modifiers };
 }
-export function modifyNonFragmentSelector(selector) {
+export function modifyNonFragmentSelector(selector, action) {
   const { sel, modifiers } = getModifiers(selector);
+
+  let modifiedSelector = sel
+    .split('>').join(' > ')
+    .split(',').join(' , ')
+    .replaceAll(/main\s*>?\s*(section\d*)/gi, '$1')
+    .split(/\s+/)
+    .map(modifySelectorTerm)
+    .join(' ')
+    .trim();
+
+  let attribute;
+
+  if (action === COMMANDS_KEYS.updateAttribute) {
+    const string = modifiedSelector.split(' ').pop();
+    attribute = string.replace('.', '');
+    modifiedSelector = modifiedSelector.replace(string, '').trim();
+  }
+
   return {
-    modifiedSelector: sel
-      .split('>').join(' > ')
-      .split(',').join(' , ')
-      .replaceAll(/main\s*>?\s*(section\d*)/gi, '$1')
-      .split(/\s+/)
-      .map(modifySelectorTerm)
-      .join(' ')
-      .trim(),
+    modifiedSelector,
     modifiers,
+    attribute,
   };
 }
 
-function getSelectedElements(sel, rootEl, forceRootEl) {
+function getSelectedElements(sel, rootEl, forceRootEl, action) {
   const root = forceRootEl ? rootEl : document;
   const selector = sel.trim();
   if (!selector) return {};
@@ -464,7 +505,12 @@ function getSelectedElements(sel, rootEl, forceRootEl) {
       return { els: [], modifiers: [] };
     }
   }
-  const { modifiedSelector, modifiers } = modifyNonFragmentSelector(selector);
+  const {
+    modifiedSelector,
+    modifiers,
+    attribute,
+  } = modifyNonFragmentSelector(selector, action);
+
   let els;
   try {
     els = root.querySelectorAll(modifiedSelector);
@@ -473,10 +519,11 @@ function getSelectedElements(sel, rootEl, forceRootEl) {
     log('Invalid selector: ', selector);
     return null;
   }
-  if (modifiers.includes(FLAGS.all) || !els.length) return { els, modifiers };
+  if (modifiers.includes(FLAGS.all) || !els.length) return { els, modifiers, attribute };
   els = [els[0]];
-  return { els, modifiers };
+  return { els, modifiers, attribute };
 }
+
 const addHash = (url, newHash) => {
   if (!newHash) return url;
   try {
@@ -523,8 +570,13 @@ export function handleCommands(
       cmd.selectorType = IN_BLOCK_SELECTOR_PREFIX;
       return;
     }
-    const { els, modifiers } = getSelectedElements(selector, rootEl, forceRootEl);
-    cmd.modifiers = modifiers;
+    const {
+      els,
+      modifiers,
+      attribute,
+    } = getSelectedElements(selector, rootEl, forceRootEl, action);
+
+    Object.assign(cmd, { modifiers, attribute });
 
     els?.forEach((el) => {
       if (!el
@@ -1195,7 +1247,7 @@ function sendTargetResponseAnalytics(failure, responseStart, timeoutLocal, messa
         },
       },
       data:
-       { _adobe_corpnew: { digitalData: { primaryEvent: { eventInfo: { eventName: val } } } } },
+        { _adobe_corpnew: { digitalData: { primaryEvent: { eventInfo: { eventName: val } } } } },
     });
   }, { once: true });
 }
@@ -1290,6 +1342,7 @@ export async function init(enablements = {}) {
       enablePersV2,
       hybridPersEnabled,
     };
+
     manifests = manifests.concat(await combineMepSources(pzn, promo, mepParam));
     manifests?.forEach((manifest) => {
       if (manifest.disabled) return;