feat(components): post-header (#3837)

Added a provisional post-header component with some basic functionality in place. This component is not finished in this state and is intended to provide a skeleton for the other header components so integration is easier to test. --------- Co-authored-by: Alizé Debray <[email protected]>
swisspost · Nov 12, 2024 · 6aa530e · 6aa530e
1 parent c081751
commit 6aa530e
Show file tree

Hide file tree

Showing 22 changed files with 870 additions and 4 deletions.
diff --git a/.changeset/popular-mirrors-cross.md b/.changeset/popular-mirrors-cross.md
@@ -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.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -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"
   },

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -170,6 +170,8 @@ export namespace Components {
          */
         "update": () => Promise<void>;
     }
+    interface PostHeader {
+    }
     /**
      * @class PostIcon - representing a stencil component
      */
@@ -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.
@@ -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;
@@ -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
      */
@@ -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;
     }
@@ -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;
@@ -859,6 +943,8 @@ declare namespace LocalJSX {
          */
         "for"?: string;
     }
+    interface PostHeader {
+    }
     /**
      * @class PostIcon - representing a stencil component
      */
@@ -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.
@@ -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;
@@ -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
              */
@@ -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>;

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -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;
+  }
+}