Skip to content

Commit 83689a4

Browse files
alionazherdetskaalionazherdetska
authored
chore(components): rename post-header slots to improve clarity and consistency (#6780)
## 📄 Description This PR renames slots in the `post-header` component to improve clarity and consistency with design specifications. The changes align slot names with their semantic purpose. ## 🚀 Demo [Header docs](https://preview-6780--swisspost-design-system-next.netlify.app/?path=/docs/introduction--docs&devModeEnabled=true) --- ## 🔮 Design review - [ ] 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
1 parent 9217d81 commit 83689a4

File tree

16 files changed

+111
-97
lines changed

16 files changed

+111
-97
lines changed

‎.changeset/moody-rivers-flash.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
'@swisspost/design-system-components': major
3+
'@swisspost/design-system-documentation': patch
4+
---
5+
6+
Renamed slots in the `post-header` component for improved clarity and consistency. The following slots have been renamed:
7+
- `target-group` → `audience`
8+
- `global-controls` → `global-nav-primary`
9+
- `meta-navigation` → `global-nav-secondary`
10+
- `post-language-switch` → `language-menu`
11+
- `global-login` → `post-login`
12+
- `post-mainnavigation` → `main-nav`
13+
14+
All slot names must be updated in existing implementations to ensure header components render correctly.

‎packages/components-angular/projects/consumer-app/src/app/app.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<post-logo slot="post-logo" url="/">Homepage</post-logo>
44

55
<!-- Target Group -->
6-
<ul slot="target-group">
6+
<ul slot="audience">
77
<li>
88
<a href="#" class="active">Private customers</a>
99
</li>
@@ -13,7 +13,7 @@
1313
</ul>
1414

1515
<!-- Global controls (Search) -->
16-
<ul slot="global-controls">
16+
<ul slot="global-nav-primary">
1717
<li>
1818
<a href="">
1919
<span>Search</span>
@@ -23,7 +23,7 @@
2323
</ul>
2424

2525
<!-- Meta navigation -->
26-
<ul slot="meta-navigation">
26+
<ul slot="global-nav-secondary">
2727
<li>
2828
<a href="">
2929
Jobs
@@ -44,7 +44,7 @@
4444
description="The currently selected language is English."
4545
variant="list"
4646
name="language-menu-example"
47-
slot="post-language-switch"
47+
slot="language-menu"
4848
>
4949
<post-language-menu-item code="de" name="German">de</post-language-menu-item>
5050
<post-language-menu-item code="fr" name="French">fr</post-language-menu-item>
@@ -54,7 +54,7 @@
5454

5555
<!-- Global header login/user menu -->
5656

57-
<a href="" slot="global-login">
57+
<a href="" slot="post-login">
5858
<span>Login</span>
5959
<post-icon name="login"></post-icon>
6060
</a>

‎packages/components/cypress/fixtures/post-mainnavigation-overflow.test.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<post-logo slot="post-logo">Homepage</post-logo>
1818

1919
<!-- Meta navigation -->
20-
<ul slot="meta-navigation">
20+
<ul slot="global-nav-secondary">
2121
<li><a href="">Jobs</a></li>
2222
<li><a href="">Über uns</a></li>
2323
</ul>
@@ -34,7 +34,7 @@
3434
caption="Change the language"
3535
description="The currently selected language is English."
3636
name="language-menu-example"
37-
slot="post-language-switch"
37+
slot="language-menu"
3838
>
3939
<post-language-menu-item active="false" code="de" name="Deutsch">DE</post-language-menu-item>
4040
<post-language-menu-item active="false" code="fr" name="French">FR</post-language-menu-item>
@@ -62,7 +62,7 @@
6262
</ul>
6363

6464
<!-- Main navigation -->
65-
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
65+
<post-mainnavigation slot="main-nav" caption="Hauptnavigation">
6666
<ul>
6767
<li>
6868
<post-megadropdown-trigger for="item-1">Item 1</post-megadropdown-trigger>

‎packages/components/cypress/fixtures/post-mainnavigation.test.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<post-logo slot="post-logo">Homepage</post-logo>
1818

1919
<!-- Meta navigation -->
20-
<ul slot="meta-navigation">
20+
<ul slot="global-nav-secondary">
2121
<li><a href="">Jobs</a></li>
2222
<li><a href="">Über uns</a></li>
2323
</ul>
@@ -34,7 +34,7 @@
3434
caption="Change the language"
3535
description="The currently selected language is English."
3636
name="language-menu-example"
37-
slot="post-language-switch"
37+
slot="language-menu"
3838
>
3939
<post-language-menu-item active="false" code="de" name="Deutsch">DE</post-language-menu-item>
4040
<post-language-menu-item active="false" code="fr" name="French">FR</post-language-menu-item>
@@ -62,7 +62,7 @@
6262
</ul>
6363

6464
<!-- Main navigation -->
65-
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
65+
<post-mainnavigation slot="main-nav" caption="Hauptnavigation">
6666
<ul>
6767
<!-- Link only level 1 -->
6868
<li><a href="/briefe">Briefe</a></li>

‎packages/components/src/components/post-header/post-header.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { EventFrom } from '@/utils/event-from';
99

1010
/**
1111
* @slot post-logo - Should be used together with the `<post-logo>` component.
12-
* @slot global-controls - Holds search button in the global header.
13-
* @slot meta-navigation - Holds an `<ul>` with meta navigation links.
12+
* @slot global-nav-primary - Holds search button in the global header.
13+
* @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
1414
* @slot post-togglebutton - Holds the burger menu toggler.
15-
* @slot post-language-switch - Should be used with the `<post-language-switch>` component.
15+
* @slot language-menu - Should be used with the `<post-language-switch>` component.
1616
* @slot title - Holds the application title.
17-
* @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
18-
* @slot target-group - Holds the list of buttons to choose the target group.
19-
* @slot global-login - Holds the user menu or login button in the global header.
17+
* @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
18+
* @slot audience - Holds the list of buttons to choose the target group.
19+
* @slot post-login - Holds the user menu or login button in the global header.
2020
* @slot local-nav - Holds controls specific to the current application.
2121
*/
2222

@@ -222,15 +222,15 @@ export class PostHeader {
222222
private getFocusableElements() {
223223
// Get elements in the correct order (different as the DOM order)
224224
const focusableEls = [
225-
...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
225+
...Array.from(this.host.querySelectorAll('.list-inline:not([slot="global-nav-secondary"]) > li')),
226226
...Array.from(
227227
this.host.querySelectorAll(
228228
'nav > post-list > div > post-list-item, post-megadropdown-trigger',
229229
),
230230
),
231231
...Array.from(
232232
this.host.querySelectorAll(
233-
'.list-inline[slot="meta-navigation"] > li, post-language-menu-item',
233+
'.list-inline[slot="global-nav-secondary"] > li, post-language-menu-item',
234234
),
235235
),
236236
];
@@ -345,9 +345,9 @@ export class PostHeader {
345345
}
346346

347347
private checkSlottedContent() {
348-
this.hasNavigation = !!this.host.querySelector('[slot="post-mainnavigation"]');
348+
this.hasNavigation = !!this.host.querySelector('[slot="main-nav"]');
349349
this.hasLocalNav = !!this.host.querySelector('[slot="local-nav"]');
350-
this.hasTargetGroup = !!this.host.querySelector('[slot="target-group"]');
350+
this.hasTargetGroup = !!this.host.querySelector('[slot="audience"]');
351351
this.hasTitle = !!this.host.querySelector('[slot="title"]');
352352
}
353353

@@ -384,7 +384,7 @@ export class PostHeader {
384384
if (this.device === 'desktop') {
385385
return (
386386
<div class={{ 'navigation': true, 'megadropdown-open': this.megadropdownOpen }}>
387-
<slot name="post-mainnavigation"></slot>
387+
<slot name="main-nav"></slot>
388388
{localNav}
389389
</div>
390390
);
@@ -403,12 +403,12 @@ export class PostHeader {
403403
>
404404
{localNav}
405405
<div class="burger-menu-body">
406-
<slot name="target-group"></slot>
407-
<slot name="post-mainnavigation"></slot>
406+
<slot name="audience"></slot>
407+
<slot name="main-nav"></slot>
408408
</div>
409409
<div class="burger-menu-footer">
410-
<slot name="meta-navigation"></slot>
411-
<slot name="post-language-switch"></slot>
410+
<slot name="global-nav-secondary"></slot>
411+
<slot name="language-menu"></slot>
412412
</div>
413413
</div>
414414
);
@@ -429,15 +429,15 @@ export class PostHeader {
429429
<div class="sliding-controls">
430430
{this.device === 'desktop' && (
431431
<div class="target-group">
432-
<slot name="target-group"></slot>
432+
<slot name="audience"></slot>
433433
</div>
434434
)}
435-
<slot name="global-controls"></slot>
435+
<slot name="global-nav-primary"></slot>
436436
{!this.hasBurgerMenu && [
437-
<slot name="meta-navigation"></slot>,
438-
<slot name="post-language-switch"></slot>,
437+
<slot name="global-nav-secondary"></slot>,
438+
<slot name="language-menu"></slot>,
439439
]}
440-
<slot name="global-login"></slot>
440+
<slot name="post-login"></slot>
441441
{this.hasNavigation && this.device !== 'desktop' && (
442442
<div onClick={() => this.toggleBurgerMenu()} class="burger-menu-toggle">
443443
<slot name="post-togglebutton"></slot>

‎packages/components/src/components/post-header/readme.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@ Type: `Promise<void>`
2828

2929
| Slot | Description |
3030
| ------------------------ | ----------------------------------------------------------------------------- |
31-
| `"global-controls"` | Holds search button in the global header. |
32-
| `"global-login"` | Holds the user menu or login button in the global header. |
31+
| `"audience"` | Holds the list of buttons to choose the target group. |
32+
| `"global-nav-primary"` | Holds search button in the global header. |
33+
| `"global-nav-secondary"` | Holds an `<ul>` with meta navigation links. |
34+
| `"language-menu"` | Should be used with the `<post-language-switch>` component. |
3335
| `"local-nav"` | Holds controls specific to the current application. |
34-
| `"meta-navigation"` | Holds an `<ul>` with meta navigation links. |
35-
| `"post-language-switch"` | Should be used with the `<post-language-switch>` component. |
36+
| `"main-nav"` | Has a default slot because it's only meant to be used in the `<post-header>`. |
37+
| `"post-login"` | Holds the user menu or login button in the global header. |
3638
| `"post-logo"` | Should be used together with the `<post-logo>` component. |
37-
| `"post-mainnavigation"` | Has a default slot because it's only meant to be used in the `<post-header>`. |
3839
| `"post-togglebutton"` | Holds the burger menu toggler. |
39-
| `"target-group"` | Holds the list of buttons to choose the target group. |
4040
| `"title"` | Holds the application title. |
4141

4242

‎packages/components/src/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<post-logo slot="post-logo">Homepage</post-logo>
2323

2424
<!-- Meta navigation -->
25-
<ul slot="meta-navigation">
25+
<ul slot="global-nav-secondary">
2626
<li><a href="">Jobs</a></li>
2727
<li><a href="">Über uns</a></li>
2828
</ul>
@@ -39,7 +39,7 @@
3939
caption="Change the language"
4040
description="The currently selected language is English."
4141
name="language-menu-example"
42-
slot="post-language-switch"
42+
slot="language-menu"
4343
variant="menu"
4444
>
4545
<post-language-menu-item code="de" name="Deutsch">DE</post-language-menu-item>
@@ -52,7 +52,7 @@
5252
<p slot="title">Application title</p>
5353

5454
<!-- Target group -->
55-
<ul slot="target-group">
55+
<ul slot="audience">
5656
<li>
5757
<a href="#" aria-current="location">Private customers</a>
5858
</li>
@@ -78,7 +78,7 @@
7878
</ul>
7979

8080
<!-- Main navigation -->
81-
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
81+
<post-mainnavigation slot="main-nav" caption="Hauptnavigation">
8282
<ul>
8383
<!-- Link only level 1 -->
8484
<li><a href="/briefe">Briefe</a></li>

‎packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const meta: MetaComponent = {
2222
<post-logo slot="post-logo" url="/">Homepage</post-logo>
2323
2424
<!-- Meta navigation -->
25-
<ul slot="meta-navigation">
25+
<ul slot="global-nav-secondary">
2626
<li><a href="">Jobs</a></li>
2727
<li><a href="">Über uns</a></li>
2828
</ul>
@@ -40,7 +40,7 @@ const meta: MetaComponent = {
4040
description="The currently selected language is English."
4141
variant="list"
4242
name="language-menu-example"
43-
slot="post-language-switch"
43+
slot="language-menu"
4444
>
4545
<post-language-menu-item active="false" code="de" name="Deutsch">de</post-language-menu-item>
4646
<post-language-menu-item active="false" code="fr" name="French">fr</post-language-menu-item>
@@ -68,7 +68,7 @@ const meta: MetaComponent = {
6868
</ul>
6969
7070
<!-- Main navigation -->
71-
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
71+
<post-mainnavigation slot="main-nav" caption="Hauptnavigation">
7272
<ul>
7373
<!-- Link only level 1 -->
7474
<li><a href="/briefe">Briefe</a></li>

0 commit comments

Comments
 (0)