feat(cxl-ui): feature parity with old nav component

conversionxl · Oct 11, 2023 · b35e2de · b35e2de
1 parent 66b13c3
commit b35e2de
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 65 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss
@@ -1,6 +1,6 @@
 @use "../mq";
 
-:host([theme~="menu-bar-item"].section-header) {
+:host([theme~="cxl-navigation"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
   text-transform: uppercase;
@@ -10,22 +10,22 @@
   }
 }
 
-:host([theme~="menu-bar-item"].has-description) {
+:host([theme~="cxl-navigation"].has-description) {
   [part="content"] ::slotted(.vaadin-context-menu-item--description) {
     font-weight: 400;
   }
 }
 
-:host([theme~="menu-bar-item"]:not(.section-header):hover),
-:host([theme~="menu-bar-item"]:not(.section-header)[expanded]) {
+:host([theme~="cxl-navigation"]:not(.section-header):hover),
+:host([theme~="cxl-navigation"]:not(.section-header)[expanded]) {
   color: var(--lumo-primary-color);
 
   &::after {
     color: var(--lumo-primary-color);
   }
 }
 
-:host([theme~="menu-bar-item"].vaadin-menu-item.vaadin-context-menu-parent-item) {
+:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item) {
   padding-block: 0;
 
   &::after {
@@ -35,12 +35,12 @@
 }
 
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="menu-bar-item"].vaadin-menu-item.back-button-menu-item) {
+  :host([theme~="cxl-navigation"].vaadin-menu-item.back-button-menu-item) {
     display: none;
   }
 }
 
-:host([theme~="menu-bar-item"]) [part="checkmark"][aria-hidden="true"] {
+:host([theme~="cxl-maerketing-nav"]) [part="checkmark"][aria-hidden="true"] {
   display: none;
 }
 

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss
@@ -13,11 +13,7 @@
   }
 }
 
-:host([theme~="cxl-marketing-nav"].vaadin-menu-list-box) {
-  [part="items"] ::slotted(.vaadin-menu-item) {
-    padding-right: var(--lumo-space-m);
-    padding-left: var(--lumo-space-m);
-  }
+:host([theme~="cxl-navigation"].vaadin-menu-list-box) {
 
   [part="items"] ::slotted(.section-header.vaadin-menu-item:not(.section-header):hover:not([disabled])) {
     /* revert default vaadin-context-menu-list-box hovering style, without losing other styles styles applied */
@@ -27,17 +23,16 @@
   [part='items'] ::slotted(.vaadin-menu-item.section-header:hover) {
     background-color: unset;
   }
-
 }
 
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"]) {
+  :host([theme~="cxl-markting-nav"]) {
     display: block;
     width: var(--cxl-vaadin-context-menu-item-max-width);
     padding: 0 var(--lumo-space-s);
   }
 }
 
-:host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
+:host([theme~="cxl-navigation"]) [part="items"] ::slotted(.vaadin-menu-item) {
   border-radius: 0;
 }
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar.scss
@@ -0,0 +1,35 @@
+[part="container"] {
+
+  .menu-item-split-nav {
+    /* stylelint-disable-next-line declaration-no-important */
+    margin-left: auto !important;
+  }
+
+  [part="overflow-button"] {
+    ::before {
+      content: none;
+    }
+
+    vaadin-icon {
+      height: var(--lumo-icon-size-s);
+
+      svg {
+        fill: var(--lumo-shade);
+      }
+
+      &.close-icon {
+        display: none;
+      }
+    }
+
+    &[expanded] {
+      vaadin-icon.close-icon {
+        display: block;
+      } 
+
+      vaadin-icon.menu-icon {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/packages/cxl-lumo-styles/src/themes.js b/packages/cxl-lumo-styles/src/themes.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import cxlAccordionCardStyles from './styles/themes/cxl-accordion-card-css.js';
 import cxlCheckoutDetailsStyles from './styles/themes/cxl-checkout-details-css.js';
@@ -6,6 +7,7 @@ import cxlVaadinAccordionStyles from './styles/themes/vaadin-accordion-css.js';
 import cxlVaadinAccordionPanelStyles from './styles/themes/vaadin-accordion-panel-css.js';
 import cxlVaadinContextMenuItemStyles from './styles/themes/vaadin-context-menu-item-css.js';
 import cxlVaadinContextMenuListBoxStyles from './styles/themes/vaadin-context-menu-list-box-css.js';
+import cxlVaadinMenuBarStyles from './styles/themes/vaadin-menu-bar-css.js';
 import cxlVaadinDetailsStyles from './styles/themes/vaadin-details-css.js';
 import cxlVaadinIconStyles from './styles/themes/vaadin-icon-css.js';
 import cxlVaadinHorizontalLayoutStyles from './styles/themes/vaadin-horizontal-layout-css.js';
@@ -37,6 +39,9 @@ registerStyles('vaadin-context-menu-item', cxlVaadinContextMenuItemStyles, {
 registerStyles('vaadin-context-menu-list-box', cxlVaadinContextMenuListBoxStyles, {
   moduleId: 'cxl-vaadin-context-menu-list-box-styles',
 });
+registerStyles('vaadin-menu-bar', cxlVaadinMenuBarStyles, {
+  moduleId: 'cxl-vaadin-menu-bar-styles',
+});
 registerStyles('vaadin-details', cxlVaadinDetailsStyles, {
   moduleId: 'cxl-vaadin-details-styles',
 });

diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss
@@ -5,6 +5,7 @@
 
   ::part(menu-bar-button) {
     color: var(--lumo-shade);
+    margin-inline: var(--lumo-space-s);
   }
 
   ::part(overflow-button) {
@@ -48,24 +49,12 @@
     }
 
     ::part(menu-bar-button),
-    ::slotted(.menu-item) {
-      white-space: nowrap;
+    ::slotted(.menu-item),
+    .menu-item {
       min-width: min-content;
-
-      &.menu-item-split-nav {
-        margin-left: auto;
-      }
-    }
-
-    ::part(menu-bar-button) {
-      ::slotted(.menu-item-split-nav) & {
-        margin-left: auto;
-      }
+      white-space: nowrap;
     }
 
-
-
-
     /* stylelint-disable-next-line selector-no-qualifying-type */
     &#menu-global-items {
       background-color: var(--lumo-shade);

diff --git a/packages/cxl-ui/src/components/cxl-navigation.js b/packages/cxl-ui/src/components/cxl-navigation.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, state, queryAll } from 'lit/decorators.js';
 import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
@@ -19,6 +19,9 @@ export class CXLNavigationElement extends LitElement {
 
   _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)';
 
+  @queryAll('vaadin-menu-bar')
+  menuBars
+
   @state({ reflect: true, attribute: 'is-mobile' }) _isMobile = false;
 
   @state()
@@ -60,7 +63,6 @@ export class CXLNavigationElement extends LitElement {
         this.mobileGroups = [
           { name: 'primary', items: this.groups.map((group) => group.items).flat(1) },
         ];
-        // TODO: replace overflow button icon
       })
     );
   }
@@ -73,6 +75,14 @@ export class CXLNavigationElement extends LitElement {
     registerGlobalStyles(cxlMarketingNavGlobalStyles, {
       moduleId: 'cxl-marketing-nav-global',
     });
+
+    this._replaceMenuIcon();
+  }
+
+  updated(changes) {
+    if (changes.has('groups') || changes.has('_isMobile')) {
+      this._updateContextMenuItems();
+    }
   }
 
   render() {
@@ -85,32 +95,16 @@ export class CXLNavigationElement extends LitElement {
         return html`
           <nav id="menu-${name}-items" ?minimal=${this._isMobile}>
             <div class="container">
-              ${name === "primary" ? html`
+              ${name === "global" || this._isMobile ? html`
                 <vaadin-menu-bar-button theme="tertiary cxl-navigation">
                   <a href="https://cxl.com">
-                    <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);">
-                    </vaadin-icon>
+                    <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);"></vaadin-icon>
                   </a>
                 </vaadin-menu-bar-button>
                 ` 
                 : ''
               }
-              ${this._isMobile
-                ? html`
-                    <vaadin-menu-bar-button theme="tertiary cxl-navigation" class="search-button">
-                      <a>
-                        <vaadin-icon icon="lumo:search"></vaadin-icon> Search
-                        <vaadin-icon icon="lumo:dropdown"></vaadin-icon>
-                      </a>
-                      <vaadin-context-menu
-                        close-on="outside-click"
-                        open-on="click"
-                        theme="cxl-marketing-nav"
-                      >
-                      </vaadin-context-menu>
-                    </vaadin-menu-bar-button>
-                  `
-                : ''}
+              ${this._isMobile ? this._renderSearch() : ''}
               <slot></slot>
               <vaadin-menu-bar theme="tertiary cxl-navigation" .items=${items}></vaadin-menu-bar>
               <slot name="${name}-after"></slot>
@@ -122,6 +116,24 @@ export class CXLNavigationElement extends LitElement {
     `;
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _renderSearch () {
+    return html`
+      <vaadin-menu-bar-button theme="tertiary cxl-navigation" class="search-button">
+        <a>
+          <vaadin-icon icon="lumo:search"></vaadin-icon> Search
+          <vaadin-icon icon="lumo:dropdown"></vaadin-icon>
+        </a>
+        <vaadin-context-menu
+          close-on="outside-click"
+          open-on="click"
+          theme="cxl-marketing-nav"
+        >
+        </vaadin-context-menu>
+      </vaadin-menu-bar-button>
+    `
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _onBackBtnClick(e) {
     e.stopImmediatePropagation();
@@ -130,6 +142,9 @@ export class CXLNavigationElement extends LitElement {
 
   createItem({ text, description, sectionheader, component, icon, href, children, depth, split }) {
     const item = document.createElement('vaadin-context-menu-item');
+    if (sectionheader) {
+      item.classList.add('section-header');
+    }
 
     if (split) {
       item.classList.add('menu-item-split-nav');
@@ -145,14 +160,14 @@ export class CXLNavigationElement extends LitElement {
       item.appendChild(vaadinIcon);
     }
 
-    if (href && !children) {
+    if (href && !children && !sectionheader) {
       const link = document.createElement('a');
       link.href = href;
       link.innerText = text;
       item.appendChild(link);
     } else if (text) {
       const labelElement = sectionheader
-        ? document.createElement('h5')
+        ? document.createElement('h6')
         : document.createElement('span');
       labelElement.classList.add('vaadin-context-menu-item--label');
       labelElement.appendChild(document.createTextNode(text));
@@ -187,4 +202,40 @@ export class CXLNavigationElement extends LitElement {
 
     return item;
   }
+
+  _updateContextMenuItems () {
+    if (!this.menuBars) return;
+
+    [...this.menuBars].forEach(menu => {
+      const splitItems = menu.shadowRoot.querySelectorAll('vaadin-context-menu-item.menu-item-split-nav');
+      [...splitItems].forEach(item => {
+        if (!item.parentElement.classList.contains('menu-item-split-nav')) {
+          item.parentElement.classList.add('menu-item-split-nav');
+        }
+      })
+    })
+  }
+
+  _replaceMenuIcon () {
+    if (!this.menuBars) return;
+
+    [...this.menuBars].forEach(menu => {
+      const overflowMenuButton = menu.shadowRoot.querySelector('vaadin-menu-bar-button[part="overflow-button"]');
+      if (overflowMenuButton && !overflowMenuButton.iconFixed) {
+        const dots = overflowMenuButton.querySelector('.dots');
+        if (dots) {
+          dots.remove();
+        }
+        const menuIcon = document.createElement('vaadin-icon');
+        const closeIcon = document.createElement('vaadin-icon');
+        menuIcon.setAttribute('icon', 'lumo:menu');
+        closeIcon.setAttribute('icon', 'lumo:cross');
+        menuIcon.classList.add('menu-icon');
+        closeIcon.classList.add('close-icon');
+        overflowMenuButton.appendChild(closeIcon);
+        overflowMenuButton.appendChild(menuIcon);
+        overflowMenuButton.iconFixed = true;
+      }
+    })
+  }
 }
diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -25,6 +25,30 @@
           "parent": 95
         }
       ]
+    },
+    {
+      "depth": 0,
+      "text": "Experimentation Agency",
+      "component": "a",
+      "href": "https://speero.com",
+      "id": 96,
+      "parent": 0
+    },
+    {
+      "depth": 0,
+      "text": "Message Testing",
+      "component": "a",
+      "href": "https://wynter.com/",
+      "id": 96,
+      "parent": 0
+    },
+    {
+      "depth": 0,
+      "text": "CXL Live 2023",
+      "component": "a",
+      "href": "https://cxl.com/live",
+      "id": 96,
+      "parent": 0
     }
   ],
   "primary": [