feat(cxl-ui): fixed styles matching for menu components

conversionxl · Oct 5, 2023 · 464ea19 · 464ea19
1 parent 9bdb0f7
commit 464ea19
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 23 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,4 +1,4 @@
-:host([theme~="cxl-marketing-nav"].section-header) {
+:host([theme~="menu-bar-item"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
   text-transform: uppercase;
@@ -8,22 +8,22 @@
   }
 }
 
-:host([theme~="cxl-marketing-nav"].has-description) {
+:host([theme~="menu-bar-item"].has-description) {
   [part="content"] ::slotted(.vaadin-context-menu-item--description) {
     font-weight: 400;
   }
 }
 
-:host([theme~="cxl-marketing-nav"]:not(.section-header):hover),
-:host([theme~="cxl-marketing-nav"]:not(.section-header)[expanded]) {
+:host([theme~="menu-bar-item"]:not(.section-header):hover),
+:host([theme~="menu-bar-item"]:not(.section-header)[expanded]) {
   color: var(--lumo-primary-color);
 
   &::after {
     color: var(--lumo-primary-color);
   }
 }
 
-:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item) {
+:host([theme~="menu-bar-item"].vaadin-menu-item.vaadin-context-menu-parent-item) {
   padding-block: 0;
 
   &::after {
@@ -33,12 +33,12 @@
 }
 
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
+  :host([theme~="menu-bar-item"].vaadin-menu-item.back-button-menu-item) {
     display: none;
   }
 }
 
-:host([theme~="cxl-marketing-nav"]) [part="checkmark"][aria-hidden="true"] {
+:host([theme~="menu-bar-item"]) [part="checkmark"][aria-hidden="true"] {
   display: none;
 }
 
@@ -67,4 +67,8 @@
     font-weight: 400;
     color: var(--lumo-secondary-text-color);
   }
+
+  ::slotted(.vaadin-context-menu-item--label) {
+    margin-top: 0 !important;
+  }
 }
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -79,3 +79,12 @@
     display: none;
   }
 }
+
+:host([theme~="cxl-navigation"]) {
+
+  &::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);
+  }
+}
diff --git a/packages/cxl-ui/scss/cxl-navigation.scss b/packages/cxl-ui/scss/cxl-navigation.scss
@@ -6,19 +6,39 @@
   }
 
   nav {
+    box-sizing: border-box;
     display: flex;
+    justify-content: center;
     align-items: center;
     max-width: 100vw;
+    width: 100%;
     padding: 0 var(--lumo-space-m);
 
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      max-width: var(--cxl-content-max-width-wide, none);
+    }
+
     vaadin-menu-bar {
-      max-width: 100%;
+      width: 100%;
+    }
+
+    ::part(menu-bar-button), ::slotted(.menu-item) {
+      white-space: nowrap;
+    }
+
+    ::slotted(.menu-item-split-nav) {
+      margin-left: auto;
     }
 
     /* stylelint-disable-next-line selector-no-qualifying-type */
     &#menu-global-items {
       background-color: var(--lumo-shade);
-      ::part(menu-bar-button) {
+
+      ::part(menu-bar-button), ::slotted(.menu-item) {
         color: var(--lumo-tint);
       }
     }
@@ -27,12 +47,5 @@
     &#menu-primary-items {
       background-color: var(--lumo-base-color);
     }
-
-    vaadin-context-menu-overlay {
-
-      h5 {
-        margin-top: 0;
-      }  
-    }
   }
 }
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 '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlNavigationStyles from '../styles/cxl-navigation-css.js';
 import cxlMarketingNavGlobalStyles from '../styles/global/cxl-marketing-nav-css.js';
@@ -47,14 +48,20 @@ export class CXLNavigationElement extends LitElement {
     this.requestUpdate('groups')
   }
 
-  static createItem({ text, description, sectionheader, component, href }) {
+  static createItem({ text, description, sectionheader, component, icon, href, children, depth }) {
     const item = document.createElement('vaadin-context-menu-item');
 
     if (component === 'hr') {
       return document.createElement('hr');
     }
 
-    if (href) {
+    if (icon) {
+      const vaadinIcon = document.createElement('vaadin-icon');
+      vaadinIcon.setAttribute('icon', `lumo:${icon}`);
+      item.appendChild(vaadinIcon);
+    }
+
+    if (href && !children) {
       const link = document.createElement('a');
       link.href = href;
       link.innerText = text;
@@ -74,6 +81,13 @@ export class CXLNavigationElement extends LitElement {
       descriptiondiv.appendChild(document.createTextNode(description));
       item.appendChild(descriptiondiv);
     }
+
+    if (children?.length && depth === 0) {
+      const vaadinIcon = document.createElement('vaadin-icon');
+      vaadinIcon.setAttribute('icon', 'lumo:dropdown');
+      item.appendChild(vaadinIcon);
+    }
+
     return item;
   }
 
@@ -93,9 +107,12 @@ export class CXLNavigationElement extends LitElement {
         const { name, items } = group;
         return html`
           <nav id="menu-${name}-items">
-            <slot name="${name}-before"></slot>
-            <vaadin-menu-bar theme="tertiary" .items=${items}></vaadin-menu-bar>
-            <slot name="${name}-after"></slot>
+            <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>
         `
       })}

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav/cxl.navigation.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav/cxl.navigation.stories.js
@@ -34,11 +34,23 @@ export const CXLNavigation = (args) => {
       }
     </style>
     <cxl-navigation .contextMenuItems=${contextMenuItems}>
-      <vaadin-context-menu-item slot="global-before">
+      <vaadin-menu-bar-button slot="global-before">
         <a href="https://cxl.com">
           <vaadin-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);"></vaadin-icon>
         </a>
-      </vaadin-context-menu-item>
+      </vaadin-menu-bar-button>
+      <vaadin-menu-bar-button class="menu-item" slot="global-after">
+        <a href="https://speero.com/case-studies">Agency case studies</a>
+      </vaadin-menu-bar-button>
+      <vaadin-menu-bar-button class="menu-item" slot="global-after">
+        <a href="https://cxl.com/blog/">Blog</a>
+      </vaadin-menu-bar-button>
+      <vaadin-menu-bar-button class="menu-item" slot="global-after">
+        <a href="https://cxl.com/live/">CXL Live 2023
+          <vaadin-icon icon="cxl:live" style="color: var(--lumo-primary-color)"></vaadin-icon>
+        </a
+      ></vaadin-menu-bar-button>
+      <vaadin-menu-bar-button class="menu-item menu-item-split-nav" slot="global-end"><a>Help</a></vaadin-menu-bar-button>
     </cxl-navigation>
     <div id="wp-admin-bar" ?hidden=${!args?.loggedIn}>
       wp-admin bar: test nav menu placement