Merge branch 'main' into 1225-update-breakpoints

# Conflicts:
#	pnpm-lock.yaml

.changeset/chilled-parrots-pretend.md

@@ -1,6 +1,5 @@
 ---
-'@swisspost/design-system-styles': patch
 '@swisspost/design-system-documentation': patch
 ---
 
-Adjusted breakpoints and visually got rid of the deprecated `rg` breakpoint.
+Deprecated `rg` breakpoint.

.changeset/yellow-crabs-train.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a documentation page for the Subnavigation Component.

.github/CODEOWNERS

@@ -7,6 +7,3 @@
 
 # Maintainers have to sign off PRs to main as required in branch protection rules
 * @swisspost/design-system-maintainers
-
-# For the duration of the practical year
-/packages/documentation @swisspost/design-system-maintainers @b1aserlu @davidritter-dotcom

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

@@ -39,6 +39,9 @@ inputs:
   folder:
     description: Path to the folder to deploy
     required: true
+  package_name:
+    description: The package that will be deployed
+    required: true
 
 runs:
   using: composite
@@ -73,17 +76,18 @@ runs:
 
     - name: Install netlify-cli
       shell: bash
-      run: pnpm i -g netlify-cli@15
+      run: pnpm i -g netlify-cli@16
 
     - name: Deploy preview environment to netlify
       id: netlify_deploy
       shell: bash
       env:
         NETLIFY_AUTH_TOKEN: ${{ inputs.netlify_auth_token }}
       # 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 }}
+        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
 
     - name: Prepare Comment Message

.github/workflows/build-documentation.yaml

@@ -14,11 +14,7 @@ name: Build Documentation
 on:
   pull_request:
     paths:
-      - 'packages/documentation/**'
-      - 'packages/styles/**'
-      - 'packages/components/**'
-      - 'packages/internet-header/**'
-      - 'packages/icons/**'
+      - 'packages/**'
 
 jobs:
   build:

.github/workflows/deploy-demo.yaml

@@ -47,3 +47,4 @@ jobs:
           folder: ${{ steps.build.outputs.folder }}
           comment_token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           comment_author: swisspost-bot
+          package_name: '@swisspost/design-system-demo'

.github/workflows/deploy-documentation.yaml

@@ -42,3 +42,4 @@ jobs:
           folder: ${{ steps.build.outputs.folder }}
           comment_token: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           comment_author: swisspost-bot
+          package_name: '@swisspost/design-system-documentation'

.github/workflows/e2e-tests.yaml

@@ -41,7 +41,7 @@ jobs:
         run: pnpm e2e:ci
 
       - name: Upload screenshots
-        uses: actions/upload-artifact@v4.1.0
+        uses: actions/upload-artifact@v4.3.0
         if: failure()
         with:
           name: cypress-snapshots

.github/workflows/fetch-icons.yaml

@@ -123,7 +123,7 @@ jobs:
             description+="Deleted icon$(pluralize_if_needed $DELETED_ICONS) number ${DELETED_ICONS}. "
           fi
 
-          echo ---                                          > $CHANGESET
+          echo ---                                          >  $CHANGESET
           echo "'@swisspost/design-system-icons': ${bump}"  >> $CHANGESET
           echo ---                                          >> $CHANGESET
           echo                                              >> $CHANGESET
@@ -147,7 +147,7 @@ jobs:
         if: steps.changed-files.outputs.any_modified != 'false'
         run: |
           echo "file=$PR_BODY_FILE" >> $GITHUB_OUTPUT
-          echo "# Design system icons are now up to date!"  > $PR_BODY_FILE
+          echo "# Design system icons are now up to date!" >  $PR_BODY_FILE
           if [[ -n $UPDATED_ICONS ]]; then
             echo "## Updated icons"                        >> $PR_BODY_FILE
             echo $UPDATED_ICONS                            >> $PR_BODY_FILE

.github/workflows/release.yaml

@@ -38,7 +38,7 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.SWISSPOSTDEVS_ACCESS_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         with:
           title: 'chore(changesets): 🦋📦 publish packages'

.github/workflows/stale.yaml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - uses: actions/stale@v9
         with:
-          days-before-stale: 180
+          days-before-stale: 90
           days-before-close: -1
           stale-issue-label: 'stale'
           exempt-milestones: 'next'

.npmrc

@@ -1,2 +1,4 @@
 # Added for storybook peer dependencies to react
-strict-peer-dependencies=false
+strict-peer-dependencies=false
+# Install new dependencies with exact version to let renovate handle the update
+save-exact=true

.prettierrc

@@ -12,7 +12,7 @@
   "arrowParens": "avoid",
   "insertPragma": false,
   "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "ignore",
+  "htmlWhitespaceSensitivity": "css",
   "endOfLine": "auto",
   "embeddedLanguageFormatting": "auto",
   "singleAttributePerLine": false

CONTRIBUTING.md

@@ -43,6 +43,57 @@ Use these commands whenever you want to work on one of these packages. Ideally,
 | `pnpm header:start`               | starts the stencil compiler for the header                                                   |
 | `pnpm icons:start`                | starts the http server for debugging downloaded icons                                        |
 
+### Definition of Done for a Story
+
+#### Component docs
+
+- Short introduction
+- Canvas for showcasing
+- Controls for the showcase
+- Variants if applicable (e.g. group of component or small example in context)
+- Instructions for installation
+
+#### Controls
+
+- Possibility to showcase and test all variants of the component. This enables re-usage of the docs programmatically for visual regression testing.
+- Accessibility hints for relevant controls like disabled state or hidden labels
+
+#### Testing
+
+- Cross browser testing of the docs (official Post supported browsers -> https://github.com/swisspost/design-system/blob/main/packages/styles/.browserslistrc)
+- Testing the High Contrast mode with light and dark theme (and cross browser)
+- Approval by UX for the story
+- Screen reader testing (at least nvda+win)
+
+#### Accessibility
+
+- `aria-hidden="true"` or `span.visually-hidden` labels for all icons
+
+#### Docs
+
+- Add the `id` property in the meta of each story file. The property should contain an UUID (feel free to use your favorite tool)
+- No react related attributes in code snippets (e.g. className, htmlFor, key, etc.)
+- No nested `<p>` tags (beware of .lead and .alert)
+- When using LinkTo use both the `kind` and `story` attributes
+- `div.hide-col-default` wrapper for controls on CSS only component docs
+- Add the `sourceState="shown"` attribute to the first canvas if the code is not too long (less than 8 lines)
+
+#### Naming convention
+
+- Docs file: `[component].docs.mdx`
+- Story file: `[component].stories.ts`
+- Demo story file: `[component].demo.stories.tsx`
+- Snapshot story file: `[component].snapshot.stories.ts`
+- Style file `[component].styles.scss`
+- SCSS export file `[component].module.scss`
+- Custom mdx helper `blocks [component].blocks.tsx`
+- Sample file: `[component]-[samplename].sample.`
+
+#### General Coding Rules
+
+- Use already existing utilities instead of custom solutions.
+  For example use the `mapClasses` utility function instead of `[*].filter(c => c && c !== 'null').join(' ')`.
+
 ### Testing
 
 For easy test runs, the following commands are available (not all packages might have all commands available).

README.md

@@ -38,4 +38,4 @@ In order to keep our community open and inclusive, we expect you to read and fol
 
 Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).
 
-© 2022 Swiss Post, Ltd.
+© 2024 Swiss Post, Ltd.