feat(sbb-container): first implementation

src/components/container/container/container.e2e.ts

@@ -0,0 +1,16 @@
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { SbbContainerElement } from './container';
+
+describe('sbb-container', () => {
+  let element: SbbContainerElement;
+
+  beforeEach(async () => {
+    element = await fixture(html`<sbb-container></sbb-container>`);
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbContainerElement);
+  });
+});

src/components/container/container/container.scss

@@ -0,0 +1,26 @@
+@use '../../core/styles' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+:host([color='white']) {
+  --sbb-container-background-color: var(--sbb-color-white-default);
+}
+
+:host([color='milk']) {
+  --sbb-container-background-color: var(--sbb-color-milk-default);
+}
+
+.sbb-container {
+  background-color: var(--sbb-container-background-color, transparent);
+  contain: layout;
+
+  :host(:not([expanded])) & {
+    @include sbb.page-spacing;
+  }
+
+  :host([expanded]) & {
+    @include sbb.page-spacing-expanded;
+  }
+}

src/components/container/container/container.spec.ts

@@ -0,0 +1,20 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './container';
+
+describe('sbb-container', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-container></sbb-container>`);
+
+    expect(root).dom.to.be.equal(`<sbb-container color="white"></sbb-container>`);
+
+    expect(root).shadowDom.to.equal(
+      `<div class="sbb-container">
+        <slot>
+        </slot>
+      </div>
+      <slot name="sticky-bar"></slot>
+      `,
+    );
+  });
+});

src/components/container/container/container.stories.ts

@@ -0,0 +1,94 @@
+import type { InputType } from '@storybook/types';
+import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components';
+import { type TemplateResult, html, nothing } from 'lit';
+
+import { sbbSpread } from '../../core/dom';
+
+import '../../button';
+import '../../title';
+import './container';
+
+import readme from './readme.md?raw';
+
+const containerContent = (title: string, last = false): TemplateResult => html`
+  <sbb-title level="4">${title}</sbb-title>
+  <p class="sbb-text-s">The container component will give its content the correct spacing.</p>
+  <p class="sbb-text-s">
+    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.
+  </p>
+  <sbb-button variant="secondary" style=${last ? 'margin-block-end: 3rem;' : nothing}
+    >See more</sbb-button
+  >
+`;
+
+const expanded: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
+const color: InputType = {
+  control: {
+    type: 'select',
+  },
+  options: ['white', 'transparent', 'milk'],
+};
+
+const defaultArgTypes: ArgTypes = {
+  expanded,
+  color,
+};
+
+const defaultArgs: Args = {
+  expanded: false,
+  color: color.options[0],
+};
+
+const DefaultTemplate = ({ color, ...args }: Args): TemplateResult => html`
+  <sbb-container ${sbbSpread(args)} color=${color}>
+    ${containerContent('Example title')} ${containerContent('Another one')}
+    ${containerContent('And another one', true)}
+  </sbb-container>
+`;
+
+export const Default: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs },
+};
+
+export const Transparent: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options[1] },
+};
+
+export const Milk: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, color: color.options[2] },
+};
+
+export const Expanded: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, expanded: true },
+};
+
+const meta: Meta = {
+  parameters: {
+    backgrounds: {
+      disable: true,
+    },
+    docs: {
+      extractComponentDescription: () => readme,
+    },
+    layout: 'fullscreen',
+  },
+  title: 'components/sbb-container/sbb-container',
+};
+
+export default meta;

src/components/container/container/container.ts

@@ -0,0 +1,61 @@
+import {
+  type CSSResultGroup,
+  html,
+  LitElement,
+  type PropertyValueMap,
+  type TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { toggleDatasetEntry } from '../../core/dom';
+
+import style from './container.scss?lit&inline';
+
+/**
+ * It displays its content with the default page spacing.
+ *
+ * @slot - Use the unnamed slot to add anything to the container.
+ * @slot sticky-bar - The slot used by the sbb-sticky-bar component.
+ */
+@customElement('sbb-container')
+export class SbbContainerElement extends LitElement {
+  public static override styles: CSSResultGroup = style;
+
+  /** Whether the container is expanded. */
+  @property({ type: Boolean, reflect: true }) public expanded = 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) {
+      toggleDatasetEntry(stickyBar, 'expanded', this.expanded);
+      toggleDatasetEntry(stickyBar, 'transparent', this.color === 'transparent');
+    }
+  }
+
+  protected override willUpdate(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
+  ): void {
+    if (_changedProperties.has('expanded') || _changedProperties.has('color')) {
+      this._updateStickyBar();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="sbb-container">
+        <slot></slot>
+      </div>
+      <slot name="sticky-bar"></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'sbb-container': SbbContainerElement;
+  }
+}

src/components/container/container/index.ts

@@ -0,0 +1 @@
+export * from './container';

src/components/container/container/readme.md

@@ -0,0 +1,41 @@
+The `sbb-container` is a component that displays its content with the default page spacing. It also supports the slotting of a `sbb-sticky-bar`.
+
+```html
+<sbb-container>
+  <!-- Any other kind of content. -->
+  ...
+
+  <!-- Sticky bar should go last. -->
+  <sbb-sticky-bar> ... </sbb-sticky-bar>
+</sbb-container>
+```
+
+## Slots
+
+The `sbb-container` content is provided via an unnamed slot.
+
+## 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.
+Spacing options are applied to all of 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`).
+
+```html
+<sbb-container expanded variant="milk"> ... </sbb-container>
+```
+
+<!-- Auto Generated Below -->
+
+## 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. |
+
+## Slots
+
+| Name         | Description                                            |
+| ------------ | ------------------------------------------------------ |
+|              | Use the unnamed slot to add anything to the container. |
+| `sticky-bar` | The slot used by the sbb-sticky-bar component.         |

