feat(cxl-ui): refactor cxl-light-card component based on `cxl-base-…

…card`

https://app.clickup.com/t/861n0qjha

packages/cxl-ui/scss/cxl-featured-course-card.scss

@@ -1,98 +1,120 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
 :host {
+  position: relative;
+  max-width: unset;
+  height: auto;
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+
   .container {
     position: relative;
     display: block;
+    height: 100%;
+    padding: 0 var(--lumo-space-m);
     background-color: var(--cxl-color-light-gray);
 
     @media #{mq.$medium} {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
+      gap: 0;
+      padding: var(--lumo-space-l) 0 0 var(--lumo-space-l);
     }
-  }
 
-  .instructor-img {
-    max-height: calc(var(--lumo-space-xl) * 6);
-    object-fit: contain;
+    > .attributes {
+      display: none;
+      padding: 0;
+    }
 
-    @media #{mq.$medium} {
-      position: absolute;
-      top: 0;
-      right: 0;
-      height: 100%;
-      max-height: none;
+    .name strong {
+      color: var(--lumo-primary-color);
+    }
+
+    .info {
+      max-width: unset;
+      gap: var(--lumo-space-s);
+
+      .tags {
+        flex-wrap: wrap;
+      }
+
+      .tag {
+        white-space: nowrap;
+      }
+
+      .attributes {
+        display: flex;
+        align-items: center;
+        padding: 0;
+      }
     }
   }
 
-  .info {
+  .content-before {
     position: relative;
     z-index: 0;
-    grid-column: span 7 / span 7;
-    padding: 0 var(--lumo-space-m);
-    font-size: var(--lumo-font-size-s);
 
-    @media #{mq.$medium} {
-      padding: var(--lumo-space-l) 0 0 var(--lumo-space-l);
+    .instructor-image {
+      max-height: calc(var(--lumo-space-xl) * 6);
+      object-fit: contain;
+
+      @media #{mq.$medium} {
+        display: none;
+      }
     }
 
     .swoosh {
       position: absolute;
-      top: 0;
+      top: 100%;
       right: 0;
       bottom: 0;
       left: 0;
-      z-index: -1;
+      z-index: 0;
       max-height: 100%;
       margin-top: calc(var(--lumo-space-m) * -2);
+    }
 
-      @media #{mq.$medium} {
-        display: none;
-      }
+    @media #{mq.$medium} {
+      display: none;
     }
+  }
 
-    .tags {
-      display: flex;
-      flex-wrap: wrap;
-      max-width: 100%;
-      overflow: hidden;
-      column-gap: var(--lumo-space-s);
-      line-height: 1.2;
+  header {
+    position: relative;
+    z-index: 0;
+    display: block;
 
-      > span:first-child {
-        color: var(--lumo-primary-color);
-      }
+    @media #{mq.$medium} {
+      position: initial;
+      grid-column: span 7 / span 7;
     }
 
-    .title {
-      margin: var(--lumo-space-s) 0;
-      font-size: var(--lumo-font-size-xl);
-      font-weight: 700;
-      line-height: normal;
+    .instructor-image {
+      display: none;
 
-      strong {
-        color: var(--lumo-primary-color);
+      img {
+        height: 100%;
+        border-radius: 0;
       }
-    }
 
-    .attributes {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      margin-bottom: var(--lumo-space-m);
-      gap: var(--lumo-space-s);
-      line-height: 1;
-      color: var(--lumo-shade-60pct);
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
+      @media #{mq.$medium} {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        width: auto;
+        max-width: 100%;
+        height: 100%;
+        max-height: none;
+      }
     }
+  }
 
-    .content {
-      line-height: var(--lumo-line-height-m);
-    }
+  .content-after {
+    position: relative;
+    z-index: 0;
+    padding-top: var(--lumo-space-s);
 
     .cta {
       display: block;
@@ -118,5 +140,10 @@
         text-decoration: underline;
       }
     }
+
+    @media #{mq.$medium} {
+      grid-column: span 7 / span 7;
+      padding-top: 0;
+    }
   }
 }

packages/cxl-ui/src/components/cxl-featured-course-card.js

