From 639ab2d78171ed2f9f7b8fdf5ba1c9d81e6145ff Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Thu, 28 Sep 2023 18:21:26 +0300 Subject: [PATCH 1/2] feat(cxl-ui): cxl-featured-course-card v2 https://app.clickup.com/t/86aya2ta8 --- .gitignore | 1 + packages/cxl-lumo-styles/scss/color.scss | 1 + packages/cxl-lumo-styles/scss/global.scss | 1 + .../scss/themes/cxl-tabs-slider.scss | 36 +++++--- .../cxl-ui/scss/cxl-dashboard-header.scss | 8 +- .../cxl-ui/scss/cxl-featured-course-card.scss | 89 +++++++++++++------ packages/cxl-ui/scss/cxl-stats.scss | 4 - .../scss/global/cxl-dashboard-header.scss | 12 --- .../components/cxl-featured-course-card.js | 62 +++++++------ .../dashboard-slider.stories.js | 18 ++-- .../default.stories.js | 2 +- 11 files changed, 139 insertions(+), 95 deletions(-) diff --git a/.gitignore b/.gitignore index 3dbdb4875..516701214 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ packages/**/pkg coverage tmp test/visual/screenshots +.idea diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss index ed401426b..38a224291 100644 --- a/packages/cxl-lumo-styles/scss/color.scss +++ b/packages/cxl-lumo-styles/scss/color.scss @@ -8,6 +8,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-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index 3cfd19a80..ae9549991 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -9,6 +9,7 @@ html { --cxl-space-sm: 12px; --cxl-color-light-gray: hsla(0, 0%, 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); --cxl-color-brand-blue: hsla(214, 61%, 25%, 1); --cxl-color-light-pink: hsl(353, 73%, 96%, 1); 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 e41cd4285..8ca128af2 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -67,17 +67,40 @@ } } -// Featured course slider +/** + * Theme "featured-course-slider" +*/ + :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { - background-color: var(--cxl-color-light-gray); + position: relative; + background-color: var(--cxl-color-black); + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + z-index: 0; + width: 100vw; + content: ""; + background-color: var(--cxl-color-black); + transform: translateX(-50%); + } [part="back-button"], [part="forward-button"] { + display: none; top: calc(50% - 2 * var(--lumo-space-xl)); width: var(--lumo-size-s); height: var(--lumo-size-s); color: var(--lumo-primary-color); border-radius: 100%; + border: 1px solid transparent; + background-color: var(--lumo-primary-color-20pct); + + &:hover { + border-color: var(--lumo-primary-color); + } &::after { font-size: var(--lumo-font-size-xl); @@ -85,6 +108,7 @@ @media #{mq.$medium} { top: unset; + display: flex; width: var(--lumo-space-xl); height: var(--lumo-space-xl); @@ -102,14 +126,6 @@ margin-right: var(--lumo-space-s); } - ::slotted(vaadin-tab) { - padding: 0 var(--lumo-space-m); - - @media #{mq.$medium} { - padding: 0; - } - } - ::slotted(vaadin-tab:not(:first-child)) { @media #{mq.$medium} { padding-left: var(--lumo-size-xl); diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index a70a30dea..901c7326a 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -4,11 +4,10 @@ :host { .container { padding: 0 var(--lumo-space-m); - color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-shade); + background-color: var(--cxl-color-light-gray); @media #{mq.$medium} { - padding: 0; + padding: 0 var(--lumo-space-l); } } @@ -33,7 +32,6 @@ .subtitle { font-size: var(--lumo-font-size-xs); line-height: 1; - color: var(--lumo-tint-30pct); text-transform: uppercase; } @@ -155,7 +153,6 @@ height: var(--lumo-size-xl); padding: var(--lumo-space-m); line-height: 1.3; - color: var(--lumo-primary-contrast-color); cursor: pointer; border: 1px solid var(--cxl-color-dark-gray); border-radius: var(--lumo-border-radius-s); @@ -180,6 +177,7 @@ } .roadmap { + color: var(--lumo-primary-contrast-color); background-color: var(--lumo-primary-color); vaadin-icon { diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss index 5c55ced5a..5c37ec3f4 100644 --- a/packages/cxl-ui/scss/cxl-featured-course-card.scss +++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss @@ -3,25 +3,34 @@ :host { position: relative; - max-width: unset; + display: flex; + align-items: center; + width: auto; height: auto; - padding: 0; + min-height: 400px; + max-width: unset; + margin: 0 calc(var(--lumo-space-m) * -1); + padding: 0 var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m); + line-height: var(--lumo-line-height-m); border: 0; box-shadow: none; + border-radius: 0; + background-color: var(--cxl-color-black); + + @media #{mq.$large} { + width: 100%; + margin: 0; + padding: 0 var(--lumo-space-m); + } .container { - position: relative; display: block; - height: 100%; - padding: 0 var(--lumo-space-m); - background-color: var(--cxl-color-light-gray); - - @media #{mq.$medium} { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-template-rows: min-content auto; - gap: 0; - padding: var(--lumo-space-l) 0 0 var(--lumo-space-l); + margin: 0 auto; + padding: 0; + color: var(--lumo-tint); + + @media #{mq.$large} { + padding-right: 400px; } > .attributes { @@ -29,6 +38,14 @@ padding: 0; } + .name { + font-size: var(--lumo-font-size-xl); + + @media #{mq.$large} { + font-size: var(--lumo-font-size-xxxl); + } + } + .name strong { color: var(--lumo-primary-color); } @@ -53,6 +70,7 @@ align-items: center; grid-row-gap: var(--lumo-space-xs); padding: 0; + color: var(--lumo-tint); } } } @@ -62,10 +80,12 @@ z-index: 0; .instructor-image { - max-height: calc(var(--lumo-space-xl) * 6); + display: block; + margin: 0 auto; + max-height: calc(var(--lumo-space-xl) * 4); object-fit: contain; - @media #{mq.$medium} { + @media #{mq.$large} { display: none; } } @@ -81,7 +101,7 @@ margin-top: calc(var(--lumo-space-m) * -2); } - @media #{mq.$medium} { + @media #{mq.$large} { display: none; } } @@ -90,28 +110,35 @@ position: relative; z-index: 0; display: block; + max-width: 650px; + padding: 0 var(--lumo-space-m); - @media #{mq.$medium} { + @media #{mq.$large} { position: initial; + padding: 0; grid-column: span 7 / span 7; } .instructor-image { display: none; + border-radius: 0; img { - height: 100%; + width: 100%; + height: auto; + margin-top: auto; border-radius: 0; + object-fit: contain; } - @media #{mq.$medium} { + @media #{mq.$large} { position: absolute; - top: 0; - right: var(--lumo-space-l); + top: var(--lumo-space-l); + left: 60%; display: flex; justify-content: flex-end; width: auto; - max-width: 100%; + max-width: 400px; height: 100%; max-height: none; } @@ -121,8 +148,15 @@ .content-after { position: relative; z-index: 0; - padding-top: var(--lumo-space-s); - padding-bottom: var(--lumo-space-m); + max-width: 500px; + margin-top: var(--lumo-space-s); + padding: 0 var(--lumo-space-m); + + @media #{mq.$large} { + grid-column: span 7 / span 7; + padding-right: 0; + padding-left: 0; + } .content { @include mixins.ellipsis-for-lines(5); @@ -130,6 +164,8 @@ } .cta { + margin: var(--lumo-space-s) 0 0; + padding: 0; font-weight: 600; vaadin-icon { @@ -145,10 +181,5 @@ text-decoration: underline; } } - - @media #{mq.$medium} { - grid-column: span 7 / span 7; - padding-top: var(--lumo-space-s); - } } } diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss index cd0b7e598..d96c9d56f 100644 --- a/packages/cxl-ui/scss/cxl-stats.scss +++ b/packages/cxl-ui/scss/cxl-stats.scss @@ -22,8 +22,4 @@ @media #{mq.$medium} { grid-template-columns: repeat(2, 1fr); } - - @media #{mq.$large} { - background-color: var(--cxl-color-dark-gray); - } } diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss index a8695cd51..b9df43dca 100644 --- a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss @@ -3,18 +3,6 @@ cxl-dashboard-header { z-index: 1; display: block; - &::before { - position: absolute; - top: 0; - bottom: 0; - left: 50%; - z-index: -1; - width: 100vw; - content: ""; - background-color: var(--lumo-shade); - transform: translateX(-50%); - } - .edit-roadmap { display: flex; align-items: center; diff --git a/packages/cxl-ui/src/components/cxl-featured-course-card.js b/packages/cxl-ui/src/components/cxl-featured-course-card.js index 758cbe113..1fb1dc0e7 100644 --- a/packages/cxl-ui/src/components/cxl-featured-course-card.js +++ b/packages/cxl-ui/src/components/cxl-featured-course-card.js @@ -17,35 +17,47 @@ export class CXLFeaturedCourseCardElement extends CXLBaseCardElement { @property({ type: String, attribute: 'cta-url' }) ctaUrl = ''; + _renderContentBefore() { + return html` +
+ ${this.instructor} + + + +
+ `; + } + + _renderContentAfter() { + return html` +
+
+ +
+ { + e.stopImmediatePropagation(); + this._goToLink(this.ctaUrl); + }} + > + ${this.ctaLabel} + + +
+ `; + } + render() { return html`
-
- ${this.instructor} - - - -
+ ${this._renderContentBefore()} ${this._renderHeader()} -
-
- -
- { - e.stopImmediatePropagation(); - this._goToLink(this.ctaUrl); - }} - > - ${this.ctaLabel} - - -
+ ${this._renderContentAfter()}
`; } diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js index 76b42bf4e..c624fdb05 100644 --- a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js +++ b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js @@ -29,15 +29,15 @@ const args3 = { const Template = () => html` - ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} - ${CXLFeatureadCourseCard(args2)} - ${CXLFeatureadCourseCard(args3)} + + ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} + + + ${CXLFeatureadCourseCard(args2)} + + + ${CXLFeatureadCourseCard(args3)} + `; diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js index 2c577d4f5..b6f566403 100644 --- a/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js @@ -32,7 +32,7 @@ export const CXLFeatureadCourseCard = FeaturedCourseCardTemplate.bind({}); CXLFeatureadCourseCard.args = { id: 'cxl-featured-course-1', - theme: 'Featured course', + theme: 'Featured', name: 'Get ahead with Google Analytics 4', time: '5h 04min', instructor: 'Fred Pike', From d7365b694e1a2b7ada52b553e35c719b7de4b906 Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Fri, 6 Oct 2023 16:56:11 +0300 Subject: [PATCH 2/2] feat(cxl-ui): cxl-dashboard-header changes for a light background https://app.clickup.com/t/86aya2ta8 --- .../scss/themes/cxl-tabs-slider.scss | 5 +++++ .../scss/themes/vaadin-details.scss | 22 +++++++++++++------ .../cxl-ui/scss/cxl-dashboard-header.scss | 7 ++++-- .../scss/cxl-dashboard-notification.scss | 6 ++--- .../cxl-ui/scss/cxl-featured-course-card.scss | 3 ++- packages/cxl-ui/scss/cxl-stats.scss | 1 + packages/cxl-ui/scss/global/cxl-stats.scss | 6 ----- 7 files changed, 31 insertions(+), 19 deletions(-) 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 8ca128af2..97f99cf34 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -73,8 +73,13 @@ :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { position: relative; + display: none; background-color: var(--cxl-color-black); + @media #{mq.$large} { + display: flex; + } + &::before { position: absolute; top: 0; diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss index b733f36f7..60c2ab3b3 100644 --- a/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-details.scss @@ -35,6 +35,17 @@ } } } + + :host([theme~="cxl-dashboard-header"]) { + [part="summary"]:hover { + color: var(--lumo-shade); + + [part="toggle"] { + background-color: var(--lumo-shade); + color: var(--lumo-primary-contrast-color); + } + } + } } // Dashboard notification component @@ -57,9 +68,10 @@ // Dashboard header :host([theme~="cxl-dashboard-header"]) { + position: relative; margin: var(--lumo-space-s) 0 0; - border: 1px solid var(--cxl-color-dark-gray); border-radius: var(--lumo-border-radius-s); + background-color: var(--lumo-primary-contrast-color); [part="summary"] { display: flex; @@ -67,11 +79,7 @@ justify-content: space-between; padding: var(--lumo-space-m); line-height: 1.3; - color: var(--lumo-primary-contrast-color); - - &:hover { - color: var(--lumo-primary-contrast-color); - } + color: var(--lumo-primary-text-color); } [part="toggle"] { @@ -79,7 +87,7 @@ margin-left: var(--lumo-space-s); font-size: var(--lumo-font-size-m); color: var(--lumo-primary-contrast-color); - background-color: var(--lumo-tint-5pct); + background-color: var(--lumo-primary-color); border-radius: 100%; } diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index 901c7326a..dbd8d8c94 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -82,7 +82,6 @@ .last-course { margin-bottom: var(--lumo-space-l); - border: 1px solid var(--lumo-primary-color); @media #{mq.$large} { display: flex; @@ -154,8 +153,8 @@ padding: var(--lumo-space-m); line-height: 1.3; cursor: pointer; - border: 1px solid var(--cxl-color-dark-gray); border-radius: var(--lumo-border-radius-s); + background-color: var(--lumo-primary-contrast-color); &::part(label) { width: 100%; @@ -180,6 +179,10 @@ 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); } diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss index db47d37f0..f737d0a00 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-notification.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-notification.scss @@ -7,9 +7,9 @@ justify-content: center; height: var(--lumo-space-xl); padding: var(--lumo-space-s); - margin: 0 calc(-1 * var(--lumo-space-xl)); - color: var(--lumo-primary-contrast-color); - background-color: var(--cxl-color-dark-gray); + margin: 0 calc(-1 * var(--lumo-space-m)); + color: var(--cxl-color-dark-gray); + background-color: var(--lumo-primary-contrast-color); border-radius: 0; &::part(label) { diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss index 5c37ec3f4..6897e8ec1 100644 --- a/packages/cxl-ui/scss/cxl-featured-course-card.scss +++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss @@ -16,6 +16,7 @@ box-shadow: none; border-radius: 0; background-color: var(--cxl-color-black); + overflow: hidden; @media #{mq.$large} { width: 100%; @@ -81,7 +82,7 @@ .instructor-image { display: block; - margin: 0 auto; + margin: var(--lumo-space-m) auto 0; max-height: calc(var(--lumo-space-xl) * 4); object-fit: contain; diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss index d96c9d56f..8380cf825 100644 --- a/packages/cxl-ui/scss/cxl-stats.scss +++ b/packages/cxl-ui/scss/cxl-stats.scss @@ -18,6 +18,7 @@ :host([theme~="cxl-stats-dashboard-header"]) { padding: var(--lumo-space-m); border: 0; + background-color: var(--lumo-primary-contrast-color); @media #{mq.$medium} { grid-template-columns: repeat(2, 1fr); diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss index a80cfdc0d..8c5f2a1e5 100644 --- a/packages/cxl-ui/scss/global/cxl-stats.scss +++ b/packages/cxl-ui/scss/global/cxl-stats.scss @@ -27,9 +27,3 @@ cxl-stats { } } } - -cxl-stats[theme~="cxl-stats-dashboard-header"] { - .stat-title { - color: var(--lumo-tint-30pct); - } -}