Merge branch 'release/v8' into 3507-bug-background-of-textarea-fields…

…-is-transparent
swisspost · Oct 15, 2024 · d0cd76f · d0cd76f
2 parents 6924dbf + f0721a2
commit d0cd76f
Show file tree

Hide file tree

Showing 60 changed files with 997 additions and 123 deletions.
diff --git a/.changeset/wet-sloths-listen.md b/.changeset/wet-sloths-listen.md
diff --git a/.github/actions/setup-netlify-cli/action.yaml b/.github/actions/setup-netlify-cli/action.yaml
@@ -12,4 +12,4 @@ runs:
   steps:
     - name: Install netlify-cli
       shell: bash
-      run: pnpm i -g netlify-cli@17
+      run: pnpm i -g netlify-cli@17.36.1
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.12
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@8.3.0
+  - @swisspost/design-system-styles@8.3.0
+
+## 1.1.11
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.2.2
+  - @swisspost/design-system-components@8.2.2
+
 ## 1.1.10
 
 ### 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",
+  "version": "1.1.12",
   "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:8.2.1",
-    "@swisspost/design-system-styles": "workspace:8.2.1",
+    "@swisspost/design-system-components": "workspace:8.3.0",
+    "@swisspost/design-system-styles": "workspace:8.3.0",
     "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,19 @@
 # @swisspost/design-system-components-angular
 
+## 8.3.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@8.3.0
+
+## 8.2.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@8.2.2
+
 ## 8.2.1
 
 ### Patch 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": "8.2.1",
+  "version": "8.3.0",
   "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:8.2.1"
+    "@swisspost/design-system-components": "workspace:8.3.0"
   },
   "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,19 @@
 # @swisspost/design-system-components-react
 
+## 8.3.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@8.3.0
+
+## 8.2.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@8.2.2
+
 ## 8.2.1
 
 ### 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": "8.2.1",
