Merge branch 'main' into tokens/v2-24-10

.changeset/beige-jobs-do.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated and tokenized styles for the legend element.

.changeset/kind-buses-trade.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap.

.changeset/lazy-gorillas-admire.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the Link component styles to align with the new design, added a documentation page outlining the usage of the component.

.changeset/loud-dingos-remember.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed the dropdown toggle in the example of the intranet header with a navigation bar.

.changeset/lovely-mirrors-travel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Wrapped new token only entry files in a CSS layer called 'design-system'. The two files affected are 'post-tokens-external.scss' and 'post-tokens-internal.scss' as well as their compiled CSS counterparts.

.changeset/popular-games-rush.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Deprecated the ng-bootstrap components Modal and Notification overlay in favor of the new Dialog component. The styles for these ng-bootstrap components will be removed in a future major version.

.changeset/pre.json

@@ -22,19 +22,39 @@
     "@swisspost/design-system-tokens": "8.2.0"
   },
   "changesets": [
+    "beige-jobs-do",
+    "big-frogs-admire",
+    "breezy-cups-add",
     "clean-icons-complain",
     "cold-baboons-appear",
     "cold-panthers-vanish",
+    "cuddly-bears-check",
+    "eleven-keys-work",
+    "empty-islands-kneel",
     "fair-actors-scream",
     "friendly-insects-breathe",
     "funny-shrimps-care",
     "gorgeous-flowers-flow",
     "great-humans-talk",
     "heavy-rats-explode",
+    "kind-buses-trade",
+    "kind-papayas-provide",
+    "lemon-clocks-clean",
+    "lovely-mirrors-travel",
+    "nervous-rocks-shop",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
+    "popular-games-rush",
+    "proud-actors-knock",
+    "red-lies-lick",
     "selfish-bats-run",
-    "sharp-crews-watch"
+    "shaggy-experts-give",
+    "sharp-crews-watch",
+    "six-spiders-smoke",
+    "tame-terms-push",
+    "three-lies-do",
+    "tidy-dolls-walk",
+    "yellow-yaks-jog"
   ]
 }

.changeset/shaggy-experts-give.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-react': patch
+---
+
+Initial release!

.changeset/sixty-items-promise.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added paragraph style.

.changeset/strange-bottles-impress.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added paragraph element.

.changeset/three-lies-do.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed an issue with element styles that were not compiled to the output as CSS.

.github/workflows/create-token-pr.yaml

@@ -0,0 +1,56 @@
+###
+#
+# Creates a PR from the token branch whenever is has commits ahead of main.
+#
+###
+
+name: Create Token PR
+on:
+  push:
+    branches:
+      - tokens/v*
+
+jobs:
+  create_pr:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # Check if a PR branch corresponding to the token branch exists
+      - name: Get PR Branch
+        id: pr-branch
+        run: |
+          PR_BRANCH="merge-tokens-${GITHUB_REF##*/}"
+          echo "name=${PR_BRANCH}" >> $GITHUB_OUTPUT
+
+          if [[ -n $(git ls-remote origin "${PR_BRANCH}") ]]; then
+            echo "exists=true" >> $GITHUB_OUTPUT
+          else
+            echo "exists=false" >> $GITHUB_OUTPUT
+          fi
+
+      # If the branch exits, update the PR
+      - name: Update PR
+        if: steps.pr-branch.outputs.exists == 'true'
+        run: |
+          git config user.name "Swiss Post Bot"
+          git config user.email "[email protected]"
+          git checkout ${{ steps.pr-branch.outputs.name }}
+          git merge ${{ github.ref_name }} -X theirs --no-edit
+          git push
+        env:
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+
+      # If the branch does not exit, create the PR
+      - name: Create PR
+        if: steps.pr-branch.outputs.exists == 'false'
+        run: |
+          git checkout -b ${{ steps.pr-branch.outputs.name }} ${{ github.ref_name }}
+          git push --set-upstream origin ${{ steps.pr-branch.outputs.name }}
+          gh pr create --title "chore(tokens): :art: update tokens" --body "Merge this PR to update the tokens in the main branch." --base main
+        env:
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}

