Merge branch 'main' into fix/2829-intranet-header-tabindex-interactiv…

…e-el # Conflicts: # packages/demo/src/app/layout-container/layout-container.component.html # packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html # packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html # pnpm-lock.yaml
swisspost · Apr 2, 2024 · 6eaaf3e · 6eaaf3e
2 parents a460d01 + 20c0ca5
commit 6eaaf3e
Show file tree

Hide file tree

Showing 70 changed files with 3,913 additions and 2,606 deletions.
diff --git a/.changeset/bright-melons-cover.md b/.changeset/bright-melons-cover.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Fixed display of version switcher with new versions.json file.
diff --git a/.changeset/forty-knives-love.md b/.changeset/forty-knives-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added a workaround to display progress bar on input range and on webkit browsers without JavaScript.
diff --git a/.changeset/fresh-bikes-rush.md b/.changeset/fresh-bikes-rush.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed post-tooltip that doesn't show up when the pointer is on a child element (like an icon).
diff --git a/.changeset/rude-apricots-joke.md b/.changeset/rude-apricots-joke.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed active button color-contrast on dark background
diff --git a/.changeset/silver-items-press.md b/.changeset/silver-items-press.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored the new focus style to only be visible when using keyboard for form elements.
diff --git a/.changeset/swift-dragons-add.md b/.changeset/swift-dragons-add.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added a pattern for error pages with an image. Currently available is a graphic for "404 not found" errors. More error types may be supported in the future.
diff --git a/.changeset/two-shrimps-argue.md b/.changeset/two-shrimps-argue.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Added the new default slot, to allow the integration of custom HTML in the card-control component.
diff --git a/.github/actions/setup-pnpm/action.yaml b/.github/actions/setup-pnpm/action.yaml
@@ -41,7 +41,7 @@ runs:
   using: composite
   steps:
     - name: Install pnpm
-      uses: pnpm/action-setup@v2
+      uses: pnpm/action-setup@v3
       with:
         version: ${{ inputs.pnpm_version }}
 

diff --git a/package.json b/package.json
@@ -101,21 +101,13 @@
       }
     },
     "overrides": {
-      "[email protected] ≤ Version ≤ 1.3.5": "",
       "merge@< 2.1.1": "2.1.1",
       "glob-parent@< 5.1.2": "5.1.2",
-      "[email protected]": "",
-      "jsbn@≤ 1.1.0": "",
-      "[email protected]": "",
-      "semver@< 5.7.2||6.0.0 ≤ Version < 6.3.1||7.0.0 ≤ Version < 7.5.2": "5.7.2||6.3.1||7.5.2",
-      "@babel/traverse@< 7.23.2||8.0.0-alpha.0 ≤ Version < 8.0.0-alpha.4": "7.23.2||8.0.0-alpha.4",
-      "merge@<2.1.1": ">=2.1.1",
       "glob-parent@<5.1.2": ">=5.1.2",
-      "socket.io-parser@>=4.0.4 <4.2.3": ">=4.2.3",
-      "semver@<5.7.2": ">=5.7.2",
-      "semver@>=7.0.0 <7.5.2": ">=7.5.2",
-      "postcss@<8.4.31": ">=8.4.31",
-      "@babel/traverse@<7.23.2": ">=7.23.2"
+      "merge@<2.1.1": ">=2.1.1",
+      "ip@=2.0.0": ">=2.0.1",
+      "es5-ext@>=0.10.0 <0.10.63": ">=0.10.63",
+      "follow-redirects@<=1.15.5": ">=1.15.6"
     }
   }
 }
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -10,32 +10,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "17.3.0",
-    "@angular/common": "17.3.0",
-    "@angular/compiler": "17.3.0",
-    "@angular/core": "17.3.0",
-    "@angular/forms": "17.3.0",
-    "@angular/platform-browser": "17.3.0",
-    "@angular/platform-browser-dynamic": "17.3.0",
-    "@angular/router": "17.3.0",
-    "@swisspost/design-system-styles": "workspace:6.6.4",
+    "@angular/animations": "17.3.1",
+    "@angular/common": "17.3.1",
+    "@angular/compiler": "17.3.1",
+    "@angular/core": "17.3.1",
+    "@angular/forms": "17.3.1",
+    "@angular/platform-browser": "17.3.1",
+    "@angular/platform-browser-dynamic": "17.3.1",
+    "@angular/router": "17.3.1",
     "@swisspost/design-system-components": "workspace:2.1.0",
