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 83f483396..c61d77bf9 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js @@ -14,7 +14,9 @@ export class CxlDashboardTeamHeaderElement extends LitElement { return [cxlDashboardTeamHeaderStyles]; } - @property({ type: String }) name = ''; + @property({ type: String, attribute: 'team-name' }) teamName = ''; + + @property({ type: Number, attribute: 'team-id' }) teamId = ''; @property({ type: Boolean }) multiple = false; @@ -26,16 +28,16 @@ export class CxlDashboardTeamHeaderElement extends LitElement { ${this.multiple ? 'Choose team' : 'My team'} ${this.multiple ? html`` - : html`

${this.name}

`} + : html`

${this.teamName}

`}
- + Invite & manage team - + Team settings 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 56107b118..48dd2d683 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js @@ -14,13 +14,15 @@ export class CxlDashboardTeamStatsElement extends LitElement { @property({ type: Number }) progress = 0; + @property({ type: Number }) teamId = 0; + render() { return html`

Team progress & stats

- +
diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js index 72faef5e2..3eeae280c 100644 --- a/packages/cxl-ui/src/index-core.js +++ b/packages/cxl-ui/src/index-core.js @@ -1,3 +1,4 @@ +/* eslint-disable import/no-extraneous-dependencies */ // Theme style modules must be imported before elements. import '@conversionxl/cxl-lumo-styles'; import 'qrcode'; @@ -16,7 +17,7 @@ import * as Headroom from 'headroom.js'; export { CXLAppLayoutElement } from './components/cxl-app-layout.js'; export { CXLBaseCardElement } from './components/cxl-base-card.js'; export { CXLCardElement } from './components/cxl-card.js'; -export { CXLCredentialElement } from './components/cxl-credential.js' +export { CXLCredentialElement } from './components/cxl-credential.js'; export { CXLCourseCardElement } from './components/cxl-course-card.js'; export { CXLCourseDialogElement } from './components/cxl-course-dialog.js'; export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js'; 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 21e626753..8cfc43b52 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 @@ -11,6 +11,7 @@ CXLDashboardTeamHeader.argTypes = { }; CXLDashboardTeamHeader.args = { - name: 'NOPE Creative', + teamName: 'NOPE Creative', + teamId: 6351659, multiple: 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 08d0732d3..80fe0699a 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 @@ -12,7 +12,11 @@ export const CXLDashboard = (args) => html` ${CXLMarketingNav()}
- ${CXLDashboardTeamHeader({ name: args.header_name, multiple: args.header_multiple })} + ${CXLDashboardTeamHeader({ + teamName: args.header_name, + teamId: args.header_team_id, + multiple: args.header_multiple, + })} ${CXLDashboardTeamStats({ progress: 0.65 })}
${CXLFooterNav()} @@ -21,5 +25,6 @@ export const CXLDashboard = (args) => html` CXLDashboard.args = { header_name: 'NOPE Creative', + header_team_id: 6351659, header_multiple: false, }; 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 7e8bbcd92..09fc8ca06 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js @@ -44,8 +44,9 @@ export const TeamDashboardHeaderTemplate = (header) => html`
@@ -62,6 +63,7 @@ export const TeamDashboardHeaderTemplate = (header) => html` `; export const ArgTypes = { - name: { control: 'text' }, + teamId: { control: 'number' }, + teamName: { 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 5b23c75ee..568e1e177 100644 --- a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js @@ -4,7 +4,7 @@ import { CXLStats } from '../cxl-stats/default.stories'; export const TeamDashboardStatsTemplate = (args) => html` - ${CXLStats({ statsCount: 3 })} +
${CXLStats({ statsCount: 3 })}
`;