diff --git a/libs/blocks/fallback/fallback.js b/libs/blocks/fallback/fallback.js index cb5f2222ad..fc04eb71f3 100644 --- a/libs/blocks/fallback/fallback.js +++ b/libs/blocks/fallback/fallback.js @@ -17,6 +17,7 @@ const SYNTHETIC_BLOCKS = [ 'region-selector', 'search', 'social', + 'product-entry-cta', ]; // eslint-disable-next-line import/prefer-default-export diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index 8f984b225d..f361fa0066 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -86,6 +86,11 @@ header.global-navigation { z-index: 1; } +/* Product Entry CTA */ +.feds-product-entry-cta{ + align-items: center; +} + /* Hamburger toggle */ .feds-toggle { width: 60px; @@ -488,6 +493,12 @@ header.global-navigation { right: auto; } +@media (max-width: 900px) { + .feds-product-entry-cta { + display: none; + } +} + /* Desktop styles */ @media (min-width: 900px) { /* General */ diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index dd8dbe3179..4b71c89255 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -347,6 +347,14 @@ class Gnav { lanaLog({ message: 'GNAV: Error with IMS', e, tags: 'errorType=info,module=gnav' }); })); + decorateProductEntryCTA = () => { + const button = this.content.querySelector('.product-entry-cta a'); + if (!button) return null; + const cta = decorateCta({ elem: button, type: this.getMainNavItemType(button) }); + cta.closest('.feds-cta-wrapper').classList.add('feds-product-entry-cta'); + return cta; + }; + decorateTopNav = () => { this.elements.mobileToggle = this.decorateToggle(); this.elements.topnav = toFragment` @@ -356,6 +364,7 @@ class Gnav { ${this.decorateBrand()} ${this.elements.navWrapper} + ${getMetadata('product-entry-cta')?.toLowerCase() === 'on' ? this.decorateProductEntryCTA() : ''} ${getConfig().searchEnabled === 'on' ? toFragment`
` : ''} ${this.useUniversalNav ? this.blocks.universalNav : ''} ${(!this.useUniversalNav && this.blocks.profile.rawElem) ? this.blocks.profile.decoratedElem : ''} diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index 388233b81c..7bee7cdcc2 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -21,6 +21,7 @@ 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 noDropdownNav from './mocks/global-navigation-no-dropdown.plain.js'; +import productEntryCTA from './mocks/global-navigation-product-entry-cta.plain.js'; import { getConfig } from '../../../tools/send-to-caas/send-utils.js'; // TODO @@ -665,6 +666,22 @@ describe('global navigation', () => { }); }); + describe('Product Entry CTA feature in global navigation', () => { + it('should not append the feds-product-entry-cta class when product entry cta is disabled', async () => { + document.head.innerHTML = ''; + const gnav = await createFullGlobalNavigation({ globalNavigation: productEntryCTA }); + gnav.decorateProductEntryCTA(); + expect(document.querySelector(selectors.topNav).querySelector('.feds-cta-wrapper.feds-product-entry-cta')).to.not.exist; + }); + + it('should append the feds-product-entry-cta class when product entry cta is enabled', async () => { + document.head.innerHTML = ''; + const gnav = await createFullGlobalNavigation({ globalNavigation: productEntryCTA }); + gnav.decorateProductEntryCTA(); + expect(document.querySelector(selectors.topNav).querySelector('.feds-cta-wrapper.feds-product-entry-cta')).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,apps,learn'; diff --git a/test/blocks/global-navigation/mocks/global-navigation-product-entry-cta.plain.js b/test/blocks/global-navigation/mocks/global-navigation-product-entry-cta.plain.js new file mode 100644 index 0000000000..1418e583df --- /dev/null +++ b/test/blocks/global-navigation/mocks/global-navigation-product-entry-cta.plain.js @@ -0,0 +1,9 @@ +export default ` +