From cd60922f59af898f5875a3d6e9d378a1cf118080 Mon Sep 17 00:00:00 2001 From: Davide Mininni <101575400+DavideMininni-Fincons@users.noreply.github.com> Date: Thu, 12 Sep 2024 17:51:37 +0200 Subject: [PATCH] feat(sbb-header): introduce size s (#3047) --- .storybook/preview-head.html | 2 +- src/elements/core/styles/core.scss | 23 +++++++ src/elements/header/common/header-action.scss | 26 +++++--- .../header.snapshot.spec.snap.js | 4 +- src/elements/header/header/header.scss | 9 +++ src/elements/header/header/header.stories.ts | 61 +++++++++++++------ src/elements/header/header/header.ts | 5 +- .../header/header/header.visual.spec.ts | 50 +++++++++++++-- src/elements/header/header/readme.md | 57 ++++++++++++++--- src/elements/logo/logo.scss | 4 +- src/elements/logo/logo.visual.spec.ts | 37 +++++------ src/elements/signet/readme.md | 23 +++++-- src/elements/signet/signet.scss | 17 ++++++ src/elements/signet/signet.stories.ts | 8 ++- src/elements/signet/signet.ts | 33 +++++++--- src/elements/signet/signet.visual.spec.ts | 15 +++-- 16 files changed, 286 insertions(+), 88 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 8721ec8e0a..347ec33232 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -37,7 +37,7 @@ } } - @media screen and (width < 1023px) { + @media screen and (width < 1024px) { .sbb-header-spacer { display: none; } diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index f1c9bb6630..38ddec81fe 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -36,6 +36,10 @@ // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity); --sbb-border-radius-infinity: 10000000em; + &:has(sbb-header[size='s']) { + --sbb-header-height: #{functions.px-to-rem-build(52)}; + } + @include mediaqueries.mq($from: medium) { // Header --sbb-header-height: var(--sbb-spacing-fixed-24x); @@ -43,6 +47,10 @@ // Time Input --sbb-time-input-max-width: #{functions.px-to-rem-build(65)}; --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)}; + + &:has(sbb-header[size='s']) { + --sbb-header-height: var(--sbb-spacing-fixed-14x); + } } } } @@ -116,6 +124,21 @@ sbb-breadcrumb-group:not(:defined) { pointer-events: all; } +// Helper class for the application name and version in sbb-header. +.sbb-header-info { + @include typo.text-xs--regular; + + display: flex; + padding-inline: var(--sbb-spacing-fixed-4x); + gap: var(--sbb-spacing-fixed-1x); + align-items: baseline; + + strong + * { + font-size: var(--sbb-font-size-text-xxs); + color: var(--sbb-color-granite); + } +} + // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before. // Due to margin collapsing, the wrong paragraph space wins. // To prevent the mistakenly large gap, we reset the paragraph space. diff --git a/src/elements/header/common/header-action.scss b/src/elements/header/common/header-action.scss index ed7d523477..434c5e0a27 100644 --- a/src/elements/header/common/header-action.scss +++ b/src/elements/header/common/header-action.scss @@ -24,10 +24,15 @@ --sbb-header-action-background-inset: 0; --sbb-header-action-translate-y: 0; --sbb-header-action-gap: var(--sbb-spacing-fixed-2x); + --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small); // If expanded, move it left by left padding. // As result, the icon should be aligned with the left side of the page wrapper. - --sbb-header-first-item-margin-inline-start: calc(-1 * var(--sbb-header-action-padding-inline)); + --_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline)); + --sbb-header-first-item-icon-shift: #{sbb.px-to-rem-build(2)}; + --sbb-header-first-item-margin-inline-start: calc( + var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift) + ); @include sbb.if-forced-colors { --sbb-header-action-border-color: CanvasText; @@ -72,7 +77,10 @@ text-decoration: none; min-height: var(--sbb-header-action-min-height); min-width: var(--sbb-header-action-min-width); - padding-inline: var(--sbb-header-action-padding-inline); + padding-inline: var( + --sbb-header-action-padding-inline-zero, + var(--sbb-header-action-padding-inline) + ); cursor: pointer; user-select: none; outline: none; @@ -121,8 +129,8 @@ --sbb-icon-svg-stroke-color: currentcolor; --sbb-icon-svg-stroke-width: 1px; - min-width: var(--sbb-size-icon-ui-small); - min-height: var(--sbb-size-icon-ui-small); + min-width: var(--sbb-header-action-icon-dimension); + min-height: var(--sbb-header-action-icon-dimension); line-height: 0; } @@ -142,10 +150,12 @@ // the first element in the header and needs left offset correction (see sbb-header.scss). // To avoid duplicated css definitions, the value itself is assigned here in // sbb-header-button/sbb-header-link instead of sbb-header. - // - // Move it left by 12px in collapsed width. - --sbb-header-first-item-margin-inline-start: #{sbb.px-to-rem-build(-12)}; - --sbb-header-action-padding-inline: 0; + + // Move it left by padding of header action to the icon itself. + --_sbb-header-first-item-padding-shift: calc( + -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)) + ); + --sbb-header-action-padding-inline-zero: 0; .sbb-header-action__text { @include sbb.screen-reader-only; diff --git a/src/elements/header/header/__snapshots__/header.snapshot.spec.snap.js b/src/elements/header/header/__snapshots__/header.snapshot.spec.snap.js index 628c5005c0..6c8738d06d 100644 --- a/src/elements/header/header/__snapshots__/header.snapshot.spec.snap.js +++ b/src/elements/header/header/__snapshots__/header.snapshot.spec.snap.js @@ -2,7 +2,7 @@ export const snapshots = {}; snapshots["sbb-header renders DOM"] = -` +` `; /* end snapshot sbb-header renders DOM */ @@ -24,7 +24,7 @@ snapshots["sbb-header renders Shadow DOM"] = /* end snapshot sbb-header renders Shadow DOM */ snapshots["sbb-header renders actions and logo DOM"] = -` +` html`
@@ -28,6 +29,13 @@ const LoremIpsumTemplate = (): TemplateResult => html`
`; +const appName = (): TemplateResult => html` + + Name + V. 1.1 + +`; + const HeaderBasicTemplate = ( { attributes, ...args }: Args, template: TemplateResult, @@ -36,10 +44,11 @@ const HeaderBasicTemplate = ( Menu + ${args.size === 's' ? appName() : nothing}
- Search + + Search + ${template} English @@ -50,8 +59,24 @@ const HeaderBasicTemplate = ( Italiano English + ${args.size === 's' + ? html` + + + + ` + : html` + + + + `} -
${new Array(12).fill(null).map(LoremIpsumTemplate)}
+
+ ${new Array(12).fill(null).map(LoremIpsumTemplate)} +
`; const Template = (args: Args): TemplateResult => html` @@ -94,40 +119,39 @@ const expanded: InputType = { control: { type: 'boolean', }, - table: { - category: 'Header attribute', - }, }; const hideOnScroll: InputType = { control: { type: 'boolean', }, - table: { - category: 'Header attribute', - }, }; const scrollOrigin: InputType = { control: { type: 'text', }, - table: { - category: 'Header attribute', +}; + +const size: InputType = { + control: { + type: 'inline-radio', }, + options: ['m', 's'], }; const argTypes: ArgTypes = { expanded, 'hide-on-scroll': hideOnScroll, 'scroll-origin': scrollOrigin, + size, }; const basicArgs: Args = { expanded: false, 'hide-on-scroll': false, 'scroll-origin': undefined, - attributes: { class: 'sbb-page-spacing' }, + size: size.options![0], }; export const Basic: StoryObj = { @@ -142,10 +166,15 @@ export const Expanded: StoryObj = { args: { ...basicArgs, expanded: true, - attributes: { class: 'sbb-page-spacing-expanded' }, }, }; +export const SizeS: StoryObj = { + render: Template, + argTypes, + args: { ...basicArgs, size: size.options![1] }, +}; + export const WithUserMenu: StoryObj = { render: TemplateWithUserMenu, argTypes, @@ -165,7 +194,6 @@ export const ExpandedScrollHide: StoryObj = { ...basicArgs, expanded: true, 'hide-on-scroll': true, - attributes: { class: 'sbb-page-spacing-expanded' }, }, }; @@ -178,7 +206,6 @@ export const ContainerScrollOriginScrollHide: StoryObj = { 'scroll-origin': 'container', attributes: { id: 'container', - class: 'sbb-page-spacing', style: 'height: 200px; overflow: auto;', }, }, diff --git a/src/elements/header/header/header.ts b/src/elements/header/header/header.ts index 01351df365..16dd91f288 100644 --- a/src/elements/header/header/header.ts +++ b/src/elements/header/header/header.ts @@ -45,6 +45,9 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) { @property({ attribute: 'hide-on-scroll', reflect: true, type: Boolean }) public hideOnScroll = false; + /** Size of the header. */ + @property({ reflect: true }) public size: 'm' | 's' = 'm'; + @state() private _headerOnTop = true; private _scrollElement: HTMLElement | Document | null | undefined; @@ -126,7 +129,7 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) { ) { this._closeOpenOverlays(); } - // Check if header is scrolled out of sight, scroll position > header height * 2. + // Check if the header is scrolled out of sight, scroll position > header height * 2. if (currentScroll > this.offsetHeight * 2) { this._headerOnTop = false; if (currentScroll > 0 && this._lastScroll < currentScroll) { diff --git a/src/elements/header/header/header.visual.spec.ts b/src/elements/header/header/header.visual.spec.ts index 9ec6ca6b56..b2ce3c05fa 100644 --- a/src/elements/header/header/header.visual.spec.ts +++ b/src/elements/header/header/header.visual.spec.ts @@ -1,11 +1,15 @@ +import { sendKeys } from '@web/test-runner-commands'; import { html, type TemplateResult } from 'lit'; +import { tabKey } from '../../core/testing/private/keys.js'; import { describeViewports, visualDiffDefault } from '../../core/testing/private.js'; import './header.js'; import '../header-link.js'; import '../header-button.js'; import '../../menu.js'; +import '../../logo.js'; +import '../../signet.js'; describe(`sbb-header`, () => { const loremIpsumTemplate = ` @@ -19,24 +23,27 @@ describe(`sbb-header`, () => { ante, mollis eu lorem id, commodo cursus risus. `; - const template = ({ expanded }: { expanded?: boolean }): TemplateResult => html` + const template = (expanded: boolean = false, size: 'm' | 's' = 'm'): TemplateResult => html` - + Menu
- Search + + Search Christina Müller English + ${size === 's' + ? html`` + : html``}
${loremIpsumTemplate} @@ -48,19 +55,50 @@ describe(`sbb-header`, () => { it( `expanded=${expanded}`, visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ expanded }), { padding: '0' }); + await setup.withFixture(template(expanded), { padding: '0' }); }), ); } + for (const logoOrSignet of ['logo', 'signet']) { + describe(logoOrSignet, () => { + it( + 'focus', + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(false, logoOrSignet === 'signet' ? 's' : 'm'), { + padding: '0', + }); + setup.snapshotElement.querySelector(`a[slot='logo']`)!.focus(); + // We focus the logo and then tab left and right again to activate the focus visible state on the link + await sendKeys({ press: `Shift+${tabKey}` }); + await sendKeys({ press: tabKey }); + }), + ); + }); + } + it( `scroll`, visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({}), { padding: '0' }); + await setup.withFixture(template(), { padding: '0' }); // Scroll page down setup.withPostSetupAction(() => window.scrollTo(0, document.body.scrollHeight)); }), ); + + it( + `size=s`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(false, 's'), { padding: '0' }); + }), + ); + + it( + `forcedColors=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template(), { padding: '0', forcedColors: true }); + }), + ); }); }); diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md index 7b9f2fa30d..94397175c4 100644 --- a/src/elements/header/header/readme.md +++ b/src/elements/header/header/readme.md @@ -7,14 +7,17 @@ the first one can contain one or more action ([sbb-header-button](/docs/elements [sbb-header-link](/docs/elements-sbb-header-sbb-header-link--docs)) or other action items like [sbb-button](/docs/elements-sbb-button--docs) or [sbb-link](/docs/elements-sbb-link--docs), and it is displayed at the left end of the component; the second slot is displayed at the right end, -and it can contain a logo, which by default is the [sbb-logo](/docs/elements-sbb-logo--docs). +and it can contain a logo or a signet, which by default is the [sbb-logo](/docs/elements-sbb-logo--docs). ```html - Menu + + Menu + Search + + + ``` @@ -26,6 +29,21 @@ To avoid that tabbed/focused elements get hidden behind the header, it's recommended to set on the `` tag the CSS property `scroll-padding-top` to `var(--sbb-header-height)` or to a greater value. With this, it's ensured that content will be visible all the time. +The component has two sizes, named `m` (default) and `s`. +For the latter, the usage of the `sbb-signet` with `protective-room='panel'` is suggested. + +```html + + + Menu + + Search + + + + +``` + ### Positioning and visibility By default, the `sbb-header` has a fixed position at the top of the page; @@ -38,7 +56,7 @@ using the `scrollOrigin` property, which accepts an `HTMLElement` or the id of t ```html Search - + @@ -58,7 +76,8 @@ by adding classes to `sbb-header-button`/`sbb-header-link` elements and then def To achieve this result, a `div` tag with a CSS class named `sbb-header-spacer` was added between the first and the second `sbb-header-button` item, then a class named `last-element` was added to the last one. -Finally, the following custom CSS has been added(\*). The result can be seen in the home and home--logged-in stories. +Finally, the following custom CSS has been added(\*). +The result can be seen in the [home](/story/pages-home--home) and [home-logged-in](/story/pages-home--home-logged-in) stories. ```css .last-element { @@ -78,19 +97,42 @@ Finally, the following custom CSS has been added(\*). The result can be seen in } ``` +The `sbb-header` can be also customized by adding the application's name and version: +a helper class named `sbb-header-info` is provided to achieve the correct visual result. + +```html + + + Menu + + + + Application name + V. 1.1 + + + + + + +``` + ### Content overflow If a certain `sbb-header-button`/`sbb-header-link` should be shrunken (receive ellipsis) when there is too little space, set the CSS class `sbb-header-shrinkable` on the desired `sbb-header-button`/`sbb-header-link`. ```html - + Menu Christina Müller has a long name + + + ``` @@ -107,6 +149,7 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati | `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | | `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | | `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | +| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size of the header. | ## CSS Properties diff --git a/src/elements/logo/logo.scss b/src/elements/logo/logo.scss index 9f0dd7a574..c63cb9e6ec 100644 --- a/src/elements/logo/logo.scss +++ b/src/elements/logo/logo.scss @@ -8,7 +8,6 @@ height: var(--sbb-logo-height); --sbb-logo-panel-color: var(--sbb-color-red); - --sbb-logo-panel-stroke-color: var(--sbb-color-red); --sbb-logo-signet-color: var(--sbb-color-white); --sbb-logo-word-mark-color: var(--sbb-color-black); --sbb-logo-aspect-ratio: 454 / 48; @@ -18,7 +17,6 @@ @include sbb.if-forced-colors { --sbb-logo-panel-color: ButtonText !important; - --sbb-logo-panel-stroke-color: ButtonText !important; --sbb-logo-signet-color: Canvas !important; --sbb-logo-word-mark-color: ButtonText !important; } @@ -64,7 +62,7 @@ #sbb-logo__panel { fill: var(--sbb-logo-panel-color); - stroke: var(--sbb-logo-panel-stroke-color); + stroke: var(--sbb-logo-panel-color); } #sbb-logo__signet { diff --git a/src/elements/logo/logo.visual.spec.ts b/src/elements/logo/logo.visual.spec.ts index 85226b5e7d..bf2e5844f6 100644 --- a/src/elements/logo/logo.visual.spec.ts +++ b/src/elements/logo/logo.visual.spec.ts @@ -1,39 +1,30 @@ import { html } from 'lit'; -import { - describeEach, - describeViewports, - visualDiffDefault, - visualRegressionFixture, -} from '../core/testing/private.js'; +import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js'; import './logo.js'; describe(`sbb-logo`, () => { - let root: HTMLElement; - const cases = { negative: [false, true], protectiveRoom: ['none', 'minimal', 'ideal'], + forcedColors: [false, true], }; describeViewports({ viewports: ['zero'] }, () => { - describeEach(cases, ({ negative, protectiveRoom }) => { - beforeEach(async function () { - root = await visualRegressionFixture( - html` `, - { - backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined, - padding: '0', - maxWidth: '300px', - }, - ); - }); - + describeEach(cases, ({ negative, protectiveRoom, forcedColors }) => { it( - visualDiffDefault.name, - visualDiffDefault.with((setup) => { - setup.withSnapshotElement(root); + ``, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html``, + { + backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined, + padding: '0', + maxWidth: '300px', + forcedColors, + }, + ); }), ); }); diff --git a/src/elements/signet/readme.md b/src/elements/signet/readme.md index cfe429e9b6..1a120f150a 100644 --- a/src/elements/signet/readme.md +++ b/src/elements/signet/readme.md @@ -13,17 +13,30 @@ To use the component, please define the desired height or width on `sbb-signet`. ## Style The aspect ratio of the logo can be changed using the `protectiveRoom` property. -Possible values are `ideal` (default), `minimal` and `none`. +Possible values are `ideal` (default), `minimal`, `panel` and `none`. + +With `panel` value, the component is displayed with a left padding, similar to the `sbb-logo` component but without the text. +This is useful, for example, in the `sbb-header` with `size='s'`. ```html + + + + ``` ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | -------------------------------- | --------- | -------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the inner SVG signet. | -| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | --------------------- | ------- | -------------------------------------- | --------- | -------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the inner SVG signet. | +| `protectiveRoom` | `protective-room` | public | `SbbSignetProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | + +## CSS Properties + +| Name | Default | Description | +| --------------------- | ------- | -------------------------------------------- | +| `--sbb-signet-height` | `auto` | Can be used to set the height of the signet. | diff --git a/src/elements/signet/signet.scss b/src/elements/signet/signet.scss index 46f9575ff5..269446a2d9 100644 --- a/src/elements/signet/signet.scss +++ b/src/elements/signet/signet.scss @@ -5,14 +5,17 @@ :host { display: block; + height: var(--sbb-signet-height); --sbb-signet-background-color: var(--sbb-color-red); + --sbb-signet-panel-color: var(--sbb-color-red); --sbb-signet-icon-color: var(--sbb-color-white); --sbb-signet-aspect-ratio: 2 / 1; --sbb-signet-svg-container-height: auto; @include sbb.if-forced-colors { --sbb-signet-background-color: ButtonText !important; + --sbb-signet-panel-color: ButtonText !important; --sbb-signet-icon-color: Canvas !important; } } @@ -27,6 +30,15 @@ --sbb-signet-svg-container-height: calc(44 / 84 * 100%); } +:host([protective-room='panel']) { + --sbb-signet-aspect-ratio: 143 / 48; + --sbb-signet-background-color: unset; + + @include sbb.if-forced-colors { + --sbb-signet-background-color: unset !important; + } +} + .sbb-signet { display: flex; align-items: center; @@ -47,6 +59,11 @@ height: 100%; } +#sbb-signet__panel { + fill: var(--sbb-signet-panel-color); + stroke: var(--sbb-signet-panel-color); +} + #sbb-signet__icon { fill: var(--sbb-signet-icon-color); } diff --git a/src/elements/signet/signet.stories.ts b/src/elements/signet/signet.stories.ts index 5a2e28a0f0..afd16a3b4f 100644 --- a/src/elements/signet/signet.stories.ts +++ b/src/elements/signet/signet.stories.ts @@ -14,7 +14,7 @@ const protectiveRoom: InputType = { control: { type: 'select', }, - options: ['none', 'minimal', 'ideal'], + options: ['none', 'minimal', 'ideal', 'panel'], }; const accessibilityLabel: InputType = { @@ -51,6 +51,12 @@ export const IdealProtectiveRoom: StoryObj = { args: { ...defaultArgs, 'protective-room': protectiveRoom.options![2] }, }; +export const PanelProtectiveRoom: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, 'protective-room': protectiveRoom.options![3] }, +}; + const meta: Meta = { decorators: [(story) => html`
${story()}
`], parameters: { diff --git a/src/elements/signet/signet.ts b/src/elements/signet/signet.ts index 0fbb72c751..be2c5f6682 100644 --- a/src/elements/signet/signet.ts +++ b/src/elements/signet/signet.ts @@ -6,8 +6,12 @@ import type { SbbProtectiveRoom } from '../core/interfaces.js'; import style from './signet.scss?lit&inline'; +export type SbbSignetProtectiveRoom = SbbProtectiveRoom | 'panel'; + /** * It displays the SBB signet. + * + * @cssprop [--sbb-signet-height=auto] - Can be used to set the height of the signet. */ @customElement('sbb-signet') export class SbbSignetElement extends LitElement { @@ -15,7 +19,7 @@ export class SbbSignetElement extends LitElement { /** Visual protective room around signet. */ @property({ attribute: 'protective-room', reflect: true }) - public protectiveRoom?: SbbProtectiveRoom = 'ideal'; + public protectiveRoom?: SbbSignetProtectiveRoom = 'ideal'; /** Accessibility label which will be forwarded to the inner SVG signet. */ @property({ attribute: 'accessibility-label' }) public accessibilityLabel = 'Logo'; @@ -24,13 +28,26 @@ export class SbbSignetElement extends LitElement { return html` - - - - + ${this.protectiveRoom === 'panel' + ? html` + + + + + + ` + : html` + + + + + `} `; diff --git a/src/elements/signet/signet.visual.spec.ts b/src/elements/signet/signet.visual.spec.ts index 812af2ab97..aa4669262f 100644 --- a/src/elements/signet/signet.visual.spec.ts +++ b/src/elements/signet/signet.visual.spec.ts @@ -1,23 +1,26 @@ import { html } from 'lit'; -import { describeViewports, visualDiffDefault } from '../core/testing/private.js'; +import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js'; import './signet.js'; describe(`sbb-signet`, () => { - const protectiveRooms = ['none', 'minimal', 'ideal']; + const cases = { + protectiveRoom: ['none', 'minimal', 'ideal', 'panel'], + forcedColors: [false, true], + }; describeViewports({ viewports: ['zero'] }, () => { - for (const protectiveRoom of protectiveRooms) { + describeEach(cases, ({ protectiveRoom, forcedColors }) => { it( - `protectiveRoom=${protectiveRoom}`, + ``, visualDiffDefault.with(async (setup) => { await setup.withFixture( html``, - { padding: '0', maxWidth: '300px' }, + { padding: '0', maxWidth: '300px', forcedColors }, ); }), ); - } + }); }); });