From dcb3e2419a5cca4e2ce339a8522e69ae3b44abfe Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Sat, 28 Oct 2023 16:25:30 +0300 Subject: [PATCH] feat(cxl-ui): cxl-light-card add portrait mode, progress bar https://app.clickup.com/t/86ayhhg16 --- packages/cxl-lumo-styles/scss/badge.scss | 5 + packages/cxl-lumo-styles/scss/global.scss | 1 + packages/cxl-ui/scss/cxl-base-card.scss | 6 +- packages/cxl-ui/scss/cxl-light-card.scss | 109 +++++++++++++++++- .../cxl-ui/src/components/cxl-base-card.js | 2 +- .../cxl-ui/src/components/cxl-light-card.js | 29 ++++- .../cxl-ui/cxl-light-card/default.stories.js | 25 +++- .../cxl-ui/cxl-light-card/template.js | 2 + 8 files changed, 164 insertions(+), 15 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/badge.scss b/packages/cxl-lumo-styles/scss/badge.scss index 083ce7ae2..a2aa47ae0 100644 --- a/packages/cxl-lumo-styles/scss/badge.scss +++ b/packages/cxl-lumo-styles/scss/badge.scss @@ -12,6 +12,11 @@ background-color: var(--cxl-color-brand-blue); } +[theme~="badge"][theme~="tertiary"] { + color: var(--lumo-primary-contrast-color); + background-color: var(--cxl-color-dark-green); +} + .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 ae9549991..a40c0b6ee 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -13,6 +13,7 @@ html { --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5); --cxl-color-brand-blue: hsla(214, 61%, 25%, 1); --cxl-color-light-pink: hsl(353, 73%, 96%, 1); + --cxl-color-dark-green: hsl(148, 57%, 24%, 1); /** * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons. diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 80ca5e3e6..245656110 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -157,7 +157,7 @@ header { } .name { - @include mixins.ellipsis-for-lines(2); + @include mixins.ellipsis-for-lines(3); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-xl); font-style: normal; @@ -213,12 +213,12 @@ header { } } -.badge-new { +.icon-new { display: none; } :host([new]) { - .badge-new { + .icon-new { position: absolute; top: calc(-1 * var(--lumo-space-s)); right: calc(-1 * var(--lumo-space-s)); diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss index 1dea00503..8d560e53a 100644 --- a/packages/cxl-ui/scss/cxl-light-card.scss +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -3,14 +3,23 @@ max-width: 300px; height: auto; min-height: calc(3 * var(--lumo-space-xl)); - padding: var(--lumo-space-m); + padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s); + overflow: hidden; - .container > .attributes { - display: none; + .container { + padding-right: 112px; // image width + + & > .attributes { + display: none; + } } header { + height: 100%; + .info { + max-width: none; + .name { font-size: var(--lumo-font-size-m); font-weight: 600; @@ -20,6 +29,7 @@ display: flex; flex-direction: column; align-items: flex-start; + margin-top: auto; padding-top: var(--lumo-space-xs); padding-bottom: 0; gap: var(--lumo-space-xs); @@ -30,10 +40,58 @@ } } + .instructor-preposition { + display: none; + } + .instructor-image { - height: 80px; + position: absolute; + right: 0; + bottom: 0; + width: 112px; + height: auto; + border-radius: 0; + border-bottom-right-radius: var(--lumo-border-radius-l); + overflow: hidden; + + img { + display: block; + width: 100%; + height: auto; + margin-top: auto; + } } } + + .progress { + display: flex; + flex-direction: column; + justify-content: center; + font-size: var(--lumo-font-size-xs); + line-height: var(--lumo-line-height-s); + color: var(--lumo-body-text-color); + } +} + +.badge-new { + display: none; +} + +:host([new]) { + .badge-new { + position: absolute; + right: var(--lumo-space-s); + bottom: var(--lumo-space-s); + display: block; + padding: calc(var(--lumo-space-xs) / 2) var(--lumo-space-s); + font-size: var(--lumo-font-size-s); + font-weight: 700; + line-height: var(--lumo-line-height-s); + color: var(--lumo-primary-contrast-color); + border-radius: calc(var(--lumo-border-radius-l) * 6); + background: var(--lumo-primary-color); + z-index: 2; + } } :host([completed]) { @@ -66,3 +124,46 @@ color: var(--lumo-tint-40pct); } } + +:host([theme~="portrait"]) { + display: block; + width: 175px; + min-width: 0; + padding: 0; + + .container { + display: block; + padding: 0; + } + + header { + display: block; + } + + .info { + padding: var(--lumo-space-s); + + .attributes { + display: none; + } + } + + .progress { + display: none; + } + + .instructor-image { + position: relative; + width: 100%; + height: auto; + margin-top: var(--lumo-space-s); + border-radius: 0; + + img { + display: block; + width: 100%; + height: auto; + margin-top: auto; + } + } +} diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js index e4a1db54d..e7f2f21b2 100644 --- a/packages/cxl-ui/src/components/cxl-base-card.js +++ b/packages/cxl-ui/src/components/cxl-base-card.js @@ -66,7 +66,7 @@ export class CXLBaseCardElement extends LitElement { ? html`` : nothing} ${this.instructor - ? html`
By: ${this.instructor}
` + ? html`
By: ${this.instructor}
` : nothing} ` : nothing} diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js index b916a8e0c..c230f0085 100644 --- a/packages/cxl-ui/src/components/cxl-light-card.js +++ b/packages/cxl-ui/src/components/cxl-light-card.js @@ -3,6 +3,7 @@ import { html, nothing } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { customElement, property } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; +import '@vaadin/progress-bar'; import cxlLightCardStyles from '../styles/cxl-light-card-css.js'; import { CXLBaseCardElement } from './cxl-base-card.js'; @@ -12,6 +13,10 @@ export class CXLLightCardElement extends CXLBaseCardElement { return [...super.styles, cxlLightCardStyles]; } + @property({ type: Number }) progress = 0; + + @property({ type: Number }) lessons = 0; + constructor() { super(); this.showTimeIcon = true; @@ -28,6 +33,10 @@ export class CXLLightCardElement extends CXLBaseCardElement { this.requestUpdate('showTags', this._showTags); } + _renderNewBadge() { + return this.new ? html`NEW` : nothing; + } + _renderHeaderName() { return html`
@@ -38,12 +47,30 @@ export class CXLLightCardElement extends CXLBaseCardElement { `; } + _renderProgress() { + if ( this.progress && this.lessons ) { + return html` +
+ + Completed ${this.progress} of ${this.lessons} + + + Completed ${this.progress} of ${this.lessons} + +
+ `; + } + + return nothing; + } + render() { return html`
${this._renderHeader()} + ${this._renderProgress()} - + ${this._renderNewBadge()}
`; } 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 4a24cdc81..1af5e1fad 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js @@ -10,6 +10,8 @@ export default { }; export const CXLLightCard = Template.bind({}); +export const CXLLightCardProgress = Template.bind({}); +export const CXLLightCardPortrait = Template.bind({}); export const CXLLightCardMinidegree = Template.bind({}); export const CXLLightCardFooter = Template.bind({}); @@ -18,11 +20,23 @@ CXLLightCard.args = { new: false, completed: false, 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', - footer: '', + avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png', +}; + +CXLLightCardProgress.args = { + theme: 'light-card', + name: 'Account based marketing', + progress: 3, + lessons: 10, + avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png', +}; + +CXLLightCardPortrait.args = { + theme: 'light-card portrait', + name: 'Account based marketing', + instructor: 'Ton Wesseling', + avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png', }; CXLLightCardMinidegree.args = { @@ -30,11 +44,10 @@ CXLLightCardMinidegree.args = { new: false, completed: false, name: 'Digital analytics', - time: '43h 00min', }; CXLLightCardFooter.args = { ...CXLLightCard.args, footer: - 'Team Roadmap Personal Roadmap', + 'Team Personal', }; diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js index a55816cd8..44a4bf38d 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/template.js +++ b/packages/storybook/cxl-ui/cxl-light-card/template.js @@ -8,6 +8,8 @@ export const Template = (card) => html` time="${card.time}" instructor="${card.instructor}" avatar="${card.avatar}" + progress="${card.progress}" + lessons="${card.lessons}" .new="${card.new}" .completed="${card.completed}" >