Skip to content

Commit 9217d81

Browse files
alizedebrayalizedebray
authored
chore(components): simplify post-mainnavigation (#6706)
## 📄 Description Please include a summary of the changes made in this PR. ## 🚀 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 108f554 commit 9217d81

File tree

22 files changed

+351
-409
lines changed

22 files changed

+351
-409
lines changed

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

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -68,50 +68,50 @@
6868

6969
<!-- Main navigation -->
7070
<post-mainnavigation caption="Main navigation">
71-
<post-list title-hidden="">
72-
<p>Main Navigation</p>
71+
<ul>
7372
<!-- Link only level 1 -->
74-
<post-list-item slot="post-list-item">
73+
<li>
7574
<a href="/letters">Letters</a>
76-
</post-list-item>
77-
<post-list-item slot="post-list-item">
75+
</li>
76+
<li>
7877
<a href="/packages">Packages</a>
79-
</post-list-item>
78+
</li>
8079

8180
<!-- Level 1 with megadropdown -->
8281
@for (dropdown of megadropdowns; track dropdown.id) {
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>
82+
<li>
83+
<post-megadropdown-trigger [for]="dropdown.id">{{
84+
dropdown.trigger
85+
}}</post-megadropdown-trigger>
86+
<post-megadropdown [id]="dropdown.id">
87+
<button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
88+
<post-icon name="arrowleft"></post-icon>
89+
Back
90+
</button>
91+
<post-closebutton slot="close-button">Close</post-closebutton>
92+
<a slot="megadropdown-overview-link" [href]="dropdown.overviewLink"
93+
>Overview {{ dropdown.trigger }}</a
94+
>
95+
@for (section of dropdown.sections; track section.title) {
96+
<post-list>
97+
@if (section.titleLink) {
98+
<p>
99+
<a [href]="section.titleLink">{{ section.title }}</a>
100+
</p>
101+
} @else {
102+
<p>{{ section.title }}</p>
103+
}
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>
108+
}
109+
</post-list>
108110
}
109-
</post-list>
110-
}
111-
</post-megadropdown>
112-
</post-list-item>
111+
</post-megadropdown>
112+
</li>
113113
}
114-
</post-list>
114+
</ul>
115115
</post-mainnavigation>
116116
</post-header>
117117

‎packages/components/cypress/e2e/mainnavigation.cy.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
1111

