[MWPW-159905] - Add config for full width and no border along with jarvis fix for standalone GNAV

libs/blocks/global-navigation/global-navigation.js

@@ -967,17 +967,10 @@ class Gnav {
         let customLinkModifier = '';
         let removeCustomLink = false;
         const linkElem = item.querySelector('a');
+        const customLinksSection = item.closest('.link-group');
         linkElem.className = 'feds-navLink';
         linkElem.setAttribute('daa-ll', getAnalyticsValue(linkElem.textContent, index + 1));
-        if (itemHasActiveLink) {
-          linkElem.removeAttribute('href');
-          linkElem.setAttribute('role', 'link');
-          linkElem.setAttribute('aria-disabled', 'true');
-          linkElem.setAttribute('aria-current', 'page');
-          linkElem.setAttribute('tabindex', 0);
-        }
 
-        const customLinksSection = item.closest('.link-group');
         if (customLinksSection) {
           const removeLink = () => {
             const url = new URL(linkElem.href);
@@ -991,6 +984,14 @@ class Gnav {
           removeCustomLink = removeLink();
         }
 
+        if (itemHasActiveLink) {
+          linkElem.removeAttribute('href');
+          linkElem.setAttribute('role', 'link');
+          linkElem.setAttribute('aria-disabled', 'true');
+          linkElem.setAttribute('aria-current', 'page');
+          linkElem.setAttribute('tabindex', 0);
+        }
+
         const linkTemplate = toFragment`
           <div class="feds-navItem${activeModifier}${customLinkModifier}">
             ${linkElem}

libs/navigation/bootstrapper.js

@@ -1,17 +1,28 @@
 export default async function bootstrapBlock(miloLibs, blockConfig) {
-  const { name, targetEl } = blockConfig;
+  const { name, targetEl, layout, noBorder } = blockConfig;
   const { getConfig, createTag, loadLink, loadScript } = await import(`${miloLibs}/utils/utils.js`);
   const { default: initBlock } = await import(`${miloLibs}/blocks/${name}/${name}.js`);
 
   const styles = [`${miloLibs}/blocks/${name}/${name}.css`, `${miloLibs}/navigation/navigation.css`];
   styles.forEach((url) => loadLink(url, { rel: 'stylesheet' }));
 
+  const setNavLayout = () => {
+    const element = document.querySelector(targetEl);
+    if (layout === 'fullWidth') {
+      element.classList.add('feds--full-width');
+    }
+    if (noBorder) {
+      element.classList.add('feds--no-border');
+    }
+  };
+
   if (!document.querySelector(targetEl)) {
     const block = createTag(targetEl, { class: name });
     document.body[blockConfig.appendType](block);
   }
   // Configure Unav components and redirect uri
   if (blockConfig.targetEl === 'header') {
+    setNavLayout();
     const metaTags = [
       { key: 'unavComponents', name: 'universal-nav' },
       { key: 'redirect', name: 'adobe-home-redirect' },

libs/navigation/navigation.css

@@ -37,6 +37,10 @@ header.global-navigation, header.global-navigation.feds--dark {
     color: #136FF6;
   }
 
+  .feds--no-border .feds-topnav-wrapper {
+    border-bottom: none;
+  }
+
   .feds--full-width .feds-topnav {
     max-width: none;
     padding: 0 15px;

libs/navigation/navigation.js

@@ -74,7 +74,12 @@ export default async function loadBlock(configs, customLib) {
       if (configBlock) {
         await bootstrapBlock(`${miloLibs}/libs`, {
           ...block,
-          ...(block.key === 'header' && { unavComponents: configBlock.unav?.unavComponents, redirect: configBlock.redirect }),
+          ...(block.key === 'header' && {
+            unavComponents: configBlock.unav?.unavComponents,
+            redirect: configBlock.redirect,
+            layout: configBlock.layout,
+            noBorder: configBlock.noBorder,
+          }),
         });
         configBlock.onReady?.();
       }

test/navigation/bootstrapper.test.js

@@ -64,4 +64,18 @@ describe('Bootstrapper', async () => {
     const el = document.getElementsByTagName('header');
     expect(el).to.exist;
   });
+
+  it('Renders the header with full width', async () => {
+    blockConfig.header.layout = 'fullWidth';
+    await loadBlock(miloLibs, blockConfig.header);
+    const el = document.querySelector('header');
+    expect(el.classList.contains('feds--full-width')).to.be.true;
+  });
+
+  it('Renders the header with no border bottom', async () => {
+    blockConfig.header.noBorder = true;
+    await loadBlock(miloLibs, blockConfig.header);
+    const el = document.querySelector('header');
+    expect(el.classList.contains('feds--no-border')).to.be.true;
+  });
 });