[MWPW-158932] - Add support for custom links through link group in pa…

…rallel to large menu. (#2942) * Add support for custom links through link group in parallet to large menu * Added UT for the changes * lint fixes * Bug fix mwpw-159018 * Bug fix mwpw-159018 * Bug fix mwpw-159018
adobecom · Sep 26, 2024 · 05ebf1f · 05ebf1f
1 parent e364702
commit 05ebf1f
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 7 deletions.
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: {
@@ -675,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);
@@ -699,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`);
       }
     };
 
@@ -721,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();
@@ -839,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()) {
@@ -858,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;
@@ -948,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));
@@ -959,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/navigation/navigation.js b/libs/navigation/navigation.js
@@ -4,7 +4,7 @@ const blockConfig = [
     name: 'global-navigation',
     targetEl: 'header',
     appendType: 'prepend',
-    params: ['imsClientId', 'searchEnabled', 'unavHelpChildren'],
+    params: ['imsClientId', 'searchEnabled', 'unavHelpChildren', 'customLinks'],
   },
   {
     key: 'footer',

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -732,6 +732,10 @@ header.global-navigation.has-promo {
   display: none !important;
 }
 
+.disable-scroll {
+  overflow: hidden;
+}
+
 h1, h2, h3, h4, h5, h6 {
   scroll-margin-top: var(--feds-totalheight-nav);
 }

diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js
@@ -18,6 +18,7 @@ import { isDesktop, isTangentToViewport, toFragment } from '../../../libs/blocks
 import logoOnlyNav from './mocks/global-navigation-only-logo.plain.js';
 import longNav from './mocks/global-navigation-long.plain.js';
 import darkNav from './mocks/dark-global-navigation.plain.js';
+import navigationWithCustomLinks from './mocks/navigation-with-custom-links.plain.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
 import { getConfig } from '../../../tools/send-to-caas/send-utils.js';
 
@@ -645,4 +646,18 @@ describe('global navigation', () => {
       expect(document.querySelector(selectors.topNavWrapper).classList.contains('feds-client-search')).to.exist;
     });
   });
+
+  describe('Custom Links for mobile hamburger menu', () => {
+    it('Add custom links through Link Group block in parallel to large menu\'s', async () => {
+      const customLinks = 'home,learn';
+      await createFullGlobalNavigation({
+        viewport: 'mobile',
+        globalNavigation: navigationWithCustomLinks,
+        customConfig: { customLinks },
+      });
+      expect(
+        document.querySelectorAll(selectors.customMobileLink).length,
+      ).to.equal(customLinks.split(',').length);
+    });
+  });
 });
diff --git a/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js b/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js
@@ -0,0 +1,62 @@
+export default `<body><div>
+<div class="gnav-brand logo">
+  <div>
+    <div><a href="https://www.adobe.com/">Adobe</a></div>
+  </div>
+</div>
+</div>
+<div>
+<div class="large-menu section">
+  <div>
+    <div>
+      <h2 id="creativity--design"><a href="/federal/globalnav/acom/sections/section-menu-cc.html">Creativity &amp; Design</a></h2>
+    </div>
+  </div>
+</div>
+</div>
+<div>
+<div class="large-menu section">
+  <div>
+    <div>
+      <h2 id="pdf--e-signatures"><a href="/federal/globalnav/acom/sections/section-menu-dc.html">PDF &amp; E-signatures</a></h2>
+    </div>
+  </div>
+</div>
+</div>
+<div>
+<div class="large-menu section">
+  <div>
+    <div>
+      <h2 id="marketing--commerce"><a href="/federal/globalnav/acom/sections/section-menu-dx.html">Marketing &amp; Commerce</a></h2>
+    </div>
+  </div>
+</div>
+</div>
+<div>
+<div class="large-menu section">
+  <div>
+    <div>
+      <h2 id="help--support"><a href="/federal/globalnav/acom/sections/section-menu-help.html">Help &amp; Support</a></h2>
+    </div>
+  </div>
+</div>
+</div>
+<div>
+<div class="link-group mobile-only">
+  <div>
+    <div>
+      <h2 id="home"><a href="https://www.google.com/#_home">Home</a></h2>
+      <h2 id="apps"><a href="https://www.google.com/#_apps">Apps</a></h2>
+      <h2 id="learn"><a href="https://www.google.com/#_learn">Learn</a></h2>
+    </div>
+  </div>
+</div>
+</div>
+<div>
+<div class="profile">
+  <div>
+    <div></div>
+  </div>
+</div>
+</div>
+</body>`;
diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js
@@ -42,6 +42,7 @@ export const selectors = {
   mainNav: '.feds-nav',
   imsSignIn: '.feds-signIn',
   crossCloudMenuWrapper: '.feds-crossCloudMenu-wrapper',
+  customMobileLink: '.feds-navItem--mobile-only',
 };
 
 export const viewports = {