From 86cae237802f7341a4c0da9194a086368ca42758 Mon Sep 17 00:00:00 2001 From: Kertu Ilves Date: Wed, 5 Jul 2023 11:38:06 +0300 Subject: [PATCH] feat: add dashboard lightweight card https://app.clickup.com/t/861n0qm47 --- packages/cxl-lumo-styles/scss/badge.scss | 5 ++ packages/cxl-lumo-styles/scss/global.scss | 1 + packages/cxl-lumo-styles/src/icons.js | 3 + packages/cxl-ui/scss/global/cxl-card.scss | 63 +++++++++++++++++ .../cxl-card/[theme=cxl-course].stories.js | 67 +++++++++++++++++++ .../cxl-course-slider.stories.js | 30 +++++++++ 6 files changed, 169 insertions(+) create mode 100644 packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js create mode 100644 packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js diff --git a/packages/cxl-lumo-styles/scss/badge.scss b/packages/cxl-lumo-styles/scss/badge.scss index facc474f9..3bcba3a39 100644 --- a/packages/cxl-lumo-styles/scss/badge.scss +++ b/packages/cxl-lumo-styles/scss/badge.scss @@ -7,6 +7,11 @@ color: var(--lumo-primary-text-color); } +[theme~='badge'][theme~='secondary'] { + color: var(--lumo-primary-contrast-color); + background-color: var(--cxl-color-brand-blue); +} + .course-skills { [theme~="badge"] { margin-right: var(--lumo-space-s); diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index c8f8c0db3..35cc5cdef 100644 --- 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-brand-blue: hsla(214, 61%, 25%, 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/src/icons.js b/packages/cxl-lumo-styles/src/icons.js index 677423744..a35fb45d1 100644 --- a/packages/cxl-lumo-styles/src/icons.js +++ b/packages/cxl-lumo-styles/src/icons.js @@ -53,6 +53,9 @@ $documentContainer.innerHTML = ` + + + diff --git a/packages/cxl-ui/scss/global/cxl-card.scss b/packages/cxl-ui/scss/global/cxl-card.scss index 1ae5ad441..e6fd0d741 100644 --- a/packages/cxl-ui/scss/global/cxl-card.scss +++ b/packages/cxl-ui/scss/global/cxl-card.scss @@ -24,4 +24,67 @@ cxl-card { display: block; } } + + &[theme~="cxl-course"] { + .entry-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + + .thumbnail { + width: calc(var(--lumo-icon-size-s) * 4); + height: calc(var(--lumo-icon-size-s) * 4); + margin: 0 0 0 var(--lumo-space-s); + border: 0; + } + } + + [icon="cxl:new"] { + position: absolute; + top: calc(var(--lumo-space-m) * -1); + right: 0; + width: calc(var(--lumo-space-m) * 2); + height: calc(var(--lumo-space-m) * 2); + padding: 6px; + color: var(--lumo-primary-contrast-color); + background-color: var(--lumo-primary-color); + border-radius: 100%; + } + + .entry-title { + margin-bottom: var(--lumo-space-s); + font-weight: 600; + + > vaadin-icon { + margin-top: calc(var(--lumo-space-xs) * -1); + color: var(--lumo-primary-color); + } + } + + .entry-byline { + color: var(--lumo-contrast-70pct); + + > div { + display: flex; + align-items: center; + } + + vaadin-icon { + margin-right: var(--lumo-space-xs); + font-size: var(--lumo-font-size-m); + } + } + + .entry-summary { + margin-top: var(--lumo-space-l); + } + } + + &[theme~="cxl-course"][theme~="cxl-course-completed"] { + opacity: 0.6; + } + + &[theme~="cxl-course"][theme~="cxl-course-new"] { + overflow: initial; + } } diff --git a/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js new file mode 100644 index 000000000..1e927d2c1 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js @@ -0,0 +1,67 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-card.js'; +import '@conversionxl/cxl-lumo-styles'; + +export default { + title: 'CXL UI/cxl-card', + parameters: { + layout: 'centered', + }, +}; + +const Template = ({ el, State }) => html` + +
+ ${State === 'new' + ? html`` + : html``} +
+
+ Account based marketing + ${State === 'completed' + ? html`` + : html``} +
+
+
3h 00min
+
By: Ton Wesseling
+
+ ${State === 'with-roadmaps' + ? html` +
+ Team Roadmap + Personal Roadmap +
` + : html``} +
+ +
+ +`; + +export const CXLCourse = Template.bind({}); + +CXLCourse.args = { + el: { cxl_hybrid_attr_post: { '@attributes': {} } }, + State: 'default', +}; + +CXLCourse.argTypes = { + State: { + control: { + options: ['default', 'new', 'completed', 'with-roadmaps'], + type: 'inline-radio', + }, + }, +}; + +CXLCourse.story = { + name: '[theme=cxl-course]', +}; diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js new file mode 100644 index 000000000..e53a155eb --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js @@ -0,0 +1,30 @@ +import '@conversionxl/cxl-ui/src/components/cxl-card'; +import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider'; +import { html } from 'lit'; +import { CXLCourse } from '../cxl-card/[theme=cxl-course].stories'; +import archiveData from '../cxl-vaadin-accordion/theme=cxl-archive.data.json'; + +export default { + title: 'CXL UI/cxl-tabs-slider', +}; + +export const CXLCourseSlider = ({ Cards }) => html` + + + + ${archiveData + .slice(0, Cards) + .map((el) => html` ${CXLCourse({ el })} `)} + +`; + +Object.assign(CXLCourseSlider, { + args: { + Cards: 8, + }, + storyName: '[orientation=horizontal]', +});