Merge remote-tracking branch 'upstream/stage' into MWPW-159028

adobecom · Sep 26, 2024 · 5819c80 · 5819c80
2 parents d932c42 + 05ebf1f
commit 5819c80
Show file tree

Hide file tree

Showing 23 changed files with 819 additions and 212 deletions.
diff --git a/libs/blocks/brick/brick.css b/libs/blocks/brick/brick.css
@@ -20,6 +20,14 @@
   color: var(--color-white);
 }
 
+.brick.border {
+  border: 1px solid var(--color-gray-200);
+}
+
+.brick.click > a {
+  text-decoration: none;
+}
+
 .brick .background {
   position: absolute;
   bottom: 0;
@@ -30,7 +38,7 @@
 }
 
 .brick .foreground {
-  position: relative; 
+  position: relative;
   display: flex;
   flex-grow: 1;
   padding: var(--spacing-m);
@@ -116,17 +124,31 @@
 .brick .foreground p.action-area {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: var(--spacing-s);
   margin-top: var(--spacing-s);
 }
 
+.brick .icon-stack-area li,
+.brick .icon-stack-area li a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  text-align: start;
+  flex-shrink: 0;
+}
+
 .brick .icon-stack-area li picture {
   display: flex;
   margin: 0;
   padding: 0;
   flex-shrink: 0;
 }
 
+.brick .foreground a:not([class]),
+.brick .foreground span.first-link {
+  font-weight: 700;
+}
+
 .brick .foreground .icon-area picture {
   display: flex;
 }
@@ -145,10 +167,6 @@
   width: auto;
 }
 
-.brick.click > a {
-  text-decoration: none;
-}
-
 .brick .icon-stack-area {
   display: flex;
   flex-flow: row wrap;
@@ -165,25 +183,6 @@
   width: auto;
 }
 
-.brick .icon-stack-area li,
-.brick .icon-stack-area li a {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  text-align: left;
-  flex-shrink: 0;
-}
-
-.brick .foreground a:not([class]),
-.brick .foreground span.first-link {
-  font-weight: 700;
-}
-
-[dir="rtl"] .brick .icon-stack-area li,
-[dir="rtl"] .brick .icon-stack-area li a {
-  text-align: right;
-}
-
 .brick.click a.foreground .first-link:not([class*="button"]) {
   color: var(--link-color);
   text-decoration: none;
@@ -295,6 +294,12 @@
     width: 41.66%;
   }
 
+  .brick.split.row .foreground,
+  .brick.split.row .foreground .brick-media,
+  .brick.split.row .foreground picture {
+    border-radius: inherit;
+  }
+
   .brick.split.horizontal-center .foreground .brick-text,
   .brick.split.center .foreground .brick-text {
     margin: 0;
@@ -320,12 +325,6 @@
     grid-column: 8 / span 5;
   }
 
-  .brick.split.row .foreground,
-  .brick.split.row .foreground .brick-media,
-  .brick.split.row .foreground picture {
-    border-radius: inherit;
-  }
-
   .brick.stack .foreground .brick-media picture,
   .brick.stack .foreground .brick-media img,
   .brick.stack .foreground .brick-media video {
@@ -342,7 +341,7 @@
     margin: 0;
     position: absolute;
   }
