From 51fe20ddf9a11757296b03e6106e8326ad701e91 Mon Sep 17 00:00:00 2001
From: Kertu Ilves <k@kertu.me>
Date: Thu, 6 Jul 2023 12:03:25 +0300
Subject: [PATCH] feat: add dashboard stats component
 https://app.clickup.com/t/861n0qjxj

---
 packages/cxl-lumo-styles/scss/global.scss     |  2 +
 packages/cxl-ui/scss/cxl-stats.scss           | 17 ++++++++
 packages/cxl-ui/scss/global/cxl-stats.scss    | 16 +++++++
 packages/cxl-ui/src/components/cxl-stats.js   | 28 +++++++++++++
 packages/cxl-ui/src/index-core.js             |  1 +
 packages/cxl-ui/src/index-storybook.js        |  1 +
 .../cxl-ui/cxl-stats/cxl-stats.data.json      | 18 ++++++++
 .../cxl-ui/cxl-stats/default.stories.js       | 42 +++++++++++++++++++
 8 files changed, 125 insertions(+)
 create mode 100644 packages/cxl-ui/scss/cxl-stats.scss
 create mode 100644 packages/cxl-ui/scss/global/cxl-stats.scss
 create mode 100644 packages/cxl-ui/src/components/cxl-stats.js
 create mode 100644 packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
 create mode 100644 packages/storybook/cxl-ui/cxl-stats/default.stories.js

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
index c8f8c0db3..a80427924 100644
--- a/packages/cxl-lumo-styles/scss/global.scss
+++ b/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.
diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
new file mode 100644
index 000000000..98e7ae826
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss
new file mode 100644
index 000000000..7baa05f50
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-stats.js b/packages/cxl-ui/src/components/cxl-stats.js
new file mode 100644
index 000000000..324bfaef6
--- /dev/null
+++ b/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',
+    });
+  }
+}
diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js
index 6ce2a0833..25a1ec1ab 100644
--- a/packages/cxl-ui/src/index-core.js
+++ b/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';
 
diff --git a/packages/cxl-ui/src/index-storybook.js b/packages/cxl-ui/src/index-storybook.js
index 58042c9c5..2d17ec740 100644
--- a/packages/cxl-ui/src/index-storybook.js
+++ b/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.
diff --git a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
new file mode 100644
index 000000000..54eaef5c9
--- /dev/null
+++ b/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%"
+  }
+]
diff --git a/packages/storybook/cxl-ui/cxl-stats/default.stories.js b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
new file mode 100644
index 000000000..4689ab254
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
@@ -0,0 +1,42 @@
+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="h3 stats-count">${el.count}</p>
+          </div>
+        `
+      )}
+    </cxl-stats>
+  `
+};
+
+Object.assign(CXLStats, {
+  args: {
+    statsCount: 4
+  },
+  storyName: 'CXL Stats'
+});