Merge branch 'main' into 1469-add-the-radio-button-card-component

.changeset/2023-07-23-update-icons.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': patch
+---
+
+Added icons number 2543.Updated icons number 1021, 1022, 1023 and 1024.
+

.changeset/cold-mails-shout.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Fixed an issue with uppercase environment strings. Uppercase environment strings caused issues with mapping to datasets throughout the header. Now the property is being converted to lowercase internally.

.changeset/gorgeous-cherries-admire.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Fixed an issue with the search redirect to track and trace. The track and trace API `ok` response type changed from boolean to string. The new type is now supported in the redirect logic.

.changeset/long-geckos-clap.md

@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+- Reduced horizontal padding of tertiary buttons.
+- Updated font-size progression according to button size.
+- Changed transparent color to full-tone colors.
+- Updated slightly the font and border color of secondary and tertiary buttons.

.changeset/nice-walls-behave.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': patch
+'@swisspost/design-system-components': patch
+---
+
+Fixed broken and outdated output structure of stencil build.

.changeset/ninety-chicken-wave.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation-v7': minor
+---
+
+Created a storybook v7 package, set up with vite and lit.

.changeset/rude-pears-trade.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': patch
+'@swisspost/design-system-components': patch
+---
+
+Downgraded the module @stencil/core to v3.x, because v4.x is not working as expected for the moment.

.github/workflows/build-documentation-v7.yaml

@@ -0,0 +1,44 @@
+###
+#
+# Build the packages/documentation storybook
+#
+# This workflow does not have secrets when run from a fork.
+# Artifacts are uploaded and used in a subsequent workflow
+# with more privileges which does not run unsafe commands.
+#
+# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+#
+###
+
+name: Build Documentation V7
+on:
+  pull_request:
+    paths:
+      - 'packages/documentation-v7/**'
+      - 'packages/styles/**'
+      - 'packages/components/**'
+      - 'packages/internet-header/**'
+      - 'packages/icons/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: swisspost/design-system/.github/actions/setup-pnpm@main
+
+      - name: Install documentation-v7 & dependencies
+        run: pnpm --filter design-system-documentation-v7... install
+
+      - name: Build documentation-v7 & dependencies
+        run: pnpm --filter design-system-documentation-v7... build
+
+      - name: Upload documentation-v7
+        uses: swisspost/design-system/.github/actions/artifact-upload@main
+        with:
+          name: design-system-documentation-v7
+          folder: packages/documentation-v7/storybook-static

.github/workflows/deploy-documentation-v7.yaml

@@ -0,0 +1,44 @@
+###
+#
+# Deploy a pre-built documentation to netilfy
+#
+# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+#
+###
+
+name: Deploy Documentation V7 Preview to Netlify
+on:
+  workflow_run:
+    workflows: ['Build Documentation V7']
+    types: [completed]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: swisspost/design-system/.github/actions/setup-pnpm@main
+
+      - name: Download build artifacts
+        uses: swisspost/design-system/.github/actions/artifact-download@main
+        id: build
+        with:
+          name: design-system-documentation-v7
+          folder: build-output
+
+      - name: Deploy documentation v7 to netlify
+        uses: swisspost/design-system/.github/actions/deploy-to-netlify@main
+        id: deploy
+        with:
+          id: ${{ steps.build.outputs.id }}
+          netlify_auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          netlify_site_id: ${{ secrets.NEXTV7_NETLIFY_SITE_ID }}
+          netlify_site_url: swisspost-design-system-next-v7.netlify.app
+          folder: ${{ steps.build.outputs.folder }}
+          comment_token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
+          comment_author: swisspost-bot

.prettierrc

@@ -1,15 +1,20 @@
 {
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "jsxSingleQuote": false,
-  "quoteProps": "consistent",
   "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
   "semi": true,
   "singleQuote": true,
-  "tabWidth": 2,
+  "quoteProps": "consistent",
+  "jsxSingleQuote": false,
   "trailingComma": "all",
-  "useTabs": false,
+  "bracketSpacing": true,
+  "bracketLine": false,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "ignore",
   "endOfLine": "auto",
-  "htmlWhitespaceSensitivity": "ignore"
+  "embeddedLanguageFormatting": "auto",
+  "singleAttributePerLine": false
 }

CONTRIBUTING.md

@@ -137,6 +137,20 @@ When a new package is added to the repo, a few things need to be taken care of.
 
   > ⚠ On publish, the `package.json` gets copied into the `./dist` folder. This leads to an incorrect publish path because npm now tries to publish from `./dist/dist`. You'll need a pre-publish script that removes the `directory` key from the `publishConfig` (see the [styles package pre-publish workflow](./packages/styles/gulpfile.js) for an example).
 
