feat(cxl-ui): cxl-card-grid component, light and course card examples

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

@@ -0,0 +1,28 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+  position: relative;
+  display: block;
+
+  ::slotted(.grid) {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: var(--lumo-space-m);
+
+    @media #{mq.$medium} {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media #{mq.$large} {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+}
+
+:host([theme~="courses"]) {
+  ::slotted(.grid) {
+    @media #{mq.$large} {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+}

packages/cxl-ui/scss/global/cxl-card-grid.scss

@@ -0,0 +1,7 @@
+cxl-card-grid {
+  cxl-light-card,
+  cxl-course-card {
+    width: 100%;
+    max-width: none;
+  }
+}

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

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+
+import '@conversionxl/cxl-lumo-styles';
+import cxlCardGridStyles from '../styles/cxl-card-grid-css.js';
+import cxlCardGridGlobalStyles from '../styles/global/cxl-card-grid-css.js';
+
+@customElement('cxl-card-grid')
+export class CxlCardGridElement extends LitElement {
+  static get styles() {
+    return [cxlCardGridStyles];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    // Global styles.
+    registerGlobalStyles(cxlCardGridGlobalStyles, {
+      moduleId: 'cxl-card-grid-global',
+    });
+  }
+
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';

packages/cxl-ui/src/index-core.js

@@ -29,6 +29,7 @@ export { CxlDashboardTeamHeaderElement } from './components/cxl-dashboard-team-h
 export { CxlDashboardTeamStatsElement } from './components/cxl-dashboard-team-stats.js';
 export { CXLFeaturedCourseCardElement } from './components/cxl-featured-course-card.js';
 export { CXLLightCardElement } from './components/cxl-light-card.js';
+export { CxlCardGridElement } from './components/cxl-card-grid.js';
 export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
 export { CXLNotification } from './components/cxl-notification.js';
 export { CXLNotificationCardElement } from './components/cxl-notification-card.js';

packages/storybook/cxl-ui/cxl-course-card/course-card-grid.stories.js

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+import { CourseCardTemplate } from './template.js';
+
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-card-grid.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+  title: 'CXL UI/cxl-course-card-grid',
+};
+
+const CXLCourseCard = CourseCardTemplate.bind({});
+CXLCourseCard.args = {
+  id: 'cxl-course-1',
+  name: 'Account based marketing',
+  time: '3h 00min',
+  instructor: 'Tom Wesseling',
+  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.',
+  theme: 'course',
+  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,
+  showTimeIcon: true,
+};
+
+export const CXLCourseCardGrid = ({ length, args }) => html`
+  <cxl-card-grid theme="courses">
+    <div class="grid">
+      ${Array.from({ length }, () => html`
+        <div class="col">
+          ${CXLCourseCard({ ...CXLCourseCard.args, ...args })}
+        </div>
+      `)}
+    </div>
+  </cxl-card-grid>
+`;
+
+CXLCourseCardGrid.args = {
+  length: 12,
+};

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

@@ -0,0 +1,35 @@
+import { html } from 'lit';
+import { Template } from './template.js';
+
+import '@conversionxl/cxl-ui/src/components/cxl-light-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-card-grid.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+  title: 'CXL UI/cxl-light-card-grid',
+};
+
+const CXLLightCard = Template.bind({});
+CXLLightCard.args = {
+  theme: 'light-card',
+  name: 'Account based marketing',
+  avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+  instructor: 'Lorem Ipsum',
+  completed: true,
+};
+
+export const CXLLightCardGrid = ({ length, args }) => html`
+  <cxl-card-grid>
+    <div class="grid">
+      ${Array.from({ length }, () => html`
+        <div class="col">
+          ${CXLLightCard({ ...CXLLightCard.args, ...args })}
+        </div>
+      `)}
+    </div>
+  </cxl-card-grid>
+`;
+
+CXLLightCardGrid.args = {
+  length: 12,
+};