Merge branch 'main' into tokens/v2

.changeset/2024-07-14-update-icons.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added icons number 2592, 2593, 2594 and 2595.
+

.changeset/beige-cooks-switch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed an issue with popovers on Firefox ESR that unexpectedly closed popovers when clicking on content.

.changeset/few-houses-wait.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed visual issues with validated form-elements who receive focus.

.changeset/flat-gifts-report.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Added a new stylesheet containing `:root` CSS custom properties to facilitate implementing styles relative to the header. This will allow putting sticky content right below the header.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: '[bug]: '
+labels: "\U0001F41E bug"
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/component-v2.yml

@@ -0,0 +1,45 @@
+name: Component v2
+description: Add a working item for a component targeted at the new Design v2
+title: '[component]: '
+labels: ['📦 components']
+projects: ['swisspost/3']
+assignees: []
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: A short description of the component, disambiguation if needed
+      placeholder: A tooltip shows short, additional information on focusable elements.
+    validations:
+      required: false
+  - type: input
+    id: designurl
+    attributes:
+      label: Design
+      description: Link to the component in Figma
+    validations:
+      required: true
+  - type: checkboxes
+    id: tokens
+    attributes:
+      label: Tokens
+      description: Indicates whether tokens already exist for this component
+      options:
+        - label: Tokens for this component are ready
+  - type: textarea
+    id: tasks
+    attributes:
+      label: Tasks
+      description: Default tasks for the dev team. Can be edited later according to needs.
+      value: |
+        ```[tasklist]
+        ### 💻 Tasks
+        - [ ] HTML/CSS implementation
+        - [ ] Web component implementation
+        - [ ] Documentation in Storybook
+        - [ ] Unit tests
+        - [ ] End to end tests
+        - [ ] Visual regression tests
+        - [ ] Design review
+        ```

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: '✨ feature'
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe it.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/actions/artifact-download/action.yaml

@@ -1,14 +1,5 @@
 ###
 #
-# If you need to do some changes in a local-action used in this
-# workflow, make sure you change the action-flag to your working
-# branch-name to get the latest action functionality.
-#
-# Example: swisspost/design-system/.github/actions/setup-environment-pnpm@my-working-branch-name
-#
-# Don't forget to change the action-flag back to 'main',
-# once you have finished your work on the local-action!
-#
 # https://docs.github.com/en/actions/creating-actions/about-custom-actions#using-release-management-for-actions
 #
 ###
@@ -41,7 +32,7 @@ runs:
   using: composite
   steps:
     - name: Download artifact
-      uses: dawidd6/action-download-artifact@v3
+      uses: dawidd6/action-download-artifact@v6
       with:
         name: ${{ inputs.name }}
         run_id: ${{ github.event.workflow_run.id }}

.github/actions/artifact-upload/action.yaml

@@ -1,14 +1,5 @@
 ###
 #
-# If you need to do some changes in a local-action used in this
-# workflow, make sure you change the action-flag to your working
-# branch-name to get the latest action functionality.
-#
-# Example: swisspost/design-system/.github/actions/setup-environment-pnpm@my-working-branch-name
-#
-# Don't forget to change the action-flag back to 'main',
-# once you have finished your work on the local-action!
-#
 # https://docs.github.com/en/actions/creating-actions/about-custom-actions#using-release-management-for-actions
 #
 ###

.github/actions/deploy-to-netlify/action.yaml

@@ -1,17 +1,6 @@
 ###
 #
-# This action needs a proper node and pnpm setup before!
-#
-# If you need to do some changes in a local-action used in this
-# workflow, make sure you change the action-flag to your working
-# branch-name to get the latest action functionality.
-#
-# Example: swisspost/design-system/.github/actions/setup-pnpm@my-working-branch-name
-#
-# Don't forget to change the action-flag back to 'main',
-# once you have finished your work on the local-action!
-#
-# https://docs.github.com/en/actions/creating-actions/about-custom-actions#using-release-management-for-actions
+# DEPRECATED: This Action can be removed, as soon as we remove deploy-demo.yaml
 #
 ###
 
@@ -47,16 +36,16 @@ runs:
   steps:
     - name: Install netlify-cli
       shell: bash
-      run: pnpm i -g netlify-cli@16
+      run: pnpm i -g netlify-cli@17
 
     - name: Deploy preview environment to netlify
       id: netlify_deploy
       shell: bash
       env:
         NETLIFY_AUTH_TOKEN: ${{ inputs.netlify_auth_token }}
+        NETLIFY_SITE_ID: ${{ inputs.netlify_site_id }}
       # run command taken from https://gist.github.com/oneohthree/f528c7ae1e701ad990e6, shortened to 28 chars, prepended with build-number
-      # edited for netifly v16
       run: |
         url_alias=`echo "preview-${{ inputs.id }}" | iconv -t ascii//TRANSLIT | sed -E 's/[~\^]+//g' | sed -E 's/[^a-zA-Z0-9]+/-/g' | sed -E 's/^-+\|-+$//g' | sed -E 's/^-+//g' | sed -E 's/-+$//g' | tr A-Z a-z`
