From aec1b2a744ad6481bb9612c9028d8ad75fd3d4b6 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Fri, 27 Oct 2023 23:33:45 -0300 Subject: [PATCH 1/8] feat(cxl-ui): add cxl-dashboard-team-header component --- packages/cxl-lumo-styles/scss/color.scss | 1 + packages/cxl-ui/scss/_mixins.scss | 14 ++++ .../scss/cxl-dashboard-team-header.scss | 78 +++++++++++++++++++ .../global/cxl-dashboard-team-header.scss | 17 ++++ .../components/cxl-dashboard-team-header.js | 56 +++++++++++++ .../cxl-dashboard-team-header.stories.js | 16 ++++ .../cxl-team-dashboard.stories.js | 23 ++++++ .../cxl-ui/cxl-team-dashboard/template.js | 67 ++++++++++++++++ 8 files changed, 272 insertions(+) create mode 100644 packages/cxl-ui/scss/cxl-dashboard-team-header.scss create mode 100644 packages/cxl-ui/scss/global/cxl-dashboard-team-header.scss create mode 100644 packages/cxl-ui/src/components/cxl-dashboard-team-header.js create mode 100644 packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-team-dashboard/cxl-team-dashboard.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-team-dashboard/template.js diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss index 69eb2cb4d..f70ee2e01 100644 --- a/packages/cxl-lumo-styles/scss/color.scss +++ b/packages/cxl-lumo-styles/scss/color.scss @@ -27,6 +27,7 @@ html, */ --lumo-shade: hsl(0, 0%, 10%); --lumo-contrast: hsl(0, 0%, 10%); + --lumo-contrast-20pct: hsl(0, 0%, 20%); /** * Text diff --git a/packages/cxl-ui/scss/_mixins.scss b/packages/cxl-ui/scss/_mixins.scss index 2102b2e5d..00e034d27 100644 --- a/packages/cxl-ui/scss/_mixins.scss +++ b/packages/cxl-ui/scss/_mixins.scss @@ -61,3 +61,17 @@ border-radius: var(--lumo-font-size-s); } } + +@mixin pesudo-element-full-width { + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + z-index: -1; + width: 100vw; + content: ""; + background-color: var(--lumo-shade); + transform: translateX(-50%); + } +} diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss new file mode 100644 index 000000000..c9b5907c0 --- /dev/null +++ b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss @@ -0,0 +1,78 @@ +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; +@use "./mixins"; + +:host { + display: flex; + justify-content: center; + width: 100%; + color: var(--lumo-tint); + background-color: var(--lumo-shade); + + .container { + position: relative; + width: 100%; + max-width: var(--cxl-content-max-width-wide); + padding: var(--lumo-space-l) var(--lumo-space-m); + background-color: var(--lumo-shade); + + @include mixins.pesudo-element-full-width(); + + @media #{mq.$small} { + display: flex; + justify-content: space-between; + padding: var(--lumo-space-l) 0; + } + } + + header { + margin-bottom: var(--lumo-space-l); + + @media #{mq.$medium} { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: initial; + } + + .titles { + .title { + margin-block-start: 0; + margin-block-end: 0; + } + + @media #{mq.$medium} { + padding-top: 0; + } + } + + .subtitle { + font-size: var(--lumo-font-size-xs); + line-height: 1; + text-transform: uppercase; + opacity: 0.6; + } + } + + .actions { + display: flex; + flex-direction: column; + align-items: start; + gap: var(--lumo-space-s); + + @media #{mq.$small} { + flex-direction: row; + align-items: center; + gap: var(--lumo-space-m); + } + + .invite-manage { + --_lumo-button-color: var(--lumo-tint); + --_lumo-button-background-color: var(--lumo-contrast-20pct); + } + + .team-settings { + --_lumo-button-primary-color: var(--lumo-primary-color); + --_lumo-button-primary-background-color: var(--lumo-tint); + } + } +} diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-team-header.scss new file mode 100644 index 000000000..a98f3744a --- /dev/null +++ b/packages/cxl-ui/scss/global/cxl-dashboard-team-header.scss @@ -0,0 +1,17 @@ +/* stylelint-disable selector-max-type */ +cxl-dashboard-team-header { + form { + label { + display: none; + } + + select { + height: unset; + font-size: var(--lumo-font-size-xxl); + font-weight: 900; + color: var(--lumo-tint); + background-color: var(--lumo-contrast-20pct); + border-radius: var(--lumo-border-radius-m); + } + } +} diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js new file mode 100644 index 000000000..57ab3a064 --- /dev/null +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js @@ -0,0 +1,56 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; +import cxlDashboardTeamHeaderStyles from '../styles/cxl-dashboard-team-header-css.js'; +import cxlDashboardTeamHeaderGlobalStyles from '../styles/global/cxl-dashboard-team-header-css.js'; +import '@vaadin/icon'; +import '@vaadin/button'; + +@customElement('cxl-dashboard-team-header') +export class CxlDashboardTeamHeader extends LitElement { + static get styles() { + return [cxlDashboardTeamHeaderStyles]; + } + + @property({ type: String }) name = ''; + + @property({ type: Boolean }) multiple = false; + + render() { + return html` +
+
+
+ ${this.multiple ? 'Choose team' : 'My team'} + ${this.multiple + ? html`` + : html`

${this.name}

`} +
+
+
+ + + Invite & manage team + + + + + + Team settings + + +
+
+ `; + } + + firstUpdated(_changedProperties) { + super.firstUpdated(_changedProperties); + + // Global styles. + registerGlobalStyles(cxlDashboardTeamHeaderGlobalStyles, { + moduleId: 'cxl-dashboard-team-header-global', + }); + } +} 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 new file mode 100644 index 000000000..01443ee04 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-header.stories.js @@ -0,0 +1,16 @@ +import { TeamDashboardHeaderTemplate, ArgTypes } from './template'; + +export default { + title: 'CXL UI/cxl-team-dashboard', +}; + +export const CXLDashboardTeamHeader = TeamDashboardHeaderTemplate.bind({}); + +CXLDashboardTeamHeader.argTypes = { + ...ArgTypes, +}; + +CXLDashboardTeamHeader.args = { + name: 'NOPE Creative', + 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 new file mode 100644 index 000000000..37a39df83 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-team-dashboard.stories.js @@ -0,0 +1,23 @@ +import { html } from 'lit'; +import { CXLDashboardTeamHeader } from './cxl-dashboard-team-header.stories'; +import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; +import { CXLFooterNav } from '../footer-nav.stories'; + +export default { + title: 'CXL UI/cxl-team-dashboard', +}; + +export const CXLDashboard = (args) => html` + + ${CXLMarketingNav()} +
+ ${CXLDashboardTeamHeader({ name: args.header_name, multiple: args.header_multiple })} +
+ ${CXLFooterNav()} + +`; + +CXLDashboard.args = { + header_name: 'NOPE Creative', + header_multiple: false, +}; diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/template.js new file mode 100644 index 000000000..7e8bbcd92 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/template.js @@ -0,0 +1,67 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-lumo-styles'; +import '@conversionxl/cxl-ui/src/components/cxl-dashboard-team-header.js'; +import '@conversionxl/cxl-ui/src/components/cxl-stats'; + +export const TeamDashboardHeaderTemplate = (header) => html` + + + + +
+ +
+ +
+
+ +`; + +export const ArgTypes = { + name: { control: 'text' }, + multiple: { control: 'boolean' }, +}; From 38c1c45dd2325ac1d813e0e93c256fe9486653fe Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Sat, 28 Oct 2023 00:49:34 -0300 Subject: [PATCH 2/8] feat(cxl-ui): add cxl-dashboard-team-stats component --- packages/cxl-ui/scss/_mixins.scss | 4 +- .../scss/cxl-dashboard-team-header.scss | 2 +- .../cxl-ui/scss/cxl-dashboard-team-stats.scss | 79 +++++++++++++++++++ .../components/cxl-dashboard-team-header.js | 1 + .../components/cxl-dashboard-team-stats.js | 44 +++++++++++ .../cxl-dashboard-team-header.stories.js | 2 +- .../cxl-dashboard-team-stats.stories.js | 15 ++++ .../cxl-team-dashboard.stories.js | 2 + .../{template.js => header-template.js} | 0 .../cxl-team-dashboard/stats-template.js | 13 +++ 10 files changed, 158 insertions(+), 4 deletions(-) create mode 100644 packages/cxl-ui/scss/cxl-dashboard-team-stats.scss create mode 100644 packages/cxl-ui/src/components/cxl-dashboard-team-stats.js create mode 100644 packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-stats.stories.js rename packages/storybook/cxl-ui/cxl-team-dashboard/{template.js => header-template.js} (100%) create mode 100644 packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js diff --git a/packages/cxl-ui/scss/_mixins.scss b/packages/cxl-ui/scss/_mixins.scss index 00e034d27..dafd3fd1e 100644 --- a/packages/cxl-ui/scss/_mixins.scss +++ b/packages/cxl-ui/scss/_mixins.scss @@ -62,7 +62,7 @@ } } -@mixin pesudo-element-full-width { +@mixin pesudo-element-full-width($color) { &::before { position: absolute; top: 0; @@ -71,7 +71,7 @@ z-index: -1; width: 100vw; content: ""; - background-color: var(--lumo-shade); + background-color: $color; transform: translateX(-50%); } } diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss index c9b5907c0..ba91ac82a 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss @@ -15,7 +15,7 @@ padding: var(--lumo-space-l) var(--lumo-space-m); background-color: var(--lumo-shade); - @include mixins.pesudo-element-full-width(); + @include mixins.pesudo-element-full-width(var(--lumo-shade)); @media #{mq.$small} { display: flex; diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss new file mode 100644 index 000000000..c133bd8c8 --- /dev/null +++ b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss @@ -0,0 +1,79 @@ +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; +@use "./mixins"; + +:host { + display: flex; + justify-content: center; + width: 100%; + + .container { + position: relative; + display: flex; + flex-direction: column; + gap: calc(2 * var(--lumo-space-m)); + width: 100%; + max-width: var(--cxl-content-max-width-wide); + padding: var(--lumo-space-m); + background-color: var(--cxl-color-light-gray); + + @include mixins.pesudo-element-full-width(var(--cxl-color-light-gray)); + + @media #{mq.$small} { + padding: var(--lumo-space-xl) 0; + padding-bottom: calc(var(--lumo-space-xl) + var(--lumo-space-l)); + } + + header { + display: flex; + justify-content: space-between; + + .title { + margin-block: 0; + font-weight: 900; + } + + .actions { + display: none; + } + + .team-settings { + --_lumo-button-primary-color: var(--lumo-primary-color); + --_lumo-button-primary-background-color: var(--lumo-tint); + } + + @media #{mq.$small} { + .actions { + display: flex; + } + } + } + + .content { + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + + .progress { + min-width: 320px; + } + + .progress-subtitle { + margin-block: 0; + } + + ::slotted(.stats) { + padding: 0; + grid-template-columns: repeat(2, 1fr); + gap: calc(2 * var(--lumo-space-l)); + } + + @media #{mq.$small} { + flex-direction: row; + + ::slotted(.stats) { + grid-template-columns: repeat(3, 1fr); + } + } + } + } +} 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 57ab3a064..821171d26 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js @@ -2,6 +2,7 @@ import { LitElement, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; +import '@conversionxl/cxl-lumo-styles'; import cxlDashboardTeamHeaderStyles from '../styles/cxl-dashboard-team-header-css.js'; import cxlDashboardTeamHeaderGlobalStyles from '../styles/global/cxl-dashboard-team-header-css.js'; import '@vaadin/icon'; diff --git a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js new file mode 100644 index 000000000..1d5a6015a --- /dev/null +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js @@ -0,0 +1,44 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +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') +export class CxlDashboardTeamStats extends LitElement { + static get styles() { + return [CXLDashboardTeamStatsStyles]; + } + + @property({ type: Number }) progress = 0; + + render() { + return html` +
+
+

Team progress & stats

+
+ + + + Manage team roadmaps + + +
+
+
+
+ Team roadmap progress + +

${100 * this.progress}% complete

+
+
+ +
+
+
+ `; + } +} 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 01443ee04..21e626753 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 @@ -1,4 +1,4 @@ -import { TeamDashboardHeaderTemplate, ArgTypes } from './template'; +import { TeamDashboardHeaderTemplate, ArgTypes } from './header-template'; export default { title: 'CXL UI/cxl-team-dashboard', 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 new file mode 100644 index 000000000..b3107d0fe --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/cxl-dashboard-team-stats.stories.js @@ -0,0 +1,15 @@ +import { TeamDashboardStatsTemplate, ArgTypes } from './stats-template'; + +export default { + title: 'CXL UI/cxl-team-dashboard', +}; + +export const CXLDashboardTeamStats = TeamDashboardStatsTemplate.bind({}); + +CXLDashboardTeamStats.argTypes = { + ...ArgTypes, +}; + +CXLDashboardTeamStats.args = { + progress: 0.65, +}; 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 37a39df83..08d0732d3 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 @@ -2,6 +2,7 @@ import { html } from 'lit'; import { CXLDashboardTeamHeader } from './cxl-dashboard-team-header.stories'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; import { CXLFooterNav } from '../footer-nav.stories'; +import { CXLDashboardTeamStats } from './cxl-dashboard-team-stats.stories'; export default { title: 'CXL UI/cxl-team-dashboard', @@ -12,6 +13,7 @@ export const CXLDashboard = (args) => html` ${CXLMarketingNav()}
${CXLDashboardTeamHeader({ name: args.header_name, multiple: args.header_multiple })} + ${CXLDashboardTeamStats({ progress: 0.65 })}
${CXLFooterNav()} diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js similarity index 100% rename from packages/storybook/cxl-ui/cxl-team-dashboard/template.js rename to packages/storybook/cxl-ui/cxl-team-dashboard/header-template.js diff --git a/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js new file mode 100644 index 000000000..5b23c75ee --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-team-dashboard/stats-template.js @@ -0,0 +1,13 @@ +import { html } from 'lit'; +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 }, +}; From f54d517fa8e44299b401d0451a1919d5d5417468 Mon Sep 17 00:00:00 2001 From: Hener Hoop Date: Thu, 2 Nov 2023 06:28:07 +0200 Subject: [PATCH 3/8] feat(cxl-ui): index-core include team header and team stats https://app.clickup.com/t/86ayd0hrw --- packages/cxl-ui/src/components/cxl-dashboard-team-header.js | 2 +- packages/cxl-ui/src/components/cxl-dashboard-team-stats.js | 2 +- packages/cxl-ui/src/index-core.js | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) 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 821171d26..83f483396 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-header.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-header.js @@ -9,7 +9,7 @@ import '@vaadin/icon'; import '@vaadin/button'; @customElement('cxl-dashboard-team-header') -export class CxlDashboardTeamHeader extends LitElement { +export class CxlDashboardTeamHeaderElement extends LitElement { static get styles() { return [cxlDashboardTeamHeaderStyles]; } 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 1d5a6015a..56107b118 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js @@ -7,7 +7,7 @@ import '@conversionxl/cxl-lumo-styles'; import CXLDashboardTeamStatsStyles from '../styles/cxl-dashboard-team-stats-css.js'; @customElement('cxl-dashboard-team-stats') -export class CxlDashboardTeamStats extends LitElement { +export class CxlDashboardTeamStatsElement extends LitElement { static get styles() { return [CXLDashboardTeamStatsStyles]; } diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js index 93bf7ecbd..c62791bde 100644 --- a/packages/cxl-ui/src/index-core.js +++ b/packages/cxl-ui/src/index-core.js @@ -24,6 +24,8 @@ export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js' export { CXLDashboardHeaderElement } from './components/cxl-dashboard-header.js'; export { CxlDashboardSectionElement } from './components/cxl-dashboard-section.js'; export { CXLDashboardNotificationElement } from './components/cxl-dashboard-notification.js'; +export { CxlDashboardTeamHeaderElement } from './components/cxl-dashboard-team-header.js'; +export { CxlDashboardTeamStatsElement } from './components/cxl-dashboard-team-stats.js'; export { CXLFeaturedCourseCardElement } from './components/cxl-featured-course-card.js'; export { CXLLightCardElement } from './components/cxl-light-card.js'; export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js'; From 6d2b63e96255ce5b93f48fe52effcc22c56b0eb1 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Tue, 7 Nov 2023 10:33:19 -0300 Subject: [PATCH 4/8] feat(cxl-ui): team dashboard - CTA links in header and stats components https://app.clickup.com/t/86ayd0hrw --- .../src/components/cxl-dashboard-team-header.js | 12 ++++++++---- .../src/components/cxl-dashboard-team-stats.js | 6 ++++-- .../cxl-dashboard-team-header.stories.js | 3 ++- .../cxl-team-dashboard/cxl-team-dashboard.stories.js | 7 ++++++- .../cxl-ui/cxl-team-dashboard/header-template.js | 8 +++++--- .../cxl-ui/cxl-team-dashboard/stats-template.js | 2 +- 6 files changed, 26 insertions(+), 12 deletions(-) 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..5b22cb696 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,11 @@ export class CxlDashboardTeamHeaderElement extends LitElement { return [cxlDashboardTeamHeaderStyles]; } - @property({ type: String }) name = ''; + @property({ type: String, attribute: 'team-name' }) teamName = ''; + + @property({ type: String, attribute: 'invite-url' }) inviteURL = ''; + + @property({ type: String, attribute: 'settings-url' }) settingsURL = ''; @property({ type: Boolean }) multiple = false; @@ -26,16 +30,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..e3acd7929 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: String, attribute: 'manage-roadmaps-url' }) manageRoadmapsURL = ''; + render() { return html`

