From 2854e8ef955f2860a7706f5ba1a2c2ff92cbf2e2 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Tue, 7 May 2024 11:55:01 +0200 Subject: [PATCH] feat(sbb-container): allow expanded background color (#2640) --- .../container/container/container.scss | 4 + .../container/container/container.stories.ts | 24 +++-- .../container/container/container.ts | 21 ++--- src/components/container/container/readme.md | 9 +- .../sticky-bar/sticky-bar.stories.ts | 89 ++++++++++++++----- 5 files changed, 105 insertions(+), 42 deletions(-) diff --git a/src/components/container/container/container.scss b/src/components/container/container/container.scss index 237a9848c2..5dc70625db 100644 --- a/src/components/container/container/container.scss +++ b/src/components/container/container/container.scss @@ -15,6 +15,10 @@ --sbb-container-background-color: var(--sbb-color-milk); } +:host(:not([expanded])[background-expanded]) { + background-color: var(--sbb-container-background-color); +} + .sbb-container { @include sbb.ignore-children-margin; diff --git a/src/components/container/container/container.stories.ts b/src/components/container/container/container.stories.ts index 853cdd1dd9..69aa82dd6e 100644 --- a/src/components/container/container/container.stories.ts +++ b/src/components/container/container/container.stories.ts @@ -24,27 +24,35 @@ const containerContent = (title: string, last = false): TemplateResult => html` > `; +const color: InputType = { + control: { + type: 'select', + }, + options: ['white', 'transparent', 'milk'], +}; + const expanded: InputType = { control: { type: 'boolean', }, }; -const color: InputType = { +const backgroundExpanded: InputType = { control: { - type: 'select', + type: 'boolean', }, - options: ['white', 'transparent', 'milk'], }; const defaultArgTypes: ArgTypes = { - expanded, color, + expanded, + 'background-expanded': backgroundExpanded, }; const defaultArgs: Args = { - expanded: false, color: color.options![0], + expanded: false, + 'background-expanded': false, }; const DefaultTemplate = (args: Args): TemplateResult => html` @@ -96,6 +104,12 @@ export const NestedContainer: StoryObj = { args: { ...defaultArgs, expanded: true }, }; +export const MilkBackgroundExpanded: StoryObj = { + render: DefaultTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, color: color.options![2], 'background-expanded': true }, +}; + const meta: Meta = { excludeStories: /^(NestedContainer)$/, parameters: { diff --git a/src/components/container/container/container.ts b/src/components/container/container/container.ts index 2e073b0afa..309386a7ff 100644 --- a/src/components/container/container/container.ts +++ b/src/components/container/container/container.ts @@ -2,7 +2,7 @@ import { type CSSResultGroup, html, LitElement, - type PropertyValueMap, + type PropertyValues, type TemplateResult, } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @@ -22,23 +22,18 @@ export class SbbContainerElement extends LitElement { /** Whether the container is expanded. */ @property({ type: Boolean, reflect: true }) public expanded = false; + /** Whether the background color is shown on full container width on large screens. */ + @property({ type: Boolean, reflect: true, attribute: 'background-expanded' }) + public backgroundExpanded = false; + /** Color of the container, like transparent, white etc. */ @property({ reflect: true }) public color: 'transparent' | 'white' | 'milk' = 'white'; - private _updateStickyBar(): void { - const stickyBar = this.querySelector?.('sbb-sticky-bar'); - if (stickyBar) { - stickyBar.toggleAttribute('data-expanded', this.expanded); - } - } - - protected override willUpdate( - changedProperties: PropertyValueMap | Map, - ): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); - if (changedProperties.has('expanded') || changedProperties.has('color')) { - this._updateStickyBar(); + if (changedProperties.has('expanded')) { + this.querySelector?.('sbb-sticky-bar')?.toggleAttribute('data-expanded', this.expanded); } } diff --git a/src/components/container/container/readme.md b/src/components/container/container/readme.md index b2a93e9d11..c95449a8c7 100644 --- a/src/components/container/container/readme.md +++ b/src/components/container/container/readme.md @@ -28,10 +28,11 @@ The component has also four color variants that can be set using the `color` pro ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | ------------------------------------ | --------- | ---------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | -| `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | ------------------------------------ | --------- | ------------------------------------------------------------------------------- | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | +| `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. | ## Slots diff --git a/src/components/container/sticky-bar/sticky-bar.stories.ts b/src/components/container/sticky-bar/sticky-bar.stories.ts index 451e4f5548..736a824ade 100644 --- a/src/components/container/sticky-bar/sticky-bar.stories.ts +++ b/src/components/container/sticky-bar/sticky-bar.stories.ts @@ -1,9 +1,9 @@ import type { InputType } from '@storybook/types'; -import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components'; +import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components'; import isChromatic from 'chromatic/isChromatic'; import { html, nothing, type TemplateResult } from 'lit'; -import { sbbSpread } from '../../../storybook/helpers/spread.js'; +import readme from './readme.md?raw'; import '../../action-group.js'; import '../../button/button.js'; @@ -11,10 +11,20 @@ import '../../button/secondary-button.js'; import '../../link.js'; import '../../title.js'; import '../container.js'; -import readme from './readme.md?raw'; import './sticky-bar.js'; -const expanded: InputType = { +const containerColor: InputType = { + name: 'color', + control: { + type: 'select', + }, + table: { + category: 'Container', + }, + options: ['transparent', 'white', 'milk'], +}; + +const containerExpanded: InputType = { control: { type: 'boolean', }, @@ -23,15 +33,13 @@ const expanded: InputType = { }, }; -const containerColor: InputType = { - name: 'color', +const containerBackgroundExpanded: InputType = { control: { - type: 'select', + type: 'boolean', }, table: { category: 'Container', }, - options: ['transparent', 'white', 'milk'], }; const color: InputType = { @@ -45,15 +53,17 @@ const color: InputType = { }; const defaultArgTypes: ArgTypes = { - expanded, - color, containerColor, + containerExpanded, + containerBackgroundExpanded, + color, }; const defaultArgs: Args = { - expanded: false, - color: color.options![0], containerColor: containerColor.options![0], + containerExpanded: false, + containerBackgroundExpanded: false, + color: color.options![0], }; const actionGroup = (): TemplateResult => html` @@ -98,8 +108,17 @@ const Template = (): TemplateResult => Example `; -const DefaultTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html` - +const DefaultTemplate = ({ + color, + containerExpanded, + containerColor, + containerBackgroundExpanded, +}: Args): TemplateResult => html` + ${containerContent('Example title')} ${containerContent('Another one')} ${containerContent('And another one')} ${containerContent('And a last one')} @@ -107,8 +126,17 @@ const DefaultTemplate = ({ color, containerColor, ...args }: Args): TemplateResu `; -const ShortTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html` - +const ShortTemplate = ({ + color, + containerExpanded, + containerColor, + containerBackgroundExpanded, +}: Args): TemplateResult => html` + ${isChromatic() ? containerContentChromatic('Example title') : containerContent('Example title')} @@ -117,10 +145,16 @@ const ShortTemplate = ({ color, containerColor, ...args }: Args): TemplateResult `; -const WithContentAfterTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html` +const WithContentAfterTemplate = ({ + color, + containerExpanded, + containerColor, + containerBackgroundExpanded, +}: Args): TemplateResult => html` ${containerContent('Example title')} ${containerContent('Another one')} @@ -133,10 +167,19 @@ const WithContentAfterTemplate = ({ color, containerColor, ...args }: Args): Tem ${actionGroup()} -