feat(cxl-ui): add new team dashboard

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

@@ -27,6 +27,7 @@ html,
    */
   --lumo-shade: hsl(0, 0%, 10%);
   --lumo-contrast: hsl(0, 0%, 10%);
+  --lumo-contrast-20pct: hsl(0, 0%, 20%);
 
   /**
    * Text

packages/cxl-ui/scss/_mixins.scss

@@ -61,3 +61,17 @@
     border-radius: var(--lumo-font-size-s);
   }
 }
+
+@mixin pesudo-element-full-width($color) {
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    z-index: -1;
+    width: 100vw;
+    content: "";
+    background-color: $color;
+    transform: translateX(-50%);
+  }
+}

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

@@ -0,0 +1,82 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+@use "./mixins";
+
+:host {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  color: var(--lumo-tint);
+  background-color: var(--lumo-shade);
+
+  .container {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--cxl-content-max-width-wide);
+    padding: var(--lumo-space-l) var(--lumo-space-m);
+    background-color: var(--lumo-shade);
+
+    @include mixins.pesudo-element-full-width(var(--lumo-shade));
+
+    @media #{mq.$small} {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    @media #{mq.$large} {
+      padding: var(--lumo-space-xl) 0;
+    }
+  }
+
+  header {
+    margin-bottom: var(--lumo-space-l);
+
+    @media #{mq.$medium} {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: initial;
+    }
+
+    .titles {
+      .title {
+        margin-block-start: 0;
+        margin-block-end: 0;
+      }
+
+      @media #{mq.$medium} {
+        padding-top: 0;
+      }
+    }
+
+    .subtitle {
+      font-size: var(--lumo-font-size-xs);
+      line-height: 1;
+      text-transform: uppercase;
+      opacity: 0.6;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: var(--lumo-space-s);
+
+    @media #{mq.$small} {
+      flex-direction: row;
+      align-items: center;
+      gap: var(--lumo-space-m);
+    }
+
+    .invite-manage {
+      --_lumo-button-color: var(--lumo-tint);
+      --_lumo-button-background-color: var(--lumo-contrast-20pct);
+    }
+
+    .team-settings {
+      --_lumo-button-primary-color: var(--lumo-primary-color);
+      --_lumo-button-primary-background-color: var(--lumo-tint);
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+@use "./mixins";
+
+:host {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  .container {
+    position: relative;
+    box-sizing: border-box;
+    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-bottom: calc(var(--lumo-space-xl) + var(--lumo-space-l));
+    }
+
+    @media #{mq.$large} {
+      padding: var(--lumo-space-xl) 0;
+    }
+
+    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;
+      gap: var(--lumo-space-l);
+
+      .progress {
+        min-width: 280px;
+      }
+
+      .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/scss/cxl-section.scss

@@ -1,9 +1,16 @@
 @use "~@conversionxl/cxl-lumo-styles/scss/mixins";
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
 
 :host {
   display: block;
 }
 
+:host([theme~="cxl-section-dashboard-team-content"]) {
+  @media #{mq.$large} {
+    --cxl-wrap-padding: 0;
+  }
+}
+
 /**
  * Avoid margin collapse with background.
  */

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

@@ -4,23 +4,19 @@
   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);
-
-  @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);
+    display: flex;
   }
 }
 
 :host([theme~="cxl-stats-dashboard-header"]) {
-  margin-top: var(--lumo-space-m);
   padding: 0;
+  margin-top: var(--lumo-space-m);
   border: 0;
 
   @media #{mq.$medium} {
+    padding-top: var(--lumo-space-s);
     margin-top: 0;
     gap: var(--lumo-space-l);
   }

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

@@ -0,0 +1,17 @@
+/* stylelint-disable selector-max-type */
+cxl-dashboard-team-header {
+  form {
+    label {
+      display: none;
+    }
+
+    select {
+      height: unset;
+      font-size: var(--lumo-font-size-xxl);
+      font-weight: 900;
+      color: var(--lumo-tint);
+      background-color: var(--lumo-contrast-20pct);
+      border-radius: var(--lumo-border-radius-m);
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+/* eslint-disable import/no-extraneous-dependencies */
+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';
+import '@vaadin/button';
+
+@customElement('cxl-dashboard-team-header')
+export class CxlDashboardTeamHeaderElement extends LitElement {
+  static get styles() {
+    return [cxlDashboardTeamHeaderStyles];
+  }
+
+  @property({ type: String, attribute: 'team-name' }) teamName = '';
+
+  @property({ type: String, attribute: 'invite-url' }) inviteURL = '';
+
+  @property({ type: String, attribute: 'settings-url' }) settingsURL = '';
+
+  @property({ type: Boolean }) multiple = false;
+
+  render() {
+    return html`
+      <div class="container">
+        <header>
+          <div class="titles">
+            <span class="subtitle">${this.multiple ? 'Choose team' : 'My team'}</span>
+            ${this.multiple
+              ? html`<slot name="choose-team"></slot>`
+              : html`<h1 class="title">${this.teamName}</h1>`}
+          </div>
+        </header>
+        <div class="actions">
+          <a href="${this.inviteURL}">
+            <vaadin-button class="invite-manage" theme="secondary">
+              Invite & manage team
+            </vaadin-button>
+          </a>
+          <a href="${this.settingsURL}">
+            <vaadin-button class="team-settings" theme="primary">
+              <vaadin-icon icon="lumo:edit"></vaadin-icon>
+              Team settings
+            </vaadin-button>
+          </a>
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    // Global styles.
+    registerGlobalStyles(cxlDashboardTeamHeaderGlobalStyles, {
+      moduleId: 'cxl-dashboard-team-header-global',
+    });
+  }
+}

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

@@ -0,0 +1,46 @@
+/* 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 CxlDashboardTeamStatsElement extends LitElement {
+  static get styles() {
+    return [CXLDashboardTeamStatsStyles];
+  }
+
+  @property({ type: Number }) progress = 0;
+
+  @property({ type: String, attribute: 'manage-roadmaps-url' }) manageRoadmapsURL = '';
+
+  render() {
+    return html`
+      <div class="container">
+        <header>
+          <h1 class="title">Team progress & stats</h1>
+          <div class="actions">
+            <a href=${this.manageRoadmapsURL}>
+              <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).toFixed(0)}% complete</h2>
+          </div>
+          <div class="stats">
+            <slot name="stats"></slot>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}

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

@@ -24,6 +24,8 @@ export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js'
 export { CXLDashboardHeaderElement } from './components/cxl-dashboard-header.js';
 export { CxlDashboardSectionElement } from './components/cxl-dashboard-section.js';
 export { CXLDashboardNotificationElement } from './components/cxl-dashboard-notification.js';
+export { CxlDashboardTeamHeaderElement } from './components/cxl-dashboard-team-header.js';
+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 { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';

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

@@ -0,0 +1,17 @@
+import { TeamDashboardHeaderTemplate, ArgTypes } from './header-template';
+
+export default {
+  title: 'CXL UI/cxl-team-dashboard',
+};
+
+export const CXLDashboardTeamHeader = TeamDashboardHeaderTemplate.bind({});
+
+CXLDashboardTeamHeader.argTypes = {
+  ...ArgTypes,
+};
+
+CXLDashboardTeamHeader.args = {
+  teamName: 'NOPE Creative',
+  teamId: 6351659,
+  multiple: false,
+};