Merge pull request #401 from conversionxl/pawel/feat/context-menu-sec…

…tion-header
conversionxl · Mar 11, 2024 · 3b887fd · 3b887fd
2 parents 6f63f36 + 63e6b79
commit 3b887fd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -360,3 +360,7 @@ vaadin-button {
     }
   }
 }
+
+vaadin-context-menu-item[theme~="cxl-context-menu-section-header"] {
+  pointer-events: none
+}
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
@@ -63,7 +63,7 @@
 
   [part="checkmark"] {
     display: none !important;
-  
+
     &::before {
       content: unset !important;
     }
@@ -93,3 +93,9 @@
     }
   }
 }
+
+:host([theme~="cxl-context-menu-section-header"]) {
+  font-size: var(--lumo-font-size-s);
+  font-weight: 700;
+  text-transform: uppercase;
+}
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
@@ -19,7 +19,7 @@
   @media (min-width: 568px) {
     padding: 0;
   }
-  
+
   [part="items"] ::slotted(.vaadin-menu-item) {
     padding-right: var(--lumo-space-m);
     padding-left: var(--lumo-space-m);
@@ -38,15 +38,15 @@
 
 :host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
   border-radius: 0;
-  
+
   &::part(checkmark) ::before {
     content: unset;
   }
 }
 
 @media (max-width: 568px) {
   :host([theme~="cxl-marketing-nav"]) [part="items"] {
-    
+
     ::slotted(.global-menu-item) {
       background-color: var(--cxl-color-light-gray);
     }

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js
@@ -359,9 +359,9 @@ export const CXLAppLayout2cr = () => {
           >Complete lesson <vaadin-icon icon="vaadin:check-circle" slot="suffix"></vaadin-icon
         ></vaadin-button>
         <vaadin-button>Secondary action</vaadin-button>
-        <vaadin-context-menu selector="vaadin-button" open-on="click" theme="cxl-marketing-nav">
+        <vaadin-context-menu selector="vaadin-button" open-on="click" theme="cxl-action-bar-context-menu">
           <template>
-            <vaadin-context-menu-list-box theme="cxl-marketing-nav">
+            <vaadin-context-menu-list-box theme="cxl-action-bar-context-menu">
               <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
                 >Next lesson <vaadin-icon icon="lumo:arrow-right"></vaadin-icon
               ></vaadin-context-menu-item>
@@ -370,14 +370,23 @@ export const CXLAppLayout2cr = () => {
                 lesson</vaadin-context-menu-item
               >
               <hr />
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-context-menu-section-header"
+              >Minidegrees</vaadin-context-menu-item
+              >
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+              ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Growth</vaadin-context-menu-item
+              >
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+              ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Digital Psychology & Persuation</vaadin-context-menu-item
+              >
+              <hr />
               <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
-                >Go to course</vaadin-context-menu-item
+                ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Go to course</vaadin-context-menu-item
               >
             </vaadin-context-menu-list-box>
           </template>
-          <vaadin-button theme="icon contrast" aria-label="More actions"
-            ><vaadin-icon icon="vaadin:ellipsis-dots-v"></vaadin-icon
-          ></vaadin-button>
+          <vaadin-button theme="secondary" aria-label="More actions"
+            >Navigate to...</vaadin-button>
         </vaadin-context-menu>
       </div>
     </cxl-app-layout>