fix(cxl-marketing-nav): do not use <a> for sectionheader, fix vertica…

…l positioning when logged in to wp
conversionxl · Aug 29, 2023 · 7c57ef9 · 7c57ef9
1 parent 3bf4898
commit 7c57ef9
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 52 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
@@ -6,7 +6,7 @@
 :host([theme~="cxl-marketing-nav"].section-header) {
   color: var(--lumo-body-text-color);
   background: var(--lumo-shade-10pct);
-  font-weight: 400;
+  font-weight: 600;
   text-transform: uppercase;
 
   ::slotted(.vaadin-context-menu-item--description) {
@@ -15,13 +15,13 @@
 }
 
 :host([theme~="cxl-marketing-nav"].has-description) {
-  [part="content"] ::slotted(*:first-child) {
-    font-weight: 600;
+  [part="content"] ::slotted(.vaadin-context-menu-item--description) {
+    font-weight: 400;
   }
 }
 
-:host([theme~="cxl-marketing-nav"]:hover),
-:host([theme~="cxl-marketing-nav"][expanded]) {
+:host([theme~="cxl-marketing-nav"]:not(.section-header):hover),
+:host([theme~="cxl-marketing-nav"]:not(.section-header)[expanded]) {
   color: var(--lumo-primary-color);
 
   &::after {

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,9 +13,16 @@
   }
 }
 
-: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-marketing-nav"].vaadin-menu-list-box) {
+  [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:hover:not([disabled])) {
+    /* revert default vaadin-context-menu-list-box hovering style, without losing other styles styles applied */
+    background-color: revert-layer;
+  }
 }
 
 @media screen and (min-width: 783px) {

diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss
@@ -67,13 +67,6 @@ $menu-item-menu-toggle-index: 2;
   display: none;
 }
 
-.vaadin-context-menu-item--description {
-  margin-top: var(--lumo-space-s);
-  font-family: var(--lumo-font-family);
-  font-size: var(--lumo-font-size-s);
-  color: var(--lumo-secondary-text-color);
-}
-
 /**
  * headroom.js
  */

diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss
@@ -129,7 +129,7 @@ vaadin-context-menu-item[theme~="cxl-marketing-nav"] {
 .vaadin-context-menu-item--description {
   margin-top: var(--lumo-space-s);
   font-family: var(--lumo-font-family);
-  font-size: var(--lumo-font-size-xxs);
+  font-size: var(--lumo-font-size-s);
   color: var(--lumo-secondary-text-color);
 }
 

diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -115,7 +115,7 @@ export class CXLMarketingNavElement extends LitElement {
       </vaadin-tabs>
 
       <nav>
-        <slot @slotchange=${this._setupSlottedMenuItems}></slot>
+        <slot @slotchange=${this._boundSetupSlottedMenuItems}></slot>
       </nav>
     `;
   }
@@ -142,6 +142,7 @@ export class CXLMarketingNavElement extends LitElement {
     const overlaysWrapper = document.createElement('div');
     overlaysWrapper.id = 'overlays-wrapper';
     document.body.appendChild(overlaysWrapper);
+    this._boundSetupSlottedMenuItems = this._setupSlottedMenuItems.bind(this);
   }
 
   disconnectedCallback() {
@@ -248,17 +249,18 @@ export class CXLMarketingNavElement extends LitElement {
    */
   _setupSlottedMenuItems() {
     const navItems = this.querySelectorAll('vaadin-tab');
+    const overlaysWrapper = this.overlaysWrapperElement;
 
     navItems.forEach((tab) =>
       tab.addEventListener('click', (e) => {
-        const overlays = this.overlaysWrapperElement.querySelectorAll(
+        const overlays = overlaysWrapper.querySelectorAll(
           'vaadin-context-menu-overlay[theme="cxl-marketing-nav"]'
         );
-
-        this.overlaysWrapperElement.style.top = `${
-          tab.parentElement.offsetTop + 0.75 * tab.clientHeight
+        const parentOffset = tab.parentElement.getBoundingClientRect();
+        overlaysWrapper.style.top = `${
+          parentOffset.y + 0.75 * tab.clientHeight
         }px`;
-        this.overlaysWrapperElement.style.left = `${e.clientX}px`;
+        overlaysWrapper.style.left = `${e.clientX}px`;
 
         [...overlays].forEach((overlay) => {
           overlay.close();
@@ -381,48 +383,56 @@ export class CXLMarketingNavElement extends LitElement {
         this._createContextMenuItems(item.children);
       }
 
-      if (item.component === 'a') {
-        const menuItem = document.createElement('vaadin-context-menu-item');
-        if (item.sectionheader && !item.children) {
-          menuItem.classList.add('section-header');
-        }
+      const menuItem = document.createElement('vaadin-context-menu-item');
+
+      if (item.sectionheader) {
+        menuItem.classList.add('section-header');
+
+        const label = document.createTextNode(item.text);
+        menuItem.appendChild(label);
+
+        // eslint-disable-next-line no-param-reassign
+        self[i] = { component: menuItem };
+      } else if (item.component === 'a') {
         const link = document.createElement('a');
 
-        link.href = item.href;
-        link.innerHTML = item.text;
+        if (item.href) {
+          link.href = item.href;
+          link.innerHTML = item.text;
+        }
 
         menuItem.appendChild(link);
-
-        if (item.description) {
-          const descriptionItem = document.createElement('div');
-
-          descriptionItem.classList.add('vaadin-context-menu-item--description');
+        // eslint-disable-next-line no-param-reassign
+        self[i] = { component: menuItem };
+      } 
+
+      if (item.description) {
+        const descriptionItem = document.createElement('div');
 
-          // Set to hidden, to calculate currently opened menu width and use it for description.
-          descriptionItem.hidden = true;
+        descriptionItem.classList.add('vaadin-context-menu-item--description');
 
-          render(html`${unsafeHTML(item.description)}`, descriptionItem);
+        // Set to hidden, to calculate currently opened menu width and use it for description.
+        descriptionItem.hidden = true;
 
-          menuItem.appendChild(descriptionItem);
-          menuItem.classList.add('has-description');
-        }
+        render(html`${unsafeHTML(item.description)}`, descriptionItem);
 
-        // eslint-disable-next-line no-param-reassign
-        self[i] = { component: menuItem };
-      } else if (item.component === 'back') {
-        const menuItemBack = document.createElement('vaadin-context-menu-item');
+        menuItem.appendChild(descriptionItem);
+        menuItem.classList.add('has-description');
+      }
+
+      if (item.component === 'back') {
         const backBtn = document.createElement('vaadin-button');
 
         backBtn.classList.add('context-menu-item-back-button');
         backBtn.innerHTML = '<vaadin-icon icon="lumo:angle-left"></vaadin-icon> Back';
 
-        menuItemBack.classList.add('back-button-menu-item');
-        menuItemBack.appendChild(backBtn);
+        menuItem.classList.add('back-button-menu-item');
+        menuItem.appendChild(backBtn);
 
-        menuItemBack.addEventListener('click', this._onBackBtnClick.bind(this));
+        menuItem.addEventListener('click', this._onBackBtnClick.bind(this));
 
         // eslint-disable-next-line no-param-reassign
-        self[i] = { component: menuItemBack };
+        self[i] = { component: menuItem };
       }
     });
 

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json
@@ -80,8 +80,6 @@
           "depth": 1,
           "text": "Deep skills",
           "description": "Core fundamentals of marketing",
-          "component": "a",
-          "href": "#",
           "id": 361,
           "parent": 36,
           "sectionheader": true

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js
@@ -8,17 +8,40 @@ export default {
   title: 'CXL UI/cxl-marketing-nav',
 };
 
-export const CXLMarketingNav = () => {
+export const CXLMarketingNav = ({ loggedIn }) => {
   useEffect(() => {
     // Populate `<cxl-marketing-nav>` context menus.
     const cxlMarketingNavElement = document.querySelector('cxl-marketing-nav');
 
     cxlMarketingNavElement.contextMenuItems = contextMenuItems;
 
     cxlMarketingNavElement.initHeadroom(Headroom);
-  }, []);
+
+    const htmlEl = document.querySelector('html');
+    if (loggedIn) {
+      htmlEl.classList.add('loggedIn');
+    } else {
+      htmlEl.classList.remove('loggedIn');
+    }
+  }, [loggedIn]);
 
   return html`
+    <style>
+      html.loggedIn {
+        margin-top: 32px;
+      }
+
+      #wp-admin-bar {
+        position: fixed;
+        width: 100%;
+        height: 32px;
+        background-color: gray;
+        top: 0;
+        color: white;
+        padding: 0 1em;
+      }
+    </style>
+
     <cxl-marketing-nav id="menu-primary" class="menu menu-primary" role="navigation" slot="header">
       <template id="cxl-marketing-nav-search-form-template">
         <vaadin-context-menu-item class="menu-item-search">
@@ -172,7 +195,14 @@ export const CXLMarketingNav = () => {
         </vaadin-tab>
       </vaadin-tabs>
     </cxl-marketing-nav>
+    <div id="wp-admin-bar" ?hidden=${!loggedIn}>
+      wp-admin bar: test nav menu placement
+    </div>
   `;
 };
 
 CXLMarketingNav.storyName = 'menu-primary';
+CXLMarketingNav.args = {
+  loggedIn: true
+}
+