fix(cxl-ui): fix course card layout issues

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;

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"] {

packages/storybook/.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+  #root {
+    max-width: 100vw;
+  }
+</style>

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,
 };

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,
 };

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,

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`
+  <style>
+    cxl-course-card {
+      max-width: 400px !important;
+    }
+  </style>
+  <cxl-tabs-slider theme="cxl-course-slider minimal ${theme}">
+    ${Array.from(
+      { length: numberOfCards },
+      () => html`
+        <vaadin-tab theme="cxl-course-slider"
+          >${CXLCourseCard({
+            ...CXLCourseCard.args,
+          })}</vaadin-tab
+        >
+      `
+    )}
+  </cxl-tabs-slider>
+`;
+
+CXLCourseCardSlider.args = {
+  numberOfCards: 3,
+};

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`<span slot=${slot}> | </span>` : ''}<span
-          class="tag"
-          slot=${slot}
-          title="${tag}"
-          >${tag}</span
-        >`
-  );
+  html`<span class="tag" slot=${slot} title="${tags}">${tags}</span>`;
 
 export const CourseCardTemplate = (course) => html`
   <cxl-course-card
@@ -45,7 +37,7 @@ export const args = {
     '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'],
+  tags: 'Marketing, Analytics, Growth, Demand Capture',
   avatar:
     'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
   new: false,
@@ -72,7 +64,7 @@ export const sectionStyles = html`
   <style>
     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));
       }
     }

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`<span slot=${slot}> | </span>` : ''}<span slot=${slot}>${tag}</span>`
-  );
+const renderTags = (tags, slot) => tags.map((tag) => html`<span slot=${slot}>${tag}</span>`);
 
 const FeaturedCourseCardTemplate = (course) => html`
   <cxl-featured-course-card

packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import '@vaadin/progress-bar';
@@ -31,11 +32,11 @@ export const CXLVaadinAccordionThemeCategory = () => html`
                       <div class="section-3">
                         <h6 class="title-3">${item.title}</h6>
                         ${item.sections.map(
-                          (section) => html`
-                          <div class="section-4">
-                            <h6 class="title-4">${section.title}</h6>
-                            ${CXLLightCardSlider(CXLLightCardSlider.args)}
-                          </div>
+                          (itemSection) => html`
+                            <div class="section-4">
+                              <h6 class="title-4">${itemSection.title}</h6>
+                              ${CXLLightCardSlider(CXLLightCardSlider.args)}
+                            </div>
                           `
                         )}
                       </div>
@@ -51,10 +52,9 @@ export const CXLVaadinAccordionThemeCategory = () => html`
   </cxl-vaadin-accordion>
 `;
 
-
 Object.assign(CXLLightCardSlider, {
   args: {
     numberOfCards: 8,
-    theme: 'cxl-category-accordion'
+    theme: 'cxl-category-accordion',
   },
 });