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 `<a>`-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

@@ -27,7 +27,8 @@
 
 <style>
   /* Classes used for the custom sbb-header story. */
-  .last-element {
+  .last-element,
+  .sbb-header-spacer-logo {
     display: none;
   }
 
@@ -41,6 +42,10 @@
     .sbb-header-spacer {
       display: none;
     }
+
+    .sbb-header-spacer-logo {
+      display: block;
+    }
   }
 
   .sbdocs-content {

src/elements/header/header/__snapshots__/header.snapshot.spec.snap.js

@@ -12,12 +12,6 @@ snapshots["sbb-header renders Shadow DOM"] =
   <div class="sbb-header__wrapper">
     <slot>
     </slot>
-    <div class="sbb-header__logo">
-      <slot name="logo">
-        <sbb-logo protective-room="none">
-        </sbb-logo>
-      </slot>
-    </div>
   </div>
 </header>
 `;
@@ -34,7 +28,9 @@ snapshots["sbb-header renders actions and logo DOM"] =
   >
     Menu
   </sbb-header-link>
-  <div slot="logo">
+  <div class="sbb-header-spacer">
+  </div>
+  <div class="sbb-header-logo">
     <circle
       cx="25"
       cy="75"
@@ -51,12 +47,6 @@ snapshots["sbb-header renders actions and logo Shadow DOM"] =
   <div class="sbb-header__wrapper">
     <slot>
     </slot>
-    <div class="sbb-header__logo">
-      <slot name="logo">
-        <sbb-logo protective-room="none">
-        </sbb-logo>
-      </slot>
-    </div>
   </div>
 </header>
 `;

src/elements/header/header/header.scss

@@ -95,12 +95,6 @@
   }
 }
 
-.sbb-header__logo {
-  flex: 0 0 auto;
-  margin-inline-start: auto;
-  padding-inline-start: var(--sbb-spacing-responsive-s);
-}
-
 // Fix left offset if first element of the header is a sbb-header-button/sbb-header-link.
 // The value of the offset is calculated inside sbb-header-button/sbb-header-link styles.
 ::slotted(:is(sbb-header-button, sbb-header-link):first-child) {
@@ -127,8 +121,12 @@
   flex-grow: 1;
 }
 
+::slotted(.sbb-header-logo) {
+  margin-inline-start: var(--sbb-spacing-responsive-s);
+}
+
 // Apply padding and outline to possible slotted link in logo slot
