feat(cxl-ui): add cxl-light-card component

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

packages/cxl-lumo-styles/scss/badge.scss

@@ -7,6 +7,11 @@
   color: var(--lumo-primary-text-color);
 }
 
+[theme~='badge'][theme~='secondary'] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--cxl-color-brand-blue);
+}
+
 .course-skills {
   [theme~="badge"] {
     margin-right: var(--lumo-space-s);

packages/cxl-lumo-styles/scss/global.scss

@@ -8,6 +8,7 @@ html {
   --cxl-wrap-padding: var(--lumo-space-m);
   --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
   --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
+  --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

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

@@ -0,0 +1,82 @@
+:host {
+  .container {
+    padding: var(--lumo-space-m);
+    border: 1px solid var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-l);
+    box-shadow: var(--lumo-box-shadow-xs);
+  }
+
+  .entry-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    .thumbnail {
+      width: calc(var(--lumo-icon-size-s) * 4);
+      height: calc(var(--lumo-icon-size-s) * 4);
+      margin: 0 0 0 var(--lumo-space-s);
+      border-radius: 100%;
+    }
+  }
+
+  .entry-title {
+    margin-bottom: var(--lumo-space-s);
+    font-weight: 600;
+  }
+
+  .entry-byline {
+    font-size: var(--lumo-font-size-s);
+    color: var(--lumo-contrast-70pct);
+    row-gap: calc(var(--lumo-space-s) / 2);
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    vaadin-icon {
+      margin-right: var(--lumo-space-xs);
+      font-size: var(--lumo-font-size-m);
+    }
+  }
+
+  ::slotted(.entry-footer) {
+    margin-top: var(--lumo-space-l);
+  }
+
+  [icon="cxl:new"],
+  [icon="lumo:checkmark"] {
+    display: none;
+  }
+}
+
+:host([theme~="light-card-completed"]) {
+  opacity: 0.6;
+
+  [icon="lumo:checkmark"] {
+    display: inline-block;
+    margin-top: calc(var(--lumo-space-xs) * -1);
+    color: var(--lumo-primary-color);
+  }
+}
+
+:host([theme~="light-card-new"]) {
+  overflow: initial;
+
+  .container {
+    position: relative;
+
+    [icon="cxl:new"] {
+      position: absolute;
+      top: calc(var(--lumo-space-m) * -1);
+      right: 0;
+      display: block;
+      width: calc(var(--lumo-space-m) * 2);
+      height: calc(var(--lumo-space-m) * 2);
+      padding: 6px;
+      color: var(--lumo-primary-contrast-color);
+      background-color: var(--lumo-primary-color);
+      border-radius: 100%;
+    }
+  }
+}

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

@@ -12,7 +12,7 @@ export class CXLCardElement extends LitElement {
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   firstUpdated(_changedProperties) {

packages/cxl-ui/src/components/cxl-light-card.js

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@conversionxl/cxl-lumo-styles';
+import cxlLightCardStyles from '../styles/cxl-light-card-css.js';
+
+@customElement('cxl-light-card')
+export class CXLCourseCardElement extends LitElement {
+  static get styles() {
+    return [cxlLightCardStyles];
+  }
+
+  @property({ type: String }) id = '';
+
+  @property({ type: String }) theme = 'light-card';
+
+  @property({ type: String }) title = '';
+
+  @property({ type: String }) time = '';
+
+  @property({ type: String }) instructorPrefix = 'By:';
+
+  @property({ type: String }) instructor = '';
+
+  @property({ type: String }) avatar = '';
+
+  @property({ type: Boolean }) hasFooter = false;
+
+  render() {
+    return html`
+      <div class="container">
+        <header class="entry-header">
+          <vaadin-icon icon="cxl:new"></vaadin-icon>
+          <div>
+            <div class="entry-title">
+              ${this.title}
+              <vaadin-icon icon="lumo:checkmark"></vaadin-icon>
+            </div>
+            <div class="entry-byline">
+              <div><vaadin-icon icon="lumo:clock"></vaadin-icon>${this.time}</div>
+              <div>${this.instructorPrefix}&nbsp;${this.instructor}</div>
+            </div>
+          </div>
+          <img class="thumbnail" src="${this.avatar}" alt="${this.instructor}" />
+        </header>
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+}

packages/storybook/cxl-ui/cxl-light-card/default.stories.js

@@ -0,0 +1,55 @@
+import { html, nothing } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-light-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+  title: 'CXL UI/cxl-light-card',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+const Template = ({ theme, hasFooter, title, time, instructor, avatar }) => {
+  const themeArray = Array.isArray(theme) ? theme : [theme];
+
+  return html`
+    <cxl-light-card
+      theme="${themeArray.map((item) => item).join(' ')}"
+      title="${title}"
+      time="${time}"
+      instructor="${instructor}"
+      avatar=${avatar}
+      .hasFooter="${hasFooter}"
+    >
+      ${hasFooter
+        ? html`<footer slot="footer" class="entry-footer">
+            <span theme="badge primary pill">Team Roadmap</span>
+            <span theme="badge secondary pill">Personal Roadmap</span>
+          </footer>`
+        : nothing}
+    </cxl-light-card>
+  `;
+};
+
+export const CXLLightCard = Template.bind({});
+
+CXLLightCard.args = {
+  theme: 'light-card',
+  hasFooter: false,
+  title: 'Account based marketing',
+  time: '3h 00min',
+  instructor: 'Ton Wesseling',
+  avatar:
+    'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+};
+
+CXLLightCard.argTypes = {
+  theme: {
+    options: ['light-card', 'light-card-new', 'light-card-completed'],
+    control: { type: 'multi-select' },
+  },
+};
+
+CXLLightCard.story = {
+  name: '[theme=light-card]',
+};

packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js

@@ -0,0 +1,46 @@
+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 { CXLLightCard } from './default.stories.js';
+
+export default {
+  title: 'CXL UI/cxl-light-card',
+};
+
+const Template = ({ numberOfCards }) => html`
+  <style>
+    vaadin-tab {
+      max-width: calc(var(--cxl-content-width) / 2);
+    }
+  </style>
+
+  <cxl-tabs-slider theme="minimal">
+    ${Array.from(
+      { length: numberOfCards },
+      () => html`
+        <vaadin-tab
+          >${CXLLightCard({
+            ...CXLLightCard.args,
+          })}</vaadin-tab
+        >
+      `
+    )}
+  </cxl-tabs-slider>
+`;
+
+export const LightCardSlider = Template.bind({});
+
+LightCardSlider.args = {
+  numberOfCards: 3,
+};
+
+CXLLightCard.args = {
+  theme: 'light-card',
+  hasBadges: false,
+  title: 'Account based marketing',
+  time: '3h 00min',
+  instructor: 'Ton Wesseling',
+  avatar:
+    'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+};