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 })}