From f430ec6761ffc2620455942211cecbc8f4b7f9f9 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 9 Jan 2025 13:15:16 +0100 Subject: [PATCH] feat(sbb-container, sbb-sticky-bar): add new color variants --- .../container/container/container.scss | 16 ++++ .../container/container/container.stories.ts | 55 ++++++++++--- src/elements/container/container/container.ts | 8 +- .../container/container.visual.spec.ts | 2 +- src/elements/container/container/readme.md | 23 ++++-- src/elements/container/sticky-bar/readme.md | 9 ++- .../container/sticky-bar/sticky-bar.scss | 8 ++ .../sticky-bar/sticky-bar.stories.ts | 81 ++++++++++++++++--- .../container/sticky-bar/sticky-bar.ts | 7 +- .../sticky-bar/sticky-bar.visual.spec.ts | 2 +- 10 files changed, 174 insertions(+), 37 deletions(-) diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index 0950dc6905..a7a555d52f 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -5,6 +5,7 @@ :host { --sbb-container-background-border-radius: 0; + --sbb-container-color: inherit; display: block; } @@ -17,6 +18,20 @@ --sbb-container-background-color: var(--sbb-color-milk); } +:host([color='midnight']), +:host([color='charcoal']) { + --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); + --sbb-container-color: white; +} + +:host([color='midnight']) { + --sbb-container-background-color: var(--sbb-color-midnight); +} + +:host([color='charcoal']) { + --sbb-container-background-color: var(--sbb-color-charcoal); +} + :host([data-slot-names~='image']) { --sbb-container-background-color: transparent; --sbb-container-padding: var(--sbb-spacing-responsive-xxl); @@ -37,6 +52,7 @@ } .sbb-container { + color: var(--sbb-container-color); background-color: var(--sbb-container-background-color); padding: var(--sbb-container-padding); diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts index c27c5cbba7..6fd6bc02ae 100644 --- a/src/elements/container/container/container.stories.ts +++ b/src/elements/container/container/container.stories.ts @@ -13,14 +13,22 @@ import './container.js'; import readme from './readme.md?raw'; -const containerContent = (title: string, last = false): TemplateResult => html` - ${title} +const containerContent = (title: string, isDark: boolean, last = false): TemplateResult => html` + ${title}

The container component will give its content the correct spacing.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. + ${isDark + ? html` + In "midnight" and "charcoal" variants the slotted text has + "white" color; however, you have to manually set the + "negative" property on sbb-components when needed. + ` + : html` + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + `}

See more @@ -44,7 +52,7 @@ const color: InputType = { control: { type: 'select', }, - options: ['white', 'transparent', 'milk'], + options: ['white', 'transparent', 'milk', 'midnight', 'charcoal'], }; const expanded: InputType = { @@ -79,10 +87,15 @@ const defaultArgs: Args = { 'image-src': undefined, }; +function isDark(colorArg: string): boolean { + return colorArg === color.options![3] || colorArg === color.options![4]; +} + const DefaultTemplate = (args: Args): TemplateResult => html` - ${containerContent('Example title')} ${containerContent('Another one')} - ${containerContent('And another one', true)} + ${containerContent('Example title', isDark(args.color))} + ${containerContent('Another one', isDark(args.color))} + ${containerContent('And another one', isDark(args.color), true)} `; @@ -131,6 +144,18 @@ export const Milk: StoryObj = { args: { ...defaultArgs, color: color.options![2] }, }; +export const Midnight: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![3] }, +}; + +export const Charcoal: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![4] }, +}; + export const BackgroundImage: StoryObj = { render: BackgroundImageTemplate, argTypes: defaultArgTypes, @@ -152,6 +177,18 @@ export const MilkBackgroundExpanded: StoryObj = { args: { ...defaultArgs, color: color.options![2], 'background-expanded': true }, }; +export const MidnightBackgroundExpanded: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![3], 'background-expanded': true }, +}; + +export const CharcoalBackgroundExpanded: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![4], 'background-expanded': true }, +}; + const meta: Meta = { parameters: { docs: { diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts index 1b59cfb468..81034004c3 100644 --- a/src/elements/container/container/container.ts +++ b/src/elements/container/container/container.ts @@ -23,7 +23,6 @@ export @slotState() class SbbContainerElement extends LitElement { public static override styles: CSSResultGroup = style; - /** Whether the container is expanded. */ @forceType() @property({ type: Boolean, reflect: true }) @@ -35,7 +34,12 @@ class SbbContainerElement extends LitElement { public accessor backgroundExpanded: boolean = false; /** Color of the container, like transparent, white etc. */ - @property({ reflect: true }) public accessor color: 'transparent' | 'white' | 'milk' = 'white'; + @property({ reflect: true }) public accessor color: + | 'transparent' + | 'white' + | 'milk' + | 'midnight' + | 'charcoal' = 'white'; protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts index da75e666c8..4389fc27f5 100644 --- a/src/elements/container/container/container.visual.spec.ts +++ b/src/elements/container/container/container.visual.spec.ts @@ -20,7 +20,7 @@ const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-imag const imageBase64 = await loadAssetAsBase64(imageUrl); describe(`sbb-container`, () => { - const colorCases = ['transparent', 'white', 'milk']; + const colorCases = ['transparent', 'white', 'milk', 'midnight', 'charcoal']; const backgroundExpandedCases = [false, true]; diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md index 3bb1543a81..6028614562 100644 --- a/src/elements/container/container/readme.md +++ b/src/elements/container/container/readme.md @@ -36,23 +36,32 @@ Optionally, you can add an overlapping `sbb-chip-label` by wrapping the `sbb-ima ## Style -By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs). Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout. +By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs). +Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout. Spacing options are applied to all the container's content, including the `sbb-sticky-bar`. -The component has also four color variants that can be set using the `color` property (default: `white`). + +The component has also five color variants that can be set using the `color` property (default: `white`). +In `midnight` and `charcoal` variants, the slotted content text color and the focus outline color change to white, +but it's on the consumers to correctly set the `negative` property on slotted Lyne components, if needed. ```html ... + + + Title +

Text

+ ``` ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | ------------------------------------ | --------- | ------------------------------------------------------------------------------- | -| `backgroundExpanded` | `background-expanded` | public | `boolean` | `false` | Whether the background color is shown on full container width on large screens. | -| `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | ---------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------- | +| `backgroundExpanded` | `background-expanded` | public | `boolean` | `false` | Whether the background color is shown on full container width on large screens. | +| `color` | `color` | public | `'transparent' \| 'white' \| 'milk' \| 'midnight' \| 'charcoal'` | `'white'` | Color of the container, like transparent, white etc. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | ## Slots diff --git a/src/elements/container/sticky-bar/readme.md b/src/elements/container/sticky-bar/readme.md index a5ab85ff4b..9e49f1a142 100644 --- a/src/elements/container/sticky-bar/readme.md +++ b/src/elements/container/sticky-bar/readme.md @@ -29,15 +29,16 @@ The `sbb-sticky-bar` content is provided via an unnamed slot. ## Style The `sbb-sticky-bar` inherits its variant from the `sbb-container` it's placed in. -Optionally the user can set the `color` property on the `sbb-sticky-bar` in order to override the one inherited by the `sbb-container`. The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container. +Optionally the user can set the `color` property on the `sbb-sticky-bar` in order to override the one inherited by the `sbb-container`. +The color is only applied when the sticky bar is sticking, and will become transparent once it settles on the bottom of the container. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------- | --------- | ------- | --------------------------- | ------- | ---------------------------------------------------- | -| `color` | `color` | public | `'white' \| 'milk' \| null` | `null` | Color of the container, like transparent, white etc. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------- | --------- | ------- | ------------------------------------------------------- | ------- | ---------------------------------------------------- | +| `color` | `color` | public | `'white' \| 'milk' \| 'midnight' \| 'charcoal' \| null` | `null` | Color of the container, like transparent, white etc. | ## Methods diff --git a/src/elements/container/sticky-bar/sticky-bar.scss b/src/elements/container/sticky-bar/sticky-bar.scss index be3b7b135b..938ee3aafe 100644 --- a/src/elements/container/sticky-bar/sticky-bar.scss +++ b/src/elements/container/sticky-bar/sticky-bar.scss @@ -61,6 +61,14 @@ $intersector-overlapping: 1px; --sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk); } +:host([data-sticking]:not([data-state='unsticky'])[color='midnight']) { + --sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight); +} + +:host([data-sticking]:not([data-state='unsticky'])[color='charcoal']) { + --sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal); +} + :host( :is( [data-sticking]:is([data-slide-vertically], [data-state='sticking'], [data-state='unsticking']), diff --git a/src/elements/container/sticky-bar/sticky-bar.stories.ts b/src/elements/container/sticky-bar/sticky-bar.stories.ts index b03008d908..7c1a9f3375 100644 --- a/src/elements/container/sticky-bar/sticky-bar.stories.ts +++ b/src/elements/container/sticky-bar/sticky-bar.stories.ts @@ -22,7 +22,7 @@ const containerColor: InputType = { table: { category: 'Container', }, - options: ['transparent', 'white', 'milk'], + options: ['transparent', 'white', 'milk', 'midnight', 'charcoal'], }; const containerExpanded: InputType = { @@ -50,7 +50,7 @@ const color: InputType = { table: { category: 'Sticky Bar', }, - options: ['unset', 'white', 'milk'], + options: ['unset', 'white', 'milk', 'midnight', 'charcoal'], }; const defaultArgTypes: ArgTypes = { @@ -86,8 +86,12 @@ const actionGroup = (): TemplateResult => html` `; -const containerContent = (title: string): TemplateResult => html` - ${title} +function isDark(colorArg: string): boolean { + return colorArg === containerColor.options![3] || colorArg === containerColor.options![4]; +} + +const containerContent = (title: string, isDark: boolean): TemplateResult => html` + ${title}

The container component will give its content the correct spacing.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut @@ -114,9 +118,10 @@ const DefaultTemplate = ({ ?expanded=${containerExpanded} ?background-expanded=${containerBackgroundExpanded} > - ${containerContent('Example title')} ${containerContent('Another one')} - ${containerContent('And another one')} ${containerContent('And a last one')} - + ${containerContent('Example title', isDark(containerColor))} + ${containerContent('Another one', isDark(containerColor))} + ${containerContent('And another one', isDark(containerColor))} + ${containerContent('And a last one', isDark(containerColor))} ${actionGroup()} `; @@ -132,7 +137,7 @@ const ShortTemplate = ({ ?expanded=${containerExpanded} ?background-expanded=${containerBackgroundExpanded} > - ${containerContent('Example title')} + ${containerContent('Example title', isDark(containerColor))} ${actionGroup()} `; @@ -148,8 +153,10 @@ const WithContentAfterTemplate = ({ ?expanded=${containerExpanded} ?background-expanded=${containerBackgroundExpanded} > - ${containerContent('Example title')} ${containerContent('Another one')} - ${containerContent('And another one')} ${containerContent('And a last one')} + ${containerContent('Example title', isDark(containerColor))} + ${containerContent('Another one', isDark(containerColor))} + ${containerContent('And another one', isDark(containerColor))} + ${containerContent('And a last one', isDark(containerColor))}

- ${containerContent('Content after first container')} ${containerContent('Another one')} + ${containerContent('Content after first container', isDark(containerColor))} + ${containerContent('Another one', isDark(containerColor))}
`; @@ -186,10 +194,11 @@ export const ShortContent: StoryObj = { argTypes: defaultArgTypes, args: defaultArgs, }; + export const ShortContentMilk: StoryObj = { render: ShortTemplate, argTypes: defaultArgTypes, - args: { ...defaultArgs, containerColor: 'milk' }, + args: { ...defaultArgs, containerColor: containerColor.options![2] }, }; export const Default: StoryObj = { @@ -216,6 +225,18 @@ export const Milk: StoryObj = { args: { ...defaultArgs, color: color.options![2] }, }; +export const Midnight: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![3] }, +}; + +export const Charcoal: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![4] }, +}; + export const WithContentAfter: StoryObj = { render: WithContentAfterTemplate, argTypes: defaultArgTypes, @@ -240,6 +261,42 @@ export const MilkContainerBackgroundExpanded: StoryObj = { args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true }, }; +export const MidnightContainer: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![3] }, +}; + +export const MidnightContainerCharcoalStickyBar: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![3], color: color.options![4] }, +}; + +export const MidnightContainerBackgroundExpanded: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![3], containerBackgroundExpanded: true }, +}; + +export const CharcoalContainer: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![4] }, +}; + +export const CharcoalContainerMidnightStickyBar: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![4], color: color.options![3] }, +}; + +export const CharcoalContainerBackgroundExpanded: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, containerColor: color.options![4], containerBackgroundExpanded: true }, +}; + export const ControlStickyState: StoryObj = { render: WithContentAfterTemplate, argTypes: defaultArgTypes, diff --git a/src/elements/container/sticky-bar/sticky-bar.ts b/src/elements/container/sticky-bar/sticky-bar.ts index b87d1743ed..f65624491c 100644 --- a/src/elements/container/sticky-bar/sticky-bar.ts +++ b/src/elements/container/sticky-bar/sticky-bar.ts @@ -48,7 +48,12 @@ class SbbStickyBarElement extends SbbUpdateSchedulerMixin(LitElement) { } as const; /** Color of the container, like transparent, white etc. */ - @property({ reflect: true }) public accessor color: 'white' | 'milk' | null = null; + @property({ reflect: true }) public accessor color: + | 'white' + | 'milk' + | 'midnight' + | 'charcoal' + | null = null; /** The state of the component. */ private set _state(state: StickyState) { diff --git a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts index 04499a59d2..baeefb7f5f 100644 --- a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts +++ b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts @@ -21,7 +21,7 @@ import '../../title.js'; describe(`sbb-sticky-bar`, () => { const cases = { - color: [undefined, 'white', 'milk'], + color: [undefined, 'white', 'milk', 'midnight', 'charcoal'], containerExpanded: [false, true], scrolled: [false, true], };