feat: add dashboard category accordion

https://app.clickup.com/t/861n0qkvd
conversionxl · Jul 10, 2023 · efa005c · efa005c
1 parent 3bdb785
commit efa005c
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 2 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -6,6 +6,7 @@ html {
   --cxl-content-width: 36em;
   --cxl-wrap-width: 72rem;
   --cxl-wrap-padding: var(--lumo-space-m);
+  --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 ::slotted(vaadin-tab) {
   align-items: stretch; // Equal height elements.
@@ -31,3 +32,86 @@
     display: initial;
   }
 }
+
+/**
+ * Theme "cxl-dashboard-category"
+ */
+
+:host([theme~="cxl-dashboard-category"][theme~="minimal"]) {
+  margin: 0 calc(var(--lumo-space-m) * -1);
+
+  @media #{mq.$small} {
+    margin: 0 calc(var(--lumo-space-l) * -1);
+  }
+
+  ::slotted(vaadin-tab) {
+    padding: 0 calc(var(--lumo-space-s) / 2) calc(var(--lumo-space-s) / 2);
+  }
+
+  ::slotted(vaadin-tab:first-of-type) {
+    margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
+
+    @media #{mq.$small} {
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-xs));
+    }
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: calc(var(--lumo-space-m) * -1);
+    bottom: calc(var(--lumo-space-m) * -1);
+    width: 68px;
+    content: "";
+    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0%;
+  }
+
+  [part="tabs"] {
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-space-xl);
+    height: var(--lumo-space-xl);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xxl);
+    }
+  }
+
+  [part="back-button"] {
+    margin-left: var(--lumo-space-s);
+  }
+
+  [part="forward-button"] {
+    margin-right: var(--lumo-space-s);
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][overflow="start end"]) {
+  &::before {
+    left: 0;
+    z-index: 1;
+    rotate: 180deg;
+    opacity: 100%;
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][overflow="end"]),
+:host([theme~="cxl-dashboard-category"][overflow="start end"]) {
+  &::after {
+    right: 0;
+    opacity: 100%;
+  }
+}
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
@@ -149,3 +149,42 @@
     padding-bottom: var(--lumo-space-m);
   }
 }
+
+/**
+ * Theme "cxl-dashboard-category".
+ */
+:host([theme~="cxl-dashboard-category"]) {
+  border-bottom: solid 1px var(--cxl-color-light-gray);
+
+  [part="summary"] {
+    padding: var(--lumo-space-l) 0;
+  }
+
+  [part="content"] {
+    padding: 0;
+    margin-bottom: var(--lumo-space-l);
+  }
+
+  [part="toggle"] {
+    margin-right: var(--lumo-space-l);
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][opened]) {
+  [part="summary"] {
+    padding-bottom: 0;
+  }
+}
+
+@media (hover: hover) {
+  :host([theme~="cxl-dashboard-category"]:not([opened])) {
+    [part="summary"]:hover {
+      cursor: pointer;
+      background-color: var(--cxl-color-light-gray);
+
+      [part="toggle"] {
+        color: var(--lumo-shade);
+      }
+    }
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -265,4 +265,73 @@ cxl-vaadin-accordion {
       }
     }
   }
+
+  /**
+   * Theme "cxl-dashboard-category"
+   */
+  &[theme~="cxl-dashboard-category"] {
+    .header {
+      display: flex;
+      align-items: baseline;
+      padding: var(--lumo-space-l) var(--lumo-space-m);
+
+      @media #{mq.$small} {
+        padding: var(--lumo-space-l);
+      }
+
+      .entry-title {
+        margin: 0;
+      }
+
+      > span {
+        margin: 0 0 0 var(--lumo-space-m);
+        font-size: var(--lumo-font-size-xs);
+        font-weight: 600;
+        color: var(--lumo-primary-color);
+        text-transform: uppercase;
+      }
+    }
+
+    .summary {
+      padding: 0 var(--lumo-space-m) var(--lumo-space-l);
+
+      @media #{mq.$small} {
+        padding: 0 var(--lumo-space-l);
+      }
+    }
+
+    .summary-header {
+      display: flex;
+      align-items: center;
+
+      &:not(:first-of-type) {
+        padding-top: var(--lumo-space-l);
+        margin-top: var(--lumo-space-l);
+        border-top: 1px solid var(--cxl-color-light-gray);
+      }
+
+      h5 {
+        margin: 0;
+      }
+
+      vaadin-progress-bar {
+        width: 100px;
+        margin-left: var(--lumo-space-m);
+      }
+
+      a {
+        margin-left: auto;
+      }
+    }
+
+    .summary-cards {
+      h6 {
+        margin-bottom: var(--lumo-space-s);
+        font-size: var(--lumo-font-size-xs);
+        font-weight: 400;
+        line-height: 2;
+        opacity: 50%;
+      }
+    }
+  }
 }
diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js
@@ -8,14 +8,14 @@ export default {
   title: 'CXL UI/cxl-tabs-slider',
 };
 
-export const CXLTabsSlider = ({ Cards }) => html`
+export const CXLTabsSlider = ({ Cards, Themes }) => html`
   <style>
     vaadin-tab {
       max-width: calc(var(--cxl-content-width) / 2);
     }
   </style>
 
-  <cxl-tabs-slider orientation="horizontal" theme="minimal">
+  <cxl-tabs-slider orientation="horizontal" theme="minimal ${Themes}">
     ${archiveData
       .slice(0, Cards)
       .map((el) => html` <vaadin-tab>${CXLTestimonial({ el })}</vaadin-tab> `)}
@@ -25,6 +25,7 @@ export const CXLTabsSlider = ({ Cards }) => html`
 Object.assign(CXLTabsSlider, {
   args: {
     Cards: 3,
+    Themes: ''
   },
   storyName: '[orientation=horizontal]',
 });
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js
@@ -3,6 +3,7 @@ import { CXLPlaybookAccordion } from './cxl-vaadin-accordion/cxl-playbook-accord
 import { CXLVaadinAccordionThemeVaadin } from './cxl-vaadin-accordion/vaadin-accordion-panel[theme=vaadin].story';
 import { CXLVaadinAccordionThemeFaq } from './cxl-vaadin-accordion/theme=cxl-faq.story';
 import { CXLVaadinAccordionThemeMinidegreeTrack } from './cxl-vaadin-accordion/theme=cxl-minidegree-track.story';
+import { CXLVaadinAccordionThemeCategory } from './cxl-vaadin-accordion/theme=cxl-dashboard-category.story';
 import { CXLHubsAndPlaybooks } from './cxl-vaadin-accordion/cxl-hubs-and-playbooks.story';
 
 export default {
@@ -22,6 +23,7 @@ CXLVaadinAccordionThemeArchive.storyName = 'cxl-accordion-card';
 CXLVaadinAccordionThemeFaq.storyName = '[theme=cxl-faq]';
 CXLVaadinAccordionThemeMinidegreeTrack.storyName = '[theme=cxl-minidegree-track]';
 CXLVaadinAccordionThemeVaadin.storyName = 'vaadin-accordion-panel[theme=vaadin]';
+CXLVaadinAccordionThemeCategory.storyName = '[theme=cxl-dashboard-category]';
 CXLHubsAndPlaybooks.storyName = 'cxl-hubs-and-playbooks';
 
 export {
@@ -30,5 +32,6 @@ export {
   CXLVaadinAccordionThemeFaq,
   CXLVaadinAccordionThemeMinidegreeTrack,
   CXLVaadinAccordionThemeVaadin,
+  CXLVaadinAccordionThemeCategory,
   CXLHubsAndPlaybooks,
 };
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json
@@ -0,0 +1,88 @@
+[
+  {
+    "id": 1,
+    "title": "Deep skills",
+    "completion": "10% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          },
+          {
+            "title": "Sub category",
+            "cards": []
+          }
+        ]
+      },
+      {
+        "title": "Category",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "title": "Broad skills",
+    "completion": "10% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "progress": "0.50",
+        "action": "View all",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "title": "Fast skills",
+    "completion": "0% complete",
+    "sections": [
+      {
+        "title": "Growth",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          },
+          {
+            "title": "Sub category",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "title": "Learning history",
+    "sections": [
+      {
+        "title": "Growth",
+        "items": [
+          {
+            "title": "Demand capture",
+            "cards": []
+          }
+        ]
+      }
+    ]
+  }
+]