diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 963894892..23e578f37 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -1,12 +1,12 @@ /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */ @use "~@conversionxl/cxl-lumo-styles/scss/mq"; +@use "~@conversionxl/cxl-ui/scss/mixins"; :host { position: relative; box-sizing: border-box; display: flex; width: 100%; - max-width: calc(100% - 2 * var(--lumo-space-l)); height: max-content; padding: var(--lumo-space-m) var(--lumo-space-l); font-size: var(--lumo-font-size-s); @@ -33,6 +33,7 @@ header .info .attributes { display: flex; + align-items: center; } } @@ -141,6 +142,7 @@ header { } .name { + @include mixins.ellipsis-for-lines(3); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-xl); font-style: normal; diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss index 668ff393b..a02a67c5f 100644 --- a/packages/cxl-ui/scss/cxl-course-card.scss +++ b/packages/cxl-ui/scss/cxl-course-card.scss @@ -1,4 +1,6 @@ /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */ +/* stylelint-disable declaration-no-important */ + @use "~@conversionxl/cxl-ui/scss/mixins"; :host { @@ -9,14 +11,25 @@ box-shadow: var(--lumo-box-shadow-s); } -header .name { - @include mixins.ellipsis-for-lines(3); +header { + .name { + @include mixins.ellipsis-for-lines(3); + } + + .info { + overflow: visible; + + cxl-time, + .instructor { + white-space: nowrap; + } + } } .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); @@ -40,8 +53,8 @@ header .name { } footer { - display: flex; position: relative; + display: flex; justify-content: end; vaadin-details[theme="reverse"] { diff --git a/packages/storybook/.storybook/preview-body.html b/packages/storybook/.storybook/preview-body.html new file mode 100644 index 000000000..0c435a43c --- /dev/null +++ b/packages/storybook/.storybook/preview-body.html @@ -0,0 +1,5 @@ + diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js index 172787997..93eaf9652 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js +++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js @@ -18,6 +18,6 @@ CXLCourseCardPlaybook.args = { time: '12 days ago', 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.', - tags: ['Growth Marketing'], + tags: 'Growth Marketing', showTimeIcon: false, }; diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js index 8f6f5f835..5e0c4b5bd 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js +++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js @@ -15,7 +15,8 @@ CXLCourseCardTraining.args = { ...args, theme: 'training', 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.', - tags: ['CRO', 'Branding'], + description: + 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.', + tags: 'CRO, Branding', showTimeIcon: false, }; 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 2c5327bec..316046f03 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 @@ -15,9 +15,10 @@ CXLCourseCardVideo.args = { ...args, theme: 'video', 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.', + 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'], + tags: 'CRO', time: '4 days ago', new: true, showTimeIcon: false, diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-card-slider.stories.js b/packages/storybook/cxl-ui/cxl-course-card/course-card-slider.stories.js new file mode 100644 index 000000000..e9b22d145 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-course-card/course-card-slider.stories.js @@ -0,0 +1,33 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-light-card.js'; +import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider.js'; +import '@conversionxl/cxl-lumo-styles'; +import { CXLCourseCard } from './[theme=course|lesson].stories.js'; + +export default { + title: 'CXL UI/cxl-course-card', +}; + +export const CXLCourseCardSlider = ({ numberOfCards, theme }) => html` + + + ${Array.from( + { length: numberOfCards }, + () => html` + ${CXLCourseCard({ + ...CXLCourseCard.args, + })} + ` + )} + +`; + +CXLCourseCardSlider.args = { + numberOfCards: 3, +}; diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js index 4634b6cad..40ce641cf 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/template.js +++ b/packages/storybook/cxl-ui/cxl-course-card/template.js @@ -2,15 +2,7 @@ import { html } from 'lit'; const renderTags = (tags, slot) => - tags.map( - (tag, i) => - html`${i > 0 ? html` | ` : ''}${tag}` - ); + html`${tags}`; export const CourseCardTemplate = (course) => html` section { display: grid; - grid: auto-flow / repeat(2, 1fr); + grid: auto-flow / repeat(2, calc(50% - var(--lumo-space-l) / 2)); margin: 60px auto; justify-items: center; max-width: 900px; @@ -82,7 +74,7 @@ export const sectionStyles = html` @media (max-width: 800px) { section { - grid: auto / 1fr; + grid: auto / 100%; max-width: 100vw; padding: var(--lumo-space-xs); } @@ -93,7 +85,7 @@ export const sectionStyles = html` padding: 0; } - section > * { + section > cxl-course-card { max-width: calc(100vw - 2 * var(--lumo-space-xs) - var(--lumo-space-m)); } } 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..fc3be0da4 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 @@ -6,11 +6,7 @@ export default { title: 'CXL UI/cxl-featured-course-card', }; -const renderTags = (tags, slot) => - tags.map( - (tag, i) => - html`${i > 0 ? html` | ` : ''}${tag}` - ); +const renderTags = (tags, slot) => tags.map((tag) => html`${tag}`); const FeaturedCourseCardTemplate = (course) => html` html`
${item.title}
${item.sections.map( - (section) => html` -
-
${section.title}
- ${CXLLightCardSlider(CXLLightCardSlider.args)} -
+ (itemSection) => html` +
+
${itemSection.title}
+ ${CXLLightCardSlider(CXLLightCardSlider.args)} +
` )}
@@ -51,10 +52,9 @@ export const CXLVaadinAccordionThemeCategory = () => html` `; - Object.assign(CXLLightCardSlider, { args: { numberOfCards: 8, - theme: 'cxl-category-accordion' + theme: 'cxl-category-accordion', }, });