Merge branch 'main' into 3274-component-radio-button

swisspost · Sep 27, 2024 · 578f4b0 · 578f4b0
2 parents 4bea63d + d6033c5
commit 578f4b0
Show file tree

Hide file tree

Showing 146 changed files with 6,349 additions and 4,394 deletions.
diff --git a/.changeset/big-frogs-admire.md b/.changeset/big-frogs-admire.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements.
diff --git a/.changeset/breezy-cups-add.md b/.changeset/breezy-cups-add.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+styles: Added reset styles
diff --git a/.changeset/cuddly-bears-check.md b/.changeset/cuddly-bears-check.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Removed global styles
diff --git a/.changeset/empty-islands-kneel.md b/.changeset/empty-islands-kneel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a toolbar for switching the theme, channel, and mode of all stories.
diff --git a/.changeset/great-humans-talk.md b/.changeset/great-humans-talk.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Resolved issue where validation message icons repeated on each line of multi-line messages. Implemented flexbox layout to ensure a single, vertically centered icon regardless of message length.
diff --git a/.changeset/lemon-clocks-clean.md b/.changeset/lemon-clocks-clean.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation outlining the mission statement of the Design System.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -21,5 +21,20 @@
     "@swisspost/design-system-styles-primeng": "8.2.0",
     "@swisspost/design-system-tokens": "8.2.0"
   },
-  "changesets": []
+  "changesets": [
+    "clean-icons-complain",
+    "cold-baboons-appear",
+    "cold-panthers-vanish",
+    "fair-actors-scream",
+    "friendly-insects-breathe",
+    "funny-shrimps-care",
+    "gorgeous-flowers-flow",
+    "great-humans-talk",
+    "heavy-rats-explode",
+    "ninety-nails-float",
+    "pink-weeks-relate",
+    "plenty-apricots-raise",
+    "selfish-bats-run",
+    "sharp-crews-watch"
+  ]
 }
diff --git a/.changeset/sharp-crews-watch.md b/.changeset/sharp-crews-watch.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Removed deprecated line-height variables.
diff --git a/.changeset/six-spiders-smoke.md b/.changeset/six-spiders-smoke.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added documentation for design principles.
diff --git a/.changeset/tame-terms-push.md b/.changeset/tame-terms-push.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+---
+
+Made the heading-level property required for the accordion and removed it from the accordion-item docs.
diff --git a/.changeset/yellow-yaks-jog.md b/.changeset/yellow-yaks-jog.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed typos in the Sass and HTML href paths.
diff --git a/.github/actions/setup-netlify-cli/action.yaml b/.github/actions/setup-netlify-cli/action.yaml
@@ -12,4 +12,4 @@ runs:
   steps:
     - name: Install netlify-cli
       shell: bash
-      run: pnpm i -g netlify-cli@17
+      run: pnpm i -g netlify-cli@17.36.1
diff --git a/.github/workflows/unit-tests.yaml b/.github/workflows/unit-tests.yaml
@@ -22,9 +22,8 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup-pnpm
 
-      # Install packages changed since main, as well as their dependants and dependencies
-      - name: Install dependencies
-        run: pnpm --filter "...[origin/main]" install
+      - name: Install dependencies and build packages
+        run: pnpm bootstrap
 
       - name: Run unit tests
         run: pnpm --filter "...[origin/main]" unit
diff --git a/README.md b/README.md
@@ -13,10 +13,10 @@
 ## Packages
 
 | Name                                                                                                    | Description                                                                                                                                             | Version                                                                                                                                                                                                                                                  | Changelog URL                                                                 |
-| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- |
+| :------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------------------------------------------------------------------------|
 | [Styles](https://design-system.post.ch/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs)          | The styling package, including theming for [Bootstrap](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home) components. | [![Styles pacakge version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-styles?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-styles)                            | [Styles changelog](/packages/styles/CHANGELOG.md)                             |
 | [Components](https://design-system.post.ch/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs)      | A set of standard web components for easy integration with every framework or no framework at all.                                                      | [![Components package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-components?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-components)                | [Components changelog](/packages/components/CHANGELOG.md)                     |
-| [Internet Header](https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) | The header for client facing applications.                                                                                                              | [![Internet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Finternet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/internet-header)                             | [Interet Header changelog](/packages/internet-header/CHANGELOG.md)            |
+| [Internet Header](https://design-system.post.ch/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) | The header for client facing applications.                                                                                                              | [![Internet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Finternet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/internet-header)                             | [Internet Header changelog](/packages/internet-header/CHANGELOG.md)           |
 | [Intranet Header](https://design-system.post.ch/?path=/docs/d59a459b-6f14-47c6-9f98-a36a3f79a6e3--docs) | The Angular component for internal usage.                                                                                                               | [![Intranet Header package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-intranet-header?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-intranet-header) | [Intranet Header changelog](/packages/intranet-header-workspace/CHANGELOG.md) |
 | [Icons](https://design-system.post.ch/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs)           | A collection of Post icons in svg format.                                                                                                               | [![Icons package version shield for npm](https://img.shields.io/npm/v/%40swisspost%2Fdesign-system-icons?style=flat-square&logo=npm&label=%20&color=%23fc0)](https://www.npmjs.com/package/@swisspost/design-system-icons)                               | [Icons changelog](/packages/icons/CHANGELOG.md)                               |
 

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "demo:lint": "pnpm --filter design-system-demo lint",
     "docs": "pnpm docs:start",
     "docs:only": "pnpm --filter design-system-documentation start",
-    "docs:start": "pnpm --filter design-system-documentation... --parallel --stream start",
+    "docs:start": "pnpm --filter design-system-tokens build && pnpm --filter design-system-documentation... --parallel --stream start",    
     "docs:build": "pnpm --filter design-system-documentation build",
     "docs:headless": "pnpm --filter design-system-documentation start:headless",
     "docs:test": "pnpm --filter design-system-documentation test",

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.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.0
+  - @swisspost/design-system-components@9.0.0-next.0
+
 ## 1.1.9
 
 ### 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.9",
+  "version": "1.1.10-next.0",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.1.3",
     "@angular/platform-browser-dynamic": "18.1.3",
     "@angular/router": "18.1.3",
-    "@swisspost/design-system-components": "workspace:8.2.0",
-    "@swisspost/design-system-styles": "workspace:8.2.0",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"

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.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.0
+
 ## 8.2.0
 
 ### Minor 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": "8.2.0",
+  "version": "9.0.0-next.0",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:8.2.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.0"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",

diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -1,6 +1,6 @@
 <div class="my-4">
   <h2>Post Accordion</h2>
-  <post-accordion>
+  <post-accordion [headingLevel]="3">
     <post-accordion-item>
       <span slot="header">Titulum 1</span>
       <p>Contentus momentus vero siteos et accusam iretea et justo.</p>

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.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.0
+
 ## 8.2.0
 
 ### Minor 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": "8.2.0",
+  "version": "9.0.0-next.0",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:8.2.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.0"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

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

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "8.2.0",
+  "version": "9.0.0-next.0",
   "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,7 +40,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "workspace:8.2.0",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -24,7 +24,7 @@ export namespace Components {
         /**
           * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
          */
-        "headingLevel"?: HeadingLevel;
+        "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
@@ -540,7 +540,7 @@ declare namespace LocalJSX {
         /**
           * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
          */
-        "headingLevel"?: HeadingLevel;
+        "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */

diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.tsx b/packages/components/src/components/post-accordion-item/post-accordion-item.tsx
@@ -29,7 +29,7 @@ export class PostAccordionItem {
    * Defines the hierarchical level of the accordion item header within the headings structure.
    * @deprecated set the `heading-level` property on the parent `post-accordion` instead.
    */
-  @Prop() readonly headingLevel?: HeadingLevel = 2;
+  @Prop() readonly headingLevel?: HeadingLevel;
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
@@ -51,7 +51,7 @@ export class PostAccordionItem {
   // capture to make sure the "collapsed" property is updated before the event is consumed
   @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
+    if (event.target === this.host && (event.target as HTMLElement).localName === 'post-accordion-item') {
       this.collapsed = !event.detail;
     }
   }

diff --git a/packages/components/src/components/post-accordion-item/readme.md b/packages/components/src/components/post-accordion-item/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                                                                                                                                  | Type                         | Default |
-| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
-| `collapsed`    | `collapsed`     | If `true`, the element is collapsed otherwise it is displayed.                                                                                                                                                               | `boolean`                    | `false` |
-| `headingLevel` | `heading-level` | <span style="color:red">**[DEPRECATED]**</span> set the `heading-level` property on the parent `post-accordion` instead.<br/><br/>Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`     |
+| Property       | Attribute       | Description                                                                                                                                                                                                                  | Type                         | Default     |
+| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `collapsed`    | `collapsed`     | If `true`, the element is collapsed otherwise it is displayed.                                                                                                                                                               | `boolean`                    | `false`     |
+| `headingLevel` | `heading-level` | <span style="color:red">**[DEPRECATED]**</span> set the `heading-level` property on the parent `post-accordion` instead.<br/><br/>Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
 
 
 ## Methods

diff --git a/packages/components/src/components/post-accordion/post-accordion.tsx b/packages/components/src/components/post-accordion/post-accordion.tsx
@@ -21,7 +21,7 @@ export class PostAccordion {
   /**
    * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
    */
-  @Prop() readonly headingLevel?: HeadingLevel;
+  @Prop() readonly headingLevel!: HeadingLevel;
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
@@ -50,23 +50,26 @@ export class PostAccordion {
 
   @Listen('postToggle')
   collapseToggleHandler(event: CustomEvent<boolean>) {
-    if ((event.target as HTMLElement).localName === 'post-accordion-item') {
-      event.stopPropagation();
+    event.stopPropagation();
 
-      const toggledItem = event.target as HTMLPostAccordionItemElement;
-      const isClosing = this.expandedItems.has(toggledItem);
+    const toggledItem = event.target as HTMLElement;
+    const closestParentAccordion = toggledItem.closest('post-accordion');
+
+    if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+      const toggledAccordionItem = event.target as HTMLPostAccordionItemElement;
+      const isClosing = this.expandedItems.has(toggledAccordionItem);
 
       if (isClosing) {
-        this.expandedItems.delete(toggledItem);
+        this.expandedItems.delete(toggledAccordionItem);
       } else {
-        this.expandedItems.add(toggledItem);
+        this.expandedItems.add(toggledAccordionItem);
       }
 
       if (this.multiple || isClosing) return;
 
       // close other open accordion items to have only one opened at a time
       Array.from(this.expandedItems.values())
-        .filter(item => item !== toggledItem)
+        .filter(item => item !== toggledAccordionItem)
         .forEach(item => {
           item.toggle(false);
         });

diff --git a/packages/components/src/components/post-accordion/readme.md b/packages/components/src/components/post-accordion/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                        | Type                         | Default     |
-| -------------- | --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `headingLevel` | `heading-level` | Defines the hierarchical level of the `post-accordion-item` headers within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `multiple`     | `multiple`      | If `true`, multiple `post-accordion-item` can be open at the same time.                            | `boolean`                    | `false`     |
+| Property                    | Attribute       | Description                                                                                        | Type                         | Default     |
+| --------------------------- | --------------- | -------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `headingLevel` _(required)_ | `heading-level` | Defines the hierarchical level of the `post-accordion-item` headers within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `multiple`                  | `multiple`      | If `true`, multiple `post-accordion-item` can be open at the same time.                            | `boolean`                    | `false`     |
 
 
 ## Methods

diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @swisspost/design-system-demo
 
+## 8.0.3-next.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.0
+  - @swisspost/design-system-intranet-header@9.0.0-next.0
+  - @swisspost/design-system-migrations@9.0.0-next.0
+
 ## 8.0.2
 
 ### Patch Changes