feat(sbb-container): allow expanded background color (#2640)

sbb-design-systems · May 7, 2024 · 2854e8e · 2854e8e
1 parent 924fa37
commit 2854e8e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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<any> | Map<PropertyKey, unknown>,
-  ): void {
+  protected override willUpdate(changedProperties: PropertyValues<this>): 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
@@ -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
@@ -1,20 +1,30 @@
 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';
 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,17 +108,35 @@ const Template = (): TemplateResult =>
     <sbb-secondary-button>Example</sbb-secondary-button>
   </sbb-sticky-bar>`;
 
-const DefaultTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
-  <sbb-container ${sbbSpread(args)} color=${containerColor}>
+const DefaultTemplate = ({
+  color,
+  containerExpanded,
+  containerColor,
+  containerBackgroundExpanded,
+}: Args): TemplateResult => html`
+  <sbb-container
+    color=${containerColor}
+    ?expanded=${containerExpanded}
+    ?background-expanded=${containerBackgroundExpanded}
+  >
     ${containerContent('Example title')} ${containerContent('Another one')}
     ${containerContent('And another one')} ${containerContent('And a last one')}
 
     <sbb-sticky-bar color=${color !== 'unset' ? color : nothing}> ${actionGroup()} </sbb-sticky-bar>
   </sbb-container>
 `;
 
-const ShortTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
-  <sbb-container ${sbbSpread(args)} color=${containerColor}>
+const ShortTemplate = ({
+  color,
+  containerExpanded,
+  containerColor,
+  containerBackgroundExpanded,
+}: Args): TemplateResult => html`
+  <sbb-container
+    color=${containerColor}
+    ?expanded=${containerExpanded}
+    ?background-expanded=${containerBackgroundExpanded}
+  >
     ${isChromatic()
       ? containerContentChromatic('Example title')
       : containerContent('Example title')}
@@ -117,10 +145,16 @@ const ShortTemplate = ({ color, containerColor, ...args }: Args): TemplateResult
   </sbb-container>
 `;
 
-const WithContentAfterTemplate = ({ color, containerColor, ...args }: Args): TemplateResult => html`
+const WithContentAfterTemplate = ({
+  color,
+  containerExpanded,
+  containerColor,
+  containerBackgroundExpanded,
+}: Args): TemplateResult => html`
   <sbb-container
-    ${sbbSpread(args)}
     color=${containerColor}
+    ?expanded=${containerExpanded}
+    ?background-expanded=${containerBackgroundExpanded}
     style=${isChromatic() ? 'max-height: 400px; overflow-y: scroll;' : nothing}
   >
     ${containerContent('Example title')} ${containerContent('Another one')}
@@ -133,10 +167,19 @@ const WithContentAfterTemplate = ({ color, containerColor, ...args }: Args): Tem
       ${actionGroup()}
     </sbb-sticky-bar>
   </sbb-container>
-  <sbb-container color=${containerColor} aria-hidden="true">
+  <sbb-container
+    color=${containerColor}
+    ?expanded=${containerExpanded}
+    ?background-expanded=${containerBackgroundExpanded}
+    aria-hidden="true"
+  >
     <div style="height: var(--sbb-spacing-responsive-l);"></div>
   </sbb-container>
-  <sbb-container color="white">
+  <sbb-container
+    color="white"
+    ?expanded=${containerExpanded}
+    ?background-expanded=${containerBackgroundExpanded}
+  >
     <div style="padding-block: 4rem;">
       ${containerContent('Content after first container')} ${containerContent('Another one')}
     </div>
@@ -200,6 +243,12 @@ export const MilkContainerWhiteStickyBar: StoryObj = {
   args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
 };
 
+export const MilkContainerBackgroundExpanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true },
+};
+
 const meta: Meta = {
   parameters: {
     docs: {