Skip to content

Commit d6a32e7

Browse files
swisspost-botswisspost-bot
committed
Merge remote-tracking branch 'origin/main' into tokens/v2-2024-11
2 parents 7d40861 + 6aa530e commit d6a32e7

25 files changed

+1032
-25
lines changed

‎.changeset/big-socks-dress.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@swisspost/design-system-styles': patch
3+
---
4+
5+
Fixed issue where the focus ring was not appearing on inactive chips.

‎.changeset/popular-mirrors-cross.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@swisspost/design-system-components': minor
3+
'@swisspost/design-system-components-angular': minor
4+
'@swisspost/design-system-components-react': minor
5+
---
6+
7+
Added a provisional post-header component with some basic functionality in place. This component is not finished in this state.

‎packages/components/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"rimraf": "6.0.1",
6666
"rollup-plugin-postcss": "4.0.2",
6767
"sass": "1.78.0",
68+
"throttle-debounce": "5.0.2",
6869
"ts-jest": "29.2.4",
6970
"typescript": "5.5.4"
7071
},

‎packages/components/src/components.d.ts

+108
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,8 @@ export namespace Components {
170170
*/
171171
"update": () => Promise<void>;
172172
}
173+
interface PostHeader {
174+
}
173175
/**
174176
* @class PostIcon - representing a stencil component
175177
*/
@@ -243,6 +245,30 @@ export namespace Components {
243245
*/
244246
"url": string | URL;
245247
}
248+
interface PostMainnavigation {
249+
}
250+
interface PostMegadropdown {
251+
/**
252+
* Hide megadropdown
253+
* @returns boolean
254+
*/
255+
"hide": () => Promise<void>;
256+
/**
257+
* Show megadropdown
258+
* @param element HTMLElement
259+
* @returns boolean
260+
*/
261+
"show": (element: HTMLElement) => Promise<void>;
262+
/**
263+
* Toggle megadropdown
264+
* @param element HTMLElement
265+
* @param force boolean
266+
* @returns boolean
267+
*/
268+
"toggle": (element: HTMLElement, force?: boolean) => Promise<boolean>;
269+
}
270+
interface PostMegadropdownTrigger {
271+
}
246272
interface PostMenu {
247273
/**
248274
* Hides the popover menu and restores focus to the previously focused element.
@@ -429,6 +455,14 @@ export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
429455
detail: T;
430456
target: HTMLPostLanguageOptionElement;
431457
}
458+
export interface PostMainnavigationCustomEvent<T> extends CustomEvent<T> {
459+
detail: T;
460+
target: HTMLPostMainnavigationElement;
461+
}
462+
export interface PostMegadropdownTriggerCustomEvent<T> extends CustomEvent<T> {
463+
detail: T;
464+
target: HTMLPostMegadropdownTriggerElement;
465+
}
432466
export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
433467
detail: T;
434468
target: HTMLPostMenuElement;
@@ -537,6 +571,12 @@ declare global {
537571
prototype: HTMLPostCollapsibleTriggerElement;
538572
new (): HTMLPostCollapsibleTriggerElement;
539573
};
574+
interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement {
575+
}
576+
var HTMLPostHeaderElement: {
577+
prototype: HTMLPostHeaderElement;
578+
new (): HTMLPostHeaderElement;
579+
};
540580
/**
541581
* @class PostIcon - representing a stencil component
542582
*/
@@ -581,6 +621,46 @@ declare global {
581621
prototype: HTMLPostLogoElement;
582622
new (): HTMLPostLogoElement;
583623
};
624+
interface HTMLPostMainnavigationElementEventMap {
625+
"postToggle": any;
626+
}
627+
interface HTMLPostMainnavigationElement extends Components.PostMainnavigation, HTMLStencilElement {
628+
addEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
629+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
630+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
631+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
632+
removeEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
633+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
634+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
635+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
636+
}
637+
var HTMLPostMainnavigationElement: {
638+
prototype: HTMLPostMainnavigationElement;
639+
new (): HTMLPostMainnavigationElement;
640+
};
641+
interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
642+
}
643+
var HTMLPostMegadropdownElement: {
644+
prototype: HTMLPostMegadropdownElement;
645+
new (): HTMLPostMegadropdownElement;
646+
};
647+
interface HTMLPostMegadropdownTriggerElementEventMap {
648+
"postToggle": any;
649+
}
650+
interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
651+
addEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
652+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
653+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
654+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
655+
removeEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
656+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
657+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
658+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
659+
}
660+
var HTMLPostMegadropdownTriggerElement: {
661+
prototype: HTMLPostMegadropdownTriggerElement;
662+
new (): HTMLPostMegadropdownTriggerElement;
663+
};
584664
interface HTMLPostMenuElementEventMap {
585665
"toggleMenu": boolean;
586666
}
@@ -702,11 +782,15 @@ declare global {
702782
"post-closebutton": HTMLPostClosebuttonElement;
703783
"post-collapsible": HTMLPostCollapsibleElement;
704784
"post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
785+
"post-header": HTMLPostHeaderElement;
705786
"post-icon": HTMLPostIconElement;
706787
"post-language-option": HTMLPostLanguageOptionElement;
707788
"post-list": HTMLPostListElement;
708789
"post-list-item": HTMLPostListItemElement;
709790
"post-logo": HTMLPostLogoElement;
791+
"post-mainnavigation": HTMLPostMainnavigationElement;
792+
"post-megadropdown": HTMLPostMegadropdownElement;
793+
"post-megadropdown-trigger": HTMLPostMegadropdownTriggerElement;
710794
"post-menu": HTMLPostMenuElement;
711795
"post-menu-item": HTMLPostMenuItemElement;
712796
"post-menu-trigger": HTMLPostMenuTriggerElement;
@@ -859,6 +943,8 @@ declare namespace LocalJSX {
859943
*/
860944
"for"?: string;
861945
}
946+
interface PostHeader {
947+
}
862948
/**
863949
* @class PostIcon - representing a stencil component
864950
*/
@@ -932,6 +1018,20 @@ declare namespace LocalJSX {
9321018
*/
9331019
"url"?: string | URL;
9341020
}
1021+
interface PostMainnavigation {
1022+
/**
1023+
* Gets emitted when a user closes the main navigation on mobile
1024+
*/
1025+
"onPostToggle"?: (event: PostMainnavigationCustomEvent<any>) => void;
1026+
}
1027+
interface PostMegadropdown {
1028+
}
1029+
interface PostMegadropdownTrigger {
1030+
/**
1031+
* Emits after each toggle
1032+
*/
1033+
"onPostToggle"?: (event: PostMegadropdownTriggerCustomEvent<any>) => void;
1034+
}
9351035
interface PostMenu {
9361036
/**
9371037
* Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
@@ -1068,11 +1168,15 @@ declare namespace LocalJSX {
10681168
"post-closebutton": PostClosebutton;
10691169
"post-collapsible": PostCollapsible;
10701170
"post-collapsible-trigger": PostCollapsibleTrigger;
1171+
"post-header": PostHeader;
10711172
"post-icon": PostIcon;
10721173
"post-language-option": PostLanguageOption;
10731174
"post-list": PostList;
10741175
"post-list-item": PostListItem;
10751176
"post-logo": PostLogo;
1177+
"post-mainnavigation": PostMainnavigation;
1178+
"post-megadropdown": PostMegadropdown;
1179+
"post-megadropdown-trigger": PostMegadropdownTrigger;
10761180
"post-menu": PostMenu;
10771181
"post-menu-item": PostMenuItem;
10781182
"post-menu-trigger": PostMenuTrigger;
@@ -1102,6 +1206,7 @@ declare module "@stencil/core" {
11021206
"post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
11031207
"post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
11041208
"post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
1209+
"post-header": LocalJSX.PostHeader & JSXBase.HTMLAttributes<HTMLPostHeaderElement>;
11051210
/**
11061211
* @class PostIcon - representing a stencil component
11071212
*/
@@ -1110,6 +1215,9 @@ declare module "@stencil/core" {
11101215
"post-list": LocalJSX.PostList & JSXBase.HTMLAttributes<HTMLPostListElement>;
11111216
"post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes<HTMLPostListItemElement>;
11121217
"post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes<HTMLPostLogoElement>;
1218+
"post-mainnavigation": LocalJSX.PostMainnavigation & JSXBase.HTMLAttributes<HTMLPostMainnavigationElement>;
1219+
"post-megadropdown": LocalJSX.PostMegadropdown & JSXBase.HTMLAttributes<HTMLPostMegadropdownElement>;
1220+
"post-megadropdown-trigger": LocalJSX.PostMegadropdownTrigger & JSXBase.HTMLAttributes<HTMLPostMegadropdownTriggerElement>;
11131221
"post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes<HTMLPostMenuElement>;
11141222
"post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
11151223
"post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;

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

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@use '@swisspost/design-system-styles/mixins/media';
2+
3+
*,
4+
::before,
5+
::after {
6+
box-sizing: border-box;
7+
}
8+
9+
:host {
10+
--global-header-height: 72px;
11+
--main-header-height: 56px;
12+
--header-height: calc(var(--global-header-height) + var(--main-header-height));
13+
14+
@include media.max(lg) {
15+
--global-header-height: 64px;
16+
}
17+
}
18+
19+
.d-flex {
20+
display: flex;
21+
}
22+
23+
.space-between {
24+
justify-content: space-between;
25+
}
26+
27+
.global-header {
28+
background-color: #ffcc00;
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
position: sticky;
33+
padding-inline-start: 4px;
34+
padding-inline-end: 12px;
35+
36+
height: var(--global-header-height);
37+
38+
@include media.max(lg) {
39+
top: 0;
40+
}
41+
42+
@include media.min(lg) {
43+
top: calc((var(--global-header-height) - 24px) * -1);
44+
}
45+
}
46+
47+
slot[name='post-logo'] {
48+
align-self: flex-end;
49+
}
50+
51+
.global-sub {
52+
display: flex;
53+
align-items: center;
54+
gap: 2rem;
55+
height: var(--global-header-height);
56+
}
57+
58+
.align-end {
59+
align-items: flex-end;
60+
}
61+
62+
.logo {
63+
flex: 1 0 auto;
64+
height: var(--global-header-height);
65+
width: var(--global-header-height);
66+
min-height: 24px;
67+
align-self: flex-end;
68+
69+
@include media.min(lg) {
70+
height: calc(var(--global-header-height) - var(--header-scroll-top));
71+
}
72+
}
73+
74+
::slotted(ul) {
75+
margin-block: 0;
76+
list-style: none;
77+
display: flex;
78+
padding-left: 0;
79+
gap: 1rem;
80+
}
81+
82+
.title-header,
83+
.main-navigation {
84+
display: flex;
85+
align-items: center;
86+
padding-inline: 12px;
87+
background: white;
88+
}
89+
90+
.title-header {
91+
height: var(--main-header-height);
92+
display: flex;
93+
align-items: center;
94+
95+
@include media.max(lg) {
96+
border-bottom: 1px solid black;
97+
}
98+
}
99+
:host(:not(:has([slot='title']))) .title-header {
100+
display: none;
101+
}
102+
103+
::slotted(h1) {
104+
margin: 0 !important;
105+
font-size: 28px !important;
106+
}
107+
108+
.main-navigation {
109+
position: sticky;
110+
top: 24px;
111+
height: var(--main-header-height);
112+
113+
@include media.min(lg) {
114+
border-bottom: 1px solid black;
115+
}
116+
117+
@include media.max(lg) {
118+
display: none;
119+
position: absolute;
120+
top: var(--header-height);
121+
bottom: 0;
122+
width: 100%;
123+
background-color: white;
124+
height: auto;
125+
126+
&.extended {
127+
display: block;
128+
}
129+
}
130+
}
131+
132+
.mobile-toggle {
133+
@include media.min(lg) {
134+
display: none;
135+
}
136+
}

0 commit comments

Comments
 (0)