Merge branch 'main' into 3764-component-megadropdown

swisspost · Dec 12, 2024 · db9978e · db9978e
2 parents 8f5a089 + 9759691
commit db9978e
Show file tree

Hide file tree

Showing 51 changed files with 1,013 additions and 277 deletions.
diff --git a/.changeset/gorgeous-glasses-end.md b/.changeset/gorgeous-glasses-end.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fix tab isolation in nested `post-tabs` components by scoping tab queries and interactions to the current instance.
diff --git a/.changeset/tough-cheetahs-clean.md b/.changeset/tough-cheetahs-clean.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed an issue with the post-list component where the `horizontal` property could not be set programmatically. Also, reduced the specificity of the component's styles to make customization easier.
diff --git a/.changeset/yellow-gifts-sit.md b/.changeset/yellow-gifts-sit.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-language-switch` component that enables users to change the language of a page.
diff --git a/.github/actions/preview/message/create/action.yaml b/.github/actions/preview/message/create/action.yaml
@@ -5,14 +5,20 @@ inputs:
   access-token:
     description: The access token to use for commenting.
     required: true
+  issue-number:
+    description: The issue number from the caller workflow.
+    required: true
 
 runs:
   using: composite
   steps:
     - uses: actions/github-script@v7
+      env:
+        ISSUE_NUMBER: ${{ inputs.issue-number }}
       with:
         github-token: ${{ inputs.access-token }}
         script: |
+          const { ISSUE_NUMBER } = process.env
           const commentTitle = '**Related Previews**'
           const commentInitialBody = 'Preview URLs will be added here, once they are ready... ![loader](https://github.com/swisspost/design-system/assets/9716662/49a75898-7093-4ffb-9460-071ff194459d)'
 
@@ -25,7 +31,7 @@ runs:
             await github.rest.issues.createComment({
               repo: context.repo.repo,
               owner: context.repo.owner,
-              issue_number: context.issue.number,
+              issue_number: ISSUE_NUMBER,
               body: `${commentTitle}\n${commentInitialBody}`
             })
 
@@ -45,7 +51,7 @@ runs:
             comments = (await github.rest.issues.listComments({
               repo: context.repo.repo,
               owner: context.repo.owner,
-              issue_number: context.issue.number
+              issue_number: ISSUE_NUMBER
             })).data || []
 
             previewComment = comments.find(c => c.user.login === 'swisspost-bot' && c.body.includes(commentTitle))

diff --git a/.github/workflows/build-documentation.yaml b/.github/workflows/build-documentation.yaml
@@ -25,11 +25,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Create preview message
-        uses: ./.github/actions/preview/message/create
-        with:
-          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
-
       - name: Setup
         uses: ./.github/actions/setup-pnpm
 

diff --git a/.github/workflows/deploy-documentation.yaml b/.github/workflows/deploy-documentation.yaml
@@ -26,6 +26,12 @@ jobs:
           name: design-system-documentation
           folder: build-output
 
+      - name: Create preview message
+        uses: ./.github/actions/preview/message/create
+        with:
+          access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+          issue-number: ${{ steps.build.outputs.id }}
+
       - name: Get netlify config
         id: netlify-config
         uses: actions/github-script@v7

diff --git a/.github/workflows/snapshot-tests.yaml b/.github/workflows/snapshot-tests.yaml
@@ -9,9 +9,6 @@
 name: Run snapshot tests
 on:
   workflow_dispatch:
-  push:
-    branches:
-      - 'changeset-release/main'
 
 jobs:
   snapshots:

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -40,10 +40,11 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
     "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
     "ally.js": "1.4.1",
-    "long-press-event": "2.5.0"
+    "long-press-event": "2.5.0",
+    "nanoid": "5.0.9"
   },
   "devDependencies": {
     "@percy/cli": "1.29.1",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -7,9 +7,11 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
+import { SwitchVariant } from "./components/post-language-switch/switch-variants";
 import { Placement } from "@floating-ui/dom";
 export { HeadingLevel } from "./types/index";
 export { BannerType } from "./components/post-banner/banner-types";
+export { SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
@@ -216,6 +218,10 @@ export namespace Components {
           * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
          */
         "code": string;
+        /**
+          * Used on parent component (post-language-switch) to detect elements that are manually added
+         */
+        "generated": boolean;
         /**
           * The full name of the language. For example, "Deutsch".
          */
@@ -228,6 +234,28 @@ export namespace Components {
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */
         "url": string;
+        /**
+          * The variant of the post-language-switch parent (dynamically set by the parent)
+         */
+        "variant"?: SwitchVariant | null;
+    }
+    interface PostLanguageSwitch {
+        /**
+          * A title for the list of language options
+         */
+        "caption": string;
+        /**
+          * A descriptive text for the list of language options
+         */
+        "description": string;
+        /**
+          * The name of the language switch, which will be used on the dropdown as an ID
+         */
+        "name": string;
+        /**
+          * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+         */
+        "variant": SwitchVariant;
     }
     interface PostList {
         /**
@@ -616,6 +644,12 @@ declare global {
         prototype: HTMLPostLanguageOptionElement;
         new (): HTMLPostLanguageOptionElement;
     };
+    interface HTMLPostLanguageSwitchElement extends Components.PostLanguageSwitch, HTMLStencilElement {
+    }
+    var HTMLPostLanguageSwitchElement: {
+        prototype: HTMLPostLanguageSwitchElement;
+        new (): HTMLPostLanguageSwitchElement;
+    };
     interface HTMLPostListElement extends Components.PostList, HTMLStencilElement {
     }
     var HTMLPostListElement: {
@@ -805,6 +839,7 @@ declare global {
         "post-header": HTMLPostHeaderElement;
         "post-icon": HTMLPostIconElement;
         "post-language-option": HTMLPostLanguageOptionElement;
+        "post-language-switch": HTMLPostLanguageSwitchElement;
         "post-list": HTMLPostListElement;
         "post-list-item": HTMLPostListItemElement;
         "post-logo": HTMLPostLogoElement;
@@ -1010,6 +1045,10 @@ declare namespace LocalJSX {
           * The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
          */
         "code": string;
+        /**
+          * Used on parent component (post-language-switch) to detect elements that are manually added
+         */
+        "generated"?: boolean;
         /**
           * The full name of the language. For example, "Deutsch".
          */
@@ -1022,6 +1061,28 @@ declare namespace LocalJSX {
           * The URL used for the href attribute of the internal anchor. This field is optional; if not provided, a button will be used internally instead of an anchor.
          */
         "url"?: string;
+        /**
+          * The variant of the post-language-switch parent (dynamically set by the parent)
+         */
+        "variant"?: SwitchVariant | null;
+    }
+    interface PostLanguageSwitch {
+        /**
+          * A title for the list of language options
+         */
+        "caption"?: string;
+        /**
+          * A descriptive text for the list of language options
+         */
+        "description"?: string;
+        /**
+          * The name of the language switch, which will be used on the dropdown as an ID
+         */
+        "name"?: string;
+        /**
+          * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+         */
+        "variant"?: SwitchVariant;
     }
     interface PostList {
         /**
@@ -1205,6 +1266,7 @@ declare namespace LocalJSX {
         "post-header": PostHeader;
         "post-icon": PostIcon;
         "post-language-option": PostLanguageOption;
+        "post-language-switch": PostLanguageSwitch;
         "post-list": PostList;
         "post-list-item": PostListItem;
         "post-logo": PostLogo;
@@ -1248,6 +1310,7 @@ declare module "@stencil/core" {
              */
             "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
             "post-language-option": LocalJSX.PostLanguageOption & JSXBase.HTMLAttributes<HTMLPostLanguageOptionElement>;
+            "post-language-switch": LocalJSX.PostLanguageSwitch & JSXBase.HTMLAttributes<HTMLPostLanguageSwitchElement>;
             "post-list": LocalJSX.PostList & JSXBase.HTMLAttributes<HTMLPostListElement>;
             "post-list-item": LocalJSX.PostListItem & JSXBase.HTMLAttributes<HTMLPostListItemElement>;
             "post-logo": LocalJSX.PostLogo & JSXBase.HTMLAttributes<HTMLPostLogoElement>;

diff --git a/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss b/packages/components/src/components/post-breadcrumb-item/post-breadcrumb-item.scss
@@ -21,8 +21,8 @@ tokens.$default-map: components.$post-breadcrumb;
   text-decoration: tokens.get('breadcrumb-link-enabled-text-decoration');
 
   post-icon {
-    height: tokens.get('breadcrum-icon-size');
-    width: tokens.get('breadcrum-icon-size');
+    height: tokens.get('breadcrumb-icon-size');
+    width: tokens.get('breadcrumb-icon-size');
   }
 
   &:hover {

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -1,4 +1,5 @@
 @use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/variables/animation';
 
 *,
 ::before,
@@ -24,6 +25,13 @@
   justify-content: space-between;
 }
 
+// ensures the global-header and title-header are above the main-navigation
+.global-header,
+.title-header {
+  position: relative;
+  z-index: 1;
+}
+
 .global-header {
   background-color: #ffcc00;
   display: flex;
@@ -79,18 +87,12 @@ slot[name='post-logo'] {
   gap: 1rem;
 }
 
-.title-header,
-.main-navigation {
+.title-header {
   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;
@@ -105,32 +107,54 @@ slot[name='post-logo'] {
   font-size: 28px !important;
 }
 
-.main-navigation {
-  position: sticky;
-  top: 24px;
-  height: var(--main-header-height);
-
+.mobile-toggle {
   @include media.min(lg) {
-    border-bottom: 1px solid black;
+    display: none;
   }
+}
 
-  @include media.max(lg) {
-    display: none;
+.navigation {
+  background: var(--post-core-color-brand-white);
+  box-shadow: var(--post-core-elevation-3);
+}
+
+// only for tablet and mobile
+@include media.max(lg) {
+  .navigation {
     position: absolute;
-    top: var(--header-height);
-    bottom: 0;
-    width: 100%;
-    background-color: white;
-    height: auto;
+    inset-inline: 0;
+    inset-block-end: calc(100vh - var(--header-height));
+    transition: transform animation.$transition-time-area-medium animation.$transition-easing-accelerate;
 
     &.extended {
-      display: block;
+      transform: translateY(100%);
+      transition-timing-function: animation.$transition-easing-decelerate;
     }
   }
-}
 
-.mobile-toggle {
-  @include media.min(lg) {
-    display: none;
+  ::slotted(post-mainnavigation),
+  .navigation-footer {
+    display: flex;
+    flex-direction: column;
+    padding-block: var(--post-core-dimension-16) var(--post-core-dimension-24);
+    padding-inline: var(--post-core-dimension-32);
+    opacity: 0;
+    transition-property: opacity;
+    transition-delay: animation.$transition-time-area-medium;
+
+    .navigation.extended & {
+      opacity: 1;
+      transition-delay: 0s;
+    }
+  }
+
+  ::slotted(post-mainnavigation) {
+    background-color: var(--post-core-color-sandgrey-002);
+    gap: var(--post-core-dimension-32);
+  }
+
+  .navigation-footer {
+    background-color: var(--post-core-color-sandgrey-006);
+    gap: var(--post-core-dimension-24);
   }
 }