Skip to content

Commit 7b2c3aa

Browse files
alizedebrayalizedebray
authored
chore(components): use post-header without h-tags (#6693)
## 📄 Description This PR replaces h-tags by p-tags in the header and documents h-tag usage for the header title in a one-pager applications. ## 🚀 Demo If applicable, please add a screenshot or video to illustrate the changes. --- ## 🔮 Design review - [ ] Design review done - [x] 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 8e8bb8e commit 7b2c3aa

File tree

14 files changed

+369
-333
lines changed

14 files changed

+369
-333
lines changed

‎.changeset/angry-socks-fall.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@swisspost/design-system-components': major
3+
'@swisspost/design-system-documentation': patch
4+
---
5+
6+
Updated `post-header` to prevent unnecessary h-tags.
7+
An h-tag can now only be used for the header title in microsite or one-page variants, other elements no longer use h-tags.

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

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<!-- Main navigation -->
7070
<post-mainnavigation caption="Main navigation">
7171
<post-list title-hidden="">
72-
<h2>Main Navigation</h2>
72+
<p>Main Navigation</p>
7373
<!-- Link only level 1 -->
7474
<post-list-item slot="post-list-item">
7575
<a href="/letters">Letters</a>
@@ -80,32 +80,36 @@ <h2>Main Navigation</h2>
8080

8181
<!-- Level 1 with megadropdown -->
8282
@for (dropdown of megadropdowns; track dropdown.id) {
83-
<post-list-item slot="post-list-item">
84-
<post-megadropdown-trigger [for]="dropdown.id">{{ dropdown.trigger }}</post-megadropdown-trigger>
85-
<post-megadropdown [id]="dropdown.id">
86-
<button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
87-
<post-icon name="arrowleft"></post-icon>
88-
Back
89-
</button>
90-
<post-closebutton slot="close-button">Close</post-closebutton>
91-
<h2 slot="megadropdown-title">{{ dropdown.title }}</h2>
92-
<a slot="megadropdown-overview-link" [href]="dropdown.overviewLink">Overview {{ dropdown.trigger }}</a>
93-
@for (section of dropdown.sections; track section.title) {
94-
<post-list>
95-
@if (section.titleLink) {
96-
<h3><a [href]="section.titleLink">{{ section.title }}</a></h3>
97-
} @else {
98-
<h3>{{ section.title }}</h3>
99-
}
100-
@for (link of section.links; track link.text) {
101-
<post-list-item slot="post-list-item">
102-
<a [href]="link.url">{{ link.text }}</a>
103-
</post-list-item>
104-
}
105-
</post-list>
83+
<post-list-item slot="post-list-item">
84+
<post-megadropdown-trigger [for]="dropdown.id">{{
85+
dropdown.trigger
86+
}}</post-megadropdown-trigger>
87+
<post-megadropdown [id]="dropdown.id">
88+
<button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
89+
<post-icon name="arrowleft"></post-icon>
90+
Back
91+
</button>
92+
<post-closebutton slot="close-button">Close</post-closebutton>
93+
<a slot="megadropdown-overview-link" [href]="dropdown.overviewLink"
94+
>Overview {{ dropdown.trigger }}</a
95+
>
96+
@for (section of dropdown.sections; track section.title) {
97+
<post-list>
98+
@if (section.titleLink) {
99+
<p>
100+
<a [href]="section.titleLink">{{ section.title }}</a>
101+
</p>
102+
} @else {
103+
<p>{{ section.title }}</p>
104+
} @for (link of section.links; track link.text) {
105+
<post-list-item slot="post-list-item">
106+
<a [href]="link.url">{{ link.text }}</a>
107+
</post-list-item>
106108
}
107-
</post-megadropdown>
108-
</post-list-item>
109+
</post-list>
110+
}
111+
</post-megadropdown>
112+
</post-list-item>
109113
}
110114
</post-list>
111115
</post-mainnavigation>
@@ -144,26 +148,26 @@ <h1>Hurray, it works!</h1>
144148

145149
<post-footer label="Footer label">
146150
@for (grid of footerGrids; track grid.slot) {
147-
<span [attr.slot]="grid.slot + '-title'">{{ grid.title }}</span>
148-
<post-list [attr.slot]="grid.slot" [attr.id]="grid.slot">
149-
<h3>{{ grid.title }}</h3>
150-
@for (link of footerLinks.slice(0, grid.linkCount); track link.text) {
151-
<post-list-item>
152-
<a [href]="link.url">{{ link.text }}</a>
153-
</post-list-item>
154-
}
155-
</post-list>
151+
<span [attr.slot]="grid.slot + '-title'">{{ grid.title }}</span>
152+
<post-list [attr.slot]="grid.slot" [attr.id]="grid.slot">
153+
<h3>{{ grid.title }}</h3>
154+
@for (link of footerLinks.slice(0, grid.linkCount); track link.text) {
155+
<post-list-item>
156+
<a [href]="link.url">{{ link.text }}</a>
157+
</post-list-item>
158+
}
159+
</post-list>
156160
}
157161

158162
<post-list slot="socialmedia">
159163
<h3>Follow us</h3>
160164
@for (social of socialMediaLinks; track social.name) {
161-
<post-list-item>
162-
<a [href]="social.url" class="btn btn-primary btn-icon">
163-
<post-icon aria-hidden="true" [name]="social.icon"></post-icon>
164-
<span class="visually-hidden">{{ social.name }}</span>
165-
</a>
166-
</post-list-item>
165+
<post-list-item>
166+
<a [href]="social.url" class="btn btn-primary btn-icon">
167+
<post-icon aria-hidden="true" [name]="social.icon"></post-icon>
168+
<span class="visually-hidden">{{ social.name }}</span>
169+
</a>
170+
</post-list-item>
167171
}
168172
</post-list>
169173

@@ -184,10 +188,7 @@ <h3>Download app</h3>
184188
</a>
185189
</post-list-item>
186190
<post-list-item>
187-
<a
188-
class="app-store-badge"
189-
href="https://apps.apple.com/ch/app/die-post/id378676700"
190-
>
191+
<a class="app-store-badge" href="https://apps.apple.com/ch/app/die-post/id378676700">
191192
<img
192193
width="120"
193194
height="40"
@@ -212,9 +213,9 @@ <h3>Die schweizerische Post AG</h3>
212213
<post-list slot="meta" title-hidden="">
213214
<h3>Meta</h3>
214215
@for (meta of metaLinks; track meta.text) {
215-
<post-list-item>
216-
<a [href]="meta.url">{{ meta.text }}</a>
217-
</post-list-item>
216+
<post-list-item>
217+
<a [href]="meta.url">{{ meta.text }}</a>
218+
</post-list-item>
218219
}
219220
<post-list-item>
220221
<button
@@ -230,4 +231,4 @@ <h3>Meta</h3>
230231

231232
<span slot="copyright">© Copyright 2024 by Swiss Post Ltd.</span>
232233
<span slot="copyright">All rights reserved.</span>
233-
</post-footer>
234+
</post-footer>

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</post-language-switch>
4444

4545
<!-- Application title (optional) -->
46-
<h1 slot="title">Application title</h1>
46+
<p slot="title">Application title</p>
4747

4848
<!-- Custom content (optional) -->
4949
<ul slot="local-controls" class="list-inline">
@@ -64,7 +64,7 @@ <h1 slot="title">Application title</h1>
6464
<!-- Main navigation -->
6565
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
6666
<post-list title-hidden="">
67-
<h2>Main Navigation</h2>
67+
<p>Main Navigation</p>
6868

6969
<post-list-item slot="post-list-item">
7070
<post-megadropdown-trigger for="item-1">Item 1</post-megadropdown-trigger>
@@ -74,10 +74,9 @@ <h2>Main Navigation</h2>
7474
Back
7575
</button>
7676
<post-closebutton slot="close-button">Schliessen</post-closebutton>
77-
<h2 slot="megadropdown-title">Briefe title</h2>
7877
<a slot="megadropdown-overview-link" href="/briefe">Übersicht Briefe</a>
7978
<post-list>
80-
<h3>Briefe senden</h3>
79+
<p>Briefe senden</p>
8180
<post-list-item slot="post-list-item"
8281
><a href="/sch">Briefe Schweiz</a></post-list-item
8382
>
@@ -90,7 +89,7 @@ <h3>Briefe senden</h3>
9089
>
9190
</post-list>
9291
<post-list>
93-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
92+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
9493
<post-list-item slot="post-list-item"
9594
><a href="/sch">Pakete Schweiz</a></post-list-item
9695
>
@@ -133,10 +132,9 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
133132
Back
134133
</button>
135134
<post-closebutton slot="close-button">Schliessen</post-closebutton>
136-
<h2 slot="megadropdown-title">Pakete title</h2>
137135
<a slot="megadropdown-overview-link" href="/pakete">Übersicht Pakete</a>
138136
<post-list>
139-
<h3>Pakete senden</h3>
137+
<p>Pakete senden</p>
140138
<post-list-item slot="post-list-item"
141139
><a href="/sch">Pakete Schweiz</a></post-list-item
142140
>
@@ -149,7 +147,7 @@ <h3>Pakete senden</h3>
149147
>
150148
</post-list>
151149
<post-list>
152-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
150+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
153151
<post-list-item slot="post-list-item"
154152
><a href="/sch">Pakete Schweiz</a></post-list-item
155153
>

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</post-language-switch>
4444

4545
<!-- Application title (optional) -->
46-
<h1 slot="title">Application title</h1>
46+
<p slot="title">Application title</p>
4747

4848
<!-- Custom content (optional) -->
4949
<ul slot="local-controls" class="list-inline">
@@ -64,7 +64,7 @@ <h1 slot="title">Application title</h1>
6464
<!-- Main navigation -->
6565
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
6666
<post-list title-hidden="">
67-
<h2>Main Navigation</h2>
67+
<p>Main Navigation</p>
6868

6969
<!-- Link only level 1 -->
7070
<post-list-item><a href="/briefe">Briefe</a></post-list-item>
@@ -79,17 +79,16 @@ <h2>Main Navigation</h2>
7979
Back
8080
</button>
8181
<post-closebutton slot="close-button">Schliessen</post-closebutton>
82-
<h2 slot="megadropdown-title">Briefe title</h2>
8382
<a slot="megadropdown-overview-link" href="/briefe">Übersicht Briefe</a>
8483
<post-list>
85-
<h3>Briefe senden</h3>
84+
<p>Briefe senden</p>
8685
<post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
8786
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
8887
<post-list-item><a href="">Waren Ausland</a></post-list-item>
8988
<post-list-item><a href="">Express und Kurier</a></post-list-item>
9089
</post-list>
9190
<post-list>
92-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
91+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
9392
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
9493
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
9594
<post-list-item><a href="">Waren Ausland</a></post-list-item>
@@ -105,17 +104,16 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
105104
Back
106105
</button>
107106
<post-closebutton slot="close-button">Schliessen</post-closebutton>
108-
<h2 slot="megadropdown-title">Pakete title</h2>
109107
<a slot="megadropdown-overview-link" href="/pakete">Übersicht Pakete</a>
110108
<post-list>
111-
<h3>Pakete senden</h3>
109+
<p>Pakete senden</p>
112110
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
113111
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
114112
<post-list-item><a href="">Waren Ausland</a></post-list-item>
115113
<post-list-item><a href="">Express und Kurier</a></post-list-item>
116114
</post-list>
117115
<post-list>
118-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
116+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
119117
<post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
120118
<post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
121119
<post-list-item><a href="">Waren Ausland</a></post-list-item>

‎packages/components/src/components/post-megadropdown/post-megadropdown.scss‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -155,28 +155,6 @@
155155
}
156156
}
157157

