From 62b28540e9c32ed5baf4b3d3d0c7100651db3cdd Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Mon, 30 Oct 2023 14:32:27 +0200 Subject: [PATCH 1/2] feat(cxl-ui): cxl-dashboard-header updates, roadmap block https://app.clickup.com/t/86aydn6th --- packages/cxl-lumo-styles/scss/global.scss | 1 + .../scss/themes/cxl-tabs-slider.scss | 35 ++- packages/cxl-ui/scss/cxl-base-card.scss | 1 - .../cxl-ui/scss/cxl-dashboard-header.scss | 241 ++++++------------ packages/cxl-ui/scss/cxl-light-card.scss | 10 +- packages/cxl-ui/scss/cxl-stats.scss | 13 +- .../scss/global/cxl-dashboard-header.scss | 18 -- packages/cxl-ui/scss/global/cxl-stats.scss | 15 +- .../cxl-ui/src/components/cxl-base-card.js | 26 +- .../cxl-ui/src/components/cxl-course-card.js | 2 +- .../src/components/cxl-dashboard-header.js | 181 +++++++------ .../cxl-ui/src/components/cxl-light-card.js | 1 + packages/cxl-ui/src/components/cxl-stats.js | 6 +- .../dashboard-header.stories.js | 22 +- .../initial-state.stories.js | 27 -- .../no-history.stories.js | 22 +- .../cxl-ui/cxl-dashboard-header/template.js | 94 +++---- .../cxl-dashboard-layout.stories.js | 47 +--- .../cxl-dashboard-no-content.stories.js | 47 +--- .../light-card-slider.stories.js | 45 ++-- .../cxl-ui/cxl-light-card/template.js | 2 +- .../cxl-ui/cxl-stats/cxl-stats.data.json | 16 +- .../cxl-ui/cxl-stats/default.stories.js | 16 +- .../theme=cxl-dashboard-header.data.json | 15 +- .../theme=cxl-dashboard-category.story.js | 2 +- 25 files changed, 364 insertions(+), 541 deletions(-) delete mode 100644 packages/storybook/cxl-ui/cxl-dashboard-header/initial-state.stories.js diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index a40c0b6ee..31f796aad 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-space-sm: 12px; --cxl-color-light-gray: hsla(0, 0%, 96%, 1); + --cxl-color-medium-gray: hsla(210, 20%, 96%, 1); --cxl-color-dark-gray: hsla(240, 1%, 24%, 1); --cxl-color-black: hsl(0, 0%, 0%); --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5); diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss index a1678b7cf..8f1f6b9a7 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -68,8 +68,8 @@ } /** - * Theme "featured-course-slider" -*/ + * Theme "featured-course-slider" + */ :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { position: relative; @@ -139,8 +139,8 @@ } /** - * Theme "cxl-course-slider" -*/ + * Theme "cxl-course-slider" + */ :host([theme~="cxl-course-slider"][theme~="minimal"]) { margin-top: calc(var(--lumo-space-s) * -1); @@ -217,8 +217,8 @@ } /** - * Theme "cxl-course-slider" and "cxl-category-accordion" -*/ + * Theme "cxl-course-slider" and "cxl-category-accordion" + */ :host([theme~="cxl-course-slider"][theme~="cxl-category-accordion"][theme~="minimal"]) { margin-left: calc(-1 * var(--lumo-space-m)); @@ -227,3 +227,26 @@ margin-left: calc(-1 * var(--lumo-space-l)); } } + +/** + * Theme "cxl-course-slider" and "cxl-slider-dashboard-header" + */ + +:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="minimal"]) { + margin-left: calc(-1 * var(--lumo-space-m)); + + @media #{mq.$small} { + margin-left: calc(-1 * var(--lumo-space-l)); + } + + &::before, + &::after { + background: linear-gradient(270deg, var(--cxl-color-medium-gray) 0%, rgba(255, 255, 255, 0) 100%); + } +} + +:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"][theme~="portrait"]) { + ::slotted(vaadin-tab) { + width: auto; + } +} diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 245656110..be1d35f68 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -119,7 +119,6 @@ display: flex; gap: var(--lumo-space-s); max-width: 100%; - min-height: 1.6em; } .attributes { diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index dbd8d8c94..bc594aa18 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -2,26 +2,52 @@ @use "~@conversionxl/cxl-lumo-styles/scss/mixins"; :host { + position: relative; + background-color: var(--cxl-color-medium-gray); + + &:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 50%; + z-index: 0; + width: 100vw; + background-color: var(--cxl-color-medium-gray); + transform: translateX(-50%); + } + .container { - padding: 0 var(--lumo-space-m); - background-color: var(--cxl-color-light-gray); + position: relative; + padding: 0 var(--lumo-space-m) var(--lumo-space-l); + z-index: 1; + + @media #{mq.$medium} { + padding: calc(var(--lumo-space-m) * 2) var(--lumo-space-l); + } + } + + .updates { + position: relative; @media #{mq.$medium} { - padding: 0 var(--lumo-space-l); + position: absolute; + right: var(--lumo-space-l); + bottom: calc(100% + var(--lumo-space-m)); } } header { - margin-bottom: var(--lumo-space-l); + margin-bottom: var(--lumo-space-s); @media #{mq.$medium} { display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; - padding-top: var(--lumo-size-s); } .titles { + flex-shrink: 0; padding-top: var(--lumo-size-s); @media #{mq.$medium} { @@ -33,191 +59,70 @@ font-size: var(--lumo-font-size-xs); line-height: 1; text-transform: uppercase; + color: var(--cxl-color-black-50pct); } - .updates { - @media #{mq.$medium} { - order: 2; - padding-bottom: 0; - } + .title { + margin: 0; } - } - .icon-bell { - position: relative; - margin-right: 14px; - - &::after { - position: absolute; - top: 4px; - right: -7px; - display: flex; - align-items: center; - justify-content: center; - width: 12px; - height: 12px; - font-size: 8px; - font-weight: 700; - color: var(--lumo-tint); - content: attr(count); - background-color: var(--lumo-primary-color); - border: 2px solid var(--cxl-color-dark-gray); - border-radius: 100%; + h1.title { + padding-right: var(--lumo-space-m); + font-size: var(--lumo-font-size-xxxl); + font-weight: 900; + line-height: 1.4; } } - .title { - margin: 0; - font-size: var(--lumo-font-size-xxxl); - line-height: 1.4; - } - - .content { - padding-bottom: var(--lumo-space-l); - - @media #{mq.$large} { - padding-bottom: var(--lumo-space-xl); + .edit-roadmap { + display: flex; + align-items: center; + max-width: fit-content; + height: fit-content; + padding: 0 var(--lumo-space-s); + margin: 0 auto 0 var(--lumo-space-m); + color: var(--lumo-primary-color); + cursor: pointer; + background-color: var(--lumo-primary-contrast-color); + border-radius: var(--lumo-border-radius-s); + + &::part(label) { + line-height: 1.5; } } - .last-course { - margin-bottom: var(--lumo-space-l); + .roadmap { + color: var(--lumo-primary-contrast-color); + background-color: var(--lumo-primary-color); @media #{mq.$large} { - display: flex; + color: var(--lumo-primary-contrast-color); } - a { - display: flex; - flex: 1; - align-items: center; - justify-content: space-between; - padding: var(--lumo-space-m); - color: var(--lumo-body-text-color); - text-decoration: none; - background-color: var(--lumo-primary-contrast-color); - - > div { - display: flex; - flex-direction: column; - } - - .subtitle { - font-size: var(--lumo-font-size-xs); - line-height: 1; - color: var(--cxl-color-black-50pct); - text-transform: uppercase; - } - - .title { - margin-top: calc(var(--lumo-space-s) / 2); - font-size: var(--lumo-font-size-xl); - font-weight: 700; - line-height: 1.2; - } - - vaadin-icon { - flex-shrink: 0; - margin-left: var(--lumo-space-s); - color: var(--lumo-primary-color); - background: var(--lumo-shade-10pct); - border-radius: 100%; - } + vaadin-icon { + color: var(--lumo-primary-contrast-color); } } - .progress { - display: flex; - flex-direction: column; - justify-content: center; - padding: var(--lumo-space-m); - color: var(--lumo-body-text-color); - background-color: var(--cxl-color-light-gray); + .slider { + margin-top: var(--lumo-space-l); } - .courses { - display: flex; - flex-direction: column; - gap: var(--lumo-space-s); - - @media #{mq.$large} { - flex-direction: row; - gap: var(--lumo-space-m); - } - - vaadin-button { - display: flex; - align-items: center; - justify-content: space-between; - height: var(--lumo-size-xl); - padding: var(--lumo-space-m); - line-height: 1.3; - cursor: pointer; - border-radius: var(--lumo-border-radius-s); - background-color: var(--lumo-primary-contrast-color); - - &::part(label) { - width: 100%; - padding-right: var(--lumo-space-l); - text-align: left; - } - - @media #{mq.$large} { - width: 100%; - } - - vaadin-icon { - position: absolute; - right: var(--lumo-space-m); - color: var(--lumo-primary-color); - background-color: var(--lumo-tint-5pct); - border-radius: 100%; - } - } - - .roadmap { - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-primary-color); - - @media #{mq.$large} { - color: var(--lumo-primary-contrast-color); - } - - vaadin-icon { - color: var(--lumo-primary-contrast-color); - } - } + .slider-title { + display: block; + margin-bottom: var(--lumo-space-s); + font-size: var(--lumo-font-size-xs); + line-height: 1; + text-transform: uppercase; + color: var(--cxl-color-black-50pct); } -} -:host([hasroadmap]) { .content { - @media #{mq.$large} { - display: grid; - grid-template-columns: repeat(3, 1fr); - column-gap: var(--lumo-space-l); - - > div { - grid-column: 1 / 3; - } + margin-top: var(--lumo-space-l); - .stats { - grid-column: 3 / 4; - } + & + .content { + padding-top: var(--lumo-space-l); + border-top: 1px solid #d2d5da; } } } - -::slotted(.stats-desktop) { - display: none; - - @media #{mq.$large} { - display: block; - } -} - -::slotted(.stats-mobile) { - @media #{mq.$large} { - display: none; - } -} diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss index 8d560e53a..169d4504c 100644 --- a/packages/cxl-ui/scss/cxl-light-card.scss +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -1,7 +1,7 @@ :host { min-width: 267px; // 3col widths on 1400px max-width: 300px; - height: auto; + height: 100%; min-height: calc(3 * var(--lumo-space-xl)); padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s); overflow: hidden; @@ -123,6 +123,10 @@ margin-left: -3px; // to align with the instructor text color: var(--lumo-tint-40pct); } + + .progress { + color: var(--lumo-primary-contrast-color); + } } :host([theme~="portrait"]) { @@ -133,11 +137,13 @@ .container { display: block; + height: 100%; padding: 0; } header { - display: block; + display: flex; + flex-direction: column; } .info { diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss index 8380cf825..3c3f10106 100644 --- a/packages/cxl-ui/scss/cxl-stats.scss +++ b/packages/cxl-ui/scss/cxl-stats.scss @@ -16,11 +16,18 @@ } :host([theme~="cxl-stats-dashboard-header"]) { - padding: var(--lumo-space-m); + margin-top: var(--lumo-space-m); + padding: 0; border: 0; - background-color: var(--lumo-primary-contrast-color); @media #{mq.$medium} { - grid-template-columns: repeat(2, 1fr); + margin-top: 0; + gap: var(--lumo-space-l); + } +} + +:host([theme~="cxl-stats-dashboard-header"][theme~="completed"]) { + @media #{mq.$medium} { + grid-template-columns: repeat(3, 1fr); } } diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss index b9df43dca..049d99125 100644 --- a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss @@ -2,22 +2,4 @@ cxl-dashboard-header { position: relative; z-index: 1; display: block; - - .edit-roadmap { - display: flex; - align-items: center; - align-self: end; - max-width: fit-content; - height: fit-content; - padding: 0 var(--lumo-space-s); - margin: 0; - color: var(--lumo-primary-color); - cursor: pointer; - background-color: var(--lumo-primary-contrast-color); - border-radius: var(--lumo-border-radius-s); - - &::part(label) { - line-height: 1.5; - } - } } diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss index 8c5f2a1e5..7e38845df 100644 --- a/packages/cxl-ui/scss/global/cxl-stats.scss +++ b/packages/cxl-ui/scss/global/cxl-stats.scss @@ -1,6 +1,10 @@ @use "~@conversionxl/cxl-lumo-styles/scss/mq"; cxl-stats { + .stat-item { + min-width: 112px; + } + .stat-title { margin: 0 0 var(--lumo-space-s) 0; font-size: var(--lumo-font-size-xs); @@ -19,11 +23,14 @@ cxl-stats { small { font-size: var(--lumo-font-size-l); } + } + + a.stat-count { + color: var(--cxl-color-black); + text-decoration: underline; - a { - font-size: var(--lumo-font-size-m); - font-weight: 400; - text-decoration: underline; + &:hover { + color: var(--lumo-primary-color); } } } diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js index e7f2f21b2..6755188dc 100644 --- a/packages/cxl-ui/src/components/cxl-base-card.js +++ b/packages/cxl-ui/src/components/cxl-base-card.js @@ -59,18 +59,20 @@ export class CXLBaseCardElement extends LitElement { } _renderHeaderAttributes() { - return html` - ${this.time || this.instructor - ? html`
- ${this.time - ? html`` - : nothing} - ${this.instructor - ? html`
By: ${this.instructor}
` - : nothing} -
` - : nothing} - `; + if (this.time || this.instructor) { + return html` +
+ ${this.time + ? html`` + : nothing} + ${this.instructor + ? html`
By: ${this.instructor}
` + : nothing} +
+ `; + } + + return nothing; } _renderAvatar() { diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js index c972931ef..e82592035 100644 --- a/packages/cxl-ui/src/components/cxl-course-card.js +++ b/packages/cxl-ui/src/components/cxl-course-card.js @@ -58,7 +58,7 @@ export class CXLCourseCardElement extends CXLBaseCardElement { - + `; } diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js index 930846cad..c8ef1896c 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-header.js @@ -1,12 +1,12 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { LitElement, html, nothing } from 'lit'; +import {LitElement, html, nothing} from 'lit'; import { customElement, property } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; -import '@vaadin/progress-bar'; import './cxl-dashboard-notification'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; -import cxlDashboardHeaderGlobalStyles from '../styles/global/cxl-dashboard-header-css.js'; + import cxlDashboardHeaderStyles from '../styles/cxl-dashboard-header-css.js'; +import cxlDashboardHeaderGlobalStyles from '../styles/global/cxl-dashboard-header-css.js'; @customElement('cxl-dashboard-header') export class CXLDashboardHeaderElement extends LitElement { @@ -14,120 +14,133 @@ export class CXLDashboardHeaderElement extends LitElement { return [cxlDashboardHeaderStyles]; } - @property({ type: String }) title = 'Hello'; - - @property({ type: String }) subtitle = 'My dashboard'; - - @property({ type: String }) name = ''; - @property({ type: Number, attribute: 'notification-count' }) notificationCount = 0; @property({ type: String }) notificationTitle = "What's new in CXL"; @property({ type: Object }) notificationData = null; - @property({ type: String, attribute: 'last-course-title' }) lastCourseTitle = ''; + @property({ type: String }) subtitle = 'My dashboard'; - @property({ type: String, attribute: 'last-course-link' }) lastCourseLink = ''; + @property({ type: String }) title = 'Hello'; - @property({ type: String }) lastCourseSubtitle = 'Continue where you left off'; + @property({ type: String }) name = ''; - @property({ type: Number, attribute: 'progress' }) progress = 0; + @property({ type: Boolean }) showCompletedStats = false; - @property({ type: Number, attribute: 'lessons-completed' }) lessonsCompleted = 0; + @property({ type: Boolean }) showContinueSlider = false; - @property({ type: Number, attribute: 'lessons-total' }) lessonsTotal = 0; + @property({ type: Boolean }) showRoadmap = false; - @property({ type: String }) cta1 = ''; + @property({ type: Boolean }) showRoadmapStats = false; - @property({ type: String }) cta1Link = ''; + @property({ type: Boolean }) showRoadmapSlider = false; - @property({ type: String }) cta2 = ''; + @property({ type: String }) editRoadmapLinkUrl = ''; - @property({ type: String }) cta2Link = ''; + @property({ type: String }) editRoadmapLinkText = 'Edit roadmap'; - @property({ type: String }) cta3 = ''; + @property({ type: String }) createRoadmapLinkUrl = ''; - @property({ type: String }) cta3Link = ''; + @property({ type: String }) createRoadmapLinkText = 'Create your personal learning roadmap'; - @property({ type: Boolean }) hasRoadmap = false; + @property({ type: Boolean }) showMinidegrees = false; - renderLastCourse() { - return this.hasRoadmap && this.lastCourseTitle - ? html` -
- -
- ${this.lastCourseSubtitle} - ${this.lastCourseTitle} -
- - -
- Completed ${this.lessonsCompleted} of ${this.lessonsTotal} lessons - Completed ${this.lessonsCompleted} of ${this.lessonsTotal} - lessons -
-
- ` - : nothing; - } + _renderNotifications() { + if (this.notificationCount > 0) { + return html` +
+ +
+ `; + } - renderStats() { - return this.hasRoadmap - ? html`
- - -
` - : nothing; + return nothing; } - render() { + _renderUserSection() { return html` -
+
- ${this.notificationCount > 0 - ? html`
- -
` - : ''}
${this.subtitle}

${this.title}, ${this.name}.

+ ${this.showCompletedStats ? html` + + ` : nothing}
+ ${this.showContinueSlider ? html` +
+ Continue where you left off + +
+ ` : nothing} +
+ `; + } + + _renderRoadmapSection() { + if (this.showRoadmap) { + return html`
-
- ${this.renderLastCourse()} -
- - ${this.cta1} - - - - ${this.cta2} - +
+

Training Roadmap

+ ${this.showRoadmapStats ? html` + + + ${this.editRoadmapLinkText} - ${!this.hasRoadmap - ? html` - ${this.cta3} - - ` - : nothing} + + ` : nothing} +
+ ${!this.showRoadmapStats && !this.showRoadmapSlider ? html` + + ${this.createRoadmapLinkText} + + + ` : nothing} + ${this.showRoadmapSlider ? html` +
+ Next up +
-
- ${this.renderStats()} + ` : nothing} +
+ `; + } + + return nothing; + } + + _renderMinidegreesSection() { + if (this.showMinidegrees) { + return html` +
+
+

Minidegrees

+
+
+ `; + } + + return nothing; + } + + render() { + return html` +
+ ${this._renderNotifications()} + ${this._renderUserSection()} + ${this._renderRoadmapSection()} + ${this._renderMinidegreesSection()}
`; } diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js index c230f0085..21d79c76d 100644 --- a/packages/cxl-ui/src/components/cxl-light-card.js +++ b/packages/cxl-ui/src/components/cxl-light-card.js @@ -5,6 +5,7 @@ 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'; @customElement('cxl-light-card') diff --git a/packages/cxl-ui/src/components/cxl-stats.js b/packages/cxl-ui/src/components/cxl-stats.js index 324bfaef6..f5477df7a 100644 --- a/packages/cxl-ui/src/components/cxl-stats.js +++ b/packages/cxl-ui/src/components/cxl-stats.js @@ -2,8 +2,10 @@ import { LitElement, html } from 'lit'; // eslint-disable-next-line import/no-extraneous-dependencies import { customElement } from 'lit/decorators.js'; -import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; + import '@conversionxl/cxl-lumo-styles'; +import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; + import cxlStatsStyles from '../styles/cxl-stats-css.js'; import cxlStatsGlobalStyles from '../styles/global/cxl-stats-css.js'; @@ -22,7 +24,7 @@ export class CXLStatsElement extends LitElement { // Global styles. registerGlobalStyles(cxlStatsGlobalStyles, { - moduleId: 'cxl-stats', + moduleId: 'cxl-stats-global', }); } } diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js index c4967f70d..c73090dfb 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js @@ -12,17 +12,13 @@ CXLDashboardHeader.argTypes = { CXLDashboardHeader.args = { name: 'Mathias Z', - lastCourseTitle: 'Advanced experimentation analysis', - lastCourseLink: 'https://cxl.com', - hasRoadmap: true, - notificationCount: '6', - progress: '0.34', - lessonsCompleted: '2', - lessonsTotal: '6', - cta1: 'Browse all courses', - cta2: 'Browse fast skills', - cta3: 'Create your personal learning roadmap', - cta1Link: 'https://cxl.com', - cta2Link: 'https://cxl.com', - cta3Link: 'https://cxl.com', + notificationCount: 6, + showCompletedStats: true, + showContinueSlider: true, + showRoadmap: true, + showRoadmapStats: true, + showRoadmapSlider: true, + editRoadmapLinkUrl: 'https://cxl.com', + editRoadmapLinkText: 'Edit roadmap', + showMinidegrees: true }; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/initial-state.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/initial-state.stories.js deleted file mode 100644 index 94d25ba6b..000000000 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/initial-state.stories.js +++ /dev/null @@ -1,27 +0,0 @@ -import { DashboardHeaderTemplate, ArgTypes } from './template'; - -export default { - title: 'CXL UI/cxl-dashboard-header', -}; - -export const CXLDashboardHeaderInitial = DashboardHeaderTemplate.bind({}); - -CXLDashboardHeaderInitial.argTypes = { - ...ArgTypes, -}; -CXLDashboardHeaderInitial.args = { - name: 'Mathias Z', - lastCourseTitle: '', - lastCourseLink: '', - hasRoadmap: false, - notificationCount: '6', - progress: '0', - lessonsCompleted: '0', - lessonsTotal: '0', - cta1: 'Browse all courses', - cta2: 'Browse fast skills', - cta3: 'Create your personal learning roadmap', - cta1Link: 'https://cxl.com', - cta2Link: 'https://cxl.com', - cta3Link: 'https://cxl.com', -}; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js index 7eca28463..58d8dfdb1 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js @@ -11,17 +11,13 @@ CXLDashboardHeaderNoHistory.argTypes = { }; CXLDashboardHeaderNoHistory.args = { name: 'Mathias Z', - lastCourseTitle: '', - lastCourseLink: '', - hasRoadmap: true, - notificationCount: '6', - progress: '0', - lessonsCompleted: '0', - lessonsTotal: '6', - cta1: 'Browse all courses', - cta2: 'Browse fast skills', - cta3: 'Create your personal learning roadmap', - cta1Link: 'https://cxl.com', - cta2Link: 'https://cxl.com', - cta3Link: 'https://cxl.com', + notificationCount: 6, + showCompletedStats: false, + showContinueSlider: false, + showRoadmap: true, + showRoadmapStats: false, + showRoadmapSlider: false, + createRoadmapLinkUrl: 'https://cxl.com', + createRoadmapLinkText: 'Create your personal learning roadmap', + showMinidegrees: false }; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js index de3e69b6c..54cfb1262 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js @@ -1,9 +1,11 @@ -import { html, nothing } from 'lit'; -import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import { html } from 'lit'; import '@conversionxl/cxl-lumo-styles'; import '@conversionxl/cxl-ui/src/components/cxl-dashboard-header.js'; -import statsData from '../cxl-stats/theme=cxl-dashboard-header.data.json'; import '@conversionxl/cxl-ui/src/components/cxl-stats'; + +import { CXLStats } from "../cxl-stats/default.stories"; +import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories'; + import notificationData from '../cxl-dashboard-notification/cxl-dashboard-notification.data.json'; export const DashboardHeaderTemplate = (header) => html` @@ -12,74 +14,36 @@ export const DashboardHeaderTemplate = (header) => html` name=${header.name} notification-count=${header.notificationCount} .notificationData=${notificationData} - last-course-title=${header.lastCourseTitle} - last-course-link=${header.lastCourseLink} - progress=${header.progress} - lessons-completed=${header.lessonsCompleted} - lessons-total=${header.lessonsTotal} - .cta1=${header.cta1} - .cta2=${header.cta2} - .cta3=${header.cta3} - .cta1Link=${header.cta1Link} - .cta2Link=${header.cta2Link} - .cta3Link=${header.cta3Link} - ?hasRoadmap=${header.hasRoadmap} + .showCompletedStats=${header.showCompletedStats} + .showContinueSlider=${header.showContinueSlider} + .showRoadmap=${header.showRoadmap} + .showRoadmapStats=${header.showRoadmapStats} + .showRoadmapSlider=${header.showRoadmapSlider} + .editRoadmapLinkUrl=${header.editRoadmapLinkUrl} + .editRoadmapLinkText=${header.editRoadmapLinkText} + .createRoadmapLinkUrl=${header.createRoadmapLinkUrl} + .createRoadmapLinkText=${header.createRoadmapLinkText} + .showMinidegrees=${header.showMinidegrees} > -
- -
Your roadmap
- - ${statsData.map( - (el) => html` -
-

${unsafeHTML(el.title)}

-

- ${unsafeHTML(el.count)} ${el.link ? html`${el.link}` : nothing} -

-
- ` - )} - - - Edit roadmap - - - +
+ ${CXLStats({ theme: 'cxl-stats-dashboard-header completed', statsCount: 3 })} +
+
+ ${CXLStats({ theme: 'cxl-stats-dashboard-header roadmap', statsCount: 4 })} +
+
+ ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8 })} +
+
+ ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header portrait', length: 16, args: { theme: 'portrait' } })}
-
- - ${statsData.map( - (el) => html` -
-

${unsafeHTML(el.title)}

-

- ${unsafeHTML(el.count)} ${el.link ? html`${el.link}` : nothing} -

-
- ` - )} - - - Edit roadmap - - +
+ ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8, args: { theme: 'minidegree', progress: null, avatar: '' } })}
`; export const ArgTypes = { name: { control: 'text' }, - lastCourseTitle: { control: 'text' }, - lastCourseLink: { control: 'text' }, - hasRoadmap: { control: 'boolean' }, - notificationCount: { control: 'text' }, - progress: { control: 'number' }, - lessonsCompleted: { control: 'number' }, - lessonsTotal: { control: 'number' }, - cta1: { control: 'text' }, - cta2: { control: 'text' }, - cta3: { control: 'text' }, - cta1Link: { control: 'text' }, - cta2Link: { control: 'text' }, - cta3Link: { control: 'text' }, + notificationCount: { control: 'number' } }; 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..98fe666e9 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,12 +1,9 @@ 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'; import { CXLDashboardHeader } from '../cxl-dashboard-header/dashboard-header.stories'; -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 { CXLFooterNav } from '../footer-nav.stories'; @@ -15,45 +12,25 @@ export default { }; export const CXLDashboard = () => { - const boxShadow = text('Box-shadow', 'var(--lumo-box-shadow-l)'); - const statsCount = 4; - CXLDashboardHeader.args = { name: 'Mathias Z', - lastCourseTitle: 'Advanced experimentation analysis', - lastCourseLink: 'https://cxl.com', - hasRoadmap: true, - notificationCount: '6', - progress: '0.34', - lessonsCompleted: '2', - lessonsTotal: '6', - cta1: 'Browse all courses', - cta2: 'Browse fast skills', - cta3: 'Create your personal learning roadmap', - cta1Link: 'https://cxl.com', - cta2Link: 'https://cxl.com', - cta3Link: 'https://cxl.com', - }; - - CXLFeatureadCourseCard.args = { - id: 'cxl-featured-course-1', - theme: 'Featured', - name: 'Get ahead with Google Analytics 4', - time: '5h 04min', - instructor: 'Fred Pike', - description: - "

GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.

In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. This course pays back for you real quick.

", - tags: ['Marketing', 'Analytics'], - ctaUrl: 'https://cxl.com', - avatar: - 'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png', + notificationCount: 6, + showCompletedStats: true, + showContinueSlider: true, + showRoadmap: true, + showRoadmapStats: true, + showRoadmapSlider: true, + editRoadmapLinkUrl: 'https://cxl.com', + editRoadmapLinkText: 'Edit roadmap', + showMinidegrees: true }; return html` ${CXLMarketingNav()} -
- ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)} +
+ ${DashboardSlider()} + ${CXLDashboardHeader(CXLDashboardHeader.args)} ${CXLVaadinAccordionThemeCategory()}
${CXLFooterNav()} diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js index cf2b6fc0b..274a9ec5a 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js @@ -1,12 +1,9 @@ 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'; import { CXLDashboardHeader } from '../cxl-dashboard-header/dashboard-header.stories'; -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 { CXLFooterNav } from '../footer-nav.stories'; export default { @@ -14,45 +11,25 @@ export default { }; export const CXLDashboardNoContent = () => { - const boxShadow = text('Box-shadow', 'var(--lumo-box-shadow-l)'); - const statsCount = 4; - CXLDashboardHeader.args = { name: 'Mathias Z', - lastCourseTitle: 'Advanced experimentation analysis', - lastCourseLink: 'https://cxl.com', - hasRoadmap: true, - notificationCount: '6', - progress: '0.34', - lessonsCompleted: '2', - lessonsTotal: '6', - cta1: 'Browse all courses', - cta2: 'Browse fast skills', - cta3: 'Create your personal learning roadmap', - cta1Link: 'https://cxl.com', - cta2Link: 'https://cxl.com', - cta3Link: 'https://cxl.com', - }; - - CXLFeatureadCourseCard.args = { - id: 'cxl-featured-course-1', - theme: 'Featured', - name: 'Get ahead with Google Analytics 4', - time: '5h 04min', - instructor: 'Fred Pike', - description: - "

GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.

In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. This course pays back for you real quick.

", - tags: ['Marketing', 'Analytics'], - ctaUrl: 'https://cxl.com', - avatar: - 'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png', + notificationCount: 6, + showCompletedStats: true, + showContinueSlider: true, + showRoadmap: true, + showRoadmapStats: true, + showRoadmapSlider: true, + editRoadmapLinkUrl: 'https://cxl.com', + editRoadmapLinkText: 'Edit roadmap', + showMinidegrees: true }; return html` ${CXLMarketingNav()} -
- ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)} +
+ ${DashboardSlider()} + ${CXLDashboardHeader(CXLDashboardHeader.args)}
${CXLFooterNav()} 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..66aba9645 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,55 +12,46 @@ 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', + avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg', + progress: 3, + lessons: 12 }; const CXLLightCard2 = Template.bind({}); CXLLightCard2.args = { ...CXLLightCard.args, name: 'Basics of Casual Inference', - time: '', - instructor: 'Georgi Georgiev', avatar: '', + progress: 7, + lessons: 9 }; 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', + avatar: 'https://cxl.com/institute/wp-content/uploads/2019/09/peep-1x1-transparent-150x150.png' }; -export const CXLLightCardSlider = ({ numberOfCards, theme }) => html` +export const CXLLightCardSlider = ({ theme, length, args }) => html` ${Array.from( - { length: Math.floor(numberOfCards / 3) }, + { length: Math.floor(length / 3) }, () => html` - ${CXLLightCard({ - ...CXLLightCard.args, - })} - ${CXLLightCard2({ - ...CXLLightCard2.args, - })} - ${CXLLightCard3({ - ...CXLLightCard3.args, - })} + + ${CXLLightCard({ ...CXLLightCard.args, ...args })} + + + ${CXLLightCard2({ ...CXLLightCard2.args, ...args })} + + + ${CXLLightCard3({ ...CXLLightCard3.args, ...args })} + ` )} `; CXLLightCardSlider.args = { - numberOfCards: 3, + length: 3, }; diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js index 44a4bf38d..f52f8d4c5 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/template.js +++ b/packages/storybook/cxl-ui/cxl-light-card/template.js @@ -13,6 +13,6 @@ export const Template = (card) => html` .new="${card.new}" .completed="${card.completed}" > - ${card.footer ? html`
${unsafeHTML(card.footer)}
` : nothing} + ${card.footer ? html`
${unsafeHTML(card.footer)}
` : nothing} `; diff --git a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json index 54eaef5c9..a12c5c0d2 100644 --- a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json +++ b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json @@ -1,18 +1,16 @@ [ { - "title": "Categories
completed", - "count": "1" - }, - { - "title": "Courses
completed", + "title": "Lessons
completed", "count": "30" }, { - "title": "Lessons
completed", - "count": "95" + "title": "Courses
completed", + "count": "1", + "link": "https://cxl.com" }, { - "title": "Complete
library", - "count": "12%" + "title": "Certificates
completed", + "count": "95", + "link": "https://cxl.com" } ] diff --git a/packages/storybook/cxl-ui/cxl-stats/default.stories.js b/packages/storybook/cxl-ui/cxl-stats/default.stories.js index 69efd0e85..f3a4f742f 100644 --- a/packages/storybook/cxl-ui/cxl-stats/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-stats/default.stories.js @@ -8,7 +8,7 @@ export default { title: 'CXL UI/cxl-stats', }; -export const CXLStats = ({ statsCount }) => { +export const CXLStats = ({ theme, statsCount }) => { for (let i = 0; i < statsCount; i += 1) { const newItem = { title: 'Complete
library', @@ -19,22 +19,24 @@ export const CXLStats = ({ statsCount }) => { } return html` - + ${statsData.slice(0, statsCount).map( - (el) => html` -
+ (el) => html` +

${unsafeHTML(el.title)}

-

${el.count}

+ ${el.link + ? html`${el.count}` + : html`

${el.count}

`}
` - )} + )} `; }; Object.assign(CXLStats, { args: { - statsCount: 4, + statsCount: 3, }, storyName: 'CXL Stats', }); diff --git a/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json b/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json index eadc976b9..a12c5c0d2 100644 --- a/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json +++ b/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json @@ -1,15 +1,16 @@ [ { - "title": "Roadmapped", - "count": "1 trainings", - "link": "View" + "title": "Lessons
completed", + "count": "30" }, { - "title": "Completed", - "count": "2 trainings" + "title": "Courses
completed", + "count": "1", + "link": "https://cxl.com" }, { - "title": "Study commitment", - "count": "2h /week" + "title": "Certificates
completed", + "count": "95", + "link": "https://cxl.com" } ] diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js index ccfce3552..67b69d13b 100644 --- a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js +++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js @@ -54,7 +54,7 @@ export const CXLVaadinAccordionThemeCategory = () => html` Object.assign(CXLLightCardSlider, { args: { - numberOfCards: 8, + length: 8, theme: 'cxl-category-accordion', }, }); From ec11a44ae60a1a32dcd520a88b89b04d37272766 Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Thu, 2 Nov 2023 15:57:43 +0200 Subject: [PATCH 2/2] feat(cxl-ui): light-card progress updates, header top margin fix https://app.clickup.com/t/86aydn6th --- packages/cxl-lumo-styles/scss/color.scss | 1 + .../cxl-ui/scss/cxl-dashboard-header.scss | 36 ++++++++++++++-- .../src/components/cxl-dashboard-header.js | 42 +++++++++---------- .../cxl-ui/src/components/cxl-light-card.js | 16 ++++--- .../dashboard-header.stories.js | 1 - .../no-history.stories.js | 1 - .../cxl-ui/cxl-dashboard-header/template.js | 24 ++++++----- .../cxl-dashboard-layout.stories.js | 1 - .../cxl-dashboard-no-content.stories.js | 1 - .../cxl-ui/cxl-light-card/default.stories.js | 4 +- .../light-card-slider.stories.js | 8 ++-- .../cxl-ui/cxl-light-card/template.js | 4 +- 12 files changed, 84 insertions(+), 55 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss index 38a224291..69eb2cb4d 100644 --- a/packages/cxl-lumo-styles/scss/color.scss +++ b/packages/cxl-lumo-styles/scss/color.scss @@ -58,6 +58,7 @@ html, --lumo-primary-color: hsl(355.8, 74.7%, 48%); --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02); --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1); + --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2); --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5); /** diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index bc594aa18..6da4ba5a9 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -74,18 +74,47 @@ } } + .header-flex { + display: flex; + justify-content: space-between; + + @media #{mq.$medium} { + flex-direction: column; + } + + @media #{mq.$large} { + flex-direction: row; + } + } + .edit-roadmap { display: flex; align-items: center; max-width: fit-content; height: fit-content; padding: 0 var(--lumo-space-s); - margin: 0 auto 0 var(--lumo-space-m); + margin-left: var(--lumo-space-s); color: var(--lumo-primary-color); cursor: pointer; background-color: var(--lumo-primary-contrast-color); border-radius: var(--lumo-border-radius-s); + @media #{mq.$medium} { + margin-left: 0; + } + + @media #{mq.$large} { + margin-left: var(--lumo-space-m); + } + + .edit-roadmap-text-affix { + display: none; + + @media #{mq.$medium} { + display: inline; + } + } + &::part(label) { line-height: 1.5; } @@ -118,11 +147,10 @@ } .content { - margin-top: var(--lumo-space-l); - & + .content { + margin-top: var(--lumo-space-l); padding-top: var(--lumo-space-l); - border-top: 1px solid #d2d5da; + border-top: 1px solid var(--lumo-shade-20pct); } } } diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js index c8ef1896c..9ddf5a9fa 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-header.js @@ -16,7 +16,7 @@ export class CXLDashboardHeaderElement extends LitElement { @property({ type: Number, attribute: 'notification-count' }) notificationCount = 0; - @property({ type: String }) notificationTitle = "What's new in CXL"; + @property({ type: String, attribute: 'notification-title' }) notificationTitle = "What's new in CXL"; @property({ type: Object }) notificationData = null; @@ -26,25 +26,21 @@ export class CXLDashboardHeaderElement extends LitElement { @property({ type: String }) name = ''; - @property({ type: Boolean }) showCompletedStats = false; + @property({ type: Boolean, attribute: 'show-completed-stats' }) showCompletedStats = false; - @property({ type: Boolean }) showContinueSlider = false; + @property({ type: Boolean, attribute: 'show-continue-slider' }) showContinueSlider = false; - @property({ type: Boolean }) showRoadmap = false; + @property({ type: Boolean, attribute: 'show-roadmap' }) showRoadmap = false; - @property({ type: Boolean }) showRoadmapStats = false; + @property({ type: Boolean, attribute: 'show-roadmap-stats' }) showRoadmapStats = false; - @property({ type: Boolean }) showRoadmapSlider = false; + @property({ type: Boolean, attribute: 'show-roadmap-slider' }) showRoadmapSlider = false; - @property({ type: String }) editRoadmapLinkUrl = ''; + @property({ type: String, attribute: 'edit-roadmap-link-url' }) editRoadmapLinkUrl = ''; - @property({ type: String }) editRoadmapLinkText = 'Edit roadmap'; + @property({ type: String, attribute: 'create-roadmap-link-url' }) createRoadmapLinkUrl = ''; - @property({ type: String }) createRoadmapLinkUrl = ''; - - @property({ type: String }) createRoadmapLinkText = 'Create your personal learning roadmap'; - - @property({ type: Boolean }) showMinidegrees = false; + @property({ type: Boolean, attribute: 'show-minidegrees' }) showMinidegrees = false; _renderNotifications() { if (this.notificationCount > 0) { @@ -88,21 +84,23 @@ export class CXLDashboardHeaderElement extends LitElement { return html`
-

