From 49894035aab3ae850ae0efc1408bfaffc92966bf Mon Sep 17 00:00:00 2001 From: Kertu Ilves Date: Mon, 7 Aug 2023 16:53:11 +0300 Subject: [PATCH] feat(cxl-ui): refactor `cxl-light-card` component based on `cxl-base-card` https://app.clickup.com/t/861n0qm47 --- packages/cxl-ui/scss/cxl-light-card.scss | 76 ++++++------------- .../cxl-ui/src/components/cxl-light-card.js | 47 +++--------- .../cxl-ui/cxl-light-card/default.stories.js | 14 +--- .../light-card-slider.stories.js | 9 +-- 4 files changed, 42 insertions(+), 104 deletions(-) diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss index 2b5b8d64c..77c9b7f09 100644 --- a/packages/cxl-ui/scss/cxl-light-card.scss +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -1,47 +1,33 @@ :host { - display: block; + max-width: 300px; + height: auto; + min-height: auto; 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%; - } + .container > .attributes { + display: none; } - .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; + header { + .info { + .name { + font-size: var(--lumo-font-size-m); + font-weight: 600; + } + + .attributes { + display: flex; + flex-direction: column; + padding-top: var(--lumo-space-xs); + padding-bottom: 0; + gap: var(--lumo-space-xs); + } } - vaadin-icon { - margin-right: var(--lumo-space-xs); - font-size: var(--lumo-font-size-m); + .instructor-image { + height: 80px; } } - - ::slotted(.entry-footer) { - margin-top: var(--lumo-space-l); - } } :host([completed]) { @@ -54,20 +40,8 @@ } } -:host([new]) { - position: relative; - overflow: initial; - - [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%; - } +::slotted(footer) { + display: flex; + flex-wrap: wrap; + gap: var(--lumo-space-xs); } diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js index b49ea2b25..806bb1a5b 100644 --- a/packages/cxl-ui/src/components/cxl-light-card.js +++ b/packages/cxl-ui/src/components/cxl-light-card.js @@ -1,50 +1,27 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { LitElement, html, nothing } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { html } from 'lit'; +import { customElement, state } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; import cxlLightCardStyles from '../styles/cxl-light-card-css.js'; +import { CXLBaseCardElement } from './cxl-base-card.js'; @customElement('cxl-light-card') -export class CXLLightCardElement extends LitElement { +export class CXLLightCardElement extends CXLBaseCardElement { static get styles() { - return [cxlLightCardStyles]; + return [...super.styles, cxlLightCardStyles]; } - @property({ type: String }) id = ''; + @state() showTags = false; - @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, reflect: true }) new = false; - - @property({ type: Boolean, reflect: true }) completed = false; + @state() showTimeIcon = true; render() { return html` -
- ${this.new ? html`` : nothing} -
-
- ${this.title} - ${this.completed ? html`` : nothing} -
-
-
${this.time}
-
${this.instructorPrefix} ${this.instructor}
-
-
- ${this.instructor} -
- +
+ ${this._renderHeader()} + + +
`; } } diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js index 0d88427d6..b12ad6736 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js @@ -13,17 +13,14 @@ export default { const Template = (card) => html` - ${card.footer - ? html`card. -
${unsafeHTML(card.footer)}
` - : nothing} + ${card.footer ? html`
${unsafeHTML(card.footer)}
` : nothing} `; @@ -31,9 +28,10 @@ export const CXLLightCard = Template.bind({}); export const CXLLightCardFooter = Template.bind({}); CXLLightCard.args = { + theme: 'light-card', new: false, completed: false, - title: 'Account based marketing', + name: 'Account based marketing', time: '3h 00min', instructor: 'Ton Wesseling', avatar: @@ -41,10 +39,6 @@ CXLLightCard.args = { footer: '', }; -CXLLightCard.story = { - name: '[theme=light-card]', -}; - CXLLightCardFooter.args = { ...CXLLightCard.args, footer: 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 94f2c27ad..10e59c6c1 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 @@ -9,12 +9,6 @@ export default { }; const Template = ({ numberOfCards }) => html` - - ${Array.from( { length: numberOfCards }, @@ -37,8 +31,7 @@ LightCardSlider.args = { CXLLightCard.args = { theme: 'light-card', - hasBadges: false, - title: 'Account based marketing', + name: 'Account based marketing', time: '3h 00min', instructor: 'Ton Wesseling', avatar: