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..2720d78d1 100644 --- a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss +++ b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss @@ -68,9 +68,14 @@ } // Featured course slider -:host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) { +:host([theme~="cxl-featured-course-slider"]) { + display: none; background-color: var(--cxl-color-light-gray); + @media (min-width: 568px) and (min-height: 568px) { + display: flex; + } + [part="back-button"], [part="forward-button"] { top: calc(50% - 2 * var(--lumo-space-xl)); diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 963894892..eaaa3c479 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -10,7 +10,6 @@ height: max-content; padding: var(--lumo-space-m) var(--lumo-space-l); font-size: var(--lumo-font-size-s); - background: var(--lumo-tint); border: 1px solid var(--lumo-contrast-10pct); border-radius: var(--lumo-border-radius-l); box-shadow: var(--lumo-box-shadow-xs); @@ -54,20 +53,20 @@ margin-bottom: unset; } -:host([theme~="video"]) { +:host([theme="video"]) { background-color: var(--video-background); } -:host([theme~="training"]) { +:host([theme="training"]) { background-color: var(--training-background); } -:host([theme~="playbook"]) { +:host([theme="playbook"]) { background-color: var(--playbook-background); } -:host([theme~="minidegree"]), -:host([theme~="category"]) { +:host([theme="minidegree"]), +:host([theme="category"]) { color: var(--lumo-tint); background-color: var(--lumo-contrast); @@ -76,12 +75,12 @@ } } -:host([theme~="lesson"]), -:host([theme~="course"]) { +:host([theme="lesson"]), +:host([theme="course"]) { background-color: var(--lumo-tint); } -:host([theme~="exam"]) { +:host([theme="exam"]) { background-color: var(--lumo-primary-color-10pct); border-color: var(--lumo-primary-color); } diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss index 668ff393b..b690df0b7 100644 --- a/packages/cxl-ui/scss/cxl-course-card.scss +++ b/packages/cxl-ui/scss/cxl-course-card.scss @@ -1,5 +1,6 @@ /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */ @use "~@conversionxl/cxl-ui/scss/mixins"; +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; :host { height: 345px; @@ -9,19 +10,16 @@ box-shadow: var(--lumo-box-shadow-s); } -header .name { - @include mixins.ellipsis-for-lines(3); -} - .content-wrapper { + height: 100%; min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights line-height: var(--lumo-line-height-s); - height: 100%; .content { @include mixins.ellipsis-for-lines(5); ::slotted(p) { + /* stylelint-disable declaration-no-important */ margin-top: 0 !important; margin-bottom: 0 !important; } @@ -40,8 +38,8 @@ header .name { } footer { - display: flex; position: relative; + display: flex; justify-content: end; vaadin-details[theme="reverse"] { diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss index 5c55ced5a..11623e735 100644 --- a/packages/cxl-ui/scss/cxl-featured-course-card.scss +++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss @@ -2,153 +2,112 @@ @use "~@conversionxl/cxl-ui/scss/mixins"; :host { - position: relative; + display: none; max-width: unset; - height: auto; - padding: 0; - border: 0; - box-shadow: none; - - .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); - } - - > .attributes { - display: none; - padding: 0; - } - - .name strong { - color: var(--lumo-primary-color); - } + height: unset; + max-height: 100vh; + overflow: hidden; + background-color: var(--cxl-color-light-gray); + border: none; + border-radius: 0; + /* stylelint-disable declaration-no-important */ + box-shadow: none !important; + + @media #{mq.$small} { + display: flex; + height: 400px; + } - .info { - max-width: unset; - gap: var(--lumo-space-s); + @media #{mq.$large} { + padding-inline: 124px; + } - .tags { - flex-wrap: wrap; - column-gap: var(--lumo-space-s); - row-gap: 0; - } + .container { + justify-content: center; - .tag { - white-space: nowrap; - } + .content-wrapper { + min-width: 250px; + max-width: 600px; + height: auto; - .attributes { - display: flex; - flex-wrap: wrap; - align-items: center; - grid-row-gap: var(--lumo-space-xs); - padding: 0; + @media #{mq.$small} { + width: 50%; } } } - .content-before { - position: relative; - z-index: 0; - - .instructor-image { - max-height: calc(var(--lumo-space-xl) * 6); - object-fit: contain; + header { + flex-direction: column-reverse; - @media #{mq.$medium} { - display: none; - } + @media #{mq.$small} { + flex-direction: row; } - .swoosh { - position: absolute; - top: 100%; - right: 0; - bottom: 0; - left: 0; - z-index: 0; - max-height: 100%; - margin-top: calc(var(--lumo-space-m) * -2); - } + .info { + max-width: unset; - @media #{mq.$medium} { - display: none; + @media #{mq.$small} { + max-width: calc(100% - var(--lumo-space-m) - 80px); + } } - } - header { - position: relative; - z-index: 0; - display: block; - - @media #{mq.$medium} { - position: initial; - grid-column: span 7 / span 7; + .name { + @include mixins.ellipsis-for-lines(3); } .instructor-image { - display: none; + position: relative; + width: auto; + height: auto; + border-radius: 0; img { - height: 100%; - border-radius: 0; + width: 100%; + height: auto; + max-height: 100%; } - @media #{mq.$medium} { + @media #{mq.$small} { position: absolute; - top: 0; - right: var(--lumo-space-l); - display: flex; - justify-content: flex-end; + top: calc(-1 * var(--lumo-space-m)); + right: 0; width: auto; - max-width: 100%; - height: 100%; - max-height: none; + max-width: 45%; + height: calc(100% + var(--lumo-space-m)); + overflow: visible; + border-radius: unset; } - } - } - - .content-after { - position: relative; - z-index: 0; - padding-top: var(--lumo-space-s); - padding-bottom: var(--lumo-space-m); - .content { - @include mixins.ellipsis-for-lines(5); - margin-bottom: var(--lumo-space-s); - } - - .cta { - font-weight: 600; + @media #{mq.$medium} { + right: var(--lumo-space-m); + } - vaadin-icon { - width: var(--lumo-icon-size-s); - height: var(--lumo-icon-size-s); - padding: calc(var(--lumo-space-xs) / 2); - margin-left: var(--lumo-space-xs); - background: var(--lumo-primary-color-10pct); - border-radius: 100%; + @media #{mq.$large} { + right: 124px; } - &:hover { - text-decoration: underline; + .swoosh { + position: absolute; + top: 100%; + right: 0; + bottom: 0; + left: 0; + z-index: 0; + max-height: 100%; + margin-top: calc(var(--lumo-space-m) * -2); + + @media #{mq.$small} { + top: 80%; + } + + @media #{mq.$medium} { + display: none; + } } } + } - @media #{mq.$medium} { - grid-column: span 7 / span 7; - padding-top: var(--lumo-space-s); - } + footer { + justify-content: start; } } diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js index f71f43d59..3455836a7 100644 --- a/packages/cxl-ui/src/components/cxl-course-card.js +++ b/packages/cxl-ui/src/components/cxl-course-card.js @@ -25,6 +25,17 @@ export class CXLCourseCardElement extends CXLBaseCardElement { this[`_${name}HasChildren`] = !!children.length; } + _renderCta() { + return html` + + + ${this.ctaLabel} ${this.theme} + + + + `; + } + render() { return html`
@@ -39,17 +50,7 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
Read more
- { - e.stopImmediatePropagation(); - this._goToLink(this.ctaUrl); - }} - > - ${this.ctaLabel} ${this.theme} - - + ${this._renderCta()}
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..de0dc545a 100644 --- a/packages/cxl-ui/src/components/cxl-featured-course-card.js +++ b/packages/cxl-ui/src/components/cxl-featured-course-card.js @@ -3,10 +3,10 @@ import { html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; import cxlFeaturedCourseCardStyles from '../styles/cxl-featured-course-card-css.js'; -import { CXLBaseCardElement } from './cxl-base-card.js'; +import { CXLCourseCardElement } from './cxl-course-card.js'; @customElement('cxl-featured-course-card') -export class CXLFeaturedCourseCardElement extends CXLBaseCardElement { +export class CXLFeaturedCourseCardElement extends CXLCourseCardElement { static get styles() { return [...super.styles, cxlFeaturedCourseCardStyles]; } @@ -17,36 +17,26 @@ export class CXLFeaturedCourseCardElement extends CXLBaseCardElement { @property({ type: String, attribute: 'cta-url' }) ctaUrl = ''; - render() { + _renderAvatar() { return html` -
-
- ${this.instructor} - - - -
- ${this._renderHeader()} -
-
- -
- { - e.stopImmediatePropagation(); - this._goToLink(this.ctaUrl); - }} - > - ${this.ctaLabel} - - -
-
+ ${this.instructor} + + + + `; + } + + _renderCta() { + return html` + + + ${this.ctaLabel} + + + `; } } diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/course-card-based.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/course-card-based.stories.js new file mode 100644 index 000000000..8672a339c --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-featured-course-card/course-card-based.stories.js @@ -0,0 +1,45 @@ +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; +import '@conversionxl/cxl-ui/src/components/cxl-featured-course-card.js'; + +export default { + title: 'CXL UI/cxl-featured-course-card', +}; + +const renderTags = (tags, slot) => + tags.map( + (tag, i) => + html`${i > 0 ? html` | ` : ''}${tag}` + ); + +const FeaturedCourseCard2Template = (course) => html` + + ${course.tags ? renderTags(course.tags, 'tags') : ''} +
${unsafeHTML(course.description)}
+ +`; + +export const CXLFeatureadCourse2Card = FeaturedCourseCard2Template.bind({}); + +CXLFeatureadCourse2Card.args = { + id: 'cxl-featured-course-1', + theme: 'featured course', + 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: '', + avatar: + 'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png', +};