From 3156038cfe2fd734fb073c106404bcec73b76bca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= Date: Wed, 28 Jun 2023 14:37:33 +0200 Subject: [PATCH] feat(cxl-ui): add `cxl-light-card` component 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/cxl-light-card.scss | 82 +++++++++++++++++++ packages/cxl-ui/src/components/cxl-card.js | 2 +- .../cxl-ui/src/components/cxl-light-card.js | 50 +++++++++++ .../cxl-ui/cxl-light-card/default.stories.js | 55 +++++++++++++ .../light-card-slider.stories.js | 46 +++++++++++ 8 files changed, 243 insertions(+), 1 deletion(-) create mode 100644 packages/cxl-ui/scss/cxl-light-card.scss create mode 100644 packages/cxl-ui/src/components/cxl-light-card.js create mode 100644 packages/storybook/cxl-ui/cxl-light-card/default.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-light-card/light-card-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 a80427924..62545e340 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -8,6 +8,7 @@ html { --cxl-wrap-padding: var(--lumo-space-m); --cxl-color-light-gray: hsla(0, 0%, 96%, 1); --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5); + --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/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss new file mode 100644 index 000000000..99492fda8 --- /dev/null +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -0,0 +1,82 @@ +:host { + .container { + padding: var(--lumo-space-m); + border: 1px solid var(--lumo-contrast-10pct); + border-radius: var(--lumo-border-radius-l); + box-shadow: var(--lumo-box-shadow-xs); + } + + .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-radius: 100%; + } + } + + .entry-title { + margin-bottom: var(--lumo-space-s); + font-weight: 600; + } + + .entry-byline { + font-size: var(--lumo-font-size-s); + color: var(--lumo-contrast-70pct); + row-gap: calc(var(--lumo-space-s) / 2); + + > div { + display: flex; + align-items: center; + } + + vaadin-icon { + margin-right: var(--lumo-space-xs); + font-size: var(--lumo-font-size-m); + } + } + + ::slotted(.entry-footer) { + margin-top: var(--lumo-space-l); + } + + [icon="cxl:new"], + [icon="lumo:checkmark"] { + display: none; + } +} + +:host([theme~="light-card-completed"]) { + opacity: 0.6; + + [icon="lumo:checkmark"] { + display: inline-block; + margin-top: calc(var(--lumo-space-xs) * -1); + color: var(--lumo-primary-color); + } +} + +:host([theme~="light-card-new"]) { + overflow: initial; + + .container { + position: relative; + + [icon="cxl:new"] { + position: absolute; + top: calc(var(--lumo-space-m) * -1); + right: 0; + display: block; + 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%; + } + } +} diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js index 5df7a37d1..1de4fcc21 100644 --- a/packages/cxl-ui/src/components/cxl-card.js +++ b/packages/cxl-ui/src/components/cxl-card.js @@ -12,7 +12,7 @@ export class CXLCardElement extends LitElement { } render() { - return html` `; + return html``; } firstUpdated(_changedProperties) { diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js new file mode 100644 index 000000000..54620feb3 --- /dev/null +++ b/packages/cxl-ui/src/components/cxl-light-card.js @@ -0,0 +1,50 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import '@conversionxl/cxl-lumo-styles'; +import cxlLightCardStyles from '../styles/cxl-light-card-css.js'; + +@customElement('cxl-light-card') +export class CXLCourseCardElement extends LitElement { + static get styles() { + return [cxlLightCardStyles]; + } + + @property({ type: String }) id = ''; + + @property({ type: String }) theme = 'light-card'; + + @property({ type: String }) title = ''; + + @property({ type: String }) time = ''; + + @property({ type: String }) instructorPrefix = 'By:'; + + @property({ type: String }) instructor = ''; + + @property({ type: String }) avatar = ''; + + @property({ type: Boolean }) hasFooter = false; + + render() { + return html` +
+
+ +
+
+ ${this.title} + +
+
+
${this.time}
+
${this.instructorPrefix} ${this.instructor}
+
+
+ ${this.instructor} +
+ +
+ `; + } +} diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js new file mode 100644 index 000000000..13ef9d485 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js @@ -0,0 +1,55 @@ +import { html, nothing } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-light-card.js'; +import '@conversionxl/cxl-lumo-styles'; + +export default { + title: 'CXL UI/cxl-light-card', + parameters: { + layout: 'centered', + }, +}; + +const Template = ({ theme, hasFooter, title, time, instructor, avatar }) => { + const themeArray = Array.isArray(theme) ? theme : [theme]; + + return html` + + ${hasFooter + ? html`
+ Team Roadmap + Personal Roadmap +
` + : nothing} + + `; +}; + +export const CXLLightCard = Template.bind({}); + +CXLLightCard.args = { + theme: 'light-card', + hasFooter: false, + title: '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', +}; + +CXLLightCard.argTypes = { + theme: { + options: ['light-card', 'light-card-new', 'light-card-completed'], + control: { type: 'multi-select' }, + }, +}; + +CXLLightCard.story = { + name: '[theme=light-card]', +}; 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 new file mode 100644 index 000000000..5b81c30be --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js @@ -0,0 +1,46 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-light-card.js'; +import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider.js'; +import '@conversionxl/cxl-lumo-styles'; +import { CXLLightCard } from './default.stories.js'; + +export default { + title: 'CXL UI/cxl-light-card', +}; + +const Template = ({ numberOfCards }) => html` + + + + ${Array.from( + { length: numberOfCards }, + () => html` + ${CXLLightCard({ + ...CXLLightCard.args, + })} + ` + )} + +`; + +export const LightCardSlider = Template.bind({}); + +LightCardSlider.args = { + numberOfCards: 3, +}; + +CXLLightCard.args = { + theme: 'light-card', + hasBadges: false, + title: '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', +};