): 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..17e4d09cee 100644
--- a/src/elements/container/container/container.visual.spec.ts
+++ b/src/elements/container/container/container.visual.spec.ts
@@ -19,8 +19,12 @@ import './container.js';
const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png');
const imageBase64 = await loadAssetAsBase64(imageUrl);
+function isDark(color: string): boolean {
+ return color === 'midnight' || color === 'charcoal';
+}
+
describe(`sbb-container`, () => {
- const colorCases = ['transparent', 'white', 'milk'];
+ const colorCases = ['transparent', 'white', 'milk', 'midnight', 'charcoal'];
const backgroundExpandedCases = [false, true];
@@ -57,8 +61,8 @@ describe(`sbb-container`, () => {
},
];
- const containerContent = (): TemplateResult => html`
- Example title
+ const containerContent = (color?: string): TemplateResult => html`
+ Example 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
@@ -66,7 +70,9 @@ describe(`sbb-container`, () => {
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
+ See more
`;
const backgroundImageContent = html`
@@ -85,7 +91,7 @@ describe(`sbb-container`, () => {
`color=${color}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
- html`${containerContent()}`,
+ html`${containerContent(color)}`,
wrapperStyles,
);
}),
diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md
index 3bb1543a81..1b0ec96f22 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 up to the consumer 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..6c3db36ad4 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,21 +50,21 @@ const color: InputType = {
table: {
category: 'Sticky Bar',
},
- options: ['unset', 'white', 'milk'],
+ options: ['unset', 'white', 'milk', 'midnight', 'charcoal'],
};
const defaultArgTypes: ArgTypes = {
+ color,
containerColor,
containerExpanded,
containerBackgroundExpanded,
- color,
};
const defaultArgs: Args = {
+ color: color.options![0],
containerColor: containerColor.options![0],
containerExpanded: false,
containerBackgroundExpanded: false,
- color: color.options![0],
};
const actionGroup = (): TemplateResult => html`
@@ -86,8 +86,12 @@ const actionGroup = (): TemplateResult => html`
`;
-const containerContent = (title: string): TemplateResult => html`
- ${title}
+function isDark(colorArg: string): boolean {
+ return colorArg === 'midnight' || colorArg === 'charcoal';
+}
+
+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))}
`;
@@ -181,63 +189,88 @@ export const Standalone: StoryObj = {
render: Template,
};
-export const ShortContent: StoryObj = {
- render: ShortTemplate,
+export const Default: StoryObj = {
+ render: DefaultTemplate,
argTypes: defaultArgTypes,
args: defaultArgs,
};
-export const ShortContentMilk: StoryObj = {
- render: ShortTemplate,
+
+export const White: StoryObj = {
+ render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerColor: 'milk' },
+ args: { ...defaultArgs, color: color.options![1] },
};
-export const Default: StoryObj = {
+export const WhiteStickyBarWithMilkContainer: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: defaultArgs,
+ args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
};
-export const Expanded: StoryObj = {
+export const WhiteWithContainerExpanded: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerExpanded: true },
+ args: { ...defaultArgs, color: color.options![1], containerExpanded: true },
};
-export const White: StoryObj = {
+export const Milk: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, color: color.options![1] },
+ args: { ...defaultArgs, containerColor: color.options![2] },
};
-export const Milk: StoryObj = {
+export const MilkStickyBarWithWhiteContainer: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, color: color.options![2] },
+ args: { ...defaultArgs, containerColor: color.options![1], color: color.options![2] },
};
-export const WithContentAfter: StoryObj = {
- render: WithContentAfterTemplate,
+export const MilkWithContainerBackgroundExpanded: StoryObj = {
+ render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerColor: 'milk', color: 'white' },
+ args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true },
};
-export const MilkContainer: StoryObj = {
+export const Midnight: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerColor: color.options![2] },
+ args: { ...defaultArgs, containerColor: color.options![3] },
};
-export const MilkContainerWhiteStickyBar: StoryObj = {
+export const MidnightWithContainerBackgroundExpanded: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerColor: color.options![2], color: color.options![1] },
+ args: { ...defaultArgs, containerColor: color.options![3], containerBackgroundExpanded: true },
};
-export const MilkContainerBackgroundExpanded: StoryObj = {
+export const Charcoal: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
- args: { ...defaultArgs, containerColor: color.options![2], containerBackgroundExpanded: true },
+ args: { ...defaultArgs, containerColor: color.options![4] },
+};
+
+export const CharcoalWithContainerBackgroundExpanded: StoryObj = {
+ render: DefaultTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, containerColor: color.options![4], containerBackgroundExpanded: true },
+};
+
+export const ShortContent: StoryObj = {
+ render: ShortTemplate,
+ argTypes: defaultArgTypes,
+ args: defaultArgs,
+};
+
+export const ShortContentMilk: StoryObj = {
+ render: ShortTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, containerColor: containerColor.options![2] },
+};
+
+export const WithContentAfter: StoryObj = {
+ render: WithContentAfterTemplate,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, containerColor: 'milk', color: 'white' },
};
export const ControlStickyState: StoryObj = {
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..ee16cfd202 100644
--- a/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
+++ b/src/elements/container/sticky-bar/sticky-bar.visual.spec.ts
@@ -19,27 +19,39 @@ import '../../button.js';
import '../../link.js';
import '../../title.js';
+function isDark(color: string): boolean {
+ return color === 'midnight' || color === 'charcoal';
+}
+
describe(`sbb-sticky-bar`, () => {
const cases = {
- color: [undefined, 'white', 'milk'],
+ color: [undefined, 'white', 'milk', 'midnight', 'charcoal'],
containerExpanded: [false, true],
scrolled: [false, true],
};
- const containerContent = (): TemplateResult => html`
- Example title
+ const containerContent = (color?: string): TemplateResult => html`
+ Example title
The container component will give its content the correct spacing.
-
+
See more
`;
- const actionGroup = (): TemplateResult => html`
+ const actionGroup = (color?: string): TemplateResult => html`
-
+
Link
- Confirm
+ Confirm
`;
@@ -67,7 +79,7 @@ describe(`sbb-sticky-bar`, () => {
});
it(
- visualDiffDefault.name,
+ '',
visualDiffDefault.with((setup) => {
setup.withSnapshotElement(root);
setup.withPostSetupAction(async () => {
@@ -80,6 +92,21 @@ describe(`sbb-sticky-bar`, () => {
);
});
+ for (const color of cases.color) {
+ it(
+ `container_color=${color}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ html`
+ ${containerContent(color)}
+ ${actionGroup(color)}
+ `,
+ { padding: '0' },
+ );
+ }),
+ );
+ }
+
it(
`unstick`,
visualDiffDefault.with(async (setup) => {