From 0f0066d528439263304895f754b55fae85d9f32f Mon Sep 17 00:00:00 2001 From: Tommaso Menga Date: Thu, 28 Nov 2024 08:58:56 +0100 Subject: [PATCH] refactor(sbb-header): removed 'logo' slot (#3230) Closes #3093 BREAKING CHANGE: removed the `logo` slot and the default `sbb-logo` from the `sbb-header`. Alternatively, add the `sbb-header-logo` CSS class to the logo or to an ``-element containing the logo and use the default slot. To align the logo to the right, use a spacer element with the `sbb-header-spacer` CSS class applied. For more information, see `sbb-header` docs. --- .storybook/preview-head.html | 7 +- .../header.snapshot.spec.snap.js | 16 +--- src/elements/header/header/header.scss | 16 ++-- .../header/header/header.snapshot.spec.ts | 3 +- src/elements/header/header/header.stories.ts | 8 +- src/elements/header/header/header.ts | 10 +- .../header/header/header.visual.spec.ts | 15 ++- src/elements/header/header/readme.md | 93 +++++++++++++------ .../map-container/map-container.stories.ts | 3 + .../map-container.visual.spec.ts | 3 + .../pages/home/home--logged-in.stories.ts | 3 +- src/storybook/pages/home/home.stories.ts | 3 +- .../src/components/test-case/test-case.ts | 2 +- 13 files changed, 111 insertions(+), 71 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 347ec33232..4d6747b90f 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -27,7 +27,8 @@ @@ -43,9 +43,14 @@ describe(`sbb-header`, () => { Christina Müller English + ${size === 's' - ? html`` - : html``} + ? html`` + : html``}
${loremIpsumTemplate} @@ -76,7 +81,7 @@ describe(`sbb-header`, () => { padding: '0', }); setup.withStateElement( - setup.snapshotElement.querySelector(`a[slot='logo']`)!, + setup.snapshotElement.querySelector('.sbb-header-logo')!, ); }), ); diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md index 650ed05872..7b7ec42a71 100644 --- a/src/elements/header/header/readme.md +++ b/src/elements/header/header/readme.md @@ -2,12 +2,13 @@ The `sbb-header` component is a container for actions and a logo, and it is disp ## Slots -It has two slots: -the first one can contain one or more action ([sbb-header-button](/docs/elements-sbb-header-sbb-header-button--docs) or -[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 or a signet, which by default is the [sbb-logo](/docs/elements-sbb-logo--docs). +The slot can contain: + +- one or more actions ([sbb-header-button](/docs/elements-sbb-header-sbb-header-button--docs) or [sbb-header-link](/docs/elements-sbb-header-sbb-header-link--docs)) +- other action items like [sbb-button](/docs/elements-sbb-button--docs) or [sbb-link](/docs/elements-sbb-link--docs) +- a logo or a signet with the `.sbb-header-logo` class (see [sbb-logo](/docs/elements-sbb-logo--docs)) + +Slotted elements are aligned to the left. Use `
` to align elements after it to the right. ```html @@ -15,7 +16,8 @@ and it can contain a logo or a signet, which by default is the [sbb-logo](/docs/ Menu Search - +
+ @@ -38,8 +40,9 @@ For the latter, the usage of the `sbb-signet` with `protective-room='panel'` is Menu Search - - +
+ ``` @@ -61,8 +64,9 @@ From accessibility perspective `aria-current="page"` should be set whenever the > Overview - - +
+ ``` @@ -79,7 +83,8 @@ using the `scrollOrigin` property, which accepts an `HTMLElement` or the id of t ```html Search - +
+ @@ -92,18 +97,26 @@ by adding classes to `sbb-header-button`/`sbb-header-link` elements and then def [All the examples in Storybook](/story/elements-sbb-header-sbb-header--basic) have the following requirements: -- four action items (with custom icons); -- the first item is always left aligned and has `expand-from` set to `small`; -- the other three items are left aligned in breakpoints zero to medium, and right aligned from large to ultra; -- the last item is not visible in breakpoints zero to small. +1. four action items (with custom icons); +2. the first item is always left aligned and has `expand-from` set to `small`; +3. the other three items are left aligned in breakpoints zero to medium, and right aligned from large to ultra; +4. the last item is not visible in breakpoints zero to small; +5. the logo is always aligned to the right. + +To achieve the alignment requirements, two `div` tags with a CSS class named `sbb-header-spacer` were added: + +- one after the first `sbb-header-button` item (that will be hidden on smaller screen sizes); +- the second, before the logo. Since this spacer will only be shown on small screen sizes, we need a new class to target it (in this example `sbb-header-spacer-logo`); + +We also need a class (in this example `last-element`) on the last `sbb-header-button` to achieve requirement n° 4. -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](/story/pages-home--home) and [home-logged-in](/story/pages-home--home-logged-in) stories. + +The result can also be seen in the [home](/story/pages-home--home) and [home-logged-in](/story/pages-home--home-logged-in) stories. ```css -.last-element { +.last-element, +.sbb-header-spacer-logo { display: none; } @@ -117,9 +130,33 @@ The result can be seen in the [home](/story/pages-home--home) and [home-logged-i .sbb-header-spacer { display: none; } + + .sbb-header-spacer-logo { + display: block; + } } ``` +```html + + ... + + +
+ + ... + ... + ... + + + + + + +``` + 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. @@ -134,8 +171,10 @@ a helper class named `sbb-header-info` is provided to achieve the correct visual V. 1.1 - - +
+ + ``` @@ -153,7 +192,8 @@ set the CSS class `sbb-header-shrinkable` on the desired `sbb-header-button`/`sb Christina Müller has a long name - +
+ @@ -183,7 +223,6 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati ## Slots -| Name | Description | -| ------ | --------------------------------------------------------------------- | -| | Use the unnamed slot to add actions or content to the header. | -| `logo` | Slot used to render the logo on the right side (sbb-logo as default). | +| Name | Description | +| ---- | -------------------------------------------------------------------- | +| | Use the unnamed slot to add actions, content and logo to the header. | diff --git a/src/elements/map-container/map-container.stories.ts b/src/elements/map-container/map-container.stories.ts index 5342657986..f987015355 100644 --- a/src/elements/map-container/map-container.stories.ts +++ b/src/elements/map-container/map-container.stories.ts @@ -12,6 +12,7 @@ import '../form-field.js'; import '../icon.js'; import '../title.js'; import '../header.js'; +import '../logo.js'; const hideScrollUpButton: InputType = { control: { @@ -86,6 +87,8 @@ const meta: Meta = { Menu +
+ ${story()} `, diff --git a/src/elements/map-container/map-container.visual.spec.ts b/src/elements/map-container/map-container.visual.spec.ts index 970e48e8f5..a31975606d 100644 --- a/src/elements/map-container/map-container.visual.spec.ts +++ b/src/elements/map-container/map-container.visual.spec.ts @@ -6,6 +6,7 @@ import { describeViewports, visualDiffDefault } from '../core/testing/private.js import './map-container.js'; import '../header.js'; import '../title.js'; +import '../logo.js'; describe(`sbb-map-container`, () => { const template = (stickyOffset = false): TemplateResult => html` @@ -13,6 +14,8 @@ describe(`sbb-map-container`, () => { Menu +
+ html` Italiano English - + + diff --git a/src/storybook/pages/home/home.stories.ts b/src/storybook/pages/home/home.stories.ts index 0ff03467ad..99304aba45 100644 --- a/src/storybook/pages/home/home.stories.ts +++ b/src/storybook/pages/home/home.stories.ts @@ -55,7 +55,8 @@ const Template = (args: Args): TemplateResult => html` Italiano English - + + diff --git a/src/visual-regression-app/src/components/test-case/test-case.ts b/src/visual-regression-app/src/components/test-case/test-case.ts index c8d45f37d6..1cbf27f59c 100644 --- a/src/visual-regression-app/src/components/test-case/test-case.ts +++ b/src/visual-regression-app/src/components/test-case/test-case.ts @@ -110,7 +110,7 @@ class TestCase extends LitElement {
-
+