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 00fc7f92..fffacfb9 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, 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`
@@ -32,16 +36,22 @@ export class CxlDashboardTeamStatsElement extends LitElement { ` : nothing}
-
-
- Team roadmap progress - -

${(100 * this.progress).toFixed(0)}% complete

-
-
- -
-
+ ${!this.hideProgress || !this.hideStats ? html` +
+ ${!this.hideProgress ? html` +
+ Team roadmap progress + +

${(100 * this.progress).toFixed(0)}% complete

+
+ ` : nothing} + ${!this.hideStats ? html` +
+ +
+ ` : nothing} +
+ ` : nothing} `; } 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 62b7d6dd..97bdc7ca 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 @@ -13,4 +13,6 @@ CXLDashboardTeamStats.argTypes = { CXLDashboardTeamStats.args = { progress: 0.65, manageRoadmapsURL: 'https://cxl.com', + 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 c31d7c58..27311e7c 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 @@ -16,12 +16,14 @@ 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, + inviteURL: args.header_invite_url, + settingsURL: args.header_settings_url, })} ${CXLDashboardTeamStats({ - progress: args.progress, - manageRoadmapsURL: args.manage_roadmaps_url + progress: args.stats_progress, + manageRoadmapsURL: args.stats_manage_roadmaps_url, + hideProgress: args.stats_hide_progress, + hideStats: args.stats_hide_stats })} ${CXLFooterNav()} @@ -32,8 +34,10 @@ 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', + header_invite_url: 'https://cxl.com', + header_settings_url: 'https://cxl.com', + stats_progress: 0.65, + stats_hide_progress: false, + stats_hide_stats: false, + stats_manage_roadmaps_url: 'https://cxl.com', }; 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 abf62f53..7e1a42b5 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js @@ -6,6 +6,8 @@ export const TeamDashboardStatsTemplate = (args) => html`
${CXLStats({ statsCount: 3 })}