feat(cxl-ui): add cxl-stats component

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

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

@@ -6,6 +6,8 @@ html {
   --cxl-content-width: 36em;
   --cxl-wrap-width: 72rem;
   --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);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

packages/cxl-ui/scss/cxl-stats.scss

@@ -0,0 +1,17 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--lumo-space-m);
+  padding: var(--lumo-space-xl) var(--lumo-space-m) var(--lumo-space-m);
+  border-bottom: 1px solid var(--cxl-color-light-gray);
+
+  @media #{mq.$small} {
+    padding: var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
+  }
+
+  @media #{mq.$medium} {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

packages/cxl-ui/scss/global/cxl-stats.scss

@@ -0,0 +1,16 @@
+cxl-stats {
+  .stats-title {
+    margin-top: 0;
+    font-size: var(--lumo-font-size-xs);
+    font-weight: 400;
+    line-height: 1;
+    color: var(--cxl-color-black-50pct);
+    text-transform: uppercase;
+  }
+
+  .stats-count {
+    margin: 0;
+    font-size: var(--lumo-font-size-xxl);
+    font-weight: 700;
+  }
+}

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

@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { LitElement, html } from 'lit';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { customElement } from 'lit/decorators.js';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import '@conversionxl/cxl-lumo-styles';
+import cxlStatsStyles from '../styles/cxl-stats-css.js';
+import cxlStatsGlobalStyles from '../styles/global/cxl-stats-css.js';
+
+@customElement('cxl-stats')
+export class CXLStatsElement extends LitElement {
+  static get styles() {
+    return [cxlStatsStyles];
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    // Global styles.
+    registerGlobalStyles(cxlStatsGlobalStyles, {
+      moduleId: 'cxl-stats',
+    });
+  }
+}

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

@@ -17,6 +17,7 @@ export { CXLCardElement } from './components/cxl-card.js';
 export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js';
 export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
 export { CXLSectionElement } from './components/cxl-section.js';
+export { CXLStatsElement } from './components/cxl-stats.js';
 export { CXLTabsSliderElement } from './components/cxl-tabs-slider.js';
 export { CXLNotification } from './components/cxl-notification.js';
 

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

@@ -6,6 +6,7 @@ export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
 export { CXLCardElement } from './components/cxl-card.js';
 export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
 export { CXLSectionElement } from './components/cxl-section.js';
+export { CXLStatsElement } from './components/cxl-stats.js';
 export { CXLTabsSliderElement } from './components/cxl-tabs-slider.js';
 
 // Order matters.

packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json

@@ -0,0 +1,18 @@
+[
+  {
+    "title": "Categories<br>completed",
+    "count": "1"
+  },
+  {
+    "title": "Courses<br>completed",
+    "count": "30"
+  },
+  {
+    "title": "Lessons<br>completed",
+    "count": "95"
+  },
+  {
+    "title": "Complete<br>library",
+    "count": "12%"
+  }
+]

packages/storybook/cxl-ui/cxl-stats/default.stories.js

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui/src/components/cxl-stats.js';
+import statsData from './cxl-stats.data.json';
+
+export default {
+  title: 'CXL UI/cxl-stats',
+};
+
+export const CXLStats = ({ statsCount }) => {
+  for (let i = 0; i < statsCount; i += 1) {
+    const newItem = {
+      title: 'Complete<br>library',
+      count: '12%',
+    };
+
+    statsData.push(newItem);
+  }
+
+  return html`
+    <cxl-stats class="stats">
+      ${statsData.slice(0, statsCount).map(
+        (el) => html`
+          <div>
+            <h4 class="stats-title">${unsafeHTML(el.title)}</h4>
+            <p class="stats-count">${el.count}</p>
+          </div>
+        `
+      )}
+    </cxl-stats>
+  `;
+};
+
+Object.assign(CXLStats, {
+  args: {
+    statsCount: 4,
+  },
+  storyName: 'CXL Stats',
+});