feat(Team Dashboard): Temporarily hide team stats block

https://app.clickup.com/t/86ayqffyf
conversionxl · Nov 16, 2023 · e41e987 · e41e987
1 parent 0ef3838
commit e41e987
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 14 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js
@@ -1,9 +1,9 @@
 /* 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 '@conversionxl/cxl-lumo-styles';
 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')
@@ -16,6 +16,10 @@ export class CxlDashboardTeamStatsElement extends LitElement {
 
   @property({ type: String, attribute: 'manage-roadmaps-url' }) manageRoadmapsURL = '';
 
+  @property({ type: Boolean, attribute: 'hide-progress' }) hideProgress = false;
+
+  @property({ type: Boolean, attribute: 'hide-stats' }) hideStats = false;
+
   render() {
     return html`
       <div class="container">
@@ -30,16 +34,22 @@ export class CxlDashboardTeamStatsElement extends LitElement {
             </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>
+        ${!this.hideProgress || !this.hideStats ? html`
+          <section class="content">
+            ${!this.hideProgress ? html`
+              <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>
+            ` : nothing}
+            ${!this.hideStats ? html`
+              <div class="stats">
+                <slot name="stats"></slot>
+              </div>
+            ` : nothing}
+          </section>
+        ` : nothing}
       </div>
     `;
   }

diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-stats.stories.js b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-stats.stories.js
@@ -12,4 +12,6 @@ CXLDashboardTeamStats.argTypes = {
 
 CXLDashboardTeamStats.args = {
   progress: 0.65,
+  hideProgress: false,
+  hideStats: 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
@@ -17,7 +17,11 @@ export const CXLDashboard = (args) => html`
         teamId: args.header_team_id,
         multiple: args.header_multiple,
       })}
-      ${CXLDashboardTeamStats({ progress: 0.65 })}
+      ${CXLDashboardTeamStats({
+        progress: args.stats_progress,
+        hideProgress: args.stats_hide_progress,
+        hideStats: args.stats_hide_stats
+      })}
     </article>
     ${CXLFooterNav()}
   </cxl-app-layout>
@@ -27,4 +31,7 @@ CXLDashboard.args = {
   header_name: 'NOPE Creative',
   header_team_id: 6351659,
   header_multiple: false,
+  stats_progress: 0.65,
+  stats_hide_progress: false,
+  stats_hide_stats: false,
 };
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js
@@ -3,7 +3,11 @@ 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}
+    ?hide-progress=${args.hideProgress}
+    ?hide-stats=${args.hideStats}
+  >
     <div slot="stats">${CXLStats({ statsCount: 3 })}</div>
   </cxl-dashboard-team-stats>
 `;