158-
h2 {
159-
display: none;
160-
margin-block: 0 8px;
161-
font-weight: 900;
162-
163-
a {
164-
text-decoration: none;
165-
display: none;
166-
font-weight: inherit;
167-
border-block: 0;
168-
}
169-
170-
@include media.max(lg) {
171-
display: block;
172-
font-size: 1.25rem;
173-
}
174-
175-
@include media.max(sm) {
176-
font-size: 1.125rem;
177-
}
178-
}
179-
180158
post-list {
181159
display: grid;
182160
grid-row: span 2;
@@ -197,7 +175,7 @@
197175
flex-direction: column-reverse;
198176
height: 100%;
199177

200-
h3 {
178+
p {
201179
font-size: 20px;
202180
display: block;
203181
font-weight: 900;

‎packages/components/src/index.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
</post-language-switch>
5050

5151
<!-- Application title (optional) -->
52-
<h1 slot="title">Application title</h1>
52+
<p slot="title">Application title</p>
5353

5454
<!-- Target group -->
5555
<ul slot="target-group" class="target-group">
@@ -80,7 +80,7 @@ <h1 slot="title">Application title</h1>
8080
<!-- Main navigation -->
8181
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
8282
<post-list title-hidden="">
83-
<h2>Main Navigation</h2>
83+
<p>Main Navigation</p>
8484

8585
<!-- Link only level 1 -->
8686
<post-list-item slot="post-list-item"
@@ -103,10 +103,9 @@ <h2>Main Navigation</h2>
103103
Back
104104
</button>
105105
<post-closebutton slot="close-button">Schliessen</post-closebutton>
106-
<h2 slot="megadropdown-title">Briefe title</h2>
107106
<a slot="megadropdown-overview-link" href="/briefe">Übersicht Briefe</a>
108107
<post-list>
109-
<h3>Briefe senden</h3>
108+
<p>Briefe senden</p>
110109
<post-list-item slot="post-list-item"
111110
><a href="/sch">Briefe Schweiz</a></post-list-item
112111
>
@@ -119,7 +118,7 @@ <h3>Briefe senden</h3>
119118
>
120119
</post-list>
121120
<post-list>
122-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
121+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
123122
<post-list-item slot="post-list-item"
124123
><a href="/sch">Pakete Schweiz</a></post-list-item
125124
>
@@ -141,10 +140,9 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
141140
Back
142141
</button>
143142
<post-closebutton slot="close-button">Schliessen</post-closebutton>
144-
<h2 slot="megadropdown-title">Pakete title</h2>
145143
<a slot="megadropdown-overview-link" href="/pakete">Übersicht Pakete</a>
146144
<post-list>
147-
<h3>Pakete senden</h3>
145+
<p>Pakete senden</p>
148146
<post-list-item slot="post-list-item"
149147
><a href="/sch">Pakete Schweiz</a></post-list-item
150148
>
@@ -157,7 +155,7 @@ <h3>Pakete senden</h3>
157155
>
158156
</post-list>
159157
<post-list>
160-
<h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
158+
<p><a href="/schritt-für-schritt">Schritt für Schritt</a></p>
161159
<post-list-item slot="post-list-item"
162160
><a href="/sch">Pakete Schweiz</a></post-list-item
163161
>

0 commit comments

Comments
 (0)