From c842a00f821698e41f747d0350dc1352aa614533 Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Wed, 5 Jul 2023 22:03:50 +0300 Subject: [PATCH] feat: update navigation https://app.clickup.com/t/861mx0nwm --- packages/cxl-lumo-styles/scss/global.scss | 2 +- .../scss/themes/vaadin-context-menu-item.scss | 13 ++ .../themes/vaadin-context-menu-list-box.scss | 22 +++ .../scss/themes/vaadin-tab.scss | 3 +- packages/cxl-ui/scss/cxl-marketing-nav.scss | 7 +- .../cxl-ui/scss/global/cxl-marketing-nav.scss | 18 ++- .../src/components/cxl-marketing-nav.js | 35 ++-- .../cxl-ui/cxl-marketing-nav.data.json | 153 +++++++++++++++--- .../cxl-ui/cxl-marketing-nav.stories.js | 113 +++++++------ scripts/watcher.js | 2 +- 10 files changed, 260 insertions(+), 108 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index c8f8c0db3..074b99d41 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -30,7 +30,7 @@ html { 0 #{$cxl-box-shadow-width} 0 0 #{$cxl-box-shadow-color} inset; // cxl-marketing-nav height on desktop - --cxl-marketing-nav-height: 88px; + --cxl-marketing-nav-height: 76px; } // @see https://github.com/conversionxl/aybolit/blob/490e58e71f13c2e8a398959f91b938f9309b41f8/packages/cxl-ui/src/components/cxl-marketing-nav.js#L46 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 index 44c3d14c2..35a735f46 100644 --- 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,11 @@ +:host([theme~="cxl-marketing-nav"]:hover) { + color: var(--lumo-primary-color); +} + +:host([theme~="cxl-marketing-nav"]:not([dir='rtl']).vaadin-menu-item.vaadin-context-menu-parent-item:hover)::after { + color: var(--lumo-primary-color); +} + ::slotted(a) { // Increase link click surface. display: block; @@ -8,3 +16,8 @@ ::slotted(a:not(:hover)) { text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ } + +::slotted(a:hover) { + color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */ + text-decoration: none !important; /* stylelint-disable-line declaration-no-important */ +} 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 index 44ced3165..c4f5ecb7f 100644 --- 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 @@ -12,3 +12,25 @@ box-shadow: inset 0 0 0 ($vaadin-focus-ring-thickness * 0.5) var(--lumo-primary-color); } } + +:host([theme~="cxl-marketing-nav"]) { + box-shadow: none !important; /* stylelint-disable-line declaration-no-important */ + // box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m); +} + +@media screen and (min-width: 782px) { + :host([theme~="cxl-marketing-nav"]) { + width: var(--cxl-vaadin-context-menu-item-max-width); + padding: 0 10px; + } + + :host([theme~="cxl-marketing-nav"].vaadin-menu-list-box--submenu)::before { + position: absolute; + content: ''; + top: 16px; + left: 0; + bottom: 16px; + width: 1px; + background-color: var(--lumo-shade-20pct); + } +} diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss index da575c4e5..405121d4c 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss @@ -1,5 +1,6 @@ :host([theme~="cxl-marketing-nav"]) ::slotted(a[href]:hover) { - text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */ + // text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */ + color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */ } :host([theme~="cxl-marketing-nav"][hidden]) { diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss index 7c537610a..1b9c491f5 100644 --- a/packages/cxl-ui/scss/cxl-marketing-nav.scss +++ b/packages/cxl-ui/scss/cxl-marketing-nav.scss @@ -39,12 +39,17 @@ #menu-shadow-items, ::slotted(#menu-global-items) { background-color: var(--lumo-base-color); + + :host([wide]) & { + height: 32px; + background-color: var(--lumo-shade); + } } // Light on dark. ::slotted(#menu-primary-items) { --lumo-tertiary-text-color: var(--lumo-base-color); - background-color: var(--lumo-shade); + background-color: var(--lumo-base-color); } /** diff --git a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss index f8aca02b5..9ee04b148 100644 --- a/packages/cxl-ui/scss/global/cxl-marketing-nav.scss +++ b/packages/cxl-ui/scss/global/cxl-marketing-nav.scss @@ -1,6 +1,20 @@ cxl-marketing-nav { + #menu-global-items { + min-height: 0; + } + + #menu-global-items .menu-item { + color: var(--lumo-shade); + } + #menu-primary-items .menu-item { - color: var(--lumo-tint); + color: var(--lumo-shade); + } + + &[wide] { + #menu-global-items .menu-item { + color: var(--lumo-base-color); + } } &:not([wide]) { @@ -77,7 +91,7 @@ vaadin-context-menu-item[theme~="cxl-marketing-nav"] { // Restricts menu item description width to max of parent width. vaadin-context-menu-list-box { - --cxl-vaadin-context-menu-item-max-width: fit-content; + --cxl-vaadin-context-menu-item-max-width: 310px; } /** diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index e38167004..61bd78542 100644 --- a/packages/cxl-ui/src/components/cxl-marketing-nav.js +++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js @@ -157,24 +157,6 @@ export class CXLMarketingNavElement extends LitElement { */ // eslint-disable-next-line no-param-reassign contextMenu.closeOn = 'backBtnClose'; - - /** - * @todo Needs docblock. - */ - contextMenu.addEventListener('opened-changed', () => { - const listBox = document.querySelector('vaadin-context-menu-list-box'); - let listBoxWidth = parseFloat(getComputedStyle(listBox).getPropertyValue('width')); - - const vaadinMenuItemComputedStyle = getComputedStyle( - listBox.querySelector('.vaadin-menu-item') - ); - - listBoxWidth -= - parseFloat(vaadinMenuItemComputedStyle.paddingLeft) + - parseFloat(vaadinMenuItemComputedStyle.paddingRight) * 2; - - listBox.style.setProperty('--cxl-vaadin-context-menu-item-max-width', `${listBoxWidth}px`); - }); }); /** @@ -248,14 +230,17 @@ export class CXLMarketingNavElement extends LitElement { if (overlays.length > 1) { const topLevelOverlay = overlays[0]; - const listBox = overlay.querySelector('vaadin-context-menu-list-box'); - const previousOverlay = overlays[overlays.length - 2]; - const previousListBox = previousOverlay.querySelector('vaadin-context-menu-list-box'); requestAnimationFrame(() => { - if (listBox.offsetHeight > previousListBox.offsetHeight) { - overlay.style.top = topLevelOverlay.style.top; - } + overlay.style.top = topLevelOverlay.style.top; + + const overlayListBox = overlay.getFirstChild(); + const topLevelOverlayListBox = topLevelOverlay.getFirstChild(); + + overlayListBox.classList.add('vaadin-menu-list-box--submenu'); + + overlayListBox.style.left = `${ topLevelOverlayListBox.offsetLeft + topLevelOverlayListBox.offsetWidth }px`; + overlayListBox.style.height = `${ topLevelOverlayListBox.offsetHeight }px`; }); } @@ -334,7 +319,7 @@ export class CXLMarketingNavElement extends LitElement { const link = document.createElement('a'); link.href = item.href; - link.text = item.text; + link.innerHTML = item.text; menuItem.appendChild(link); diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json index cd067bb3c..e53b42ff6 100644 --- a/packages/storybook/cxl-ui/cxl-marketing-nav.data.json +++ b/packages/storybook/cxl-ui/cxl-marketing-nav.data.json @@ -34,22 +34,20 @@ "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/", "id": 35, - "parent": 0, "children": [ { "depth": 1, "text": "See my roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/roadmap\/", - "id": 43, - "parent": 35 + "id": 351 }, { "depth": 1, "text": "Edit my roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/roadmap\/individual\/", - "id": 44, + "id": 352, "parent": 35 }, { @@ -57,7 +55,7 @@ "text": "Edit team roadmap", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/roadmap\/team\/", - "id": 45, + "id": 353, "parent": 35 }, { @@ -65,49 +63,164 @@ "text": "See team progress", "component": "a", "href": "https:\/\/conversionxl.com\/institute\/dashboard\/team\/", - "id": 46, + "id": 354, "parent": 35 } ] }, { "depth": 0, - "text": "Minidegrees <\/vaadin-icon>", + "text": "Training <\/vaadin-icon>", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/online-courses\/?_categories=minidegree-programs", + "href": "#", "id": 36, "parent": 0, "children": [ { "depth": 1, - "text": "Conversion optimization", + "text": "Deep skills", + "description": "Core fundamentals of marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-conversion-optimization\/", - "id": 47, + "href": "#", + "id": 361, "parent": 36 }, { "depth": 1, - "text": "Digital psychology and persuasion", + "text": "Conversion optimization", + "id": 362, + "parent": 36, + "children": [ + { + "depth": 2, + "text": "Brands marketing certificate", + "description": "Lorem ipsum dolor sit amet", + "component": "a", + "href": "#", + "parent": 362 + }, + { + "component": "hr" + }, + { + "depth": 2, + "text": "Audience building", + "component": "a", + "href": "#", + "parent": 362 + }, + { + "depth": 2, + "text": "Brand strategy", + "component": "a", + "href": "#", + "parent": 362 + } + ] + }, + { + "depth": 1, + "text": "Digital analytics", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-psychology-persuasion\/", - "id": 48, - "parent": 36 + "href": "#", + "id": 363, + "parent": 36, + "children": [] }, { "depth": 1, "text": "Growth marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-growth-marketing\/", - "id": 49, + "href": "#", + "id": 364, + "parent": 36, + "children": [] + }, + { + "component": "hr" + }, + { + "depth": 1, + "text": "Broad skills", + "component": "a", + "href": "#", + "description": "Supporting knowledge base for wider success", + "id": 365, "parent": 36 }, { "depth": 1, - "text": "Digital analytics", + "text": "Brand marketing", "component": "a", - "href": "https:\/\/conversionxl.com\/institute\/certificate\/cxl-digital-analytics\/", - "id": 50, + "href": "#", + "id": 366, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Digital marketing", + "component": "a", + "href": "#", + "id": 367, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Digital psychology and persuasion", + "component": "a", + "href": "#", + "id": 368, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Ecommerce marketing", + "component": "a", + "href": "#", + "id": 369, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Product marketing", + "component": "a", + "href": "#", + "id": 370, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Technical content marketing", + "component": "a", + "href": "#", + "id": 371, + "parent": 36, + "children": [] + }, + { + "depth": 1, + "text": "Technical marketing", + "component": "a", + "href": "#", + "id": 372, + "parent": 36, + "children": [] + }, + { + "component": "hr" + }, + { + "depth": 1, + "text": "Fast marketing", + "description": "Marketing experimentation - new hot tactics every week, crazy enough they just might work!", + "component": "a", + "href": "#", + "id": 373, "parent": 36 } ] diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js index a4dccfe97..6be414e73 100644 --- a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js +++ b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js @@ -28,9 +28,9 @@ export const CXLMarketingNav = () => { class="search-form" action="https://cxl.com/institute/?s=" > - + { selected="-1" theme="cxl-marketing-nav" > - - Conversion optimization services + + Conversion optimization services + - Agency case studies - Blog - CXL Live 2020 - - - Search - + + Agency case studies + + + Blog + + CXL Live 2020 + + + Help { selected="-1" theme="cxl-marketing-nav" > + - My dashboard + + My dashboard + { class="menu-item menu-item-36 menu-item-has-children" theme="cxl-marketing-nav" > - Minidegrees + + Training + { class="menu-item menu-item-37 menu-item-has-children" theme="cxl-marketing-nav" > - Online courses + + Online courses + - Upcoming courses - Event videos - Invite team + Upcoming courses + + + Event videos + + + + Search + + + + + Invite team + + My account - + > + + My account + - Help `; diff --git a/scripts/watcher.js b/scripts/watcher.js index 4e0a23597..5347a478c 100644 --- a/scripts/watcher.js +++ b/scripts/watcher.js @@ -24,7 +24,7 @@ async function addToQueue(fileName) { console.log(`saw change to ${fileName}`); updating = true; console.log('building styles'); - const execPromise = exec(`node packages/sass-render/bin/sass-render.js -s "${fileName}"`); + const execPromise = exec(`yarn build`); try { const { stdout } = await execPromise; console.log(stdout);