From e8ef586576f1091033f3809cecdc45798df7d48e Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Thu, 12 Sep 2024 13:16:05 +0200
Subject: [PATCH] fix: review

---
 src/elements/core/styles/core.scss            | 15 ++++++++++++
 src/elements/header/common/header-action.scss |  7 ++++--
 src/elements/header/header/header.scss        |  1 +
 src/elements/header/header/header.stories.ts  |  6 ++---
 src/elements/header/header/readme.md          | 23 ++++++++++++++++++-
 5 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
index a1d566f82f..94573fe449 100644
--- a/src/elements/core/styles/core.scss
+++ b/src/elements/core/styles/core.scss
@@ -124,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);
+
+  strong + * {
+    --sbb-text-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 0abe7fdbf5..5d57c91d61 100644
--- a/src/elements/header/common/header-action.scss
+++ b/src/elements/header/common/header-action.scss
@@ -27,7 +27,7 @@
 
   // 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-margin-inline-start: calc(-1 * var(--sbb-spacing-fixed-5x));
 
   @include sbb.if-forced-colors {
     --sbb-header-action-border-color: CanvasText;
@@ -147,7 +147,10 @@
       // 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-first-item-margin-inline-start: var(
+        --sbb-header-first-item-margin-inline-start-size-s,
+        #{sbb.px-to-rem-build(-12)}
+      );
       --sbb-header-action-padding-inline-zero: 0;
 
       .sbb-header-action__text {
diff --git a/src/elements/header/header/header.scss b/src/elements/header/header/header.scss
index 20322ff842..f76ae540a5 100644
--- a/src/elements/header/header/header.scss
+++ b/src/elements/header/header/header.scss
@@ -111,6 +111,7 @@
   :host([size='s']) & {
     --sbb-header-action-min-height: var(--sbb-size-element-xs);
     --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-4x);
+    --sbb-header-first-item-margin-inline-start-size-s: #{sbb.px-to-rem-build(-10)};
   }
 }
 
diff --git a/src/elements/header/header/header.stories.ts b/src/elements/header/header/header.stories.ts
index fd5f8d4348..b8276e3fbd 100644
--- a/src/elements/header/header/header.stories.ts
+++ b/src/elements/header/header/header.stories.ts
@@ -30,10 +30,8 @@ const LoremIpsumTemplate = (): TemplateResult => html`
 `;
 
 const appName = (): TemplateResult => html`
-  <span
-    style="padding-inline: var(--sbb-spacing-fixed-4x); font-size: var(--sbb-font-size-text-xs)"
-  >
-    <span class="sbb-text--bold">Name</span>
+  <span class="sbb-header-info">
+    <strong>Name</strong>
     V. 1.1
   </span>
 `;
diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md
index d9eb7832e2..a4a8b8dff3 100644
--- a/src/elements/header/header/readme.md
+++ b/src/elements/header/header/readme.md
@@ -76,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 {
@@ -96,6 +97,26 @@ 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
+<sbb-header size="s">
+  <sbb-header-link icon-name="hamburger-menu-small" href="https://sbb.ch/somewhere">
+    Menu
+  </sbb-header-link>
+
+  <span class="sbb-header-info">
+    <strong>Application name</strong>
+    V. 1.1
+  </span>
+
+  <a slot="logo" aria-label="Homepage" href="/">
+    <sbb-signet slot="logo" protective-room="panel"></sbb-signet>
+  </a>
+</sbb-header>
+```
+
 ### Content overflow
 
 If a certain `sbb-header-button`/`sbb-header-link` should be shrunken (receive ellipsis) when there is too little space,