From 86c272d92c4873b7b49a6b3531f0e87e79ee5a0e Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Wed, 27 Sep 2023 15:27:56 -0300 Subject: [PATCH 1/2] fix(cxl-ui): fix course card layout issues --- packages/cxl-ui/scss/cxl-base-card.scss | 4 ++- packages/cxl-ui/scss/cxl-course-card.scss | 21 +++++++++--- .../storybook/.storybook/preview-body.html | 5 +++ .../[theme=playbook].stories.js | 2 +- .../[theme=training].stories.js | 5 +-- .../cxl-course-card/[theme=video].stories.js | 5 +-- .../course-card-slider.stories.js | 33 +++++++++++++++++++ .../cxl-ui/cxl-course-card/template.js | 12 ++----- .../default.stories.js | 6 +--- .../theme=cxl-dashboard-category.story.js | 14 ++++---- 10 files changed, 75 insertions(+), 32 deletions(-) create mode 100644 packages/storybook/.storybook/preview-body.html create mode 100644 packages/storybook/cxl-ui/cxl-course-card/course-card-slider.stories.js 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..83d0d93b2 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` - 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', }, }); From 601f2268ea908c63be931cff6359024db3e99742 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Thu, 28 Sep 2023 12:02:45 -0300 Subject: [PATCH 2/2] fix(cxl-ui): force symmetric course card grid --- packages/storybook/cxl-ui/cxl-course-card/template.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js index 83d0d93b2..40ce641cf 100644 --- a/packages/storybook/cxl-ui/cxl-course-card/template.js +++ b/packages/storybook/cxl-ui/cxl-course-card/template.js @@ -64,7 +64,7 @@ export const sectionStyles = html`