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

conversionxl · Oct 6, 2023 · d6e57ed · d6e57ed
1 parent 464ea19
commit d6e57ed
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 56 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,3 +1,5 @@
+@use "../mq";
+
 :host([theme~="menu-bar-item"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
@@ -54,12 +56,12 @@
   color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/* stylelint-disable-next-line selector-no-qualifying-type */
 ::slotted(h5.cxl-navigation-item) {
-  margin-top: 0 !important;
+  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
 :host {
-
   ::slotted(.vaadin-context-menu-item--description) {
     margin-top: var(--lumo-space-s);
     font-family: var(--lumo-font-family);
@@ -69,6 +71,16 @@
   }
 
   ::slotted(.vaadin-context-menu-item--label) {
-    margin-top: 0 !important;
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  ::slotted(.vaadin-context-menu-item--icon) {
+    visibility: hidden;
+  }
+
+  @media (min-width: 568px) and (min-height: 568px) {
+    ::slotted(.vaadin-context-menu-item--icon) {
+      visibility: visible;
+    }
   }
 }
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -81,10 +81,26 @@
 }
 
 :host([theme~="cxl-navigation"]) {
-
+  &::part(overlay),
+  &::part(content) {
+    height: calc(100vh - 44px);
+    max-height: calc(100vh - 44px);
+  }
+
+  &::part(backdrop) {
+    display: none;
+  }
+
+  @media (min-width: 568px) and (min-height: 568px) {
+    &::part(overlay),
+    &::part(content) {
+      height: initial;
+      max-height: initial;
+    }
+  }
+
   &::part(overlay) {
-    box-shadow: 0 0 0 1px var(--lumo-shade-5pct),
-    0 2px 6px -1px var(--lumo-shade-5pct),
-    0 8px 24px -4px var(--lumo-shade-5pct);
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), 0 2px 6px -1px var(--lumo-shade-5pct),
+      0 8px 24px -4px var(--lumo-shade-5pct);
   }
 }
diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json
@@ -26,7 +26,7 @@
     "@vaadin/icon": "^23.3.7",
     "@vaadin/notification": "^23.3.7",
     "@vaadin/progress-bar": "^23.3.7",
-    "@vaadin/menu-bar": "23.3.7",
+    "@vaadin/menu-bar": "^3.3.7",
     "@vaadin/tabs": "^23.3.7",
     "@vaadin/text-field": "^23.3.7",
     "@vaadin/tooltip": "^23.3.7",

diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss
@@ -1,32 +1,55 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
 :host {
   --lumo-clickable-cursor: pointer;
+  border-bottom: 1px solid var(--lumo-shade-10pct);
 
   ::part(menu-bar-button) {
     color: var(--lumo-shade);
   }
 
+  ::part(overflow-button) {
+    margin-left: auto;
+  }
+
   nav {
     box-sizing: border-box;
     display: flex;
-    justify-content: center;
     align-items: center;
-    max-width: 100vw;
+    justify-content: center;
     width: 100%;
+    max-width: 100vw;
     padding: 0 var(--lumo-space-m);
 
+    &[minimal] {
+      vaadin-menu-bar {
+        max-width: 64px;
+      }
+
+      .container {
+        justify-content: space-between;
+
+        .search-button {
+          width: 140px;
+          color: var(--lumo-shade);
+        }
+      }
+    }
+
     .container {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       width: 100%;
       max-width: var(--cxl-content-max-width-wide, none);
     }
 
     vaadin-menu-bar {
       width: 100%;
     }
-
-    ::part(menu-bar-button), ::slotted(.menu-item) {
+
+    ::part(menu-bar-button),
+    ::slotted(.menu-item) {
       white-space: nowrap;
     }
 
@@ -38,7 +61,9 @@
     &#menu-global-items {
       background-color: var(--lumo-shade);
 
-      ::part(menu-bar-button), ::slotted(.menu-item) {
+      /* stylelint-disable-next-line selector-no-qualifying-type */
+      ::part(menu-bar-button),
+      ::slotted(.menu-item) {
         color: var(--lumo-tint);
       }
     }

diff --git a/packages/cxl-ui/src/components/cxl-navigation.js b/packages/cxl-ui/src/components/cxl-navigation.js
@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
 import { customElement, property, state } 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';
 import cxlNavigationStyles from '../styles/cxl-navigation-css.js';
@@ -16,6 +17,10 @@ export class CXLNavigationElement extends LitElement {
 
   _contextMenuItems = { global: [], primary: [] };
 
+  _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)';
+
+  @state({ reflect: true, attribute: 'is-mobile' }) _isMobile = false;
+
   @state()
   groups = [];
 
@@ -28,29 +33,100 @@ export class CXLNavigationElement extends LitElement {
     this._contextMenuItems = { ...data };
     const parseItem = (item) => {
       const newItem = {
-        component: this.constructor.createItem(item),
+        component: this.createItem(item),
       };
-      if (item.children) {
-        newItem.children = item.children?.map(parseItem);
+      if (item.children?.length) {
+        newItem.children = [{ component: 'back' }, ...item.children].map(parseItem);
       }
       return newItem;
     };
-
+    const groups = [];
     Object.keys(data).forEach((group) => {
       const items = data[group];
-      this.groups.push(
-        {
-          name: group,
-          items: [...items?.map(parseItem)],
-        }
-      )
-    })
-    this.requestUpdate('groups')
+      groups.push({
+        name: group,
+        items: [...items?.map(parseItem)],
+      });
+    });
+    this.groups = groups;
+    this.requestUpdate('groups');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addController(
+      new MediaQueryController(this._phoneMediaQuery, (matches) => {
+        this._isMobile = matches;
+        this.mobileGroups = [
+          { name: 'primary', items: this.groups.map((group) => group.items).flat(1) },
+        ];
+        // TODO: replace overflow button icon
+      })
+    );
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  firstUpdated() {
+    /**
+     * Global styles.
+     */
+    registerGlobalStyles(cxlMarketingNavGlobalStyles, {
+      moduleId: 'cxl-marketing-nav-global',
+    });
   }
 
-  static createItem({ text, description, sectionheader, component, icon, href, children, depth }) {
+  render() {
+    const groups = this._isMobile
+      ? [{ name: 'primary', items: this.groups.map((group) => group.items).flat(1) }]
+      : this.groups;
+    return html`
+      ${groups.map((group) => {
+        const { name, items } = group;
+        return html`
+          <nav id="menu-${name}-items" ?minimal=${this._isMobile}>
+            <div class="container">
+              ${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>
+                      </a>
+                    </vaadin-menu-bar-button>
+                    <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>
+                  `
+                : ''}
+              <slot></slot>
+              <vaadin-menu-bar theme="tertiary cxl-navigation" .items=${items}></vaadin-menu-bar>
+              <slot name="${name}-after"></slot>
+              <slot name="${name}-end"></slot>
+            </div>
+          </nav>
+        `;
+      })}
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _onBackBtnClick(e) {
+    e.stopImmediatePropagation();
+    [...document.body.querySelectorAll('vaadin-context-menu-overlay')].at(-1).close();
+  }
+
+  createItem({ text, description, sectionheader, component, icon, href, children, depth }) {
     const item = document.createElement('vaadin-context-menu-item');
-    
+
     if (component === 'hr') {
       return document.createElement('hr');
     }
@@ -85,37 +161,22 @@ export class CXLNavigationElement extends LitElement {
     if (children?.length && depth === 0) {
       const vaadinIcon = document.createElement('vaadin-icon');
       vaadinIcon.setAttribute('icon', 'lumo:dropdown');
+      vaadinIcon.classList.add('vaadin-context-menu-item--icon');
       item.appendChild(vaadinIcon);
     }
 
-    return item;
-  }
+    if (component === 'back') {
+      const backBtn = document.createElement('vaadin-button');
 
-  // eslint-disable-next-line class-methods-use-this
-  firstUpdated() {
-    /**
-     * Global styles.
-     */
-    registerGlobalStyles(cxlMarketingNavGlobalStyles, {
-      moduleId: 'cxl-marketing-nav-global',
-    });
-  }
+      backBtn.classList.add('context-menu-item-back-button');
+      backBtn.innerHTML = '<vaadin-icon icon="lumo:angle-left"></vaadin-icon> Back';
 
-  render() {
-    return html`
-      ${this.groups.map(group => {
-        const { name, items } = group;
-        return html`
-          <nav id="menu-${name}-items">
-            <div class="container">
-              <slot name="${name}-before"></slot>
-              <vaadin-menu-bar theme="tertiary cxl-navigation" .items=${items}></vaadin-menu-bar>
-              <slot name="${name}-after"></slot>
-              <slot name="${name}-end"></slot>
-            </div>
-          </nav>
-        `
-      })}
-    `;
+      item.classList.add('back-button-menu-item');
+      item.appendChild(backBtn);
+
+      item.addEventListener('click', this._onBackBtnClick.bind(this));
+    }
+
+    return item;
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4200,7 +4200,7 @@
   dependencies:
     lit "^2.0.0"
 
-"@vaadin/menu-bar@23.3.7":
+"@vaadin/menu-bar@^3.3.7":
   version "23.3.7"
   resolved "https://registry.yarnpkg.com/@vaadin/menu-bar/-/menu-bar-23.3.7.tgz#467f64dd2c3ffa59659902672630f89ca56e8394"
   integrity sha512-i96zo1/W+bHAovbG3mwireApyPEhY1VvAyNDwI+OH9QOGi0yhkaiX60KWHn7smh98x2UFGbchlOBI/PrJwXXQQ==