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

conversionxl · Oct 28, 2023 · 7024d04 · 7024d04
1 parent 8ce32ba
commit 7024d04
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 0 deletions.
diff --git a/packages/cxl-lumo-styles/scss/color.scss b/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

diff --git a/packages/cxl-ui/scss/_mixins.scss b/packages/cxl-ui/scss/_mixins.scss
@@ -49,3 +49,17 @@
   -moz-box-orient: vertical;
   /* stylelint-enable */
 }
+
+@mixin pesudo-element-full-width {
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    z-index: -1;
+    width: 100vw;
+    content: "";
+    background-color: var(--lumo-shade);
+    transform: translateX(-50%);
+  }
+}
diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss
@@ -0,0 +1,78 @@
+@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;
+    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();
+
+    @media #{mq.$small} {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--lumo-space-l) 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);
+    }
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-team-header.scss b/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);
+    }
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js
@@ -0,0 +1,56 @@
+/* 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 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 CxlDashboardTeamHeader extends LitElement {
+  static get styles() {
+    return [cxlDashboardTeamHeaderStyles];
+  }
+
+  @property({ type: String }) name = '';
+
+  @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.name}</h1>`}
+          </div>
+        </header>
+        <div class="actions">
+          <a>
+            <vaadin-button class="invite-manage" theme="secondary">
+              Invite & manage team
+            </vaadin-button>
+          </a>
+          <a>
+            <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',
+    });
+  }
+}
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js
@@ -0,0 +1,16 @@
+import { TeamDashboardHeaderTemplate, ArgTypes } from './template';
+
+export default {
+  title: 'CXL UI/cxl-team-dashboard',
+};
+
+export const CXLDashboardTeamHeader = TeamDashboardHeaderTemplate.bind({});
+
+CXLDashboardTeamHeader.argTypes = {
+  ...ArgTypes,
+};
+
+CXLDashboardTeamHeader.args = {
+  name: 'NOPE Creative',
+  multiple: false,
+};
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-team-dashboard.stories.js b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-team-dashboard.stories.js
@@ -0,0 +1,23 @@
+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';
+
+export default {
+  title: 'CXL UI/cxl-team-dashboard',
+};
+
+export const CXLDashboard = (args) => html`
+  <cxl-app-layout id="container" layout="1c-w" theme="cxl-dashboard">
+    ${CXLMarketingNav()}
+    <article>
+      ${CXLDashboardTeamHeader({ name: args.header_name, multiple: args.header_multiple })}
+    </article>
+    ${CXLFooterNav()}
+  </cxl-app-layout>
+`;
+
+CXLDashboard.args = {
+  header_name: 'NOPE Creative',
+  header_multiple: false,
+};
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/template.js
@@ -0,0 +1,67 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui/src/components/cxl-dashboard-team-header.js';
+import '@conversionxl/cxl-ui/src/components/cxl-stats';
+
+export const TeamDashboardHeaderTemplate = (header) => html`
+  <!-- from wordpress form styles -->
+  <style>
+    form {
+      font-family: var(--lumo-font-family);
+    }
+
+    label {
+      color: var(--lumo-contrast-50pct);
+      display: block;
+      font-size: var(--lumo-font-size-s);
+      font-weight: 300;
+      text-transform: uppercase;
+    }
+
+    form label {
+      color: var(--lumo-contrast-80pct);
+      font-weight: normal;
+      text-transform: inherit;
+    }
+
+    select {
+      font-size: var(--lumo-font-size-s);
+    }
+
+    form select {
+      height: 2.25em;
+      border: 1px solid var(--lumo-contrast-20pct);
+      background-color: white;
+      padding: var(--lumo-space-s);
+      display: inline-block;
+      border: 1px solid var(--lumo-contrast-20pct);
+      box-shadow: var(--lumo-box-shadow-xs);
+      border-radius: var(--lumo-border-radius-s);
+      vertical-align: middle;
+      box-sizing: border-box;
+      font-size: var(--lumo-font-size-l);
+    }
+  </style>
+
+  <cxl-dashboard-team-header
+    theme="cxl-dashboard-header team"
+    name=${header.name}
+    ?multiple=${header.multiple}
+  >
+    <form slot="choose-team" id="user-active-teams">
+      <label for="team_id" style="margin: 0;">Choose team:</label>
+      <div>
+        <select name="team_id">
+          <option value="6351659" selected="selected">NOPE Creative</option>
+          <option value="6351660">gotoAndPlay</option>
+          <option value="6351661">CXL</option>
+        </select>
+      </div>
+    </form>
+  </cxl-dashboard-team-header>
+`;
+
+export const ArgTypes = {
+  name: { control: 'text' },
+  multiple: { control: 'boolean' },
+};