feat(cxl-ui): handle cta links in header and stats components

conversionxl · Nov 3, 2023 · 37b1fd5 · 37b1fd5
1 parent 6e11d31
commit 37b1fd5
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 13 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js
@@ -14,7 +14,9 @@ export class CxlDashboardTeamHeaderElement extends LitElement {
     return [cxlDashboardTeamHeaderStyles];
   }
 
-  @property({ type: String }) name = '';
+  @property({ type: String, attribute: 'team-name' }) teamName = '';
+
+  @property({ type: Number, attribute: 'team-id' }) teamId = '';
 
   @property({ type: Boolean }) multiple = false;
 
@@ -26,16 +28,16 @@ export class CxlDashboardTeamHeaderElement extends LitElement {
             <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>`}
+              : html`<h1 class="title">${this.teamName}</h1>`}
           </div>
         </header>
         <div class="actions">
-          <a>
+          <a href="my-account/teams/${this.teamId}/members/">
             <vaadin-button class="invite-manage" theme="secondary">
               Invite & manage team
             </vaadin-button>
           </a>
-          <a>
+          <a href="my-account/teams/${this.teamId}/settings/">
             <vaadin-button class="team-settings" theme="primary">
               <vaadin-icon icon="lumo:edit"></vaadin-icon>
               Team settings

diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js
@@ -14,13 +14,15 @@ export class CxlDashboardTeamStatsElement extends LitElement {
 
   @property({ type: Number }) progress = 0;
 
+  @property({ type: Number }) teamId = 0;
+
   render() {
     return html`
       <div class="container">
         <header>
           <h1 class="title">Team progress & stats</h1>
           <div class="actions">
-            <a>
+            <a href="roadmap/team/?team_id=${this.teamId}">
               <vaadin-button class="team-settings" theme="primary">
                 <vaadin-icon icon="lumo:edit"></vaadin-icon>
                 Manage team roadmaps
@@ -35,7 +37,7 @@ export class CxlDashboardTeamStatsElement extends LitElement {
             <h2 class="progress-subtitle">${100 * this.progress}% complete</h2>
           </div>
           <div class="stats">
-            <slot></slot>
+            <slot name="stats"></slot>
           </div>
         </section>
       </div>

diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // Theme style modules must be imported before elements.
 import '@conversionxl/cxl-lumo-styles';
 import 'qrcode';
@@ -16,7 +17,7 @@ import * as Headroom from 'headroom.js';
 export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
 export { CXLBaseCardElement } from './components/cxl-base-card.js';
 export { CXLCardElement } from './components/cxl-card.js';
-export { CXLCredentialElement } from './components/cxl-credential.js'
+export { CXLCredentialElement } from './components/cxl-credential.js';
 export { CXLCourseCardElement } from './components/cxl-course-card.js';
 export { CXLCourseDialogElement } from './components/cxl-course-dialog.js';
 export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js';

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
@@ -11,6 +11,7 @@ CXLDashboardTeamHeader.argTypes = {
 };
 
 CXLDashboardTeamHeader.args = {
-  name: 'NOPE Creative',
+  teamName: 'NOPE Creative',
+  teamId: 6351659,
   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
@@ -12,7 +12,11 @@ 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 })}
+      ${CXLDashboardTeamHeader({
+        teamName: args.header_name,
+        teamId: args.header_team_id,
+        multiple: args.header_multiple,
+      })}
       ${CXLDashboardTeamStats({ progress: 0.65 })}
     </article>
     ${CXLFooterNav()}
@@ -21,5 +25,6 @@ export const CXLDashboard = (args) => html`
 
 CXLDashboard.args = {
   header_name: 'NOPE Creative',
+  header_team_id: 6351659,
   header_multiple: false,
 };
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js
@@ -44,8 +44,9 @@ export const TeamDashboardHeaderTemplate = (header) => html`
   </style>
 
   <cxl-dashboard-team-header
-    theme="cxl-dashboard-header team"
-    name=${header.name}
+    theme="cxl-dashboeard-header team"
+    team-id=${header.teamId}
+    team-name=${header.teamName}
     ?multiple=${header.multiple}
   >
     <form slot="choose-team" id="user-active-teams">
@@ -62,6 +63,7 @@ export const TeamDashboardHeaderTemplate = (header) => html`
 `;
 
 export const ArgTypes = {
-  name: { control: 'text' },
+  teamId: { control: 'number' },
+  teamName: { control: 'text' },
   multiple: { control: 'boolean' },
 };
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js
@@ -4,7 +4,7 @@ import { CXLStats } from '../cxl-stats/default.stories';
 
 export const TeamDashboardStatsTemplate = (args) => html`
   <cxl-dashboard-team-stats progress=${args.progress}>
-    ${CXLStats({ statsCount: 3 })}
+    <div slot="stats">${CXLStats({ statsCount: 3 })}</div>
   </cxl-dashboard-team-stats>
 `;