Training Roadmap

- ${this.showRoadmapStats ? html` - - - ${this.editRoadmapLinkText} - - - ` : nothing} +
+

Training Roadmap

+ ${this.showRoadmapStats ? html` + + + Edit roadmap + + ` : nothing} +
+ ${this.showRoadmapStats ? html`` : nothing}
${!this.showRoadmapStats && !this.showRoadmapSlider ? html` - ${this.createRoadmapLinkText} + Create your personal learning roadmap ` : nothing} diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js index 21d79c76d..f63a0f271 100644 --- a/packages/cxl-ui/src/components/cxl-light-card.js +++ b/packages/cxl-ui/src/components/cxl-light-card.js @@ -14,9 +14,11 @@ export class CXLLightCardElement extends CXLBaseCardElement { return [...super.styles, cxlLightCardStyles]; } - @property({ type: Number }) progress = 0; + @property({ type: Boolean }) showProgress = false; - @property({ type: Number }) lessons = 0; + @property({ type: Number, attribute: 'progress-completed' }) progressCompleted = 0; + + @property({ type: Number, attribute: 'progress-total' }) progressTotal = 0; constructor() { super(); @@ -49,14 +51,16 @@ export class CXLLightCardElement extends CXLBaseCardElement { } _renderProgress() { - if ( this.progress && this.lessons ) { + if ( this.showProgress || ( this.progressCompleted && this.progressTotal ) ) { return html`
- Completed ${this.progress} of ${this.lessons} + Completed ${this.progressCompleted} of ${this.progressTotal} - - Completed ${this.progress} of ${this.lessons} + + Completed ${this.progressCompleted} of ${this.progressTotal}
`; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js index c73090dfb..a2b4e257e 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js @@ -19,6 +19,5 @@ CXLDashboardHeader.args = { showRoadmapStats: true, showRoadmapSlider: true, editRoadmapLinkUrl: 'https://cxl.com', - editRoadmapLinkText: 'Edit roadmap', showMinidegrees: true }; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js index 58d8dfdb1..fdaff7993 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js @@ -18,6 +18,5 @@ CXLDashboardHeaderNoHistory.args = { showRoadmapStats: false, showRoadmapSlider: false, createRoadmapLinkUrl: 'https://cxl.com', - createRoadmapLinkText: 'Create your personal learning roadmap', showMinidegrees: false }; diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js index 54cfb1262..1f58c3ffe 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js @@ -14,16 +14,14 @@ export const DashboardHeaderTemplate = (header) => html` name=${header.name} notification-count=${header.notificationCount} .notificationData=${notificationData} - .showCompletedStats=${header.showCompletedStats} - .showContinueSlider=${header.showContinueSlider} - .showRoadmap=${header.showRoadmap} - .showRoadmapStats=${header.showRoadmapStats} - .showRoadmapSlider=${header.showRoadmapSlider} - .editRoadmapLinkUrl=${header.editRoadmapLinkUrl} - .editRoadmapLinkText=${header.editRoadmapLinkText} - .createRoadmapLinkUrl=${header.createRoadmapLinkUrl} - .createRoadmapLinkText=${header.createRoadmapLinkText} - .showMinidegrees=${header.showMinidegrees} + ?show-completed-stats=${header.showCompletedStats} + ?show-continue-slider=${header.showContinueSlider} + ?show-roadmap=${header.showRoadmap} + ?show-roadmap-stats=${header.showRoadmapStats} + ?show-roadmap-slider=${header.showRoadmapSlider} + ?edit-roadmap-link-url=${header.editRoadmapLinkUrl} + ?create-roadmap-link-url=${header.createRoadmapLinkUrl} + ?show-minidegrees=${header.showMinidegrees} >
${CXLStats({ theme: 'cxl-stats-dashboard-header completed', statsCount: 3 })} @@ -35,7 +33,11 @@ export const DashboardHeaderTemplate = (header) => html` ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8 })}
- ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header portrait', length: 16, args: { theme: 'portrait' } })} + ${CXLLightCardSlider({ + theme: 'cxl-slider-dashboard-header portrait', + length: 16, + args: { theme: 'portrait' } + })}
${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8, args: { theme: 'minidegree', progress: null, avatar: '' } })} 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 98fe666e9..15b76f831 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 @@ -21,7 +21,6 @@ export const CXLDashboard = () => { showRoadmapStats: true, showRoadmapSlider: true, editRoadmapLinkUrl: 'https://cxl.com', - editRoadmapLinkText: 'Edit roadmap', showMinidegrees: true }; diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js index 274a9ec5a..6eb7ddce2 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js +++ b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js @@ -20,7 +20,6 @@ export const CXLDashboardNoContent = () => { showRoadmapStats: true, showRoadmapSlider: true, editRoadmapLinkUrl: 'https://cxl.com', - editRoadmapLinkText: 'Edit roadmap', showMinidegrees: true }; 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 1af5e1fad..55f9f3320 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js @@ -27,8 +27,8 @@ CXLLightCard.args = { CXLLightCardProgress.args = { theme: 'light-card', name: 'Account based marketing', - progress: 3, - lessons: 10, + progressCompleted: 3, + progressTotal: 10, avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png', }; 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 66aba9645..58fbdf8a2 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 @@ -13,8 +13,8 @@ CXLLightCard.args = { theme: 'light-card', name: 'Account based marketing', avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg', - progress: 3, - lessons: 12 + progressCompleted: 3, + progressTotal: 12 }; const CXLLightCard2 = Template.bind({}); @@ -22,8 +22,8 @@ CXLLightCard2.args = { ...CXLLightCard.args, name: 'Basics of Casual Inference', avatar: '', - progress: 7, - lessons: 9 + progressCompleted: 7, + progressTotal: 9 }; const CXLLightCard3 = Template.bind({}); diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js index f52f8d4c5..354920d9b 100644 --- a/packages/storybook/cxl-ui/cxl-light-card/template.js +++ b/packages/storybook/cxl-ui/cxl-light-card/template.js @@ -8,8 +8,8 @@ export const Template = (card) => html` time="${card.time}" instructor="${card.instructor}" avatar="${card.avatar}" - progress="${card.progress}" - lessons="${card.lessons}" + progress-completed="${card.progressCompleted}" + progress-total="${card.progressTotal}" .new="${card.new}" .completed="${card.completed}" >