Merge branch 'main' into fix/2162-vertical-rhythm

.changeset/tidy-beers-run.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Added the `post-popover` component. This component can display text and interactive elements in a popover in front of the page content.

.changeset/wet-crabs-scream.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed close button color in high contrast mode. The button is now visible when forced colors are active.

.github/workflows/release.yaml

@@ -28,6 +28,11 @@ jobs:
       - name: Build changelog formatter
         run: pnpm --filter design-system-changelog-github build
 
+      # This will fail the build if something in the publish setup is not correct
+      # before changeset magic is starting to run
+      - name: Test publish step
+        run: pnpm -r publish --dry-run
+
       # The changeset action will behave differently based on whether there are
       # new changesets on the main branch:
       #

package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "bootstrap": "pnpm install && pnpm -r build",
     "start": "pnpm docs:start",
+    "start:clean": "pnpm bootstrap && pnpm start",
     "test": "pnpm -r test",
     "unit": "pnpm -r unit",
     "e2e": "start-server-and-test docs:headless 9001 'pnpm -r --stream e2e'",

packages/components-react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 1.0.23
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@1.6.3
+
 ## 1.0.22
 
 ### Patch Changes

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,7 +19,7 @@
     "tsc": "tsc -p ."
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:1.6.2"
+    "@swisspost/design-system-components": "workspace:1.6.3"
   },
   "devDependencies": {
     "@types/node": "18.19.2",

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @swisspost/design-system-components
 
+## 1.6.3
+
+### Patch Changes
+
+- Defined @stencil/core and @stencil/store as a devDependency to avoid compatibilities issues. (by [@imagoiq](https://github.com/imagoiq) with [#2313](https://github.com/swisspost/design-system/pull/2313))
+- Updated dependencies:
+  - @swisspost/design-system-styles@6.5.0
+
 ## 1.6.2
 
 ### Patch Changes

packages/components/cypress/e2e/popover.cy.ts

@@ -0,0 +1,71 @@
+describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
+  describe('default', () => {
+    beforeEach(() => {
+      cy.visit('./cypress/fixtures/post-popover.test.html');
+      // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
+      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+      cy.get('div.popover-container').as('popover');
+    });
+
+    it('should show up on click', () => {
+      cy.get('@popover').should('not.be.visible');
+      cy.get('@trigger').should('have.attr', 'aria-expanded', 'false');
+      cy.get('@trigger').click();
+      cy.get('@popover').should('be.visible');
+      cy.get('@trigger').should('have.attr', 'aria-expanded', 'true');
+      // Void click light dismiss does not work in cypress for closing
+    });
+
+    it('should close on X click', () => {
+      cy.get('@trigger').click();
+      cy.get('@popover').should('be.visible');
+      cy.get('.btn-close').click();
+      cy.get('@popover').should('not.be.visible');
+    });
+
+    it('should open and close on enter', () => {
+      cy.get('@popover').should('not.be.visible');
+      cy.get('@trigger').focus().type('{enter}');
+      cy.get('@popover').should('be.visible');
+      cy.get('@trigger').type('{enter}');
+      cy.get('@popover').should('not.be.visible');
+    });
+
+    it('should open and close with the API', () => {
+      Promise.all([cy.get('@trigger'), cy.get('@popover')])
+        .then(
+          ([$trigger, $popover]: [JQuery<HTMLButtonElement>, JQuery<HTMLPostPopoverElement>]) => [
+            $trigger.get(0),
+            $popover.get(0),
+          ],
+        )
+        .then(([trigger, popover]: [HTMLButtonElement, HTMLPostPopoverElement]) => {
+          cy.get('@popover').should('not.be.visible');
+          popover.show(trigger);
+          cy.get('@popover').should('be.visible');
+          popover.hide();
+          cy.get('@popover').should('not.be.visible');
+          popover.toggle(trigger);
+          cy.get('@popover').should('be.visible');
+          popover.toggle(trigger);
+          cy.get('@popover').should('not.be.visible');
+        });
+    });
+
+    it('should switch position', () => {
+      cy.get('post-popover').invoke('attr', 'placement', 'top').should('not.be.visible');
+      Promise.all([cy.get('@trigger'), cy.get('@popover')])
+        .then(
+          ([$trigger, $popover]: [JQuery<HTMLButtonElement>, JQuery<HTMLPostPopoverElement>]) => [
+            $trigger.get(0),
+            $popover.get(0),
+          ],
+        )
+        .then(([trigger, popover]: [HTMLButtonElement, HTMLPostPopoverElement]) => {
+          const t = trigger.getBoundingClientRect();
+          const p = popover.getBoundingClientRect();
+          expect(t.top < p.top);
+        });
+    });
+  });
+});

packages/components/cypress/e2e/popovercontainer.cy.ts

@@ -0,0 +1,58 @@
+describe('popovercontainer', { baseUrl: null, includeShadowDom: true }, () => {
+  describe('default', () => {
+    let selector = isPopoverSupported() ? ':popover-open' : '.\\:popover-open';
+
+    beforeEach(() => {
+      // There is no dedicated docs page for the popovercontainer
+      cy.visit('./cypress/fixtures/post-popover.test.html');
+      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+      cy.get('div.popover-container').as('container');
+    });
+
+    it('should show up on click', () => {
+      cy.get('@container').should('not.be.visible');
+      cy.get(selector).should('not.exist');
+      cy.get('@trigger').click();
+      cy.get('@container').should('be.visible');
+      cy.get(selector).should('exist');
+      // Light dismiss does not work with cypress triggers
+      cy.get('.btn-close').click();
+      cy.get('@container').should('not.be.visible');
+      cy.get(selector).should('not.exist');
+    });
+
+    it('should listen to API calls', () => {
+      cy.get('@container').should('not.be.visible');
+      cy.get(selector).should('not.exist');
+      Promise.all([cy.get('@trigger'), cy.get('@container')])
+        .then(
+          ([$trigger, $container]: [JQuery<HTMLButtonElement>, JQuery<HTMLPostPopoverElement>]) => [
+            $trigger.get(0),
+            $container.get(0),
+          ],
+        )
+        .then(async ([trigger, container]: [HTMLButtonElement, HTMLPostPopoverElement]) => {
+          await container.show(trigger);
+          cy.get('@container').should('be.visible');
+          cy.get(selector).should('exist');
+          await container.hide();
+          cy.get('@container').should('not.be.visible');
+          cy.get(selector).should('not.exist');
+          await container.toggle(trigger);
+          cy.get('@container').should('be.visible');
+          cy.get(selector).should('exist');
+          await container.toggle(trigger);
+          cy.get('@container').should('not.be.visible');
+          cy.get(selector).should('not.exist');
+        });
+    });
+  });
+});
+
+function isPopoverSupported() {
+  return (
+    typeof HTMLElement !== 'undefined' &&
+    typeof HTMLElement.prototype === 'object' &&
+    'popover' in HTMLElement.prototype
+  );
+}

packages/components/cypress/e2e/tooltip.cy.ts

@@ -4,13 +4,18 @@ describe('tooltips', () => {
       cy.getComponent('tooltip', 'multiple');
       cy.get('button[data-tooltip-target="tooltip-multiple"]:first-of-type').as('target1');
       cy.get('button[data-tooltip-target="tooltip-multiple"]:last-of-type').as('target2');
-      cy.get('#tooltip-multiple').shadow().find('div[popover]').as('tooltip');
+      cy.get('#tooltip-multiple').find('div[popover]').as('tooltip');
+      cy.get('#storybook-root').invoke('attr', 'style', 'overflow: visible', { force: true });
     });
 
     it('should display a tooltip', () => {
       cy.get('@tooltip').should('not.be.visible');
       cy.get('@target2').focus();
-      cy.get('@tooltip').should('be.visible');
+      // Checking if a popover is open is a bit tricky, but it either matches the pseudo selector :popover-open
+      // or the polyfill sets the class :popover-open (a bit tricky to escape)
+      // https://github.com/oddbird/popover-polyfill#caveats
+      // prettier-ignore
+      cy.get('.\\:popover-open, :popover-open').should('exist');
       cy.get('@target2').blur();
       cy.get('@tooltip').should('not.be.visible');
     });

packages/components/cypress/fixtures/post-popover.test.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
+  </head>
+  <body>
+    <button data-popover-target="popover-one">toggle</button>
+    <post-popover id="popover-one">
+      <p>This is a test</p>
+    </post-popover>
+  </body>
+</html>

packages/components/cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "noEmit": true,
-    "types": ["cypress", "cypress-storybook/cypress", "@percy/cypress"]
+    "types": ["../src/components", "cypress", "cypress-storybook/cypress", "@percy/cypress"]
   },
   "include": ["./**/*.ts", "./**/*.tsx"],
   "exclude": []

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.5.3",
-    "@oddbird/popover-polyfill": "0.3.6",
-    "@swisspost/design-system-styles": "workspace:6.4.4",
+    "@oddbird/popover-polyfill": "0.2.3",
+    "@swisspost/design-system-styles": "workspace:6.5.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },