Merge branch 'main' into 4653-bug-sonarcloud-workflow-failing-due-to-…

…deprecated-actionscache-version-v402
swisspost · Feb 14, 2025 · f31372f · f31372f
2 parents b8e5df6 + faabaef
commit f31372f
Show file tree

Hide file tree

Showing 72 changed files with 695 additions and 395 deletions.
diff --git a/.changeset/giant-donkeys-look.md b/.changeset/giant-donkeys-look.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated styles for the header main navigation and mega dropdown elements.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -97,6 +97,7 @@
     "funny-knives-rule",
     "funny-shrimps-care",
     "gentle-jeans-raise",
+    "giant-donkeys-look",
     "giant-games-swim",
     "gold-chairs-grin",
     "gold-chefs-rule",
@@ -209,11 +210,13 @@
     "sharp-baboons-smile",
     "sharp-bobcats-grab",
     "sharp-crews-watch",
+    "sharp-poems-mate",
     "shiny-ears-care",
     "short-olives-sleep",
     "shy-walls-exercise",
     "silent-ears-drive",
     "silent-vans-care",
+    "silly-papayas-greet",
     "silver-coins-invent",
     "six-roses-flow",
     "six-spiders-smoke",
@@ -231,10 +234,12 @@
     "spicy-pumpkins-grab",
     "spotty-shoes-film",
     "stale-guests-love",
+    "stale-months-dance",
     "strange-bottles-impress",
     "strange-mice-bake",
     "stupid-walls-tie",
     "sweet-cherries-drop",
+    "sweet-seals-search",
     "tame-terms-push",
     "tasty-beans-knock",
     "tasty-carrots-eat",

