feat(components, docs): add user menu to the post-header (#6402)

leagrdv · web-flow · commit 9f7e069579df · 2025-10-15T08:18:22.000+02:00
## 📄 Description - Added the user menu to the `post-header` component - Added the option in storybook to have the login within the custom controls for the future but disabled it for now ## 🚀 Demo https://preview-6402--swisspost-design-system-next.netlify.app/iframe.html?args=isLoggedIn%3A!true&globals=&viewMode=story&id=27a2e64d-55ba-492d-ab79-5f7c5e818498--default --- ## 🔮 Design review - [x] Design review done - [ ] No design review needed ## 📝 Checklist - ✅ My code follows the style guidelines of this project - 🛠️ I have performed a self-review of my own code - 📄 I have made corresponding changes to the documentation - ⚠️ My changes generate no new warnings or errors - 🧪 I have added tests that prove my fix is effective or that my feature works - ✔️ New and existing unit tests pass locally with my changes
diff --git a/.changeset/crazy-onions-jam.md b/.changeset/crazy-onions-jam.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated styles of the `post-menu-item` component, which is used in both the new user menu and the `post-breadcrumbs` dropdown menu when breadcrumb items are concatenated.
diff --git a/.changeset/new-months-cross.md b/.changeset/new-months-cross.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added the user menu for logged in users in the `post-header` component.
diff --git a/.changeset/weak-places-scream.md b/.changeset/weak-places-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed the hover border color from `post-avatar` to maintain design consistency.
diff --git a/packages/components/cypress/fixtures/post-mainnavigation-overflow.test.html b/packages/components/cypress/fixtures/post-mainnavigation-overflow.test.html
@@ -24,7 +24,7 @@
 
       <!-- Menu button for mobile -->
       <post-togglebutton slot="post-togglebutton">
-        <span class="visually-hidden-sm">Menu</span>
+        <span>Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
       </post-togglebutton>
@@ -49,21 +49,20 @@ <h1 slot="title">Application title</h1>
       <ul class="list-inline">
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Search</span>
+            <span>Search</span>
             <post-icon aria-hidden="true" name="search"></post-icon>
           </a>
         </li>
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Login</span>
+            <span>Login</span>
             <post-icon aria-hidden="true" name="login"></post-icon>
           </a>
         </li>
       </ul>
 
       <!-- Main navigation -->
       <post-mainnavigation caption="Hauptnavigation">
-
         <post-list title-hidden="">
           <h2>Main Navigation</h2>
 
diff --git a/packages/components/cypress/fixtures/post-mainnavigation.test.html b/packages/components/cypress/fixtures/post-mainnavigation.test.html
@@ -24,7 +24,7 @@
 
       <!-- Menu button for mobile -->
       <post-togglebutton slot="post-togglebutton">
-        <span class="visually-hidden-sm">Menu</span>
+        <span>Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
       </post-togglebutton>
@@ -49,21 +49,20 @@ <h1 slot="title">Application title</h1>
       <ul class="list-inline">
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Search</span>
+            <span>Search</span>
             <post-icon aria-hidden="true" name="search"></post-icon>
           </a>
         </li>
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Login</span>
+            <span>Login</span>
             <post-icon aria-hidden="true" name="login"></post-icon>
           </a>
         </li>
       </ul>
 
       <!-- Main navigation -->
       <post-mainnavigation caption="Hauptnavigation">
-
         <post-list title-hidden="">
           <h2>Main Navigation</h2>
 
diff --git a/packages/components/src/components/post-avatar/post-avatar.scss b/packages/components/src/components/post-avatar/post-avatar.scss
@@ -64,6 +64,7 @@ img,
   border-radius: tokens.get('avatar-border-radius');
   color: var(--post-avatar-fg);
   text-transform: uppercase;
+  font-weight: 400;
 
   span {
     @include post.visuallyhidden();
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -77,7 +77,7 @@
 .global-sub {
   display: flex;
   align-items: center;
-  gap: 24px;
+  gap: 4px;
 
   @include media.min(lg) {
     // targets the right links and language switch to hide them on scroll
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -16,6 +16,7 @@ import { EventFrom } from '@/utils/event-from';
  * @slot default - Custom controls or content, right aligned in the local header.
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  * @slot target-group - Holds the list of buttons to choose the target group.
+ * @slot global-login - Holds the user menu or login button in the global header.
  */
 
 @Component({
@@ -398,6 +399,7 @@ export class PostHeader {
             )}
             <slot name="global-controls"></slot>
             {!this.hasMobileMenu && <slot name="post-language-switch"></slot>}
+            <slot name="global-login"></slot>
             {this.hasNavigation && (
               <div onClick={() => this.toggleMobileMenu()} class="mobile-toggle">
                 <slot name="post-togglebutton"></slot>
diff --git a/packages/components/src/components/post-header/readme.md b/packages/components/src/components/post-header/readme.md
@@ -29,6 +29,7 @@ Type: `Promise<void>`
 | Slot                     | Description                                                                   |
 | ------------------------ | ----------------------------------------------------------------------------- |
 | `"default"`              | Custom controls or content, right aligned in the local header.                |
+| `"global-login"`         | Holds the user menu or login button in the global header.                     |
 | `"meta-navigation"`      | Holds an `<ul>` with meta navigation links.                                   |
 | `"post-language-switch"` | Should be used with the `<post-language-switch>` component.                   |
 | `"post-logo"`            | Should be used together with the `<post-logo>` component.                     |
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
@@ -1,7 +1,5 @@
 @use '@swisspost/design-system-styles/mixins/button';
 @use '@swisspost/design-system-styles/mixins/media';
-@use '@swisspost/design-system-styles/mixins/utilities';
-@use '@swisspost/design-system-styles/variables/animation';
 
 post-menu-item {
   button {
@@ -18,51 +16,48 @@ post-menu-item {
     display: flex;
     width: 100%;
     align-items: center;
-    padding: .5rem 1rem;
-    gap: .5rem;
-    font-size: 1rem;
+    padding: 0.5rem 0.75rem 0.5rem 1rem;
+    gap: 0.5rem;
+    font-size: 0.875rem;
     color: #050400;
-    transition: color animation.$transition-base-timing;
-    outline-offset: 0;
+    border-radius: 0;
 
-    &:has(post-icon:last-child) {
-      padding-inline-end: .75rem;
+    post-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: 0.125rem;
     }
 
-    @include media.min(lg) {
-      font-size: 1.25rem;
+    @include media.min(md) {
+      font-size: 1rem;
+      padding-block: 0.75rem;
+      gap: 1rem;
+
+      post-icon {
+        width: 1.375rem;
+        height: 1.375rem;
+        margin: 0;
+      }
     }
 
-    @include media.min(xs) {
-      padding-block: .75rem;
+    @include media.min(lg) {
+      font-size: 1.25rem;
+      padding-block: 0.8125rem;
 
-      & > post-icon:last-child {
-        margin-inline-start: .5rem;
+      post-icon {
+        width: 1.5rem;
+        height: 1.5rem;
       }
     }
 
     &:focus-visible {
-      outline-offset: -2px !important;
+      outline-offset: 2px !important;
       border-radius: 4px;
     }
 
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      inset-block-end: 0;
-      inset-inline: 0;
-      height: 3px;
-      background-color: transparent;
-      transition: background-color animation.$transition-base-timing;
-    }
-
     &:hover {
-      color: #504F4B;
-
-      &::after {
-        background-color: currentColor;
-      }
+      background-color: #504f4b;
+      color: #fff;
     }
   }
 }
diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss
@@ -1,11 +1,30 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/mixins/media';
 
 :host {
   display: block;
 }
 
-:where([part="menu"]) {
+:where([part='menu']) {
   display: flex;
   flex-direction: column;
-  padding-block: .5rem;
+  padding-block: 0.5rem;
+}
+
+::slotted([slot='header']) {
+  margin-top: -0.5rem;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-block-end: 1px solid #050400;
+  font-weight: 700;
+
+  @include media.max(lg) {
+    padding: 0.75rem 1rem;
+  }
+
+  @include media.max(md) {
+    padding: 0.5rem 1rem;
+  }
 }
diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx
@@ -18,6 +18,7 @@ import { getRoot, checkEmptyOrOneOf, EventFrom, checkRequiredAndType } from '@/u
 
 /**
  * @part menu - The container element that holds the list of menu items.
+ * @slot header - Holds the header part of the menu.
  */
 
 @Component({
@@ -236,8 +237,9 @@ export class PostMenu {
   }
 
   private getSlottedItems(): Element[] {
-    const slot = this.host.shadowRoot.querySelector('slot');
-    const slottedElements = slot ? slot.assignedElements() : [];
+    const slot = this.host.shadowRoot.querySelectorAll('slot');
+    const slottedElements: Element[] = [];
+    slot.forEach(slotItem => slottedElements.push(...slotItem.assignedElements()));
 
     return (
       slottedElements
@@ -253,6 +255,7 @@ export class PostMenu {
       <Host data-version={version}>
         <post-popovercontainer placement={this.placement} ref={e => (this.popoverRef = e)}>
           <div part="menu">
+            <slot name="header"></slot>
             <slot></slot>
           </div>
         </post-popovercontainer>
diff --git a/packages/components/src/components/post-menu/readme.md b/packages/components/src/components/post-menu/readme.md
@@ -65,6 +65,13 @@ Type: `Promise<void>`
 
 
 
+## Slots
+
+| Slot       | Description                        |
+| ---------- | ---------------------------------- |
+| `"header"` | Holds the header part of the menu. |
+
+
 ## Shadow Parts
 
 | Part     | Description                                              |
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -29,7 +29,7 @@
 
       <!-- Menu button for mobile -->
       <post-togglebutton slot="post-togglebutton">
-        <span class="visually-hidden-sm">Menu</span>
+        <span>Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
       </post-togglebutton>
@@ -68,13 +68,13 @@ <h1 slot="title">Application title</h1>
       <ul class="list-inline">
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Search</span>
+            <span>Search</span>
             <post-icon aria-hidden="true" name="search"></post-icon>
           </a>
         </li>
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Login</span>
+            <span>Login</span>
             <post-icon aria-hidden="true" name="login"></post-icon>
           </a>
         </li>
diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts
@@ -28,7 +28,7 @@ const meta: MetaComponent = {
 
       <!-- Menu button for mobile -->
       <post-togglebutton slot="post-togglebutton">
-        <span class="visually-hidden-sm">Menu</span>
+        <span>Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
       </post-togglebutton>
@@ -54,13 +54,13 @@ const meta: MetaComponent = {
       <ul class="list-inline">
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Search</span>
+            <span>Search</span>
             <post-icon aria-hidden="true" name="search"></post-icon>
           </a>
         </li>
         <li>
           <a href="#">
-            <span class="visually-hidden-sm">Login</span>
+            <span>Login</span>
             <post-icon aria-hidden="true" name="login"></post-icon>
           </a>
         </li>
diff --git a/packages/documentation/src/stories/components/header/header.docs.mdx b/packages/documentation/src/stories/components/header/header.docs.mdx
@@ -79,3 +79,16 @@ The Microsite Header is a consistently available interface element that provides
 The One Pager Header is a consistently available interface element that provides a consistent navigation experience across the whole One Pager.
 
 <Canvas of={HeaderStories.OnePager} inline="false" />
+
+## User menu
+
+The user menu is part of the global header, it is a menu containing information and links linked to the currently logged-in user.
+When no user is logged in, a login button is displayed instead.
+
+### Logged out
+
+<Canvas sourceState="hidden" of={HeaderStories.LoggedOut} />
+
+### Logged in
+
+<Canvas sourceState="shown" of={HeaderStories.LoggedIn} />
diff --git a/packages/documentation/src/stories/components/header/header.stories.ts b/packages/documentation/src/stories/components/header/header.stories.ts
diff --git a/packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx b/packages/documentation/src/stories/guidelines/header with custom logo link/framework-selector.tsx
diff --git a/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts b/packages/documentation/src/stories/raw-components/megadropdown/megadropdown.stories.ts
diff --git a/packages/nextjs-integration/src/app/ssr/layout.tsx b/packages/nextjs-integration/src/app/ssr/layout.tsx
diff --git a/packages/styles/src/components/avatar.scss b/packages/styles/src/components/avatar.scss
diff --git a/packages/styles/src/components/header/_post-header.scss b/packages/styles/src/components/header/_post-header.scss

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@swisspost/design-system-components': patch
 +---
++
 +Updated styles of the `post-menu-item` component, which is used in both the new user menu and the `post-breadcrumbs` dropdown menu when breadcrumb items are concatenated.