+    "@swisspost/design-system-styles": "workspace:6.6.4",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
     "zone.js": "0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.0",
-    "@angular-eslint/builder": "17.2.1",
-    "@angular-eslint/eslint-plugin": "17.2.1",
-    "@angular-eslint/eslint-plugin-template": "17.2.1",
-    "@angular-eslint/template-parser": "17.2.1",
-    "@angular/cli": "17.3.0",
-    "@angular/compiler-cli": "17.3.0",
+    "@angular-devkit/build-angular": "17.3.2",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/cli": "17.3.2",
+    "@angular/compiler-cli": "17.3.1",
     "@cypress/schematic": "2.5.1",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
-    "cypress": "13.7.0",
+    "@typescript-eslint/eslint-plugin": "7.4.0",
+    "@typescript-eslint/parser": "7.4.0",
+    "cypress": "13.7.1",
     "eslint": "8.57.0",
     "karma": "6.4.3",
     "karma-chrome-launcher": "3.2.0",

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -23,16 +23,16 @@
   },
   "devDependencies": {
     "@types/node": "18.19.14",
-    "@types/react": "18.2.66",
+    "@types/react": "18.2.71",
     "@types/react-dom": "18.2.22",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "eslint": "8.57.0",
-    "eslint-config-standard-with-typescript": "43.0.1",
+    "eslint-config-love": "43.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-n": "16.6.2",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",

diff --git a/packages/components/cypress/e2e/card-control.cy.ts b/packages/components/cypress/e2e/card-control.cy.ts
@@ -181,7 +181,7 @@ describe('Card-Control', () => {
 
       cy.get('@input').type(' ').should('be.checked');
       cy.get('@wrapper').should('have.class', 'is-checked');
-      cy.get('@input').focus().type(' ').should('not.be.checked');
+      cy.get('@input').blur().type(' ').should('not.be.checked');
       cy.get('@wrapper').should('not.have.class', 'is-checked');
     });
 
@@ -235,7 +235,7 @@ describe('Card-Control', () => {
           expect(inputEventCallCount).to.eq(3);
           expect(changeEventCallCount).to.eq(3);
         })
-        .focus()
+        .blur()
         .type(' ')
         .then(() => {
           expect(inputEventCallCount).to.eq(4);
@@ -309,7 +309,6 @@ describe('Card-Control', () => {
       cy.get('@card-control').find('.card-control--icon').as('icon');
       cy.get('@card-control').find('.card-control--icon slot[name="icon"]').as('slotIcon');
     });
-
     it('should update surrounding form when toggled', () => {
       cy.get('@form').then($form => {
         cy.get('@wrapper').click();
@@ -319,7 +318,7 @@ describe('Card-Control', () => {
 
         cy.get('@input').type(' ');
         cy.checkFormDataPropValue($form, 'CardControl', 'on');
-        cy.get('@input').focus().type(' ');
+        cy.get('@input').blur().type(' ');
         cy.checkFormDataPropValue($form, 'CardControl', null);
       });
     });

diff --git a/packages/components/cypress/e2e/tooltip.cy.ts b/packages/components/cypress/e2e/tooltip.cy.ts
@@ -49,6 +49,21 @@ describe('tooltips', { baseUrl: null, includeShadowDom: true }, () => {
     });
   });
 
+  describe('with child element', () => {
+    beforeEach(() => {
+      cy.visit('./cypress/fixtures/post-tooltip.test.html');
+      cy.get('#target-child-element').as('target');
+      cy.get('#target-child-element span').as('target-child');
+      cy.get('#tooltip-one').find('div[popover]').as('tooltip');
+    });
+
+    it('should show tooltip on hovered child element', () => {
+      cy.get('@tooltip').should('not.be.visible');
+      cy.get('@target-child').trigger('pointerover');
+      cy.get('.\\:popover-open, :popover-open').should('exist');
+    });
+  });
+
   describe('non-focusable element', () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/post-tooltip.test.html');

diff --git a/packages/components/cypress/fixtures/post-tooltip.test.html b/packages/components/cypress/fixtures/post-tooltip.test.html
@@ -10,7 +10,12 @@
     <button aria-describedby="existing-value" data-tooltip-target="tooltip-one" id="target1">
       toggle
     </button>
-    <button data-tooltip-target="tooltip-one" id="target2">toggle 2</button>
+    <button data-tooltip-target="tooltip-one" id="target2">
+      toggle 2 <span>child element</span>
+    </button>
+    <button data-tooltip-target="tooltip-one" id="target-child-element">
+      toggle with <span>child element</span>
+    </button>
     <post-tooltip id="tooltip-one">
       <p>This is a test</p>
     </post-tooltip>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -45,28 +45,28 @@
     "long-press-event": "2.4.6"
   },
   "devDependencies": {
-    "@percy/cli": "1.28.1",
+    "@percy/cli": "1.28.2",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.12.6",
+    "@stencil/core": "4.13.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.10",
+    "@stencil/sass": "3.0.11",
     "@types/jest": "29.5.12",
     "@types/node": "20.11.16",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "bootstrap": "5.3.2",
-    "cypress": "13.7.0",
+    "cypress": "13.7.1",
     "cypress-axe": "1.5.0",
     "cypress-storybook": "0.5.1",
     "eslint": "8.57.0",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "rimraf": "5.0.5",
     "rollup-plugin-postcss": "4.0.2",
     "sass": "1.72.0",
     "ts-jest": "29.1.2",
-    "typescript": "4.9.5"
+    "typescript": "5.3.3"
   },
   "keywords": [
     "components",

diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -22,7 +22,8 @@
   --post-card-control-input-bg: #{post.$white};
 
   flex-basis: 100%;
-  display: flex;
+  display: grid;
+  grid-template: 'input label icon' 'input content icon' / min-content auto min-content;
   gap: 0 post.$size-mini;
   padding: post.$size-regular;
   background-color: var(--post-card-control-bg);
@@ -34,7 +35,7 @@
   transition: background-color 100ms linear, border-color 100ms linear;
 
   .card-control--input {
-    flex: 0 0 auto;
+    grid-area: input;
     margin: post.$size-micro 0;
     background-color: var(--post-card-control-input-bg);
     border-color: var(--post-card-control-input-border-color) !important;
@@ -46,21 +47,28 @@
     &:focus-visible {
       box-shadow: none;
     }
+  }
 
-    ~ .card-control--label {
-      flex-grow: 2;
-      margin: post.$size-micro 0;
-      color: inherit !important;
-      pointer-events: none;
-    }
+  .card-control--label {
+    grid-area: label;
+    margin: post.$size-micro 0;
+    padding: 0;
+    color: inherit !important;
+    pointer-events: none;
+    transition-duration: 100ms;
   }
 
   .card-control--description {
+    grid-area: label;
     font-size: 0.75rem;
   }
 
+  .card-control--content {
+    grid-area: content;
+  }
+
   .card-control--icon {
-    flex: 0 0 auto;
+    grid-area: icon;
     width: post.$size-big;
     height: post.$size-big;
     pointer-events: none;

diff --git a/packages/components/src/components/post-card-control/post-card-control.tsx b/packages/components/src/components/post-card-control/post-card-control.tsx
@@ -26,7 +26,8 @@ let cardControlIds = 0;
 /**
  * @class PostCardControl - representing a stencil component
  *
- * @slot icon - Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
  */
 @Component({
   tag: 'post-card-control',
@@ -367,6 +368,7 @@ export class PostCardControl {
             name={this.name}
             value={this.value}
             checked={this.checked}
+            aria-describedby={`${this.controlId}_label ${this.controlId}_content`}
             aria-disabled={this.disabled}
             aria-invalid={this.validity === 'false'}
             onClick={this.controlClickHandler}
@@ -377,7 +379,11 @@ export class PostCardControl {
             onKeyDown={this.controlKeyDownHandler}
           />
 
-          <label htmlFor={this.controlId} class="card-control--label form-check-label">
+          <label
+            id={`${this.controlId}_label`}
+            htmlFor={this.controlId}
+            class="card-control--label form-check-label"
+          >
             {this.label}
             {this.description ? (
               <div class="card-control--description">{this.description}</div>
@@ -387,6 +393,10 @@ export class PostCardControl {
           <div class="card-control--icon">
             <slot name="icon">{this.icon ? <post-icon name={this.icon}></post-icon> : null}</slot>
           </div>
+
+          <div id={`${this.controlId}_content`} class="card-control--content">
+            <slot></slot>
+          </div>
         </div>
       </Host>
     );

diff --git a/packages/components/src/components/post-card-control/readme.md b/packages/components/src/components/post-card-control/readme.md
@@ -54,9 +54,10 @@ Type: `Promise<void>`
 
 ## Slots
 
-| Slot     | Description                                                                                                                                                                                                                                                                                     |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `"icon"` | Content to place in the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<br>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p> |
+| Slot        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `"default"` | Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p> |
+| `"icon"`    | To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 
 
 ## Dependencies