diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js index 416d6cba..b2dd2cf8 100644 --- 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 index b3107d0f..01043c79 100644 --- 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 index 80fe0699..ba74eec0 100644 --- 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 index 568e1e17..bb9598af 100644 --- 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> `;