packages/changelog-github/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },

packages/components-angular/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+  - @swisspost/design-system-components@9.0.0-next.2
+
+## 1.1.10-next.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 1.1.10-next.0
 
 ### Patch Changes

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.0",
+  "version": "1.1.10-next.2",
   "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:9.0.0-next.0",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.0",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.2",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"

packages/components-angular/projects/components/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.2
+
+## 9.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes

packages/components-angular/projects/components/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.2",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
   },
-  "homepage": "https://swisspost-web-frontend.netlify.app",
+  "homepage": "https://design-system.post.ch",
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",

packages/components-react/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.2
+
+### Patch Changes
+
+- Initial release! (by [@gfellerph](https://github.com/gfellerph) with [#3718](https://github.com/swisspost/design-system/pull/3718))
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.2
+
+## 9.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,15 +1,24 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.0",
+  "version": "9.0.0-next.2",
+  "description": "Design System React Components for easy integration with the React ecosystem",
+  "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/swisspost/design-system.git"
+  },
+  "homepage": "https://design-system.post.ch",
+  "bugs": {
+    "url": "https://github.com/swisspost/design-system/issues"
+  },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "private": true,
   "files": [
     "dist"
   ],
   "publishConfig": {
-    "access": "restricted",
+    "access": "public",
     "linkDirectory": true
   },
   "scripts": {
@@ -20,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.0"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.2"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

packages/components/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.2
+
+## 9.0.0-next.1
+
+### Major Changes
+
+- Made the heading-level property required for the accordion and removed it from the accordion-item docs. (by [@schaertim](https://github.com/schaertim) with [#3383](https://github.com/swisspost/design-system/pull/3383))
+
+### Patch Changes
+
+- Fixed a bug in nested accordions where closing a child item unintentionally closed all parent accordion elements. (by [@schaertim](https://github.com/schaertim) with [#3427](https://github.com/swisspost/design-system/pull/3427))
+
+- Fixed an issue related to conflicting pointer and focus events hiding the tooltip unexpectedly in some situations. The tooltip now behaves as expected in this situation. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3592](https://github.com/swisspost/design-system/pull/3592))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.1
+
 ## 9.0.0-next.0
 
 ### Patch Changes

packages/components/cypress/e2e/accordion.cy.ts

@@ -48,16 +48,42 @@ describe('accordion', () => {
   describe('nested', () => {
     beforeEach(() => {
       cy.getComponent('accordion', ACCORDION_ID, 'nested');
-      cy.get('@accordion').find('post-accordion post-accordion-item').as('nestedCollapsibles');
+      cy.get('@accordion').find('post-accordion-item').as('collapsibles');
+    });
+
+    it('should show the first nested element of the first element', () => {
+      cy.get('@collapsibles').eq(1).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(2).click();
+      cy.get('@collapsibles').eq(1).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(2).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should show the first nested element wrapped in a div in the second parent accordion element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(5).click();
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.visible');
+    });
+
+    it('should not show the first nested element wrapped in a div as expanded after clicking the last nested element', () => {
+      cy.get('@collapsibles').eq(4).click();
+      cy.get('@collapsibles').eq(7).click();
+      cy.get('@collapsibles').eq(5).shadow().find('post-collapsible').should('be.hidden');
+      cy.get('@collapsibles').eq(4).shadow().find('post-collapsible').should('be.visible');
+      cy.get('@collapsibles').eq(7).shadow().find('post-collapsible').should('be.visible');
     });
 
     it('should not propagate "postToggle" event from nested post-accordion', () => {
       cy.document().then(document => {
         const EventHandlerMock = cy.spy();
         Cypress.$(document.querySelector('post-accordion')).on('postToggle', EventHandlerMock);
 
-        cy.get('@nestedCollapsibles')
-          .last()
+        cy.get('@collapsibles')
+          .eq(3)
           .click()
           .then(() => {
             expect(EventHandlerMock).to.not.be.called;