-  
+
   .brick .foreground .brick-media video,
   .brick.split.row .foreground .brick-media video {
     object-fit: fill;

diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -61,7 +61,7 @@ header.global-navigation {
   right: 20px; /* hamburger menu gutter */
   display: none;
   flex-direction: column;
-  height: 100vh;
+  height: calc(100vh - 100% - 1px);
   border-top: 1px solid var(--feds-borderColor);
   background-color: var(--feds-background-nav);
 }
@@ -562,6 +562,10 @@ header.global-navigation {
     flex-direction: initial;
   }
 
+  .feds-navItem--mobile-only {
+    display: none;
+  }
+
   .feds-navItem--megaMenu {
     position: static;
   }

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -271,6 +271,7 @@ class Gnav {
   constructor({ content, block } = {}) {
     this.content = content;
     this.block = block;
+    this.customLinks = getConfig()?.customLinks ? getConfig().customLinks.split(',') : [];
 
     this.blocks = {
       profile: {
@@ -639,9 +640,12 @@ class Gnav {
     const state = getMetadata('app-prompt')?.toLowerCase();
     const entName = getMetadata('app-prompt-entitlement')?.toLowerCase();
     const promptPath = getMetadata('app-prompt-path')?.toLowerCase();
+    const hasMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Touch/i.test(navigator.userAgent);
+
     if (state === 'off'
       || !window.adobeIMS?.isSignedInUser()
       || !isDesktop.matches
+      || hasMobileUA
       || !entName?.length
       || !promptPath?.length) return;
 
@@ -672,6 +676,11 @@ class Gnav {
     const toggle = this.elements.mobileToggle;
     const isExpanded = this.isToggleExpanded();
     toggle?.setAttribute('aria-expanded', !isExpanded);
+    if (!isExpanded) {
+      document.body.classList.add('disable-scroll');
+    } else {
+      document.body.classList.remove('disable-scroll');
+    }
     this.elements.navWrapper?.classList?.toggle('feds-nav-wrapper--expanded', !isExpanded);
     closeAllDropdowns();
     setCurtainState(!isExpanded);
@@ -696,7 +705,7 @@ class Gnav {
         this.elements.mainNav.style.removeProperty('padding-bottom');
       } else {
         const offset = Math.ceil(this.elements.topnavWrapper.getBoundingClientRect().bottom);
-        this.elements.mainNav.style.setProperty('padding-bottom', `${offset}px`);
+        this.elements.mainNav.style.setProperty('padding-bottom', `${2 * offset}px`);
       }
     };
 
@@ -718,6 +727,7 @@ class Gnav {
       if (isDesktop.matches) {
         toggle.setAttribute('aria-expanded', false);
         this.elements.navWrapper.classList.remove('feds-nav-wrapper--expanded');
+        document.body.classList.remove('disable-scroll');
         setCurtainState(false);
         closeAllDropdowns();
         this.blocks?.search?.instance?.clearSearchForm();
@@ -836,7 +846,10 @@ class Gnav {
 
     for await (const [index, item] of items.entries()) {
       await yieldToMain();
-      this.elements.mainNav.appendChild(this.decorateMainNavItem(item, index));
+      const mainNavItem = this.decorateMainNavItem(item, index);
+      if (mainNavItem) {
+        this.elements.mainNav.appendChild(mainNavItem);
+      }
     }
 
     if (!hasActiveLink()) {
@@ -855,8 +868,9 @@ class Gnav {
   // eslint-disable-next-line class-methods-use-this
   getMainNavItemType = (item) => {
     const itemTopParent = item.closest('div');
+    const isLinkGroup = !!item.closest('.link-group');
     const hasSyncDropdown = itemTopParent instanceof HTMLElement
-      && itemTopParent.childElementCount > 1;
+      && !isLinkGroup && itemTopParent.childElementCount > 1;
     if (hasSyncDropdown) return 'syncDropdownTrigger';
     const hasAsyncDropdown = itemTopParent instanceof HTMLElement
       && itemTopParent.closest('.large-menu') instanceof HTMLElement;
@@ -945,6 +959,8 @@ class Gnav {
             ${decorateCta({ elem: item, type: itemType, index: index + 1 })}
           </div>`, item);
       case 'link': {
+        let customLinkModifier = '';
+        let removeCustomLink = false;
         const linkElem = item.querySelector('a');
         linkElem.className = 'feds-navLink';
         linkElem.setAttribute('daa-ll', getAnalyticsValue(linkElem.textContent, index + 1));
@@ -956,11 +972,25 @@ class Gnav {
           linkElem.setAttribute('tabindex', 0);
         }
 
+        const customLinksSection = item.closest('.link-group');
+        if (customLinksSection) {
+          const removeLink = () => {
+            const url = new URL(linkElem.href);
+            linkElem.setAttribute('href', `${url.origin}${url.pathname}${url.search}`);
+            const linkHash = url.hash.slice(2);
+            return !this.customLinks.includes(linkHash);
+          };
+          [...customLinksSection.classList].splice(1).forEach((className) => {
+            customLinkModifier = ` feds-navItem--${className}`;
+          });
+          removeCustomLink = removeLink();
+        }
+
         const linkTemplate = toFragment`
-          <div class="feds-navItem${activeModifier}">
+          <div class="feds-navItem${activeModifier}${customLinkModifier}">
             ${linkElem}
           </div>`;
-        return addMepHighlightAndTargetId(linkTemplate, item);
+        return removeCustomLink ? null : addMepHighlightAndTargetId(linkTemplate, item);
       }
       case 'text':
         return addMepHighlightAndTargetId(toFragment`<div class="feds-navItem feds-navItem--centered">

diff --git a/libs/blocks/merch-card/merch-card.css b/libs/blocks/merch-card/merch-card.css
@@ -16,6 +16,10 @@ div[class*="-merch-card"] > div,
   display: none;
  }
 
+ merch-card .body-lower > hr {
+  width: 100%
+ }
+
  .merch-card-price {
   margin-top: 8px;
   margin-bottom: 16px;

diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -359,6 +359,22 @@ const simplifyHrs = (el) => {
       hr.parentElement.replaceWith(hr);
     }
   });
+  if (el.variant === PRODUCT) {
+    const calloutContent = el.querySelector('div[slot="callout-content"]');
+    const bodySlot = el.querySelector('div[slot="body-xs"]');
+    if (calloutContent && bodySlot) {
+      const bodyLowerContent = createTag('div', { slot: 'body-lower' });
+      const elements = [...bodySlot.children];
+      elements.forEach((element) => {
+        if (element.tagName !== 'P') {
+          bodyLowerContent.append(element);
+        }
+      });
+      if (bodyLowerContent.childNodes.length > 0) {
+        calloutContent.parentElement.appendChild(bodyLowerContent);
+      }
+    }
+  }
 };
 
 const getMiniCompareChartFooterRows = (el) => {
@@ -496,7 +512,7 @@ export default async function init(el) {
     }
   }
   let footerRows;
-  if ([MINI_COMPARE_CHART, PLANS, SEGMENT].includes(cardType)) {
+  if ([MINI_COMPARE_CHART, PLANS, SEGMENT, PRODUCT].includes(cardType)) {
     intersectionObserver.observe(merchCard);
   }
   if (cardType === MINI_COMPARE_CHART) {

diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js