Team progress & stats

- + Manage team roadmaps @@ -35,7 +37,7 @@ export class CxlDashboardTeamStatsElement extends LitElement {

${100 * this.progress}% complete

- +
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 })}
 `; From c05e8d75f1673575d0d75eb60195ce8bc9c87453 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Thu, 9 Nov 2023 11:05:13 -0300 Subject: [PATCH 5/8] feat(cxl-ui): prevent unresponsive slotted content from stretching container --- packages/cxl-ui/scss/cxl-dashboard-team-header.scss | 1 + packages/cxl-ui/scss/cxl-dashboard-team-stats.scss | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss index ba91ac82a..9934774a1 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss @@ -10,6 +10,7 @@ .container { position: relative; + box-sizing: border-box; width: 100%; max-width: var(--cxl-content-max-width-wide); padding: var(--lumo-space-l) var(--lumo-space-m); diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss index c133bd8c8..d2afd5561 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss @@ -8,6 +8,7 @@ .container { position: relative; + box-sizing: border-box; display: flex; flex-direction: column; gap: calc(2 * var(--lumo-space-m)); @@ -54,7 +55,7 @@ justify-content: space-between; .progress { - min-width: 320px; + min-width: 280px; } .progress-subtitle { From b85d24add45c4c8b2a7e617ad094565dde313f5d Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Mon, 13 Nov 2023 22:31:52 -0300 Subject: [PATCH 6/8] fix(cxl-ui): cxl-stats layout for team dashboard --- packages/cxl-ui/scss/cxl-dashboard-team-header.scss | 5 ++++- packages/cxl-ui/scss/cxl-dashboard-team-stats.scss | 6 +++++- packages/cxl-ui/scss/cxl-stats.scss | 10 +++------- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss index 9934774a1..0ebbb21b8 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss @@ -21,7 +21,10 @@ @media #{mq.$small} { display: flex; justify-content: space-between; - padding: var(--lumo-space-l) 0; + } + + @media #{mq.$large} { + padding: var(--lumo-space-xl) 0; } } diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss index d2afd5561..6bbe866d5 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss @@ -20,10 +20,13 @@ @include mixins.pesudo-element-full-width(var(--cxl-color-light-gray)); @media #{mq.$small} { - padding: var(--lumo-space-xl) 0; padding-bottom: calc(var(--lumo-space-xl) + var(--lumo-space-l)); } + @media #{mq.$large} { + padding: var(--lumo-space-xl) 0; + } + header { display: flex; justify-content: space-between; @@ -53,6 +56,7 @@ display: flex; flex-direction: column-reverse; justify-content: space-between; + gap: var(--lumo-space-l); .progress { min-width: 280px; diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss index 3c3f10106..7624244ab 100644 --- a/packages/cxl-ui/scss/cxl-stats.scss +++ b/packages/cxl-ui/scss/cxl-stats.scss @@ -4,23 +4,19 @@ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lumo-space-m); - padding: var(--lumo-space-xl) var(--lumo-space-m) var(--lumo-space-m); - - @media #{mq.$small} { - padding: var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l); - } @media #{mq.$medium} { - grid-template-columns: repeat(4, 1fr); + display: flex; } } :host([theme~="cxl-stats-dashboard-header"]) { - margin-top: var(--lumo-space-m); padding: 0; + margin-top: var(--lumo-space-m); border: 0; @media #{mq.$medium} { + padding-top: var(--lumo-space-s); margin-top: 0; gap: var(--lumo-space-l); } From a3d0fe285163aa172455e0aff03732628ce7b772 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Tue, 14 Nov 2023 16:42:27 -0300 Subject: [PATCH 7/8] feat(cxl-ui): add cxl-section-dashboard-team-header theme to cxl-section --- packages/cxl-ui/scss/cxl-section.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss index f055254ab..ddad0ae23 100644 --- a/packages/cxl-ui/scss/cxl-section.scss +++ b/packages/cxl-ui/scss/cxl-section.scss @@ -1,9 +1,16 @@ @use "~@conversionxl/cxl-lumo-styles/scss/mixins"; +@use "~@conversionxl/cxl-lumo-styles/scss/mq"; :host { display: block; } +:host([theme~="cxl-section-dashboard-team-content"]) { + @media #{mq.$large} { + --cxl-wrap-padding: 0; + } +} + /** * Avoid margin collapse with background. */ From 340684f7a00a7baaeae7769c94437b3a8cfd8fc6 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Tue, 14 Nov 2023 16:42:41 -0300 Subject: [PATCH 8/8] fix(cxl-ui): cxl-dashboard-team-stats use integer for complete percentage --- packages/cxl-ui/src/components/cxl-dashboard-team-stats.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e3acd7929..416d6cba5 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js +++ b/packages/cxl-ui/src/components/cxl-dashboard-team-stats.js @@ -34,7 +34,7 @@ export class CxlDashboardTeamStatsElement extends LitElement {
Team roadmap progress -

${100 * this.progress}% complete

+

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