feat(cxl-ui): add new team dashboard stats

packages/cxl-ui/scss/_mixins.scss

@@ -50,7 +50,7 @@
   /* stylelint-enable */
 }
 
-@mixin pesudo-element-full-width {
+@mixin pesudo-element-full-width($color) {
   &::before {
     position: absolute;
     top: 0;
@@ -59,7 +59,7 @@
     z-index: -1;
     width: 100vw;
     content: "";
-    background-color: var(--lumo-shade);
+    background-color: $color;
     transform: translateX(-50%);
   }
 }

packages/cxl-ui/scss/cxl-dashboard-team-header.scss

@@ -15,7 +15,7 @@
     padding: var(--lumo-space-l) var(--lumo-space-m);
     background-color: var(--lumo-shade);
 
-    @include mixins.pesudo-element-full-width();
+    @include mixins.pesudo-element-full-width(var(--lumo-shade));
 
     @media #{mq.$small} {
       display: flex;

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

@@ -0,0 +1,79 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+@use "./mixins";
+
+:host {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: calc(2 * var(--lumo-space-m));
+    width: 100%;
+    max-width: var(--cxl-content-max-width-wide);
+    padding: var(--lumo-space-m);
+    background-color: var(--cxl-color-light-gray);
+
+    @include mixins.pesudo-element-full-width(var(--cxl-color-light-gray));
+
+    @media #{mq.$small} {
+      padding: var(--lumo-space-xl) 0;
+      padding-bottom: calc(var(--lumo-space-xl) + var(--lumo-space-l));
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+
+      .title {
+        margin-block: 0;
+        font-weight: 900;
+      }
+
+      .actions {
+        display: none;
+      }
+
+      .team-settings {
+        --_lumo-button-primary-color: var(--lumo-primary-color);
+        --_lumo-button-primary-background-color: var(--lumo-tint);
+      }
+
+      @media #{mq.$small} {
+        .actions {
+          display: flex;
+        }
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: space-between;
+
+      .progress {
+        min-width: 320px;
+      }
+
+      .progress-subtitle {
+        margin-block: 0;
+      }
+
+      ::slotted(.stats) {
+        padding: 0;
+        grid-template-columns: repeat(2, 1fr);
+        gap: calc(2 * var(--lumo-space-l));
+      }
+
+      @media #{mq.$small} {
+        flex-direction: row;
+
+        ::slotted(.stats) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+    }
+  }
+}

packages/cxl-ui/src/components/cxl-dashboard-team-header.js

@@ -2,6 +2,7 @@
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import '@conversionxl/cxl-lumo-styles';
 import cxlDashboardTeamHeaderStyles from '../styles/cxl-dashboard-team-header-css.js';
 import cxlDashboardTeamHeaderGlobalStyles from '../styles/global/cxl-dashboard-team-header-css.js';
 import '@vaadin/icon';

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

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@vaadin/progress-bar';
+import '@vaadin/button';
+import '@conversionxl/cxl-lumo-styles';
+import CXLDashboardTeamStatsStyles from '../styles/cxl-dashboard-team-stats-css.js';
+
+@customElement('cxl-dashboard-team-stats')
+export class CxlDashboardTeamStats extends LitElement {
+  static get styles() {
+    return [CXLDashboardTeamStatsStyles];
+  }
+
+  @property({ type: Number }) progress = 0;
+
+  render() {
+    return html`
+      <div class="container">
+        <header>
+          <h1 class="title">Team progress & stats</h1>
+          <div class="actions">
+            <a>
+              <vaadin-button class="team-settings" theme="primary">
+                <vaadin-icon icon="lumo:edit"></vaadin-icon>
+                Manage team roadmaps
+              </vaadin-button>
+            </a>
+          </div>
+        </header>
+        <section class="content">
+          <div class="progress">
+            <span class="progress-title">Team roadmap progress</span>
+            <vaadin-progress-bar value="${this.progress}"></vaadin-progress-bar>
+            <h2 class="progress-subtitle">${100 * this.progress}% complete</h2>
+          </div>
+          <div class="stats">
+            <slot></slot>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}

packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js

@@ -1,4 +1,4 @@
-import { TeamDashboardHeaderTemplate, ArgTypes } from './template';
+import { TeamDashboardHeaderTemplate, ArgTypes } from './header-template';
 
 export default {
   title: 'CXL UI/cxl-team-dashboard',

packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-stats.stories.js

@@ -0,0 +1,15 @@
+import { TeamDashboardStatsTemplate, ArgTypes } from './stats-template';
+
+export default {
+  title: 'CXL UI/cxl-team-dashboard',
+};
+
+export const CXLDashboardTeamStats = TeamDashboardStatsTemplate.bind({});
+
+CXLDashboardTeamStats.argTypes = {
+  ...ArgTypes,
+};
+
+CXLDashboardTeamStats.args = {
+  progress: 0.65,
+};

packages/storybook/cxl-ui/cxl-team-dashboard/cxl-team-dashboard.stories.js

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { CXLDashboardTeamHeader } from './cxl-dashboard-team-header.stories';
 import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
 import { CXLFooterNav } from '../footer-nav.stories';
+import { CXLDashboardTeamStats } from './cxl-dashboard-team-stats.stories';
 
 export default {
   title: 'CXL UI/cxl-team-dashboard',
@@ -12,6 +13,7 @@ export const CXLDashboard = (args) => html`
     ${CXLMarketingNav()}
     <article>
       ${CXLDashboardTeamHeader({ name: args.header_name, multiple: args.header_multiple })}
+      ${CXLDashboardTeamStats({ progress: 0.65 })}
     </article>
     ${CXLFooterNav()}
   </cxl-app-layout>

packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js

@@ -0,0 +1,13 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-dashboard-team-stats.js';
+import { CXLStats } from '../cxl-stats/default.stories';
+
+export const TeamDashboardStatsTemplate = (args) => html`
+  <cxl-dashboard-team-stats progress=${args.progress}>
+    ${CXLStats({ statsCount: 3 })}
+  </cxl-dashboard-team-stats>
+`;
+
+export const ArgTypes = {
+  progress: { type: Number },
+};