+  "version": "8.3.0",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:8.2.1"
+    "@swisspost/design-system-components": "workspace:8.3.0"
   },
   "devDependencies": {
     "@types/node": "20.14.14",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,21 @@
 # @swisspost/design-system-components
 
+## 8.3.0
+
+### Patch Changes
+
+- Fixed an issue with the post-collapsible throwing an invalid selector error. (by [@alizedebray](https://github.com/alizedebray) with [#3727](https://github.com/swisspost/design-system/pull/3727))
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.3.0
+
+## 8.2.2
+
+### Patch Changes
+
+- 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 [@oliverschuerch](https://github.com/oliverschuerch) with [#3681](https://github.com/swisspost/design-system/pull/3681))
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.2.2
+
 ## 8.2.1
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "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:8.2.1",
+    "@swisspost/design-system-styles": "workspace:8.3.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0"
   },

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -311,8 +311,9 @@ export namespace Components {
         /**
           * Programmatically display the tooltip
           * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
          */
-        "show": (target: HTMLElement) => Promise<void>;
+        "show": (target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>;
         /**
           * Toggle tooltip display
           * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown

diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -87,7 +87,7 @@ export class PostCollapsible {
    */
   private updateTriggers() {
     const triggers: NodeListOf<HTMLPostCollapsibleTriggerElement> = document.querySelectorAll(
-      `post-collapsible-trigger[for=${this.host.id}]`,
+      `post-collapsible-trigger[for="${this.host.id}"]`,
     );
 
     triggers.forEach(trigger => trigger.update());

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx
@@ -23,6 +23,10 @@ const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
+ *
+ * This handler manages both pointer and focus events to properly trigger tooltips.
+ * If the event is a focus event (e.g., keyboard navigation), pointer events are ignored to avoid
+ * interference with tooltip behavior.
  * @param e Event
  * @returns
  */
@@ -34,7 +38,11 @@ const globalInterestHandler = (e: PointerEvent | FocusEvent) => {
   const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
   if (!tooltipTarget || tooltipTarget === '') return;
   const tooltip = document.getElementById(tooltipTarget) as HTMLPostTooltipElement;
-  void tooltip?.show(targetElement);
+
+  // Determine if the tooltip was triggered by a focus event
+  const triggeredByFocus = e.type === 'focusin';
+  void tooltip?.show(targetElement, triggeredByFocus);
+
   if (hideTooltipTimeout) {
     window.clearTimeout(hideTooltipTimeout);
     hideTooltipTimeout = null;
@@ -98,6 +106,7 @@ const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccess
 })
 export class PostTooltip {
   private popoverRef: HTMLPostPopovercontainerElement;
+  private wasOpenedByFocus: boolean = false;
 
   @Element() host: HTMLPostTooltipElement;
 
@@ -186,10 +195,22 @@ export class PostTooltip {
   /**
    * Programmatically display the tooltip
    * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
    */
   @Method()
-  async show(target: HTMLElement) {
+  async show(target: HTMLElement, triggeredByFocus = false) {
     if (this.delayed) await timeout(OPEN_DELAY);
+
+    // Determine if the tooltip was opened by a focus event
+    this.wasOpenedByFocus = triggeredByFocus;
+
+    // Disable pointer events if triggered by focus, otherwise enable them
+    if (this.wasOpenedByFocus) {
+      this.host.style.pointerEvents = 'none';
+    } else {
+      this.host.style.pointerEvents = 'auto';
+    }
+
     this.popoverRef.show(target);
   }
 
@@ -223,9 +244,11 @@ export class PostTooltip {
 
   /**
    * Pointer or focus left the tooltip, initiate the hiding process
+   * Re-enable pointer events when the tooltip is no longer in focus or hovered
    */
   private handleInterestLost() {
     globalHideTooltip(this);
+    this.host.style.pointerEvents = 'auto';
   }
 
   render() {

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
@@ -26,15 +26,16 @@ Type: `Promise<void>`
 
 
 
-### `show(target: HTMLElement) => Promise<void>`
+### `show(target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>`
 
 Programmatically display the tooltip
 
 #### Parameters
 
-| Name     | Type          | Description                                                                  |
-| -------- | ------------- | ---------------------------------------------------------------------------- |
-| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
+| Name               | Type          | Description                                                                  |
+| ------------------ | ------------- | ---------------------------------------------------------------------------- |
+| `target`           | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
+| `triggeredByFocus` | `boolean`     | A boolean indicating if the tooltip was triggered by a focus event.          |
 
 #### Returns
 

diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @swisspost/design-system-demo
 
+## 8.0.5
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.3.0
+  - @swisspost/design-system-intranet-header@8.3.0
+  - @swisspost/design-system-migrations@8.3.0
+
+## 8.0.4
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.2.2
+  - @swisspost/design-system-intranet-header@8.2.2
+  - @swisspost/design-system-migrations@8.2.2
+
 ## 8.0.3
 
 ### Patch Changes

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-demo",
-  "version": "8.0.3",
+  "version": "8.0.5",
   "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
   "author": "Swiss Post <[email protected]>",
   "license": "Apache-2.0",
@@ -25,9 +25,9 @@
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
     "@swimlane/ngx-datatable": "20.1.0",
-    "@swisspost/design-system-intranet-header": "workspace:8.2.1",
-    "@swisspost/design-system-migrations": "workspace:8.2.1",
-    "@swisspost/design-system-styles": "workspace:8.2.1",
+    "@swisspost/design-system-intranet-header": "workspace:8.3.0",
+    "@swisspost/design-system-migrations": "workspace:8.3.0",
+    "@swisspost/design-system-styles": "workspace:8.3.0",
     "bootstrap": "5.3.3",
     "core-js": "3.37.1",
     "highlight.js": "11.10.0",

diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,41 @@
 # @swisspost/design-system-documentation
 
+## 5.5.0
+
+### Minor Changes
+
+- Added styling support and documentation for the `<dialog>` element. The dialog will replace the current modal and notification overlay components coming from ng-bootstrap. (by [@leagrdv](https://github.com/leagrdv) with [#3713](https://github.com/swisspost/design-system/pull/3713))
+
+### Patch Changes
+
+- Fixed the dropdown toggle in the example of the intranet header with a navigation bar. (by [@alizedebray](https://github.com/alizedebray) with [#3723](https://github.com/swisspost/design-system/pull/3723))
+- Updated dependencies:
+  - @swisspost/design-system-components@8.3.0
+  - @swisspost/design-system-styles@8.3.0
+  - @swisspost/design-system-components-react@8.3.0
+  - @swisspost/internet-header@1.14.8
+  - @swisspost/design-system-icons@8.3.0
+
+## 5.4.3
+
+### Patch Changes
+
+- Fixed documentaion release workflow. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3690](https://github.com/swisspost/design-system/pull/3690))
+
+## 5.4.2
+
+### Patch Changes
+
+- Improved accessibility of headings with subheadings by removing the <br> element and added the utility class d-block. Consult https://design-system.post.ch/?path=/docs/7ecd87f1-de96-4e39-a057-ba1798eb6959--docs for updated markup. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3680](https://github.com/swisspost/design-system/pull/3680))
+
+- Refactored the stepper component to handle `updateArgs` directly within the `getStepperItem` function, fixing the issue where stepper examples were not independent and resolving unreliable step changes that sometimes caused clicks to be unrecognized or froze the page. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#3686](https://github.com/swisspost/design-system/pull/3686))
+- Updated dependencies:
+  - @swisspost/design-system-styles@8.2.2
+  - @swisspost/design-system-components@8.2.2
+  - @swisspost/internet-header@1.14.7
+  - @swisspost/design-system-components-react@8.2.2
+  - @swisspost/design-system-icons@8.2.2
+
 ## 5.4.1
 
 ### Patch Changes

diff --git a/packages/documentation/cypress/snapshots/components/dialog.snapshot.ts b/packages/documentation/cypress/snapshots/components/dialog.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Dialog', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--dialog');
+    cy.get('dialog[open]', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Dialog', { widths: [1440] });
+  });
+});