src/components/container/index.ts

@@ -0,0 +1,2 @@
+export * from './container';
+export * from './sticky-bar';

src/components/container/sticky-bar/index.ts

@@ -0,0 +1 @@
+export * from './sticky-bar';

src/components/container/sticky-bar/readme.md

@@ -0,0 +1,34 @@
+The `sbb-sticky-bar` is a component meant to be slotted inside a `sbb-container` component.
+It is displayed with sticky positioning at the bottom of the container that contains it.
+
+```html
+<sbb-container>
+  <sbb-sticky-bar>
+    <!-- Sticky bar content. -->
+  </sbb-sticky-bar>
+</sbb-container>
+```
+
+## Slots
+
+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.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name               | Attribute           | Privacy | Type                             | Default | Description                                          |
+| ------------------ | ------------------- | ------- | -------------------------------- | ------- | ---------------------------------------------------- |
+| `color`            | `color`             | public  | `'white' \| 'milk' \| undefined` |         | Color of the container, like transparent, white etc. |
+| `disableAnimation` | `disable-animation` | public  | `boolean`                        | `false` | Whether the animation is enabled.                    |
+
+## Slots
+
+| Name | Description                                            |
+| ---- | ------------------------------------------------------ |
+|      | Use the unnamed slot to add content to the sticky bar. |

src/components/container/sticky-bar/sticky-bar.e2e.ts

@@ -0,0 +1,88 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { setViewport } from '@web/test-runner-commands';
+import { html } from 'lit/static-html.js';
+
+import { waitForCondition, waitForLitRender } from '../../core/testing';
+import type { SbbContainerElement } from '../container';
+
+import { SbbStickyBarElement } from './sticky-bar';
+
+import '../container';
+
+describe('sbb-sticky-bar', () => {
+  let container: SbbContainerElement;
+  let stickyBar: SbbStickyBarElement;
+  const getIsSticking = (): boolean => {
+    return stickyBar.hasAttribute('data-sticking');
+  };
+
+  beforeEach(async () => {
+    await setViewport({ width: 320, height: 500 });
+    container = await fixture(html`
+      <sbb-container>
+        ${[...Array(15).keys()].map(
+          (value) =>
+            html` <div>
+              <p>Situation ${value}</p>
+            </div>`,
+        )}
+        <sbb-sticky-bar></sbb-sticky-bar>
+      </sbb-container>
+    `);
+    stickyBar = container.querySelector('sbb-sticky-bar')!;
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(stickyBar, SbbStickyBarElement);
+  });
+
+  it('stops sticking when scrolling to bottom', async () => {
+    await waitForCondition(async () => getIsSticking());
+    expect(getIsSticking()).to.equal(true);
+
+    window.scrollTo(0, 400);
+
+    await waitForCondition(async () => !getIsSticking());
+
+    expect(getIsSticking()).to.equal(false);
+  });
+
+  it('is settled when content is not long enough', async () => {
+    await setViewport({ width: 320, height: 600 });
+    container = await fixture(html`
+      <sbb-container>
+        <button>Container button</button>
+        <sbb-sticky-bar>
+          <button>Sticky bar button</button>
+        </sbb-sticky-bar>
+      </sbb-container>
+    `);
+    stickyBar = container.querySelector('sbb-sticky-bar')!;
+
+    await waitForCondition(async () => !getIsSticking());
+
+    expect(getIsSticking()).to.equal(false);
+  });
+
+  it('renders with expanded layout', async () => {
+    container = await fixture(html`
+      <sbb-container expanded>
+        <button>Container button</button>
+        <sbb-sticky-bar>
+          <button>Sticky bar button</button>
+        </sbb-sticky-bar>
+      </sbb-container>
+    `);
+    stickyBar = container.querySelector('sbb-sticky-bar')!;
+
+    expect(stickyBar).to.have.attribute('data-expanded');
+  });
+
+  it('expands the sticky-bar when container is expanded', async () => {
+    container.expanded = true;
+
+    await waitForLitRender(container);
+
+    expect(stickyBar).to.have.attribute('data-expanded');
+  });
+});