Skip to content

Commit

Permalink
Merge branch 'main' into 3432-helpers-palettes
Browse files Browse the repository at this point in the history
  • Loading branch information
alizedebray authored Nov 12, 2024
2 parents e6b143a + 6aa530e commit 4a40765
Show file tree
Hide file tree
Showing 25 changed files with 1,214 additions and 147 deletions.
5 changes: 5 additions & 0 deletions .changeset/big-socks-dress.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Fixed issue where the focus ring was not appearing on inactive chips.
7 changes: 7 additions & 0 deletions .changeset/popular-mirrors-cross.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@swisspost/design-system-components': minor
'@swisspost/design-system-components-angular': minor
'@swisspost/design-system-components-react': minor
---

Added a provisional post-header component with some basic functionality in place. This component is not finished in this state.
1 change: 1 addition & 0 deletions packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"rimraf": "6.0.1",
"rollup-plugin-postcss": "4.0.2",
"sass": "1.78.0",
"throttle-debounce": "5.0.2",
"ts-jest": "29.2.4",
"typescript": "5.5.4"
},
Expand Down
108 changes: 108 additions & 0 deletions packages/components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,8 @@ export namespace Components {
*/
"update": () => Promise<void>;
}
interface PostHeader {
}
/**
* @class PostIcon - representing a stencil component
*/
Expand Down Expand Up @@ -243,6 +245,30 @@ export namespace Components {
*/
"url": string | URL;
}
interface PostMainnavigation {
}
interface PostMegadropdown {
/**
* Hide megadropdown
* @returns boolean
*/
"hide": () => Promise<void>;
/**
* Show megadropdown
* @param element HTMLElement
* @returns boolean
*/
"show": (element: HTMLElement) => Promise<void>;
/**
* Toggle megadropdown
* @param element HTMLElement
* @param force boolean
* @returns boolean
*/
"toggle": (element: HTMLElement, force?: boolean) => Promise<boolean>;
}
interface PostMegadropdownTrigger {
}
interface PostMenu {
/**
* Hides the popover menu and restores focus to the previously focused element.
Expand Down Expand Up @@ -429,6 +455,14 @@ export interface PostLanguageOptionCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPostLanguageOptionElement;
}
export interface PostMainnavigationCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPostMainnavigationElement;
}
export interface PostMegadropdownTriggerCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPostMegadropdownTriggerElement;
}
export interface PostMenuCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPostMenuElement;
Expand Down Expand Up @@ -537,6 +571,12 @@ declare global {
prototype: HTMLPostCollapsibleTriggerElement;
new (): HTMLPostCollapsibleTriggerElement;
};
interface HTMLPostHeaderElement extends Components.PostHeader, HTMLStencilElement {
}
var HTMLPostHeaderElement: {
prototype: HTMLPostHeaderElement;
new (): HTMLPostHeaderElement;
};
/**
* @class PostIcon - representing a stencil component
*/
Expand Down Expand Up @@ -581,6 +621,46 @@ declare global {
prototype: HTMLPostLogoElement;
new (): HTMLPostLogoElement;
};
interface HTMLPostMainnavigationElementEventMap {
"postToggle": any;
}
interface HTMLPostMainnavigationElement extends Components.PostMainnavigation, HTMLStencilElement {
addEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPostMainnavigationElementEventMap>(type: K, listener: (this: HTMLPostMainnavigationElement, ev: PostMainnavigationCustomEvent<HTMLPostMainnavigationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPostMainnavigationElement: {
prototype: HTMLPostMainnavigationElement;
new (): HTMLPostMainnavigationElement;
};
interface HTMLPostMegadropdownElement extends Components.PostMegadropdown, HTMLStencilElement {
}
var HTMLPostMegadropdownElement: {
prototype: HTMLPostMegadropdownElement;
new (): HTMLPostMegadropdownElement;
};
interface HTMLPostMegadropdownTriggerElementEventMap {
"postToggle": any;
}
interface HTMLPostMegadropdownTriggerElement extends Components.PostMegadropdownTrigger, HTMLStencilElement {
addEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPostMegadropdownTriggerElementEventMap>(type: K, listener: (this: HTMLPostMegadropdownTriggerElement, ev: PostMegadropdownTriggerCustomEvent<HTMLPostMegadropdownTriggerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPostMegadropdownTriggerElement: {
prototype: HTMLPostMegadropdownTriggerElement;
new (): HTMLPostMegadropdownTriggerElement;
};
interface HTMLPostMenuElementEventMap {
"toggleMenu": boolean;
}
Expand Down Expand Up @@ -702,11 +782,15 @@ declare global {
"post-closebutton": HTMLPostClosebuttonElement;
"post-collapsible": HTMLPostCollapsibleElement;
"post-collapsible-trigger": HTMLPostCollapsibleTriggerElement;
"post-header": HTMLPostHeaderElement;
"post-icon": HTMLPostIconElement;
"post-language-option": HTMLPostLanguageOptionElement;
"post-list": HTMLPostListElement;
"post-list-item": HTMLPostListItemElement;
"post-logo": HTMLPostLogoElement;
"post-mainnavigation": HTMLPostMainnavigationElement;
"post-megadropdown": HTMLPostMegadropdownElement;
"post-megadropdown-trigger": HTMLPostMegadropdownTriggerElement;
"post-menu": HTMLPostMenuElement;
"post-menu-item": HTMLPostMenuItemElement;
"post-menu-trigger": HTMLPostMenuTriggerElement;
Expand Down Expand Up @@ -859,6 +943,8 @@ declare namespace LocalJSX {
*/
"for"?: string;
}
interface PostHeader {
}
/**
* @class PostIcon - representing a stencil component
*/
Expand Down Expand Up @@ -932,6 +1018,20 @@ declare namespace LocalJSX {
*/
"url"?: string | URL;
}
interface PostMainnavigation {
/**
* Gets emitted when a user closes the main navigation on mobile
*/
"onPostToggle"?: (event: PostMainnavigationCustomEvent<any>) => void;
}
interface PostMegadropdown {
}
interface PostMegadropdownTrigger {
/**
* Emits after each toggle
*/
"onPostToggle"?: (event: PostMegadropdownTriggerCustomEvent<any>) => void;
}
interface PostMenu {
/**
* 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.
Expand Down Expand Up @@ -1068,11 +1168,15 @@ declare namespace LocalJSX {
"post-closebutton": PostClosebutton;
"post-collapsible": PostCollapsible;
"post-collapsible-trigger": PostCollapsibleTrigger;
"post-header": PostHeader;
"post-icon": PostIcon;
"post-language-option": PostLanguageOption;
"post-list": PostList;
"post-list-item": PostListItem;
"post-logo": PostLogo;
"post-mainnavigation": PostMainnavigation;
"post-megadropdown": PostMegadropdown;
"post-megadropdown-trigger": PostMegadropdownTrigger;
"post-menu": PostMenu;
"post-menu-item": PostMenuItem;
"post-menu-trigger": PostMenuTrigger;
Expand Down Expand Up @@ -1102,6 +1206,7 @@ declare module "@stencil/core" {
"post-closebutton": LocalJSX.PostClosebutton & JSXBase.HTMLAttributes<HTMLPostClosebuttonElement>;
"post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
"post-collapsible-trigger": LocalJSX.PostCollapsibleTrigger & JSXBase.HTMLAttributes<HTMLPostCollapsibleTriggerElement>;
"post-header": LocalJSX.PostHeader & JSXBase.HTMLAttributes<HTMLPostHeaderElement>;
/**
* @class PostIcon - representing a stencil component
*/
Expand All @@ -1110,6 +1215,9 @@ declare module "@stencil/core" {
"post-list": LocalJSX.PostList & JSXBase.HTMLAttributes<HTMLPostListElement>;
"post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes<HTMLPostListItemElement>;
"post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes<HTMLPostLogoElement>;
"post-mainnavigation": LocalJSX.PostMainnavigation & JSXBase.HTMLAttributes<HTMLPostMainnavigationElement>;
"post-megadropdown": LocalJSX.PostMegadropdown & JSXBase.HTMLAttributes<HTMLPostMegadropdownElement>;
"post-megadropdown-trigger": LocalJSX.PostMegadropdownTrigger & JSXBase.HTMLAttributes<HTMLPostMegadropdownTriggerElement>;
"post-menu": LocalJSX.PostMenu & JSXBase.HTMLAttributes<HTMLPostMenuElement>;
"post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
"post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;
Expand Down
136 changes: 136 additions & 0 deletions packages/components/src/components/post-header/post-header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
@use '@swisspost/design-system-styles/mixins/media';

*,
::before,
::after {
box-sizing: border-box;
}

:host {
--global-header-height: 72px;
--main-header-height: 56px;
--header-height: calc(var(--global-header-height) + var(--main-header-height));

@include media.max(lg) {
--global-header-height: 64px;
}
}

.d-flex {
display: flex;
}

.space-between {
justify-content: space-between;
}

.global-header {
background-color: #ffcc00;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
padding-inline-start: 4px;
padding-inline-end: 12px;

height: var(--global-header-height);

@include media.max(lg) {
top: 0;
}

@include media.min(lg) {
top: calc((var(--global-header-height) - 24px) * -1);
}
}

slot[name='post-logo'] {
align-self: flex-end;
}

.global-sub {
display: flex;
align-items: center;
gap: 2rem;
height: var(--global-header-height);
}

.align-end {
align-items: flex-end;
}

.logo {
flex: 1 0 auto;
height: var(--global-header-height);
width: var(--global-header-height);
min-height: 24px;
align-self: flex-end;

@include media.min(lg) {
height: calc(var(--global-header-height) - var(--header-scroll-top));
}
}

::slotted(ul) {
margin-block: 0;
list-style: none;
display: flex;
padding-left: 0;
gap: 1rem;
}

.title-header,
.main-navigation {
display: flex;
align-items: center;
padding-inline: 12px;
background: white;
}

.title-header {
height: var(--main-header-height);
display: flex;
align-items: center;

@include media.max(lg) {
border-bottom: 1px solid black;
}
}
:host(:not(:has([slot='title']))) .title-header {
display: none;
}

::slotted(h1) {
margin: 0 !important;
font-size: 28px !important;
}

.main-navigation {
position: sticky;
top: 24px;
height: var(--main-header-height);

@include media.min(lg) {
border-bottom: 1px solid black;
}

@include media.max(lg) {
display: none;
position: absolute;
top: var(--header-height);
bottom: 0;
width: 100%;
background-color: white;
height: auto;

&.extended {
display: block;
}
}
}

.mobile-toggle {
@include media.min(lg) {
display: none;
}
}
Loading

0 comments on commit 4a40765

Please sign in to comment.