diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js index 5b22cb696..60ed9f4a4 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js +++ b/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 {
- - - Invite & manage team - - - - - - Team settings - - + ${this.inviteURL ? html` + + + Invite & manage team + + + ` : nothing} + ${this.settingsURL ? html` + + + + Team settings + + + ` : nothing}
`; 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 416d6cba5..00fc7f92a 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js +++ b/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 {

Team progress & stats

- - - - Manage team roadmaps - - + ${this.manageRoadmapsURL ? html` + + + + Manage team roadmaps + + + ` : nothing}
diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js index 8cfc43b52..4204b669c 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js +++ b/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', }; 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 b3107d0fe..62b7d6ddd 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,5 @@ CXLDashboardTeamStats.argTypes = { CXLDashboardTeamStats.args = { progress: 0.65, + manageRoadmapsURL: 'https://cxl.com', }; 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 80fe0699a..c31d7c581 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,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 })} ${CXLFooterNav()} @@ -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', }; diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js index 09fc8ca06..59afc7cdb 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js +++ b/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} >
@@ -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' }, }; 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 568e1e177..abf62f53c 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js +++ b/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` - +
${CXLStats({ statsCount: 3 })}
`; export const ArgTypes = { - progress: { type: Number }, + progress: { type: Number, control: 'number' }, + manageRoadmapsURL: { type: String, control: 'text' }, };