From 05ebf1f4246d6c562d87e2e1f26efa7b03a342fa Mon Sep 17 00:00:00 2001 From: Dev Ashish Saradhana <41122199+Deva309@users.noreply.github.com> Date: Thu, 26 Sep 2024 20:17:33 +0530 Subject: [PATCH] [MWPW-158932] - Add support for custom links through link group in parallel 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 --- .../global-navigation/global-navigation.css | 6 +- .../global-navigation/global-navigation.js | 37 +++++++++-- libs/navigation/navigation.js | 2 +- libs/styles/styles.css | 4 ++ .../global-navigation.test.js | 15 +++++ .../navigation-with-custom-links.plain.js | 62 +++++++++++++++++++ .../global-navigation/test-utilities.js | 1 + 7 files changed, 120 insertions(+), 7 deletions(-) create mode 100644 test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index cf32fe32ec..90e8f65b0d 100644 --- 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 index 72777e5c92..439bbebfb8 100644 --- 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 })} `, 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` -
+
${linkElem}
`; - return addMepHighlightAndTargetId(linkTemplate, item); + return removeCustomLink ? null : addMepHighlightAndTargetId(linkTemplate, item); } case 'text': return addMepHighlightAndTargetId(toFragment`
diff --git a/libs/navigation/navigation.js b/libs/navigation/navigation.js index afd835a982..121ab957be 100644 --- 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 index 749ca43a02..335ef59b0d 100644 --- 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 index 3c9cf81e38..d28284a70f 100644 --- 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 new file mode 100644 index 0000000000..b58cb5259b --- /dev/null +++ b/test/blocks/global-navigation/mocks/navigation-with-custom-links.plain.js @@ -0,0 +1,62 @@ +export default `
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+

Home

+

Apps

+

Learn

+
+
+
+
+
+
+
+
+
+
+
+`; diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js index 9e38a606b8..fab0999332 100644 --- 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 = {