From bb5e8ee5994abb9d5acf3ab5483cb792f497c755 Mon Sep 17 00:00:00 2001 From: Kertu Ilves Date: Wed, 5 Jul 2023 09:21:52 +0300 Subject: [PATCH] feat: add dashboard category accordion https://app.clickup.com/t/861n0qkvd --- .../scss/themes/cxl-tabs-slider.scss | 15 +++- .../scss/themes/vaadin-accordion-panel.scss | 39 ++++++++ .../scss/global/cxl-vaadin-accordion.scss | 70 +++++++++++++++ .../light-card-slider.stories.js | 8 +- .../cxl-ui/cxl-vaadin-accordion.stories.js | 3 + .../theme=cxl-dashboard-category.data.json | 88 +++++++++++++++++++ .../theme=cxl-dashboard-category.story.js | 51 +++++++++++ 7 files changed, 268 insertions(+), 6 deletions(-) create mode 100644 packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json create mode 100644 packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss index 2ce825cc9..3a550dcbe 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -93,7 +93,8 @@ } } -:host([theme~="cxl-course-slider"][overflow="start end"]) { +:host([theme~="cxl-course-slider"][overflow="start end"]), +:host([theme~="cxl-course-slider"][overflow="start"]) { &::before { left: 0; z-index: 1; @@ -109,3 +110,15 @@ opacity: 100%; } } + +/** + * Theme "cxl-course-slider" and "cxl-category-accordion" +*/ + +:host([theme~="cxl-course-slider"][theme~="cxl-category-accordion"][theme~="minimal"]) { + margin-left: calc(-1 * var(--lumo-space-m)); + + @media #{mq.$small} { + margin-left: calc(-1 * var(--lumo-space-l)); + } +} diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss index e8f17e8ae..cd24d47c3 100644 --- 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 index 07306acb6..46abf2853 100644 --- a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss +++ b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss @@ -265,4 +265,74 @@ 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; + font-size: var(--lumo-font-size-m); + } + + 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-light-card/light-card-slider.stories.js b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js index 10e59c6c1..8d4037f16 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js +++ b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js @@ -8,8 +8,8 @@ export default { title: 'CXL UI/cxl-light-card', }; -const Template = ({ numberOfCards }) => html` - +export const CXLLightCardSlider = ({ numberOfCards, theme }) => html` + ${Array.from( { length: numberOfCards }, () => html` @@ -23,9 +23,7 @@ const Template = ({ numberOfCards }) => html` `; -export const LightCardSlider = Template.bind({}); - -LightCardSlider.args = { +CXLLightCardSlider.args = { numberOfCards: 3, }; diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js index b409a7227..1717bec44 100644 --- 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 new file mode 100644 index 000000000..30c912b06 --- /dev/null +++ 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": [] + } + ] + } + ] + } +] diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js new file mode 100644 index 000000000..dc5f22567 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js @@ -0,0 +1,51 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js'; +import '@vaadin/progress-bar'; +import categoryData from './theme=cxl-dashboard-category.data.json'; +import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories'; + +export const CXLVaadinAccordionThemeCategory = () => html` + + ${categoryData.map( + (el) => html` + +
+

${el.title}

+ ${el.completion} +
+
+ ${el.sections.map( + (section) => html` +
+
${section.title}
+ + ${section.action} +
+ ${section.items.map( + (item) => html` +
+
${item.title}
+ ${CXLLightCardSlider(CXLLightCardSlider.args)} +
+ ` + )} + ` + )} +
+ + ` + )} + +`; + + +Object.assign(CXLLightCardSlider, { + args: { + numberOfCards: 8, + theme: 'cxl-category-accordion' + }, +});