diff --git a/.changeset/real-ties-stare.md b/.changeset/real-ties-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed focus order on desktop for `post-megadropdown` component.
diff --git a/.changeset/sharp-poems-mate.md b/.changeset/sharp-poems-mate.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.card-group` class.
diff --git a/.changeset/silly-papayas-greet.md b/.changeset/silly-papayas-greet.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated styles of the card component.
diff --git a/.changeset/stale-months-dance.md b/.changeset/stale-months-dance.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed segmented button style in HCM.
diff --git a/.changeset/sweet-seals-search.md b/.changeset/sweet-seals-search.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Made it possible to use multiple `post-language-switch` components in the `post-header` component.
+Fixed language switch options being wrapped to multiple lines on mobile.
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+  - @swisspost/design-system-styles@9.0.0-next.18
+
 ## 1.1.10-next.17
 
 ### Patch Changes

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.17",
+  "version": "1.1.10-next.18",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "pnpm clean && ng build components",
@@ -20,8 +20,8 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.17",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.17",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.18",
     "rxjs": "7.8.1",
     "tslib": "2.8.1",
     "zone.js": "0.15.0"

diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+
 ## 9.0.0-next.17
 
 ### Patch Changes

diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.17",
+  "version": "9.0.0-next.18",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -18,7 +18,7 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.17",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18",
     "tslib": "2.8.1"
   },
   "peerDependencies": {

diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.18
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.18
+
 ## 9.0.0-next.17
 
 ### Patch Changes

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.17",
+  "version": "9.0.0-next.18",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.17"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.18"
   },
   "devDependencies": {
     "@eslint/js": "9.18.0",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.18
+
+### Minor Changes
+
+- Made it possible to use multiple `post-language-switch` components in the `post-header` component. Fixed language switch options being wrapped to multiple lines on mobile. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4674](https://github.com/swisspost/design-system/pull/4674))
+
+### Patch Changes
+
+- Updated styles for the header main navigation and mega dropdown elements. (by [@leagrdv](https://github.com/leagrdv) with [#4621](https://github.com/swisspost/design-system/pull/4621))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.18
+  - @swisspost/design-system-icons@9.0.0-next.18
+
 ## 9.0.0-next.17
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.17",
+  "version": "9.0.0-next.18",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,8 +40,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.17",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.17",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.18",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.18",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -8,12 +8,12 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
 import { DEVICE_SIZE } from "./components/post-header/post-header";
-import { SwitchVariant } from "./components/post-language-switch/switch-variants";
+import { SwitchType, 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 { DEVICE_SIZE } from "./components/post-header/post-header";
-export { SwitchVariant } from "./components/post-language-switch/switch-variants";
+export { SwitchType, SwitchVariant } from "./components/post-language-switch/switch-variants";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
@@ -248,12 +248,16 @@ export namespace Components {
           * Selects the language option programmatically.
          */
         "select": () => Promise<void>;
+        /**
+          * To communicate the type prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+         */
+        "type"?: SwitchType | null;
         /**
           * 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)
+          * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
         "variant"?: SwitchVariant | null;
     }
@@ -267,7 +271,11 @@ export namespace Components {
          */
         "description": 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)
+          * Whether the component is rendered with uppercased text and fix widths or without any text transformation and fluid widths
+         */
+        "type": SwitchType;
+        /**
+          * Whether the component is rendered as a list or a menu
          */
         "variant": SwitchVariant;
     }
@@ -1113,12 +1121,16 @@ declare namespace LocalJSX {
           * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
          */
         "onPostChange"?: (event: PostLanguageOptionCustomEvent<string>) => void;
+        /**
+          * To communicate the type prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+         */
+        "type"?: SwitchType | null;
         /**
           * 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)
+          * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
          */
         "variant"?: SwitchVariant | null;
     }
@@ -1132,7 +1144,11 @@ declare namespace LocalJSX {
          */
         "description"?: 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)
+          * Whether the component is rendered with uppercased text and fix widths or without any text transformation and fluid widths
+         */
+        "type"?: SwitchType;
+        /**
+          * Whether the component is rendered as a list or a menu
          */
         "variant"?: SwitchVariant;
     }

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
@@ -111,10 +111,10 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--post-core-dimension-8);
+  gap: var(--post-core-dimension-4);
   min-height: var(--local-header-min-height);
   background: var(--post-core-color-brand-white);
-  transition: box-shadow 0.2s ease-in-out; 
+  transition: box-shadow 0.2s ease-in-out;
 
   @include media.min(lg) {
     z-index: 3;

diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -219,7 +219,9 @@ export class PostHeader {
 
   private switchLanguageSwitchMode() {
     const variant: SwitchVariant = this.device === 'desktop' ? 'menu' : 'list';
-    this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
+    Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+      languageSwitch?.setAttribute('variant', variant);
+    });
   }
 
   private renderNavigation() {

diff --git a/packages/components/src/components/post-language-option/post-language-option.scss b/packages/components/src/components/post-language-option/post-language-option.scss
@@ -27,29 +27,43 @@ post-language-option {
   &:has([aria-current]):not([aria-current='false']) {
     display: none;
   }
-}
 
-post-language-option:where([variant='list']) {
-  :is(a, button) {
-    width: 40px;
-    height: 40px;
-    border-radius: 2px;
+  &:where([variant='list']) {
+    :is(a, button) {
+      padding-inline: 0.7rem;
+      height: 40px;
+      border-radius: 2px;
 
-    &:hover {
-      color: #504f4b;
+      &:hover {
+        color: #504f4b;
+      }
+    }
+
+    &:where(:not([type]), [type='language']) {
+      :is(a, button) {
+        padding-inline: 0;
+        width: 40px;
+        text-transform: uppercase;
+      }
     }
   }
-}
 
-post-language-option:where([variant='menu']) {
-  width: 100%;
+  &:where([variant='menu']) {
+    width: 100%;
 
-  :is(a, button) {
-    padding-block: 13px;
-    padding-inline: 24px;
-    box-sizing: border-box;
-    position: relative;
-    left: -1px;
-    width: calc(100% + 2px);
+    :is(a, button) {
+      padding-block: 13px;
+      padding-inline: 24px;
+      box-sizing: border-box;
+      position: relative;
+      left: -1px;
+      width: calc(100% + 2px);
+    }
+
+    &:where(:not([type]), [type='language']) {
+      :is(a, button) {
+        text-transform: uppercase;
+      }
+    }
   }
 }
diff --git a/packages/components/src/components/post-language-option/post-language-option.tsx b/packages/components/src/components/post-language-option/post-language-option.tsx
@@ -11,7 +11,7 @@ import {
 } from '@stencil/core';
 import { checkEmptyOrType, checkType } from '@/utils';
 import { version } from '@root/package.json';
-import { SwitchVariant } from '../post-language-switch/switch-variants';
+import { SwitchVariant, SwitchType } from '../post-language-switch/switch-variants';
 
 /**
  * @slot default - Slot for placing the content inside the anchor or button.
@@ -52,10 +52,15 @@ export class PostLanguageOption {
   }
 
   /**
-   * The variant of the post-language-switch parent (dynamically set by the parent)
+   * To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
    */
   @Prop() variant?: SwitchVariant | null;
 
+  /**
+   * To communicate the type prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself.
+   */
+  @Prop() type?: SwitchType | null;
+
   /**
    * The full name of the language. For example, "Deutsch".
    */