+
+## Authoring web-components
+
+### CSS Custom Properties
+As per resolution of the [discussion about sass variables vs. CSS custom properties](https://github.com/swisspost/design-system/discussions/1380), CSS custom properties should be used if they provide meaningful ways to interact with the component. Per default, not every possible value should be a custom property.
+
+#### Do
+- Use custom properties to define themable colors, for example `color` or `border-color` for dark-mode support
+- Use custom properties when updating the value with JavaScript is necessary
+
+#### Don't
+- Use custom properties to declare every possible value on the component. Use sass variables instead
+- Use custom properties when the value is only being used once and never updated
+
 ## Dev Server Ports
 
 For some packages it's necessary to run multiple dev servers at the same time. To prevent port conflicts, the following ranges are given to each package. The ranges 9000 - 9400 are chosen for compatibility with [port ranges used by Browserstack](https://www.browserstack.com/question/39572).

README.md

@@ -1,10 +1,11 @@
 # Swiss Post Design System
 
-![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/643201/ad8bce44-8bb5-4522-ae9a-be27d6e90678)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
 
 The Swiss Post Design System pattern library for a unified and accessible user experience across the web platform.
 
+
 ## Packages
 
 ### Styles

package.json

@@ -25,10 +25,17 @@
     "docs:test": "pnpm --filter design-system-documentation test",
     "docs:e2e": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e'",
     "docs:e2e:watch": "start-server-and-test docs:headless 9300 'pnpm --filter design-system-documentation e2e:watch'",
+    "docsv7": "pnpm --filter design-system-documentation-v7 start",
+    "docsv7:start": "pnpm --filter design-system-documentation-v7... --parallel --stream start",
+    "docsv7:build": "pnpm --filter design-system-documentation-v7 build",
+    "docsv7:headless": "pnpm --filter design-system-documentation-v7 start:headless",
+    "docsv7:e2e": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e'",
+    "docsv7:e2e:watch": "start-server-and-test docsv7:headless 9300 'pnpm --filter design-system-documentation-v7 e2e:watch'",
+    "docsv7:snapshots": "start-server-and-test 'pnpm docsv7:headless' 9300 'pnpm --filter design-system-documentation-v7 snapshots'",
     "styles:start": "pnpm --filter design-system-styles start",
     "styles:build": "pnpm --filter design-system-styles build",
     "styles:test": "pnpm --filter design-system-styles test",
-    "components:start": "pnpm --filter design-system-components start",
+    "components:start": "pnpm --filter design-system-components dev",
     "components:build": "pnpm --filter design-system-components build",
     "components:test": "pnpm --filter design-system-components test",
     "components:unit": "pnpm --filter design-system-components unit",

packages/changelog-github/README.md

@@ -1,6 +1,6 @@
 # Design System Styles
 
-![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
 A changeset changelog message formatter used for generating custom changelog entries. The JavaScript file is used by changesets to fetch information about changesets from GitHub and add user as well as pull-request links.
 

packages/components-angular/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 2.0.7
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.2.5
+
 ## 2.0.6
 
 ### Patch Changes

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -21,9 +21,9 @@
     "@angular/router": "15.2.9",
     "@ng-bootstrap/ng-bootstrap": "14.2.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:6.2.4",
+    "@swisspost/design-system-styles": "workspace:6.2.5",
     "rxjs": "7.8.1",
-    "tslib": "2.6.0",
+    "tslib": "2.6.1",
     "watch": "1.0.2",
     "zone.js": "0.13.1"
   },
@@ -37,10 +37,10 @@
     "@angular/cli": "15.2.9",
     "@angular/compiler-cli": "15.2.9",
     "@types/jasmine": "4.3.5",
-    "@types/node": "18.16.19",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
-    "eslint": "8.44.0",
+    "@types/node": "18.17.1",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "eslint": "8.45.0",
     "jasmine-core": "4.6.0",
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",

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

@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header
 
+## 4.0.7
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.2.5
+
 ## 4.0.6
 
 ### Patch Changes

packages/components-angular/projects/intranet-header/README.md

@@ -1,6 +1,6 @@
 # Swisspost Intranet Header
 
-![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
 The Angular header component for Intranet applications.
 

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

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "description": "Intranet header for internal Swiss Post applications as an Angular component.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -18,10 +18,10 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:6.2.4",
-    "tslib": "2.6.0"
+    "@swisspost/design-system-styles": "workspace:6.2.5",
+    "tslib": "2.6.1"
   },
   "devDependencies": {
-    "@swisspost/design-system-components-angular": "workspace:2.0.6"
+    "@swisspost/design-system-components-angular": "workspace:2.0.7"
   }
 }

packages/components-react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@1.3.8
+
 ## 1.0.13
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,20 +19,20 @@
     "tsc": "tsc -p ."
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.3.7"
+    "@swisspost/design-system-components": "workspace:1.3.8"
   },
   "devDependencies": {
-    "@types/node": "18.16.19",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
-    "eslint": "8.44.0",
-    "eslint-config-standard-with-typescript": "36.0.0",
+    "@types/node": "18.17.1",
+    "@types/react": "18.2.17",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "eslint": "8.45.0",
+    "eslint-config-standard-with-typescript": "37.0.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-n": "16.0.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.1",

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components
 
+## 1.3.8
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.2.5
+
 ## 1.3.7
 
 ### Patch Changes

packages/components/README.md

@@ -1,6 +1,6 @@
 # Swiss Post Design System Components
 
-![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
+![Swiss Post Design System splash screen](https://github.com/swisspost/design-system/assets/1659006/e84f1fea-e666-4853-8c85-726a6bf22e6c)
 
 A collection of web components built with Stencil JS for the Swiss Post Design System.