diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 23e578f37..18dc7f976 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -75,6 +75,20 @@ .attributes { color: var(--lumo-tint); } + + .name a { + color: var(--lumo-tint); + } + + vaadin-button { + &:hover { + cursor: pointer; + + &::before { + opacity: 0.2; + } + } + } } :host([theme~="lesson"]), @@ -142,12 +156,21 @@ header { } .name { - @include mixins.ellipsis-for-lines(3); + @include mixins.ellipsis-for-lines(2); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-xl); font-style: normal; font-weight: 700; line-height: var(--lumo-line-height-xs); + + a { + color: var(--lumo-body-text-color); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } } .attributes { @@ -215,5 +238,10 @@ header { vaadin-button { &:hover { cursor: pointer; + + &::before { + opacity: 0.05; + transition: opacity 0.3s ease; + } } } diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss index a02a67c5f..07d07436b 100644 --- a/packages/cxl-ui/scss/cxl-course-card.scss +++ b/packages/cxl-ui/scss/cxl-course-card.scss @@ -4,7 +4,7 @@ @use "~@conversionxl/cxl-ui/scss/mixins"; :host { - height: 345px; + height: 280px; } :host(:hover) { @@ -28,11 +28,12 @@ header { .content-wrapper { height: 100%; - min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights + min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights line-height: var(--lumo-line-height-s); .content { - @include mixins.ellipsis-for-lines(5); + @include mixins.ellipsis-for-lines(3); + min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights ::slotted(p) { margin-top: 0 !important; diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js index f71f43d59..c972931ef 100644 --- a/packages/cxl-ui/src/components/cxl-course-card.js +++ b/packages/cxl-ui/src/components/cxl-course-card.js @@ -1,5 +1,6 @@ /* eslint-disable import/no-extraneous-dependencies */ import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { customElement, property, state } from 'lit/decorators.js'; import '@vaadin/details'; import '@vaadin/button'; @@ -25,6 +26,12 @@ export class CXLCourseCardElement extends CXLBaseCardElement { this[`_${name}HasChildren`] = !!children.length; } + _renderHeaderName() { + return html`
+ ${unsafeHTML(this.name)} +
`; + } + render() { return html`
diff --git a/packages/cxl-ui/src/components/cxl-course-dialog.js b/packages/cxl-ui/src/components/cxl-course-dialog.js index c614c154d..941985d2a 100644 --- a/packages/cxl-ui/src/components/cxl-course-dialog.js +++ b/packages/cxl-ui/src/components/cxl-course-dialog.js @@ -34,15 +34,16 @@ export class CXLCourseDialogElement extends LitElement { }); } - renderTags = (tags) => tags.map((tag) => html` | ${tag}`); - - renderContentTags = (tags) => tags.map((tag, i) => html`${i > 0 ? html` | ` : ''}${tag}`); + renderTags = (tags) => + tags.map((tag) => html` | ${tag}`); renderContent = () => html`
- ${this.course.theme}${this.course.tags ? this.renderTags(this.course.tags): ''} + ${this.course.theme}${this.course.tags + ? this.renderTags(this.course.tags) + : ''} ${this.course.new ? html` | NEW` : ''}
@@ -62,21 +63,19 @@ export class CXLCourseDialogElement extends LitElement {
- ${this.video ? html` - ` : '' - } + ${this.video + ? html` ` + : ''}

${this.course.description}

-
- ${this.course.contentTags ? this.renderContentTags(this.course.contentTags): ''} -
+

${this.course.more}

@@ -95,7 +94,9 @@ export class CXLCourseDialogElement extends LitElement { ${dialogFooterRenderer( () => html` Close - Add to training + Add to training `, [] )} diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js index 316046f03..3a25195a2 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js +++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js @@ -17,7 +17,6 @@ CXLCourseCardVideo.args = { name: 'A/B testing mastery', description: 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.', - contentTags: 'running experiments | customer base studies | prioritization', tags: 'CRO', time: '4 days ago', new: true, diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js index 6e9512214..b7d716dc4 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js +++ b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js @@ -17,7 +17,6 @@ const ExtraCardVideoArgs = { description: `Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career. One more line to test the layout behavior on longer descriptions, with at least four line of text.`, - contentTags: 'B2B | campaigns | pilot planning', }; const ExtraCardTrainingArgs = { diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js index 40ce641cf..320efd80d 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/template.js +++ b/packages/storybook/cxl-ui/cxl-course-card/template.js @@ -17,13 +17,7 @@ export const CourseCardTemplate = (course) => html` .showTimeIcon=${course.showTimeIcon} > ${course.tags ? renderTags(course.tags, 'tags') : ''} -

- ${course.description} - ${course.contentTags - ? html`

- ${course.contentTags}` - : ''} -

+

${course.description}

${course.more ? html`

${course.more}

` : ''} `; @@ -35,7 +29,6 @@ export const args = { instructor: 'Tom Wesseling', description: 'Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career.', - contentTags: 'B2B | campaigns | pilot planning', theme: 'course', tags: 'Marketing, Analytics, Growth, Demand Capture', avatar: @@ -67,7 +60,7 @@ export const sectionStyles = html` grid: auto-flow / repeat(2, calc(50% - var(--lumo-space-l) / 2)); margin: 60px auto; justify-items: center; - max-width: 900px; + max-width: 843px; grid-gap: var(--lumo-space-l); padding: var(--lumo-space-l); } diff --git a/packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js b/packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js index f47c35b81..fe0aae4d5 100644 --- a/packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js +++ b/packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js @@ -7,11 +7,7 @@ export default { }; const Template = (dialog) => html` - - + `; export const CXLCourseDialog = Template.bind({}); @@ -23,14 +19,15 @@ CXLCourseDialog.args = { name: 'Account based marketing', time: '3h 00min', instructor: 'Tom Wesseling', - description: 'Continue to build your focus on practical ways you can use AI for CRO, building on the original “Applied AI for Marketers” course.', - contentTags: ['B2B', 'campaigns', 'pilot planning'], + description: + 'Continue to build your focus on practical ways you can use AI for CRO, building on the original “Applied AI for Marketers” course.', theme: 'Course', tags: ['Marketing', 'Analytics'], - 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', more: "This course fills that gap. It's the most in-depth guide to what a team considering implementing GA4 needs to know to make their implementation successful.", - new: false - } + new: false, + }, }; CXLCourseDialogVideo.args = { @@ -41,5 +38,5 @@ CXLCourseDialogVideo.args = { playerId: '5CFJNXKb', playlistId: '', pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/', - } + }, }; 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 36080f1f3..219d42e41 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 @@ -37,7 +37,7 @@ export const CXLDashboard = () => { 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', 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 275d22a5e..cf2b6fc0b 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 @@ -36,7 +36,7 @@ export const CXLDashboardNoContent = () => { 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',