fix(Team Dashboard): conditional visibility of buttons

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

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import '@conversionxl/cxl-lumo-styles';
@@ -34,17 +34,21 @@ export class CxlDashboardTeamHeaderElement extends LitElement {
           </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>
+          ${this.inviteURL ? html`
+            <a href="${this.inviteURL}">
+              <vaadin-button class="invite-manage" theme="secondary">
+                Invite & manage team
+              </vaadin-button>
+            </a>
+          ` : nothing}
+          ${this.settingsURL ? html`
+            <a href="${this.settingsURL}">
+              <vaadin-button class="team-settings" theme="primary">
+                <vaadin-icon icon="lumo:edit"></vaadin-icon>
+                Team settings
+              </vaadin-button>
+            </a>
+          ` : nothing}
         </div>
       </div>
     `;

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

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '@vaadin/progress-bar';
 import '@vaadin/button';
@@ -22,12 +22,14 @@ export class CxlDashboardTeamStatsElement extends LitElement {
         <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>
+            ${this.manageRoadmapsURL ? html`
+              <a href=${this.manageRoadmapsURL}>
+                <vaadin-button class="team-settings" theme="primary">
+                  <vaadin-icon icon="lumo:edit"></vaadin-icon>
+                  Manage team roadmaps
+                </vaadin-button>
+              </a>
+            ` : nothing}
           </div>
         </header>
         <section class="content">

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

@@ -14,4 +14,6 @@ CXLDashboardTeamHeader.args = {
   teamName: 'NOPE Creative',
   teamId: 6351659,
   multiple: false,
+  inviteURL: 'https://cxl.com',
+  settingsURL: 'https://cxl.com',
 };

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

@@ -12,4 +12,5 @@ CXLDashboardTeamStats.argTypes = {
 
 CXLDashboardTeamStats.args = {
   progress: 0.65,
+  manageRoadmapsURL: 'https://cxl.com',
 };

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

@@ -16,8 +16,13 @@ export const CXLDashboard = (args) => html`
         teamName: args.header_name,
         teamId: args.header_team_id,
         multiple: args.header_multiple,
+        inviteURL: args.invite_url,
+        settingsURL: args.settings_url,
+      })}
+      ${CXLDashboardTeamStats({
+        progress: args.progress,
+        manageRoadmapsURL: args.manage_roadmaps_url
       })}
-      ${CXLDashboardTeamStats({ progress: 0.65 })}
     </article>
     ${CXLFooterNav()}
   </cxl-app-layout>
@@ -27,4 +32,8 @@ CXLDashboard.args = {
   header_name: 'NOPE Creative',
   header_team_id: 6351659,
   header_multiple: false,
+  invite_url: 'https://cxl.com',
+  settings_url: 'https://cxl.com',
+  progress: 0.65,
+  manage_roadmaps_url: 'https://cxl.com',
 };

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

@@ -47,6 +47,8 @@ export const TeamDashboardHeaderTemplate = (header) => html`
     theme="cxl-dashboeard-header team"
     team-id=${header.teamId}
     team-name=${header.teamName}
+    invite-url=${header.inviteURL}
+    settings-url=${header.settingsURL}
     ?multiple=${header.multiple}
   >
     <form slot="choose-team" id="user-active-teams">
@@ -65,5 +67,7 @@ export const TeamDashboardHeaderTemplate = (header) => html`
 export const ArgTypes = {
   teamId: { control: 'number' },
   teamName: { control: 'text' },
+  inviteURL: { control: 'text' },
+  settingsURL: { control: 'text' },
   multiple: { control: 'boolean' },
 };

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

@@ -3,11 +3,15 @@ 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}>
+  <cxl-dashboard-team-stats
+    progress=${args.progress}
+    manage-roadmaps-url=${args.manageRoadmapsURL}
+  >
     <div slot="stats">${CXLStats({ statsCount: 3 })}</div>
   </cxl-dashboard-team-stats>
 `;
 
 export const ArgTypes = {
-  progress: { type: Number },
+  progress: { type: Number, control: 'number' },
+  manageRoadmapsURL: { type: String, control: 'text' },
 };