[MWPW-151517] - Remove condition for promobar hidden on mobile from g…

…nav (#2538) * Remove condition for promobar hidden on mobile from gnav * Fix lint and UT * Adjust height for feds promobar * brnach banner not shown in case feds promobar is present * Add UT for promobar hide/show on mobile * Lint Fix * Removed condition for on and off feds promobar on mobile to avoid CLS issue * Remove UT changes not needed now * fixed mega menu height if promobar is present * Fix review comments * Fix megamenu scroll issue * reverted condition * remove flex wrap * add initial visibility hidden for gnav --------- Co-authored-by: nishantka <nishantkaushikadobe@gmail.com>
adobecom · Jul 29, 2024 · 386f817 · 386f817
1 parent add9745
commit 386f817
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css
@@ -84,7 +84,6 @@ header.global-navigation {
 
 /* Promo */
 .global-navigation .aside.promobar {
-  display: none; /* For when someone switches from desktop to mobile */
   z-index: 1;
 }
 
@@ -569,6 +568,11 @@ header.global-navigation {
     padding: 40px 0 0;
     max-height: calc(100vh - 100%);
     overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .global-navigation.has-promo .feds-navItem--megaMenu .feds-popup {
+    max-height: calc(100vh - 100% - var(--global-height-navPromo));
   }
 
   [dir = "rtl"] .feds-navItem--megaMenu .feds-popup {

diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -777,7 +777,7 @@ class Gnav {
   decorateAside = async () => {
     this.elements.aside = '';
     const promoPath = getMetadata('gnav-promo-source');
-    if (!isDesktop.matches || !promoPath) {
+    if (!promoPath) {
       this.block.classList.remove('has-promo');
       return this.elements.aside;
     }

diff --git a/libs/blocks/mobile-app-banner/mobile-app-banner.js b/libs/blocks/mobile-app-banner/mobile-app-banner.js
@@ -59,7 +59,7 @@ function branchInit(key) {
 /* eslint-enable */
 export default async function init(el) {
   const header = document.querySelector('.global-navigation');
-  if (!header) return;
+  if (!header || header.classList.contains('has-promo')) return;
   const classListArray = Array.from(el.classList);
   const product = classListArray.find((token) => token.startsWith('product-')).split('-')[1];
   const key = await getKey(product);

diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -4,7 +4,7 @@
   --global-height-nav: 64px;
   --global-height-breadcrumbs: 33px;
   /* stylelint-disable-next-line custom-property-pattern */
-  --global-height-navPromo: 65px;
+  --global-height-navPromo: 72px;
   --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
 
   /* Colors */
@@ -708,13 +708,12 @@ header.global-navigation {
   visibility: hidden;
 }
 
-@media (min-width: 900px) {
-  header.global-navigation.has-promo {
-    height: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
-    min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
-  }
+header.global-navigation.has-promo {
+  height: auto;
+  min-height: calc(var(--global-height-nav) + var(--global-height-navPromo));
+}
 
+@media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
     padding-bottom: var(--global-height-breadcrumbs);
   }

diff --git a/test/blocks/global-navigation/gnav-promo.test.js b/test/blocks/global-navigation/gnav-promo.test.js
@@ -47,13 +47,4 @@ describe('Promo', () => {
     });
     promoMeta.remove();
   });
-
-  it('doesn\'t exist on mobile', async () => {
-    const promoMeta = toFragment`<meta name="gnav-promo-source" content="http://localhost:2000/fragments/correct-promo-fragment">`;
-    document.head.append(promoMeta);
-    const nav = await createFullGlobalNavigation({ viewport: 'mobile', hasPromo: true });
-    expect(nav.block.classList.contains('has-promo')).to.be.false;
-    const asideElem = nav.block.querySelector('.aside.promobar');
-    expect(asideElem).to.not.exist;
-  });
 });