-::slotted(a[slot='logo']) {
+::slotted(a.sbb-header-logo) {
   display: block;
   padding-block: var(--sbb-spacing-fixed-3x);
   position: relative;
@@ -139,7 +137,7 @@
 }
 
 // To show the correct outline, we need to span a hidden element filling the link but without the outline-offset.
-::slotted(a[slot='logo'])::before {
+::slotted(a.sbb-header-logo)::before {
   content: '';
   display: block;
   position: absolute;
@@ -148,7 +146,7 @@
 
 // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
 ::slotted(
-    a[slot='logo']:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
+    a.sbb-header-logo:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
   )::before {
   @include sbb.focus-outline;
 

src/elements/header/header/header.snapshot.spec.ts

@@ -35,7 +35,8 @@ describe(`sbb-header`, () => {
             href="https://github.com/sbb-design-systems/lyne-components"
             >Menu</sbb-header-link
           >
-          <div slot="logo">
+          <div class="sbb-header-spacer"></div>
+          <div class="sbb-header-logo">
             <circle cx="25" cy="75" r="20"></circle>
           </div>
         </sbb-header>

src/elements/header/header/header.stories.ts

@@ -12,6 +12,7 @@ import './header.js';
 import '../header-button.js';
 import '../header-link.js';
 import '../../divider.js';
+import '../../logo.js';
 import '../../menu.js';
 import '../../signet.js';
 
@@ -65,14 +66,15 @@ const HeaderBasicTemplate = (
       <sbb-menu-button>Italiano</sbb-menu-button>
       <sbb-menu-button icon-name="tick-small">English</sbb-menu-button>
     </sbb-menu>
+    <div class="sbb-header-spacer sbb-header-spacer-logo"></div>
     ${args.size === 's'
       ? html`
-          <a slot="logo" aria-label="Homepage" href="/">
-            <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+          <a aria-label="Homepage" href="/" class="sbb-header-logo">
+            <sbb-signet protective-room="panel"></sbb-signet>
           </a>
         `
       : html`
-          <a slot="logo" aria-label="Homepage" href="/">
+          <a aria-label="Homepage" href="/" class="sbb-header-logo">
             <sbb-logo protective-room="none"></sbb-logo>
           </a>
         `}

src/elements/header/header/header.ts

@@ -8,15 +8,12 @@ import { SbbHydrationMixin } from '../../core/mixins.js';
 
 import style from './header.scss?lit&inline';
 
-import '../../logo.js';
-
 const IS_MENU_OPENED_QUERY = "[aria-controls][aria-expanded='true']";
 
 /**
  * It displays a header section for the page.
  *
- * @slot - Use the unnamed slot to add actions or content to the header.
- * @slot logo - Slot used to render the logo on the right side (sbb-logo as default).
+ * @slot - Use the unnamed slot to add actions, content and logo to the header.
  * @cssprop [--sbb-header-z-index=10] - Can be used to modify the z-index of the header.
  * @cssprop [--sbb-header-height=zero-small:var(--sbb-spacing-fixed-14x);medium-ultra:var(--sbb-spacing-fixed-24x)] - Can be used to modify height of the header.
  */
@@ -188,11 +185,6 @@ class SbbHeaderElement extends SbbHydrationMixin(LitElement) {
       <header class="sbb-header">
         <div class="sbb-header__wrapper">
           <slot></slot>
-          <div class="sbb-header__logo">
-            <slot name="logo">
-              <sbb-logo protective-room="none"></sbb-logo>
-            </slot>
-          </div>
         </div>
       </header>
     `;

src/elements/header/header/header.visual.spec.ts

@@ -27,9 +27,9 @@ describe(`sbb-header`, () => {
 
   const template = (expanded: boolean = false, size: 'm' | 's' = 'm'): TemplateResult => html`
     <style>
-      ${' .last-element {display: none;} '}
+      ${' .last-element, .sbb-header-spacer-logo {display: none;} '}
       ${' @media screen and (width >= 840px) { .last-element { display: block; } }'}
-      ${' @media screen and (width < 1023px) { .sbb-header-spacer { display: none; } }'}
+      ${' @media screen and (width < 1023px) { .sbb-header-spacer { display: none; } .sbb-header-spacer-logo { display: block; } }'}
     </style>
     <sbb-header ?expanded=${expanded} size=${size}>
       <sbb-header-button icon-name="hamburger-menu-small" expand-from="small">
@@ -43,9 +43,14 @@ describe(`sbb-header`, () => {
         Christina Müller
       </sbb-header-button>
       <sbb-header-button icon-name="globe-small" class="last-element"> English </sbb-header-button>
+      <div class="sbb-header-spacer sbb-header-spacer-logo"></div>
       ${size === 's'
-        ? html`<a href="#" slot="logo"><sbb-signet protective-room="panel"></sbb-signet></a>`
-        : html`<a href="#" slot="logo"><sbb-logo protective-room="none"></sbb-logo></a>`}
+        ? html`<a href="#" class="sbb-header-logo"
+            ><sbb-signet protective-room="panel"></sbb-signet
+          ></a>`
+        : html`<a href="#" class="sbb-header-logo"
+            ><sbb-logo protective-room="none"></sbb-logo
+          ></a>`}
     </sbb-header>
     <div class=${expanded ? 'sbb-page-spacing-expanded' : 'sbb-page-spacing'}>
       ${loremIpsumTemplate}
@@ -76,7 +81,7 @@ describe(`sbb-header`, () => {
               padding: '0',
             });
             setup.withStateElement(
-              setup.snapshotElement.querySelector<HTMLAnchorElement>(`a[slot='logo']`)!,
+              setup.snapshotElement.querySelector<HTMLAnchorElement>('.sbb-header-logo')!,
             );
           }),
         );

src/elements/header/header/readme.md

@@ -2,20 +2,22 @@ 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 `<div class="sbb-header-spacer">` to align elements after it to the right.
 
 ```html
 <sbb-header>
   <sbb-header-link icon-name="hamburger-menu-small" href="https://sbb.ch/somewhere">
     Menu
   </sbb-header-link>
   <sbb-header-button icon-name="magnifying-glass-small">Search</sbb-header-button>
-  <a slot="logo" aria-label="Homepage" href="/">
+  <div class="sbb-header-spacer"></div>
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
     <sbb-logo protective-room="none"></sbb-logo>
   </a>
 </sbb-header>
@@ -38,8 +40,9 @@ For the latter, the usage of the `sbb-signet` with `protective-room='panel'` is
     Menu
   </sbb-header-link>
   <sbb-header-button icon-name="magnifying-glass-small">Search</sbb-header-button>
-  <a slot="logo" aria-label="Homepage" href="/">
-    <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+  <div class="sbb-header-spacer"></div>
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
+    <sbb-signet protective-room="panel"></sbb-signet>
   </a>
 </sbb-header>
 ```
@@ -61,8 +64,9 @@ From accessibility perspective `aria-current="page"` should be set whenever the
   >
     Overview
   </sbb-header-link>
-  <a slot="logo" aria-label="Homepage" href="/">
-    <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+  <div class="sbb-header-spacer"></div>
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
+    <sbb-signet protective-room="panel"></sbb-signet>
   </a>
 </sbb-header>
 ```
@@ -79,7 +83,8 @@ using the `scrollOrigin` property, which accepts an `HTMLElement` or the id of t
 ```html
 <sbb-header expanded hideOnScroll>
   <sbb-header-button icon-name="magnifying-glass-small">Search</sbb-header-button>
-  <a slot="logo" aria-label="Homepage" href="/">
+  <div class="sbb-header-spacer"></div>
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
     <sbb-logo protective-room="none"></sbb-logo>
   </a>
 </sbb-header>
@@ -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
+<sbb-header>
+  <sbb-header-button icon-name="..." expand-from="small"> ... </sbb-header-button>
+
+  <!-- Will be hidden on small screen sizes -->
+  <div class="sbb-header-spacer"></div>
+
+  <sbb-header-button icon-name="..."> ... </sbb-header-button>
+  <sbb-header-button icon-name="..."> ... </sbb-header-button>
+  <sbb-header-button icon-name="..." class="last-element"> ... </sbb-header-button>
+
+  <!-- Will only be shown on small screen sizes -->
+  <div class="sbb-header-spacer sbb-header-spacer-logo"></div>
+
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
+    <sbb-logo protective-room="none"></sbb-logo>
+  </a>
+</sbb-header>
+```
+
 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
     <span>V. 1.1</span>
   </span>
 
-  <a slot="logo" aria-label="Homepage" href="/">
-    <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+  <div class="sbb-header-spacer"></div>
+
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
+    <sbb-signet protective-room="panel"></sbb-signet>
   </a>
 </sbb-header>
 ```
@@ -153,7 +192,8 @@ set the CSS class `sbb-header-shrinkable` on the desired `sbb-header-button`/`sb
   <sbb-header-button class="sbb-header-shrinkable">
     Christina Müller has a long name
   </sbb-header-button>
-  <a slot="logo" aria-label="Homepage" href="/">
+  <div class="sbb-header-spacer"></div>
+  <a aria-label="Homepage" href="/" class="sbb-header-logo">
     <sbb-logo protective-room="none"></sbb-logo>
   </a>
 </sbb-header>
@@ -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. |

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 = {
         <sbb-header-button icon-name="hamburger-menu-small" expand-from="small">
           Menu
         </sbb-header-button>
+        <div class="sbb-header-spacer"></div>
+        <sbb-logo protective-room="none" class="sbb-header-logo"></sbb-logo>
       </sbb-header>
       ${story()}
     `,