Merge branch 'update-tokens-workflow' of https://github.com/swisspost…

…/design-system into update-tokens-workflow
swisspost · Nov 13, 2024 · 3e6bc1e · 3e6bc1e
2 parents 1deaf1b + 4b0438a
commit 3e6bc1e
Show file tree

Hide file tree

Showing 104 changed files with 3,535 additions and 605 deletions.
diff --git a/.changeset/2024-11-10-update-icons.md b/.changeset/2024-11-10-update-icons.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added icon number 2632.
+
diff --git a/.changeset/big-socks-dress.md b/.changeset/big-socks-dress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed issue where the focus ring was not appearing on inactive chips.
diff --git a/.changeset/new-goats-impress.md b/.changeset/new-goats-impress.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated vertical-align utility
diff --git a/.changeset/popular-mirrors-cross.md b/.changeset/popular-mirrors-cross.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-components-angular': minor
+'@swisspost/design-system-components-react': minor
+---
+
+Added a provisional post-header component with some basic functionality in place. This component is not finished in this state.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -24,6 +24,7 @@
   "changesets": [
     "2024-10-17-update-icons",
     "2024-10-27-update-icons",
+    "2024-11-10-update-icons",
     "beige-jobs-do",
     "big-frogs-admire",
     "breezy-cups-add",
@@ -32,17 +33,25 @@
     "cold-baboons-appear",
     "cold-panthers-vanish",
     "cuddly-bears-check",
+    "cuddly-gifts-film",
+    "dirty-mayflies-taste",
     "eight-turkeys-matter",
     "eleven-keys-work",
     "empty-islands-kneel",
     "fair-actors-scream",
+    "fast-bats-poke",
     "fast-fans-wash",
+    "fifty-dodos-wait",
+    "fifty-students-call",
     "five-hornets-sin",
     "friendly-insects-breathe",
     "funny-shrimps-care",
     "giant-games-swim",
+    "gold-chairs-grin",
+    "gold-chefs-rule",
     "gorgeous-flowers-flow",
     "great-humans-talk",
+    "grumpy-parrots-wonder",
     "heavy-rats-explode",
     "kind-buses-trade",
     "kind-papayas-provide",
@@ -51,26 +60,33 @@
     "loud-dingos-remember",
     "lovely-deers-itch",
     "lovely-mirrors-travel",
+    "neat-suits-provide",
     "nervous-rocks-shop",
+    "new-goats-impress",
     "ninety-nails-float",
     "pink-weeks-relate",
     "plenty-apricots-raise",
     "popular-games-rush",
     "proud-actors-knock",
+    "proud-cheetahs-act",
     "proud-moons-impress",
     "quick-eagles-watch",
     "quiet-apes-rhyme",
+    "rare-dryers-count",
     "red-cobras-cry",
     "red-lies-lick",
+    "rich-timers-listen",
     "selfish-bats-run",
     "selfish-ways-know",
     "shaggy-experts-give",
     "sharp-baboons-smile",
     "sharp-crews-watch",
     "shiny-ears-care",
+    "shy-walls-exercise",
     "silver-coins-invent",
     "six-spiders-smoke",
     "sixty-items-promise",
+    "slimy-rockets-pull",
     "strange-bottles-impress",
     "tame-terms-push",
     "three-lies-do",

diff --git a/.changeset/quick-buses-give.md b/.changeset/quick-buses-give.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added new Menu Button components (post-menu-button, post-menu-trigger, and post-menu-item) for creating accessible dropdown menus.
diff --git a/.changeset/shy-walls-exercise.md b/.changeset/shy-walls-exercise.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added close button web component.
diff --git a/.github/ISSUE_TEMPLATE/component-v2.yml b/.github/ISSUE_TEMPLATE/component-v2.yml
@@ -28,14 +28,31 @@ body:
       options:
         - label: Tokens for this component are ready
   - type: textarea
-    id: tasks
+    id: tasksdesign
     attributes:
-      label: Tasks
+      label: Tasks design
+      description: Default tasks for the design team. Can be edited later according to needs.
+      value: |
+        ```[tasklist]
+        ### 🎨 Design
+        - [ ] Design component according to WIKIT
+        - [ ] Update dependencies
+        - [ ] Add & test compo in layout examples
+        - [ ] Designer review
+        - [ ] Documentation: Overview and usage (about, compo overview, compo props, usage, examples)
+        - [ ] Documentation: Technical documentation (anatomy, accessibility)
+        - [ ] Documentation: Review (content correctness, understandability, gaps)
+        ```
+  - type: textarea
+    id: tasksdev
+    attributes:
+      label: Tasks development
       description: Default tasks for the dev team. Can be edited later according to needs.
       value: |
         ```[tasklist]
-        ### 💻 Tasks
+        ### 💻 Development
         - [ ] Review Design (All states present? Possible to implement?)
+        - [ ] Tokenization
         - [ ] HTML/CSS implementation
         - [ ] Web component implementation
         - [ ] Documentation in Storybook

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.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 1.1.10-next.3
 
 ### 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.10-next.3",
+  "version": "1.1.10-next.4",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.10",
     "@angular/platform-browser-dynamic": "18.2.10",
     "@angular/router": "18.2.10",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.3",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "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.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### 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": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "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:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",

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.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Patch 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": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.3"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.4"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.4
+
+### Major Changes
+
+- Removed the `.breadcrumb-item` class, which previously handled styling for breadcrumb items. Introduced a new `post-breadcrumb-item` that should be used in place of the `.breadcrumb-item` class. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#3659](https://github.com/swisspost/design-system/pull/3659))
+
+### Minor Changes
+
+- Created the `post-list` and `post-list-item` components. (by [@myrta2302](https://github.com/myrta2302) with [#3812](https://github.com/swisspost/design-system/pull/3812))
+
+- Added close button web component. (by [@leagrdv](https://github.com/leagrdv) with [#3880](https://github.com/swisspost/design-system/pull/3880))
+
+### Patch Changes
+
+- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3726](https://github.com/swisspost/design-system/pull/3726))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.4
+
 ## 9.0.0-next.3
 
 ### Major Changes

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
@@ -113,6 +113,10 @@ By setting a component's name as a `component` property in your stories' metadat
 All components should have automated tests.
 These tests are available in the `cypress/e2e` folder.
 
+### Set inital component Visibility to hidden
+
+To prevent flickering while components load, add each new component to the list in `packages/styles/src/utilities/_not-defined.scss`, which applies `visibility: hidden` to all listed components until they are registered by the browser (when the hydrated attribute actually starts to take effect).
+
 ## Stencil
 
 ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

diff --git a/packages/components/cypress/e2e/closebutton.cy.ts b/packages/components/cypress/e2e/closebutton.cy.ts
@@ -0,0 +1,22 @@
+const CLOSE_BTN_ID = 'de313349-0c0b-4baf-adc6-cb8c2e36fc1a';
+
+describe('Close button', () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.getComponent('post-closebutton', CLOSE_BTN_ID);
+    });
+
+    it('should render with a close button and a11y label', () => {
+      cy.get('@closebutton').should('exist');
+      cy.get('@closebutton').find('.btn-icon-close').should('exist');
+      cy.get('@closebutton').find('span.visually-hidden').should('exist');
+    });
+  });
+});
+
+describe('Accessibility', () => {
+  it('Has no detectable a11y violations on load for all variants', () => {
+    cy.getSnapshots('post-closebutton');
+    cy.checkA11y('#root-inner');
+  });
+});
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.4",
   "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:9.0.0-next.3",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.4",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },
@@ -65,6 +65,7 @@
     "rimraf": "6.0.1",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.78.0",
+    "throttle-debounce": "5.0.2",
     "ts-jest": "29.2.4",
     "typescript": "5.5.4"
   },