From 3d5db8963dd86c9f1ad8054f3aab69036d616c7b Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Thu, 2 Nov 2023 08:42:22 -0300 Subject: [PATCH] feat(cxl-ui): add cxl-dashboard-section component https://app.clickup.com/t/86ayj5cv3 --- packages/cxl-ui/scss/_mixins.scss | 12 ++ .../cxl-ui/scss/cxl-dashboard-section.scss | 7 + .../scss/global/cxl-dashboard-section.scss | 161 ++++++++++++++++++ .../src/components/cxl-dashboard-section.js | 28 +++ packages/cxl-ui/src/index-core.js | 4 +- .../cxl-dashboard-layout.stories.js | 8 +- .../cxl-dashboard-section.stories.js | 71 ++++++++ .../cxl-dashboard-sections.stories.js | 73 ++++++++ .../light-card-slider.stories.js | 3 - .../theme=cxl-dashboard-category.data.json | 4 + 10 files changed, 362 insertions(+), 9 deletions(-) create mode 100644 packages/cxl-ui/scss/cxl-dashboard-section.scss create mode 100644 packages/cxl-ui/scss/global/cxl-dashboard-section.scss create mode 100644 packages/cxl-ui/src/components/cxl-dashboard-section.js create mode 100644 packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js diff --git a/packages/cxl-ui/scss/_mixins.scss b/packages/cxl-ui/scss/_mixins.scss index 67883ba2f..2102b2e5d 100644 --- a/packages/cxl-ui/scss/_mixins.scss +++ b/packages/cxl-ui/scss/_mixins.scss @@ -49,3 +49,15 @@ -moz-box-orient: vertical; /* stylelint-enable */ } + +@mixin primary-link-with-arrow { + &::after { + padding: calc(var(--lumo-space-xs) / 2); + margin-left: var(--lumo-space-s); + font-family: lumo-icons; + font-size: var(--lumo-font-size-s); + content: var(--lumo-icons-angle-right); + background-color: var(--lumo-primary-color-10pct); + border-radius: var(--lumo-font-size-s); + } +} diff --git a/packages/cxl-ui/scss/cxl-dashboard-section.scss b/packages/cxl-ui/scss/cxl-dashboard-section.scss new file mode 100644 index 000000000..f57ecfe61 --- /dev/null +++ b/packages/cxl-ui/scss/cxl-dashboard-section.scss @@ -0,0 +1,7 @@ +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; + +:host { + position: relative; + display: block; + width: 100%; +} diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-section.scss b/packages/cxl-ui/scss/global/cxl-dashboard-section.scss new file mode 100644 index 000000000..f3639ac6e --- /dev/null +++ b/packages/cxl-ui/scss/global/cxl-dashboard-section.scss @@ -0,0 +1,161 @@ +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; +@use "../mixins"; + +/** +* Theme "cxl-dashboard-category" +*/ +cxl-dashboard-section { + padding-bottom: var(--lumo-space-xl); + + .header { + --lumo-header-text-color: var(--lumo-tint); + + position: relative; + box-sizing: border-box; + height: 240px; + padding: var(--lumo-space-xl) 0; + margin-bottom: var(--lumo-space-l); + background-color: var(--lumo-shade); + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + z-index: -1; + width: 100vw; + content: ""; + background-color: var(--lumo-shade); + transform: translateX(-50%); + } + + .entry-title { + margin: 0; + font-weight: 900; + } + + .entry-summary { + padding: 0; + margin: var(--lumo-space-m) 0; + color: var(--lumo-tint); + } + + > span { + font-size: var(--lumo-font-size-xs); + font-weight: 600; + color: var(--lumo-primary-color); + text-transform: uppercase; + } + + > .view-all { + @include mixins.primary-link-with-arrow(); + } + } + + .header-2 { + display: flex; + align-items: center; + padding: var(--lumo-space-s) 0; + + .title-2 { + margin-right: auto; + } + + a { + margin-left: auto; + color: var(--lumo-base); + + .title { + text-decoration: underline; + } + + .view-all { + display: none; + font-size: var(--lumo-font-size-m); + font-weight: 500; + } + } + + &:hover { + a { + color: var(--lumo-primary-color); + text-decoration: none; + + @media #{mq.$small} { + .view-all { + display: initial; + margin-left: var(--lumo-space-m); + text-decoration: none; + + @include mixins.primary-link-with-arrow(); + } + } + } + } + + vaadin-progress-bar { + width: 100px; + margin-left: var(--lumo-space-m); + } + + .progress-label { + display: none; + + @media #{mq.$small} { + display: initial; + } + } + } + + .title-2, + .title-3, + .title-4 { + margin: 0; + } + + .title-3 { + padding: var(--lumo-space-s) 0; + } + + .title-4 { + padding: var(--lumo-space-s) 0; + font-weight: 400; + color: var(--cxl-color-black-50pct); + } + + cxl-tabs-slider { + padding: var(--lumo-space-s) 0; + } + + .section-2:not(.has-cards):not(:first-of-type) { + padding-top: var(--lumo-space-m); + margin-top: var(--lumo-space-m); + border-top: 1px solid var(--cxl-color-light-gray); + } + + .section-2.has-cards:not(:last-of-type), + .section-3:not(:last-of-type) { + padding-bottom: var(--lumo-space-m); + margin-bottom: var(--lumo-space-m); + border-bottom: solid 1px var(--cxl-color-light-gray); + } + + .section-2.has-cards > .section-3:not(.section-3 ~ .section-3), + .section-3.has-cards .section-4:first-of-type { + padding-top: var(--lumo-space-m); + margin-top: var(--lumo-space-m); + border-top: solid 1px var(--cxl-color-light-gray); + } + + .section-4 { + .title-3 { + opacity: 0.5; + } + + .entry-title { + display: flex; + align-items: center; + gap: var(--lumo-space-s); + } + } +} diff --git a/packages/cxl-ui/src/components/cxl-dashboard-section.js b/packages/cxl-ui/src/components/cxl-dashboard-section.js new file mode 100644 index 000000000..60be4482f --- /dev/null +++ b/packages/cxl-ui/src/components/cxl-dashboard-section.js @@ -0,0 +1,28 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; +import cxlDashboardSectionGlobalStyles from '../styles/global/cxl-dashboard-section-css.js'; +import cxlDashboardSectionStyles from '../styles/cxl-dashboard-section-css.js'; + +@customElement('cxl-dashboard-section') +export class CxlDashboardSectionElement extends LitElement { + static get styles() { + return [cxlDashboardSectionStyles]; + } + + @property({ type: String }) image = ''; + + render() { + return html` `; + } + + firstUpdated(_changedProperties) { + super.firstUpdated(_changedProperties); + + // Global styles. + registerGlobalStyles(cxlDashboardSectionGlobalStyles, { + moduleId: 'cxl-dashboard-section', + }); + } +} diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js index 06639c252..93bf7ecbd 100644 --- a/packages/cxl-ui/src/index-core.js +++ b/packages/cxl-ui/src/index-core.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ // Theme style modules must be imported before elements. import '@conversionxl/cxl-lumo-styles'; import 'qrcode'; @@ -16,11 +17,12 @@ import * as Headroom from 'headroom.js'; export { CXLAppLayoutElement } from './components/cxl-app-layout.js'; export { CXLBaseCardElement } from './components/cxl-base-card.js'; export { CXLCardElement } from './components/cxl-card.js'; -export { CXLCredentialElement } from './components/cxl-credential.js' +export { CXLCredentialElement } from './components/cxl-credential.js'; export { CXLCourseCardElement } from './components/cxl-course-card.js'; export { CXLCourseDialogElement } from './components/cxl-course-dialog.js'; export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js'; export { CXLDashboardHeaderElement } from './components/cxl-dashboard-header.js'; +export { CxlDashboardSectionElement } from './components/cxl-dashboard-section.js'; export { CXLDashboardNotificationElement } from './components/cxl-dashboard-notification.js'; export { CXLFeaturedCourseCardElement } from './components/cxl-featured-course-card.js'; export { CXLLightCardElement } from './components/cxl-light-card.js'; diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js index 219d42e41..562d73524 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js @@ -1,5 +1,4 @@ import { html } from 'lit'; -import { text } from '@storybook/addon-knobs'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; @@ -7,7 +6,7 @@ import { CXLDashboardHeader } from '../cxl-dashboard-header/dashboard-header.sto import { CXLFeatureadCourseCard } from '../cxl-featured-course-card/default.stories'; import { DashboardSlider } from '../cxl-featured-course-card/dashboard-slider.stories'; import { CXLStats } from '../cxl-stats/default.stories'; -import { CXLVaadinAccordionThemeCategory } from '../cxl-vaadin-accordion.stories'; +import { CXLDashboardSections } from './cxl-dashboard-sections.stories'; import { CXLFooterNav } from '../footer-nav.stories'; export default { @@ -15,7 +14,6 @@ export default { }; export const CXLDashboard = () => { - const boxShadow = text('Box-shadow', 'var(--lumo-box-shadow-l)'); const statsCount = 4; CXLDashboardHeader.args = { @@ -52,9 +50,9 @@ export const CXLDashboard = () => { return html` ${CXLMarketingNav()} -
+
${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)} - ${CXLVaadinAccordionThemeCategory()} + ${CXLDashboardSections()}
${CXLFooterNav()} diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js new file mode 100644 index 000000000..628ad53d9 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js @@ -0,0 +1,71 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-dashboard-section.js'; +import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories'; + +export default { + title: 'CXL UI/cxl-dashboard', + component: 'cxl-dashboard-section', + parameters: { + layout: 'centered', + }, +}; + +const Template = (section) => html` + +
+

${section.title}

+ ${section.completion} +
${section.description}
+ ${section.ctaLabel && section.ctaUrl + ? html` + + ${section.ctaButton + ? html` + + ${section.ctaLabel} + + + ` + : section.ctaLabel} + + ` + : ''} +
+
+
+
+

+ + Growth + View All + +

+ Progress: + +
+
+
+
+
Demand Creation
+ / +
Organic Content
+
+ ${CXLLightCardSlider(CXLLightCardSlider.args)} +
+
+
+
+ +`; +export const CXLDashboardSection = Template.bind({}); + +CXLDashboardSection.args = { + image: '', + title: 'Growth', + completion: '80% complete', + description: 'Master these skills and become and expert in Growth, CRO and Analytics.', + ctaLabel: 'Growth Marketing exam', + ctaUrl: '#', + ctaButton: false, +}; diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js new file mode 100644 index 000000000..e228340ad --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js @@ -0,0 +1,73 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-section.js'; +import '@conversionxl/cxl-ui/src/components/cxl-dashboard-section.js'; +import '@vaadin/progress-bar'; +import categoryData from '../cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json'; +import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories'; + +export default { + title: 'CXL UI/cxl-dashboard', +}; + +export const CXLDashboardSections = () => html` +
+
+

Explore all Categories

+
+ ${categoryData.map( + (cat) => html` + +
+

