feat(cxl-ui): re-implement navigation bar

packages/cxl-lumo-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conversionxl/cxl-lumo-styles",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "author": "CXL <[email protected]>",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "src/index.js",

packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss

@@ -1,3 +1,16 @@
+@use "../mq";
+
+:host([theme~="cxl-marketing-nav"]) {
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  ::slotted(h6) {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+:host([theme~="cxl-marketing-nav"].vaadin-menu-item.has-link) {
+  cursor: pointer !important;
+}
+
 :host([theme~="cxl-marketing-nav"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
@@ -23,25 +36,6 @@
   }
 }
 
-:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item) {
-  padding-block: 0;
-
-  &::after {
-    margin-right: 0;
-    font-size: var(--lumo-icon-size);
-  }
-}
-
-@media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
-    display: none;
-  }
-}
-
-:host([theme~="cxl-marketing-nav"]) [part="checkmark"][aria-hidden="true"] {
-  display: none;
-}
-
 ::slotted(a) {
   // Increase link click surface.
   display: block;
@@ -53,3 +47,49 @@
 ::slotted(a:hover) {
   color: var(--lumo-primary-color) !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);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 400;
+    color: var(--lumo-secondary-text-color);
+  }
+
+  ::slotted(.vaadin-context-menu-item--label) {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  [part="checkmark"] {
+    display: none !important;
+
+    &::before {
+      content: unset !important;
+    }
+  }
+}
+
+:host(.vaadin-context-menu-parent-item) {
+
+  ::slotted(.vaadin-context-menu-item--dropdown-icon) {
+    visibility: hidden;
+  }
+
+  &::after {
+    margin-right: unset !important;
+  }
+}
+
+@media (min-width: 568px) and (min-height: 568px) {
+  :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
+    display: none;
+  }
+
+  /* Mobile layout loses cxl-marketing-nav theme, so we need to match theme="menu-bar-item" */
+  :host([theme~="menu-bar-item"]) {
+    ::slotted(.vaadin-context-menu-item--icon) {
+      display: none;
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss

@@ -14,30 +14,41 @@
 }
 
 :host([theme~="cxl-marketing-nav"].vaadin-menu-list-box) {
+  padding: var(--lumo-space-m) 0;
+
+  @media (min-width: 568px) {
+    padding: 0;
+  }
+
   [part="items"] ::slotted(.vaadin-menu-item) {
     padding-right: var(--lumo-space-m);
     padding-left: var(--lumo-space-m);
   }
 
-  [part="items"] ::slotted(.section-header.vaadin-menu-item:not(.section-header):hover:not([disabled])) {
+  [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 */
     background-color: revert-layer;
   }
 
-  [part='items'] ::slotted(.vaadin-menu-item.section-header:hover) {
+  [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"]) {
-    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) {
+  border-radius: 0;
+
+  &::part(checkmark) ::before {
+    content: unset;
   }
 }
 
-:host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
-  border-radius: 0;
+@media (max-width: 568px) {
+  :host([theme~="cxl-marketing-nav"]) [part="items"] {
+
+    ::slotted(.global-menu-item) {
+      background-color: var(--cxl-color-light-gray);
+    }
+  }
 }

packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-overlay.scss

@@ -0,0 +1,30 @@
+
+@keyframes cxl-lumo-mobile-menu-overlay-enter {
+  0% {
+    transform: translateX(150%);
+  }
+}
+
+@keyframes cxl-lumo-mobile-menu-overlay-exit {
+  100% {
+    transform: translateX(150%);
+  }
+}
+
+@media (max-width: 568px), (max-height: 568px) {
+
+  /* Animations */
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.2s cxl-lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  }
+
+  :host([closing]),
+  :host([closing]) [part='backdrop'] {
+    animation-delay: 0.14s;
+  }
+
+  :host([closing]) [part='overlay'] {
+    animation: 0.14s 0.14s cxl-lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-dialog-overlay.scss

@@ -0,0 +1,21 @@
+:host([theme~="cxl-marketing-nav-search"]) {
+  left: 0;
+  right: 0;
+
+  [part="content"] {
+    padding: var(--lumo-space-l);
+  }
+
+  @media (min-width: 568px) {
+    top: calc(2 * var(--cxl-marketing-nav-height));
+    bottom: unset;
+
+    [part="backdrop"] {
+      opacity: 0;
+    }
+
+    [part="content"] {
+      padding: var(--lumo-space-l);
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar-button.scss

@@ -0,0 +1,31 @@
+:host {
+  position: relative;
+
+  ::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    height: 1;
+    width: var(--lumo-size-s);
+    left: 50%;
+    transform: translateX(-50%) scale(0);
+    transform-origin: 50% 100%;
+    opacity: 0;
+    transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
+    will-change: transform, opacity;
+  }
+}
+
+:host([active]:not([part="overflow-button"])) {
+  position: relative;
+
+  ::after {
+    content: "";
+    transform: translateX(-50%) scale(1);
+    border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
+    border: 1px solid var(--lumo-primary-color);
+    box-shadow: 0px -1px 3px 0px rgba(214, 31, 44, 0.05);
+    opacity: 1;
+    transition: 0.14s opacity ease-in, 0.3s transform cubic-bezier(0.12, 0.32, 0.54, 1,5);
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar.scss

@@ -0,0 +1,57 @@
+:host([theme~="cxl-marketing-nav"]) {
+
+  [part="container"] {
+
+    .menu-item-split-nav {
+      /* stylelint-disable-next-line declaration-no-important */
+      margin-left: auto !important;
+
+      ~ .menu-item-split-nav {
+        margin-left: revert !important;
+      }
+    }
+
+    [part="overflow-button"] {
+
+      vaadin-icon {
+        &.vaadin-menu-bar-button--icon {
+          display: none;
+        }
+      }
+
+      @media (max-width: 568px) {
+        display: block;
+
+        ::before {
+          content: none;
+        }
+
+        vaadin-icon {
+          height: var(--lumo-icon-size-s);
+
+          &.vaadin-menu-bar-button--icon {
+            display: block;
+
+            &.close-icon {
+              display: none;
+            }
+          }
+
+          svg {
+            fill: var(--lumo-shade);
+          }
+        }
+
+        &[expanded] {
+          vaadin-icon.close-icon {
+            display: block;
+          }
+
+          vaadin-icon.menu-icon {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}