@@ -1,71 +1,43 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { LitElement, html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
 import cxlFeaturedCourseCardStyles from '../styles/cxl-featured-course-card-css.js';
+import { CXLBaseCardElement } from './cxl-base-card.js';
 
 @customElement('cxl-featured-course-card')
-export class CXLCourseCardElement extends LitElement {
+export class CXLFeaturedCourseCardElement extends CXLBaseCardElement {
   static get styles() {
-    return [cxlFeaturedCourseCardStyles];
+    return [...super.styles, cxlFeaturedCourseCardStyles];
   }
 
-  separator = html`<span> | </span>`;
-
-  @property({ type: String }) id = '';
-
-  @property({ type: String }) theme = 'Featured course';
-
-  @property({ type: String }) title = '';
-
-  @property({ type: String }) time = '';
-
-  @property({ type: String }) instructor = '';
-
-  @property({ type: String }) avatar = '';
-
-  @property({ type: Boolean, reflect: true }) new = false;
+  @state() showTimeIcon = true;
 
   @property({ type: String, attribute: 'cta-label' }) ctaLabel = 'View course';
 
   @property({ type: String, attribute: 'cta-url' }) ctaUrl = '';
 
-  _slotHasChildren(e) {
-    const slot = e.target;
-    const { name } = slot;
-    const children = slot.assignedNodes();
-    this[`_${name}HasChildren`] = !!children.length;
-  }
-
   render() {
     return html`
       <div class="container">
-        <img class="instructor-img" src=${this.avatar} alt="${this.instructor}" />
-        <div class="info">
+        <section class="content-before">
+          <img class="instructor-image" src=${this.avatar} alt="${this.instructor}" />
           <svg class="swoosh" viewBox="0 0 360 199" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               fill="var(--cxl-color-light-gray)"
               d="M1199.64 104.027C1113.56 105.678 1029.17 107.177 943.442 114.375C832.023 123.729 722.816 117.784 614.335 95.3047C457.633 62.838 336.264 14.1676 141.043 11.5174C-1.67221 9.57723 -248.398 6.15004 -458 0V199H1608C1555.37 176.893 1506.06 147.493 1450.34 130.627C1371.01 106.653 1284.33 102.401 1199.64 104.027Z"
             />
           </svg>
-          <div class="tags">
-            <span>${this.theme}</span>
-            ${this.separator}
-            <slot name="tags" @slotchange=${this._slotHasChildren}></slot>
-          </div>
-          <h4 class="title">${unsafeHTML(this.title)}</h4>
-          <div class="attributes">
-            <span class="time"><vaadin-icon icon="lumo:clock"></vaadin-icon>${this.time}</span>
-            <span class="instructor">By: ${this.instructor}</span>
-          </div>
+        </section>
+        ${this._renderHeader()}
+        <section class="content-after">
           <div class="content">
             <slot name="content"></slot>
           </div>
           <a class="cta" href="${this.ctaUrl}"
             >${this.ctaLabel}<vaadin-icon icon="lumo:angle-right"></vaadin-icon
           ></a>
-        </div>
+        </section>
       </div>
     `;
   }

packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js

@@ -15,7 +15,8 @@ const renderTags = (tags, slot) =>
 const FeaturedCourseCardTemplate = (course) => html`
   <cxl-featured-course-card
     id=${course.id}
-    title=${course.title}
+    theme=${course.theme}
+    name=${course.name}
     time=${course.time}
     instructor=${course.instructor}
     avatar=${course.avatar}
@@ -31,13 +32,14 @@ export const CXLFeatureadCourseCard = FeaturedCourseCardTemplate.bind({});
 
 CXLFeatureadCourseCard.args = {
   id: 'cxl-featured-course-1',
-  title: 'Get ahead with <strong>Google Analytics 4</strong>',
+  theme: 'Featured course',
+  name: 'Get ahead with <strong>Google Analytics 4</strong>',
   time: '5h 04min',
   instructor: 'Fred Pike',
   description:
     "<p>GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.</p><p>In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. <strong>This course pays back for you real quick.</strong></p>",
   tags: ['Marketing', 'Analytics'],
-  ctaUrl: 'https://google.com',
+  ctaUrl: 'https://cxl.com',
   avatar:
     'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png',
 };