1212
function isFullyVisible($el: JQuery<HTMLElement>) {
1313
const mainNavigation = $el.parents('post-mainnavigation').get(0);
14-
const scrollLeft = $el.parents('post-mainnavigation').children('.scroll-left').get(0);
15-
const scrollRight = $el.parents('post-mainnavigation').children('.scroll-right').get(0);
14+
const scrollLeft = mainNavigation.shadowRoot.querySelector('.scroll-left');
15+
const scrollRight = mainNavigation.shadowRoot.querySelector('.scroll-right');
1616

1717
const leftEdge =
1818
scrollLeft.getBoundingClientRect().right || mainNavigation.getBoundingClientRect().left;
@@ -42,12 +42,13 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
4242
cy.get('post-mainnavigation[data-hydrated]').as('mainnavigation');
4343

4444
cy.get('@mainnavigation')
45-
.find('nav :is(a,button):not(post-megadropdown *)')
45+
.find(':is(a,button):not(post-megadropdown *)')
4646
.should('have.length', 20)
4747
.as('navigationItems');
4848

4949
// remove smooth scroll to speed up the tests
5050
cy.get('@mainnavigation')
51+
.shadow()
5152
.find('nav')
5253
.then($nav => {
5354
$nav.css('scroll-behavior', 'auto');
@@ -64,7 +65,7 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
6465

6566
describe('right scroll', () => {
6667
beforeEach(() => {
67-
cy.get('@mainnavigation').find('.scroll-right').as('rightScroll');
68+
cy.get('@mainnavigation').shadow().find('.scroll-right').as('rightScroll');
6869
});
6970

7071
it('should correctly show the right scroll button', () => {
@@ -153,7 +154,7 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
153154
.then($options => $options.get().reverse())
154155
.as('navigationItemsReversed');
155156

156-
cy.get('@mainnavigation').find('.scroll-left').as('leftScroll');
157+
cy.get('@mainnavigation').shadow().find('.scroll-left').as('leftScroll');
157158

158159
cy.wait(0); // wait for rendering
159160
});
@@ -223,8 +224,8 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
223224
beforeEach(() => {
224225
cy.visit('./cypress/fixtures/post-mainnavigation-overflow.test.html');
225226
cy.get('post-mainnavigation[data-hydrated]').as('mainnavigation');
226-
cy.get('@mainnavigation').find('.scroll-left').as('leftScroll');
227-
cy.get('@mainnavigation').find('.scroll-right').as('rightScroll');
227+
cy.get('@mainnavigation').shadow().find('.scroll-left').as('leftScroll');
228+
cy.get('@mainnavigation').shadow().find('.scroll-right').as('rightScroll');
228229
});
229230

230231
it('should update scrollability when viewport changes', () => {
@@ -247,15 +248,15 @@ describe('mainnavigation', { baseUrl: null, includeShadowDom: true }, () => {
247248
cy.get('@leftScroll').should('not.be.visible');
248249

249250
cy.get('@mainnavigation')
250-
.find('post-list-item')
251+
.find('li')
251252
.its('length')
252253
.then(itemCount => {
253254
// Remove enough items to eliminate the need for scrolling
254255
cy.get('@mainnavigation')
255-
.find('post-list > [role="list"]')
256+
.find('ul')
256257
.then($navList => {
257258
const itemsToRemove = Math.floor(itemCount / 2);
258-
const items = $navList.find('post-list-item').slice(-itemsToRemove);
259+
const items = $navList.find('li').slice(-itemsToRemove);
259260
items.each((_, item) => {
260261
item.remove();
261262
});

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

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,8 @@
6363

6464
<!-- Main navigation -->
6565
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
66-
<post-list title-hidden="">
67-
<p>Main Navigation</p>
68-
69-
<post-list-item slot="post-list-item">
66+
<ul>
67+
<li>
7068
<post-megadropdown-trigger for="item-1">Item 1</post-megadropdown-trigger>
7169
<post-megadropdown id="item-1">
7270
<button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -102,29 +100,29 @@
102100
>
103101
</post-list>
104102
</post-megadropdown>
105-
</post-list-item>
103+
</li>
106104

107105
<!-- Link only level 1 -->
108-
<post-list-item slot="post-list-item"><a href="/item-2">Item 2</a></post-list-item>
109-
<post-list-item slot="post-list-item"><a href="/item-3">Item 3</a></post-list-item>
110-
<post-list-item slot="post-list-item"><a href="/item-4">Item 4</a></post-list-item>
111-
<post-list-item slot="post-list-item"><a href="/item-5">Item 5</a></post-list-item>
112-
<post-list-item slot="post-list-item"><a href="/item-6">Item 6</a></post-list-item>
113-
<post-list-item slot="post-list-item"><a href="/item-7">Item 7</a></post-list-item>
114-
<post-list-item slot="post-list-item"><a href="/item-8">Item 8</a></post-list-item>
115-
<post-list-item slot="post-list-item"><a href="/item-9">Item 9</a></post-list-item>
116-
<post-list-item slot="post-list-item"><a href="/item-10">Item 10</a></post-list-item>
117-
<post-list-item slot="post-list-item"><a href="/item-11">Item 11</a></post-list-item>
118-
<post-list-item slot="post-list-item"><a href="/item-12">Item 12</a></post-list-item>
119-
<post-list-item slot="post-list-item"><a href="/item-13">Item 13</a></post-list-item>
120-
<post-list-item slot="post-list-item"><a href="/item-14">Item 14</a></post-list-item>
121-
<post-list-item slot="post-list-item"><a href="/item-15">Item 15</a></post-list-item>
122-
<post-list-item slot="post-list-item"><a href="/item-16">Item 16</a></post-list-item>
123-
<post-list-item slot="post-list-item"><a href="/item-17">Item 17</a></post-list-item>
124-
<post-list-item slot="post-list-item"><a href="/item-18">Item 18</a></post-list-item>
125-
<post-list-item slot="post-list-item"><a href="/item-19">Item 19</a></post-list-item>
106+
<li><a href="/item-2">Item 2</a></li>
107+
<li><a href="/item-3">Item 3</a></li>
108+
<li><a href="/item-4">Item 4</a></li>
109+
<li><a href="/item-5">Item 5</a></li>
110+
<li><a href="/item-6">Item 6</a></li>
111+
<li><a href="/item-7">Item 7</a></li>
112+
<li><a href="/item-8">Item 8</a></li>
113+
<li><a href="/item-9">Item 9</a></li>
114+
<li><a href="/item-10">Item 10</a></li>
115+
<li><a href="/item-11">Item 11</a></li>
116+
<li><a href="/item-12">Item 12</a></li>
117+
<li><a href="/item-13">Item 13</a></li>
118+
<li><a href="/item-14">Item 14</a></li>
119+
<li><a href="/item-15">Item 15</a></li>
120+
<li><a href="/item-16">Item 16</a></li>
121+
<li><a href="/item-17">Item 17</a></li>
122+
<li><a href="/item-18">Item 18</a></li>
123+
<li><a href="/item-19">Item 19</a></li>
126124

127-
<post-list-item slot="post-list-item">
125+
<li>
128126
<post-megadropdown-trigger for="item-20">Item 20</post-megadropdown-trigger>
129127
<post-megadropdown id="item-20">
130128
<button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -160,8 +158,8 @@
160158
>
161159
</post-list>
162160
</post-megadropdown>
163-
</post-list-item>
164-
</post-list>
161+
</li>
162+
</ul>
165163
</post-mainnavigation>
166164
</post-header>
167165
</body>

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,13 @@
6363

6464
<!-- Main navigation -->
6565
<post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
66-
<post-list title-hidden="">
67-
<p>Main Navigation</p>
68-
66+
<ul>
6967
<!-- Link only level 1 -->
70-
<post-list-item><a href="/briefe">Briefe</a></post-list-item>
71-
<post-list-item><a href="/pakete">Pakete</a></post-list-item>
68+
<li><a href="/briefe">Briefe</a></li>
69+
<li><a href="/pakete">Pakete</a></li>
7270

7371
<!-- Level 1 with megadropdown -->
74-
<post-list-item>
72+
<li>
7573
<post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
7674
<post-megadropdown id="briefe">
7775
<button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -95,8 +93,8 @@
9593
<post-list-item><a href="">Express und Kurier</a></post-list-item>
9694
</post-list>
9795
</post-megadropdown>
98-
</post-list-item>
99-
<post-list-item>
96+
</li>
97+
<li>
10098
<post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
10199
<post-megadropdown id="pakete">
102100
<button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -120,8 +118,8 @@
120118
<post-list-item><a href="">Express und Kurier</a></post-list-item>
121119
</post-list>
122120
</post-megadropdown>
123-
</post-list-item>
124-
</post-list>
121+
</li>
122+
</ul>
125123
</post-mainnavigation>
126124
</post-header>
127125
</body>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ some content
3030
- [post-closebutton](../post-closebutton)
3131
- [post-language-menu](../post-language-menu)
3232
- [post-mainnavigation](../post-mainnavigation)
33+
- [post-megadropdown-trigger](../post-megadropdown-trigger)
3334
- [post-pagination](../post-pagination)
3435
- [post-rating](../post-rating)
3536

@@ -44,6 +45,7 @@ graph TD;
4445
post-closebutton --> post-icon
4546
post-language-menu --> post-icon
4647
post-mainnavigation --> post-icon
48+
post-megadropdown-trigger --> post-icon
4749
post-pagination --> post-icon
4850
post-rating --> post-icon
4951
style post-icon fill:#f9f,stroke:#333,stroke-width:4px

‎packages/components/src/components/post-language-menu/post-language-menu.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ tokens.$default-map: components.$post-button;
2222
}
2323

2424
.post-language-menu-trigger {
25-
@include header-mx.header-control-base;
26-
@include header-mx.header-control-icon-rotate;
25+
@include header-mx.nav-item-base;
26+
@include header-mx.nav-item-rotating-chevron;
2727
text-transform: uppercase;
2828
cursor: pointer;
2929
}

0 commit comments

Comments
 (0)