${cat.title}

+ ${cat.completion} +
${cat.description}
+
+
+ ${cat.sections.map( + (section) => html` +
+
+

+ + ${section.title} + View All + +

+ Progress: + +
+ ${section.sections.map( + (item) => html` +
+ ${item.sections.map( + (itemSection) => html` +
+
+
${item.title}
+ / +
${itemSection.title}
+
+ ${CXLLightCardSlider(CXLLightCardSlider.args)} +
+ ` + )} +
+ ` + )} +
+ ` + )} +
+ + ` + )} +
+`; + +Object.assign(CXLLightCardSlider, { + args: { + numberOfCards: 8, + theme: 'cxl-category-accordion', + }, +}); 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 88c67a5da..6b9d80982 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 @@ -12,7 +12,6 @@ const CXLLightCard = Template.bind({}); CXLLightCard.args = { theme: 'light-card', name: 'Account based marketing', - time: '3h 00min', instructor: 'Ton Wesseling', avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg', @@ -22,7 +21,6 @@ const CXLLightCard2 = Template.bind({}); CXLLightCard2.args = { ...CXLLightCard.args, name: 'Basics of Casual Inference', - time: '', instructor: 'Georgi Georgiev', avatar: '', }; @@ -31,7 +29,6 @@ const CXLLightCard3 = Template.bind({}); CXLLightCard3.args = { ...CXLLightCard.args, name: 'Best Practices', - time: '1h 30min', instructor: 'Peep Laja', avatar: 'https://cxl.com/institute/wp-content/uploads/2019/09/peep-1x1-transparent-150x150.png', }; 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 index a7c9d645a..d23789794 100644 --- 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 @@ -3,6 +3,8 @@ "id": 1, "title": "Deep skills", "completion": "10% complete", + "description": "Master these skills and become an expert in Growth, CRO and Analytics.", + "image": "https://s3-alpha-sig.figma.com/img/f1dc/f5fd/5ba006206994d76653204eaead33a7c6?Expires=1699228800&Signature=NGyGKy5hkTkdolJH0dj25ZEZpThq2ket7YdhhCD79yVCnSKh0K4W16z~YHjxM-4bYKqdyOx6R3TlW6K-ke4AtA7poTc6qEDHGMPxYsKM1NHpw5m3iBD5uwYe1DxlAjVP8YRhSVrfokUy6E~jiWtWc~VqD~DJa6DsIiIqQZhnWjCWL-P4VIKxs9T44LEUHH8JNsAHwKUYSXHFtOQzH6pHhC9IFJttBHHOf4aXOXVXYuWqVIMxvrSMkiT-WYfw7mY3CATEyq9MallTjiLeyDU8omWGRvzneJUg11fLe1vxH~yP0USalIk5mlGnQwF96qxzoBjy5SKryyl3Ua9rOL10ZQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", "sections": [ { "title": "Growth", @@ -60,7 +62,9 @@ { "id": 2, "title": "Broad skills", + "description": "Know a lot about a lot. Learn about all other aspects of marketing", "completion": "10% complete", + "image": "https://s3-alpha-sig.figma.com/img/c675/222a/a7e1325fb0d0cdb4809964954ed2ad2e?Expires=1699228800&Signature=EK4u0qpf8AqXFRMJBQyMxd2v8bhq5LhP8BUaRSO4MGb2MSifd3xfsDWTzZhnPFzmMJnACVg0HnTuJTzeIGMSIN5B59B0BbWzF8R3Ced~uoRBkbwz6AbT3VTTECqq3RERR2MnlRqZR5GRj~hYvfTtgHd1NIwnQFmrLrmMVnKRW0Iw92HECXJZUdR4BJ6j6TJy9aGGMOhx4u4Sy4iSWz9El6WV4kSWsFUjSKt6ZICsYNFM8Bj6c4HejW6dIjOTWaBhTH-Js31-LPB1~m4lzIBHVrOl7XyZEBrNZjLhte8FltasTxEE2UvdN9EHXPm8mYbvdPlHniK3vX1KPeLEicSnNw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4", "sections": [] } ]