From 99c325e63109c78860bb134c3decdee50cc5e687 Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Thu, 28 Sep 2023 18:21:26 +0300 Subject: [PATCH] feat(cxl-ui): Featured 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 | 15 ++++- .../cxl-ui/scss/cxl-featured-course-card.scss | 58 +++++++++++------ .../components/cxl-featured-course-card.js | 62 +++++++++++-------- .../dashboard-slider.stories.js | 26 ++++---- .../default.stories.js | 2 +- 8 files changed, 109 insertions(+), 57 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..99dce54bb 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -12,6 +12,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-black: hsl(0, 0%, 0%); /** * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons. 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..462f5b8c0 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,27 @@ } } -// Featured course slider +/** + * Theme "featured-course-slider" +*/ + :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { - background-color: var(--cxl-color-light-gray); + background-color: var(--cxl-color-black); [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 +95,7 @@ @media #{mq.$medium} { top: unset; + display: flex; width: var(--lumo-space-xl); height: var(--lumo-space-xl); diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss index 5c55ced5a..7c9d28292 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 0 24px 0; border: 0; box-shadow: none; + border-radius: 0; + background-color: var(--cxl-color-black); + + @media #{mq.$medium} { + width: 100%; + margin: 0; + padding-right: 16px; + padding-left: 16px; + } .container { - position: relative; display: block; - height: 100%; - padding: 0 var(--lumo-space-m); - background-color: var(--cxl-color-light-gray); + margin: 0 auto; + padding: 0; + color: var(--lumo-tint); @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); + padding-right: 400px; } > .attributes { @@ -29,6 +38,10 @@ padding: 0; } + .name { + font-size: 40px; + } + .name strong { color: var(--lumo-primary-color); } @@ -53,6 +66,7 @@ align-items: center; grid-row-gap: var(--lumo-space-xs); padding: 0; + color: var(--lumo-tint); } } } @@ -62,6 +76,8 @@ z-index: 0; .instructor-image { + display: block; + margin: 0 auto; max-height: calc(var(--lumo-space-xl) * 6); object-fit: contain; @@ -90,9 +106,12 @@ position: relative; z-index: 0; display: block; + max-width: 650px; + padding: 0 var(--lumo-space-m); @media #{mq.$medium} { position: initial; + padding: 0; grid-column: span 7 / span 7; } @@ -121,8 +140,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: 16px; + padding: 0 var(--lumo-space-m); + + @media #{mq.$medium} { + grid-column: span 7 / span 7; + padding-right: 0; + padding-left: 0; + } .content { @include mixins.ellipsis-for-lines(5); @@ -130,6 +156,7 @@ } .cta { + margin: 16px 0 0; font-weight: 600; vaadin-icon { @@ -145,10 +172,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/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..eb92efa9f 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 @@ -28,17 +28,21 @@ const args3 = { }; const Template = () => html` - - ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} - ${CXLFeatureadCourseCard(args2)} - ${CXLFeatureadCourseCard(args3)} - +
+
+ + + ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)} + + + ${CXLFeatureadCourseCard(args2)} + + + ${CXLFeatureadCourseCard(args3)} + + +
+
`; export const DashboardSlider = Template.bind({}); 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..9b790eb47 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-course', name: 'Get ahead with Google Analytics 4', time: '5h 04min', instructor: 'Fred Pike',