-        netlify deploy --alias $url_alias --build false --dir ${{ inputs.folder }} --site ${{ inputs.netlify_site_id }} --filter ${{inputs.package_name}}
         echo "url_alias=$url_alias" >> $GITHUB_OUTPUT
+        netlify deploy --filter ${{inputs.package_name}} --build false --dir ${{ inputs.folder }} --alias $url_alias

.github/actions/setup-netlify-cli/action.yaml

@@ -0,0 +1,15 @@
+###
+#
+# NOTE: We've created this action to ensure, we are using the same Netlify-CLI version everywhere
+#
+###
+
+name: Setup Netlify CLI
+description: Provides node and pnpm in a specific version.
+
+runs:
+  using: composite
+  steps:
+    - name: Install netlify-cli
+      shell: bash
+      run: pnpm i -g netlify-cli@17

.github/actions/setup-pnpm/action.yaml

@@ -5,15 +5,6 @@
 # separate terms of service, privacy policy, and support
 # documentation.
 #
-# If you need to do some changes in a local-action used in this
-# workflow, make sure you change the action-flag to your working
-# branch-name to get the latest action functionality.
-#
-# Example: swisspost/design-system/.github/actions/setup-pnpm@my-working-branch-name
-#
-# Don't forget to change the action-flag back to 'main',
-# once you have finished your work on the local-action!
-#
 # https://docs.github.com/en/actions/creating-actions/about-custom-actions#using-release-management-for-actions
 #
 # NOTE: pnpm caching support requires pnpm version >= 6.10.0
@@ -26,11 +17,9 @@ description: Provides node and pnpm in a specific version.
 inputs:
   node_version:
     description: Specify the node version to install
-    default: 20
     type: string
   pnpm_version:
     description: Specify the pnpm version to install
-    default: 9
     type: string
   use_cache:
     description: Specify wether to use the pnpm cache or not
@@ -40,13 +29,38 @@ inputs:
 runs:
   using: composite
   steps:
+    - name: Detect wanted version
+      id: wanted-versions
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const fs = require('fs')
+          const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'))
+
+          return {
+            node: pkg.engines?.node,
+            pnpm: pkg.packageManager
+          }
+
     - name: Install pnpm
-      uses: pnpm/action-setup@v3
+      uses: pnpm/action-setup@v4
       with:
-        version: ${{ inputs.pnpm_version }}
+        # If input.pnpm_version is NOT defined,
+        # the action automatically uses the "packageManager" field from the package.json file
+        # If input.pnpm_version is defined, we need to point to another package.json file, without the "packageManager" field,
+        # so we do not end up with a "Multiple versions of pnpm specified" error
+        package_json_file: ${{ inputs.pnpm_version && 'packages/documentation/package.json' || 'package.json' }}
+        version: ${{ inputs.pnpm_version || null }}
 
-    - name: Install node with pnpm cache
+    - name: Install node
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ inputs.node_version }}
+        node-version: ${{ inputs.node_version || fromJSON(steps.wanted-versions.outputs.result).node }}
         cache: ${{ inputs.use_cache == 'true' && 'pnpm' || '' }}
+
+    - name: Summary
+      shell: bash
+      run: |
+        echo "Installed versions:"
+        echo "- node: ${{ inputs.node_version || fromJSON(steps.wanted-versions.outputs.result).node }}"
+        echo "- pnpm: ${{ inputs.pnpm_version || fromJSON(steps.wanted-versions.outputs.result).pnpm }}"

.github/workflows/build-demo.yaml

@@ -1,13 +1,6 @@
 ###
 #
-# Build the demo app and all dependencies
-#
-# This workflow does not have secrets access
-# 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/
+# DEPRECATED: This Action can be removed as soon as we start working on V2/V9
 #
 ###
 
@@ -36,15 +29,15 @@ jobs:
           access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
 
       - name: Setup
-        uses: swisspost/design-system/.github/actions/setup-pnpm@main
+        uses: ./.github/actions/setup-pnpm
 
       - name: Bootstrap & Build Design System
         run: |
           pnpm --filter design-system-demo... install
           pnpm --filter design-system-demo... build
 
       - name: Upload build artifacts
-        uses: swisspost/design-system/.github/actions/artifact-upload@main
+        uses: ./.github/actions/artifact-upload
         with:
           name: design-system-demo
           folder: packages/demo/dist/demo

.github/workflows/build-documentation.yaml

@@ -19,8 +19,8 @@ on:
 
 jobs:
   build:
+    name: Build Documentation
     runs-on: ubuntu-latest
-
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -31,14 +31,17 @@ jobs:
           access-token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
 
       - name: Setup
-        uses: swisspost/design-system/.github/actions/setup-pnpm@main
+        uses: ./.github/actions/setup-pnpm
 
       - name: Install documentation & dependencies
         run: pnpm --filter design-system-documentation... install
 
       - name: Build documentation & dependencies
         run: pnpm --filter design-system-documentation... build
 
+      - name: Add netlify.config.json to artifact folder
+        run: cp packages/documentation/netlify.config.json packages/documentation/storybook-static/netlify.config.json
+
       - name: Upload documentation
         uses: ./.github/actions/artifact-upload
         with: