fix(cxl-ui): adjust cxl-course-card max-width in vaadion-accordion

packages/cxl-ui/scss/cxl-base-card.scss

@@ -8,7 +8,7 @@
   display: flex;
   width: 100%;
   height: max-content;
-  padding: var(--lumo-space-m) var(--lumo-space-l);
+  padding: var(--lumo-space-m);
   font-size: var(--lumo-font-size-s);
   background: var(--lumo-tint);
   border: 1px solid var(--lumo-contrast-10pct);
@@ -25,6 +25,7 @@
   // Container / Media queries
   @media #{mq.$small} {
     max-width: unset;
+    padding: var(--lumo-space-m) var(--lumo-space-l);
     margin: unset;
 
     .container > .attributes {

packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss

@@ -6,6 +6,10 @@ cxl-vaadin-accordion {
    * Theme "cxl-accordion-card".
    */
   &[theme~="cxl-accordion-card"] {
+    cxl-course-card {
+      max-width: calc(100vw - 2 * var(--cxl-wrap-padding));
+    }
+
     vaadin-icon {
       --vaadin-icon-height: var(--lumo-icon-size-s);
       --vaadin-icon-width: var(--vaadin-icon-height);

packages/cxl-ui/src/components/cxl-time.js

@@ -11,7 +11,7 @@ export class CxlTime extends LitElement {
 
   @property({ type: String }) time = '';
 
-  @property({ type: Boolean, attribute: 'show-icon' }) showIcon = false;
+  @property({ type: Boolean, attribute: 'show-icon' }) showIcon = true;
 
   render() {
     return html`

packages/storybook/cxl-ui/cxl-course-card/template.js

@@ -1,12 +1,14 @@
 /* eslint-disable prefer-template */
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 const renderTags = (tags, slot) =>
   html`<span class="tag" slot=${slot} title="${tags}">${tags}</span>`;
 
 export const CourseCardTemplate = (course) => html`
   <cxl-course-card
     id=${course.id}
+    class=${course.classes || ''}
     theme=${course.theme}
     name=${course.name}
     time=${course.time}
@@ -17,7 +19,7 @@ export const CourseCardTemplate = (course) => html`
     .showTimeIcon=${course.showTimeIcon}
   >
     ${course.tags ? renderTags(course.tags, 'tags') : ''}
-    <p slot="content" title=${course.description}>${course.description}</p>
+    <p slot="content" title=${course.description || ''}>${unsafeHTML(course.description)}</p>
     ${course.more ? html`<p slot="more">${course.more}</p>` : ''}
   </cxl-course-card>
 `;

packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js

@@ -1,4 +1,5 @@
 import { CXLVaadinAccordionThemeArchive } from './cxl-vaadin-accordion/cxl-accordion-card.story';
+import { CXLVaadinAccordionThemeCourses } from './cxl-vaadin-accordion/cxl-accordion-card-course.story';
 import { CXLPlaybookAccordion } from './cxl-vaadin-accordion/cxl-playbook-accordion.story';
 import { CXLVaadinAccordionThemeVaadin } from './cxl-vaadin-accordion/vaadin-accordion-panel[theme=vaadin].story';
 import { CXLVaadinAccordionThemeFaq } from './cxl-vaadin-accordion/theme=cxl-faq.story';
@@ -20,6 +21,7 @@ Object.assign(CXLPlaybookAccordion, {
 });
 
 CXLVaadinAccordionThemeArchive.storyName = 'cxl-accordion-card';
+CXLVaadinAccordionThemeCourses.storyName = 'cxl-accordion-course-card';
 CXLVaadinAccordionThemeFaq.storyName = '[theme=cxl-faq]';
 CXLVaadinAccordionThemeMinidegreeTrack.storyName = '[theme=cxl-minidegree-track]';
 CXLVaadinAccordionThemeVaadin.storyName = 'vaadin-accordion-panel[theme=vaadin]';
@@ -29,6 +31,7 @@ CXLHubsAndPlaybooks.storyName = 'cxl-hubs-and-playbooks';
 export {
   CXLPlaybookAccordion,
   CXLVaadinAccordionThemeArchive,
+  CXLVaadinAccordionThemeCourses,
   CXLVaadinAccordionThemeFaq,
   CXLVaadinAccordionThemeMinidegreeTrack,
   CXLVaadinAccordionThemeVaadin,

packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card-course.story.js

@@ -0,0 +1,97 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-section.js';
+import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js';
+import archiveData from './theme=cxl-archive.data.json';
+import { CourseCardTemplate } from '../cxl-course-card/template';
+
+const CourseCardStory = CourseCardTemplate.bind({});
+
+export const CXLVaadinAccordionThemeCourses = () => {
+  let lastEntryTitle1stLetter = 'Z';
+
+  const firstLetterHeading = (el) => {
+    const firstLetter = el.title.raw.charAt(0);
+    let heading = html``;
+
+    if (firstLetter !== lastEntryTitle1stLetter) {
+      heading = html`<h3 id="letter-${firstLetter}">${firstLetter}</h3>`;
+      lastEntryTitle1stLetter = firstLetter;
+    }
+
+    return heading;
+  };
+
+  return html`
+    <style>
+      body {
+        background-color: var(--lumo-shade-5pct);
+      }
+      cxl-vaadin-accordion[theme='cxl-accordion-card'] {
+        display: grid;
+        grid-gap: var(--lumo-space-m);
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(calc(var(--cxl-content-max-width-wide) / 4), 1fr)
+        );
+      }
+
+      :host(.alignwide) > .wrap {
+        max-width: var(--cxl-content-max-width-wide);
+      }
+      .wrap {
+        position: relative;
+        padding-right: var(--cxl-wrap-padding, none);
+        padding-left: var(--cxl-wrap-padding, none);
+        margin-right: auto;
+        margin-left: auto;
+        max-width: var(--cxl-content-max-width);
+        margin-top: var(--cxl-section-wrap-margin-top, var(--lumo-space-xl));
+        margin-bottom: var(--cxl-section-wrap-margin-bottom, var(--lumo-space-xl));
+      }
+      .plural .entry-title {
+        margin: 0;
+      }
+      .entry-title a {
+        color: inherit;
+      }
+      .entry-header {
+        position: relative;
+      }
+      cxl-save-favorite {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    </style>
+    <cxl-section class="alignwide">
+      <cxl-vaadin-accordion
+        id="cxl-vaadin-accordion-26107"
+        class="archive archive-certificate plural"
+        theme="cxl-accordion-card"
+      >
+        ${archiveData.map(
+          (el) => html`
+            ${firstLetterHeading(el)}
+            ${CourseCardStory({
+              id: el.cxl_hybrid_attr_post['@attributes'].id,
+              classes: el.cxl_hybrid_attr_post['@attributes'].class,
+              name: el.title.raw,
+              time: el.conversionxl_live_course_duration,
+              instructor: el.conversionxl_certificate_instructor,
+              avatar: el.cxl_featured_media.shop_catalog,
+              ctaUrl: el.conversionxl_certificate_sales_page,
+              theme: el.cxl_hybrid_attr_post['@attributes'].class.includes(
+                'category-minidegree-programs'
+              )
+                ? 'minidegree'
+                : 'course',
+              description: String(el.content.cxl_get_extended_main || ''),
+            })}
+          `
+        )}
+      </cxl-vaadin-accordion>
+    </cxl-section>
+  `;
+};