Skip to content

Commit f10f336

Browse files
committed
Remove unnecessary classes from all header implementation
1 parent 9eee2a8 commit f10f336

File tree

6 files changed

+62
-60
lines changed

6 files changed

+62
-60
lines changed

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

Lines changed: 53 additions & 51 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" class="target-group">
6+
<ul slot="target-group">
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 class="list-inline" slot="global-controls">
16+
<ul slot="global-controls">
1717
<li>
1818
<a href="">
1919
<span>Search</span>
@@ -23,7 +23,7 @@
2323
</ul>
2424

2525
<!-- Meta navigation -->
26-
<ul class="list-inline" slot="meta-navigation">
26+
<ul slot="meta-navigation">
2727
<li>
2828
<a href="">
2929
Jobs
@@ -80,32 +80,37 @@ <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+
<h2 slot="megadropdown-title">{{ dropdown.title }}</h2>
94+
<a slot="megadropdown-overview-link" [href]="dropdown.overviewLink"
95+
>Overview {{ dropdown.trigger }}</a
96+
>
97+
@for (section of dropdown.sections; track section.title) {
98+
<post-list>
99+
@if (section.titleLink) {
100+
<h3>
101+
<a [href]="section.titleLink">{{ section.title }}</a>
102+
</h3>
103+
} @else {
104+
<h3>{{ section.title }}</h3>
105+
} @for (link of section.links; track link.text) {
106+
<post-list-item slot="post-list-item">
107+
<a [href]="link.url">{{ link.text }}</a>
108+
</post-list-item>
106109
}
107-
</post-megadropdown>
108-
</post-list-item>
110+
</post-list>
111+
}
112+
</post-megadropdown>
113+
</post-list-item>
109114
}
110115
</post-list>
111116
</post-mainnavigation>
@@ -144,26 +149,26 @@ <h1>Hurray, it works!</h1>
144149

145150
<post-footer label="Footer label">
146151
@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>
152+
<span [attr.slot]="grid.slot + '-title'">{{ grid.title }}</span>
153+
<post-list [attr.slot]="grid.slot" [attr.id]="grid.slot">
154+
<h3>{{ grid.title }}</h3>
155+
@for (link of footerLinks.slice(0, grid.linkCount); track link.text) {
156+
<post-list-item>
157+
<a [href]="link.url">{{ link.text }}</a>
158+
</post-list-item>
159+
}
160+
</post-list>
156161
}
157162

158163
<post-list slot="socialmedia">
159164
<h3>Follow us</h3>
160165
@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>
166+
<post-list-item>
167+
<a [href]="social.url" class="btn btn-primary btn-icon">
168+
<post-icon aria-hidden="true" [name]="social.icon"></post-icon>
169+
<span class="visually-hidden">{{ social.name }}</span>
170+
</a>
171+
</post-list-item>
167172
}
168173
</post-list>
169174

@@ -184,10 +189,7 @@ <h3>Download app</h3>
184189
</a>
185190
</post-list-item>
186191
<post-list-item>
187-
<a
188-
class="app-store-badge"
189-
href="https://apps.apple.com/ch/app/die-post/id378676700"
190-
>
192+
<a class="app-store-badge" href="https://apps.apple.com/ch/app/die-post/id378676700">
191193
<img
192194
width="120"
193195
height="40"
@@ -212,9 +214,9 @@ <h3>Die schweizerische Post AG</h3>
212214
<post-list slot="meta" title-hidden="">
213215
<h3>Meta</h3>
214216
@for (meta of metaLinks; track meta.text) {
215-
<post-list-item>
216-
<a [href]="meta.url">{{ meta.text }}</a>
217-
</post-list-item>
217+
<post-list-item>
218+
<a [href]="meta.url">{{ meta.text }}</a>
219+
</post-list-item>
218220
}
219221
<post-list-item>
220222
<button
@@ -230,4 +232,4 @@ <h3>Meta</h3>
230232

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

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

Lines changed: 2 additions & 2 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 class="list-inline" slot="meta-navigation">
20+
<ul slot="meta-navigation">
2121
<li><a href="">Jobs</a></li>
2222
<li><a href="">Über uns</a></li>
2323
</ul>
@@ -46,7 +46,7 @@
4646
<h1 slot="title">Application title</h1>
4747

4848
<!-- Custom content (optional) -->
49-
<ul slot="local-controls" class="list-inline">
49+
<ul slot="local-controls">
5050
<li>
5151
<a href="#">
5252
<span>Search</span>

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

Lines changed: 2 additions & 2 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 class="list-inline" slot="meta-navigation">
20+
<ul slot="meta-navigation">
2121
<li><a href="">Jobs</a></li>
2222
<li><a href="">Über uns</a></li>
2323
</ul>
@@ -46,7 +46,7 @@
4646
<h1 slot="title">Application title</h1>
4747

4848
<!-- Custom content (optional) -->
49-
<ul slot="local-controls" class="list-inline">
49+
<ul slot="local-controls">
5050
<li>
5151
<a href="#">
5252
<span>Search</span>

packages/components/src/index.html

Lines changed: 3 additions & 3 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 class="list-inline" slot="meta-navigation">
25+
<ul slot="meta-navigation">
2626
<li><a href="">Jobs</a></li>
2727
<li><a href="">Über uns</a></li>
2828
</ul>
@@ -52,7 +52,7 @@
5252
<h1 slot="title">Application title</h1>
5353

5454
<!-- Target group -->
55-
<ul slot="target-group" class="target-group">
55+
<ul slot="target-group">
5656
<li>
5757
<a href="#" aria-current="location">Private customers</a>
5858
</li>
@@ -62,7 +62,7 @@ <h1 slot="title">Application title</h1>
6262
</ul>
6363

6464
<!-- Local controls (optional) -->
65-
<ul slot="local-controls" class="list-inline">
65+
<ul slot="local-controls">
6666
<li>
6767
<a href="#">
6868
<span>Search</span>

packages/documentation/src/stories/components/header/renderers/target-group.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { html, nothing } from 'lit';
44
export function renderTargetGroup(args: Args) {
55
return html`
66
<!-- Target Group -->
7-
<ul slot="target-group" class="target-group">
7+
<ul slot="target-group">
88
<li>
99
<a href="#" aria-current=${args.jobs ? nothing : 'location'}>Private customers</a>
1010
</li>

packages/documentation/src/stories/components/target-group/target-group.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function clickBlocker(story: StoryFn, context: StoryContext) {
7777
export const Default: Story = {
7878
render: (args: Args) => {
7979
return html`
80-
<ul class="target-group">
80+
<ul>
8181
${[args.label_1, args.label_2, args.label_3].map(
8282
(arg, i) => html`
8383
<li>

0 commit comments

Comments
 (0)