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 2afbf9498..47bf85a7a 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -231,7 +231,8 @@ */ :host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"]), -:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-accordion"]) { +:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-category-accordion"]), +:host([theme~="cxl-course-slider"][theme~="minimal"][theme~="cxl-featured-courses"]) { margin-inline: 0; @media #{mq.$small} { @@ -249,10 +250,9 @@ /** * Theme "cxl-course-slider" and "cxl-category-slider" */ - :host([theme~="cxl-course-slider"][theme~="cxl-category-slider"]) { @media #{mq.$small} { - margin-inline: calc(-1*var(--lumo-space-l)); + margin-inline: calc(-1 * var(--lumo-space-l)); } } @@ -261,9 +261,9 @@ &::after { @media #{mq.$medium} { background: linear-gradient( - 270deg, - var(--cxl-color-medium-gray) 0%, - rgba(255, 255, 255, 0) 100% + 270deg, + var(--cxl-color-medium-gray) 0%, + rgba(255, 255, 255, 0) 100% ); } } diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js index 56f7352bc..0251f01f5 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-header.js @@ -45,9 +45,11 @@ export class CXLDashboardHeaderElement extends LitElement { @property({ type: String, attribute: 'subscription-status' }) subscriptionStatus = ''; - @property({ type: String, attribute: 'subscription-status-action' }) subscriptionStatusAction = ''; + @property({ type: String, attribute: 'subscription-status-action' }) subscriptionStatusAction = + ''; - @property({ type: String, attribute: 'subscription-status-action-link' }) subscriptionStatusActionLink = ''; + @property({ type: String, attribute: 'subscription-status-action-link' }) + subscriptionStatusActionLink = ''; _renderNotifications() { if (this.notificationCount > 0) { @@ -70,9 +72,9 @@ export class CXLDashboardHeaderElement extends LitElement {

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

- ${this._renderSubscriptionStatus()} - ${this._renderNotifications()} + ${this._renderSubscriptionStatus()} ${this._renderNotifications()}
+ ${this.showCompletedStats ? html` ` : nothing} @@ -94,9 +96,13 @@ export class CXLDashboardHeaderElement extends LitElement { if (this.subscriptionStatus) { return html`
- Subscription status: ${this.subscriptionStatus} + Subscription status: ${this.subscriptionStatus} ${this.subscriptionStatusAction - ? html`${this.subscriptionStatusAction}` + ? html`${this.subscriptionStatusAction}` : nothing}
`; @@ -192,8 +198,7 @@ export class CXLDashboardHeaderElement extends LitElement { return html`
${this._renderUserSection()} ${this._renderRoadmapSection()} - ${this._renderProgramsSection()} - ${this._renderMinidegreesSection()} + ${this._renderProgramsSection()} ${this._renderMinidegreesSection()}
`; } diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js index 3699958df..09cacf5f1 100644 --- a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js +++ b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js @@ -3,7 +3,7 @@ import '@conversionxl/cxl-lumo-styles'; import '@conversionxl/cxl-ui/src/components/cxl-dashboard-header.js'; import '@conversionxl/cxl-ui/src/components/cxl-stats'; -import { CXLStats } from "../cxl-stats/default.stories"; +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'; @@ -26,6 +26,9 @@ export const DashboardHeaderTemplate = (header) => html` subscription-status-action=${header.subscriptionStatusAction} subscription-status-action-link=${header.subscriptionStatusActionLink} > +
+ Go to CXL+ +
${CXLStats({ theme: 'cxl-stats-dashboard-header completed', statsCount: 3 })}
@@ -39,16 +42,20 @@ export const DashboardHeaderTemplate = (header) => html` ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header portrait', length: 16, - args: { theme: 'portrait' } + args: { theme: 'portrait' }, })}
- ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8, args: { theme: 'minidegree', progress: null, avatar: '' } })} + ${CXLLightCardSlider({ + theme: 'cxl-slider-dashboard-header', + length: 8, + args: { theme: 'minidegree', progress: null, avatar: '' }, + })}
`; export const ArgTypes = { name: { control: 'text' }, - notificationCount: { control: 'number' } + notificationCount: { control: 'number' }, };