chore(components): use the web animations api in the post-collapsible… (

#2042) … component --------- Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Oct 31, 2023 · 3b42032 · 3b42032
1 parent f74c966
commit 3b42032
Show file tree

Hide file tree

Showing 16 changed files with 129 additions and 187 deletions.
diff --git a/packages/components/cypress/e2e/collapsible.cy.ts b/packages/components/cypress/e2e/collapsible.cy.ts
@@ -20,7 +20,7 @@ describe('collapsible', () => {
     });
 
     it('should be expanded', () => {
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it('should show the whole body', () => {
@@ -37,27 +37,27 @@ describe('collapsible', () => {
         .then(id => {
           cy.get('@header').find('button').should('have.attr', 'aria-controls', id);
         });
-      cy.checkAriaExpanded('true');
+      cy.checkAriaExpanded('@collapse', 'true');
     });
 
     it('should be collapsed after clicking on the header once', () => {
       cy.get('@header').click();
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
 
     it("should adapt the header's aria-expanded attribute after collapsing", () => {
       cy.get('@header').click();
-      cy.checkAriaExpanded('false');
+      cy.checkAriaExpanded('@collapse', 'false');
     });
 
     it('should be expanded after clicking on the header twice', () => {
       cy.get('@header').dblclick();
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it("should adapt the header's aria-expanded attribute after expanding", () => {
       cy.get('@header').dblclick();
-      cy.checkAriaExpanded('true');
+      cy.checkAriaExpanded('@collapse', 'true');
     });
   });
 
@@ -69,21 +69,21 @@ describe('collapsible', () => {
     });
 
     it('should be collapsed', () => {
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
 
     it('should have a correct aria-expanded attribute', () => {
-      cy.checkAriaExpanded('false');
+      cy.checkAriaExpanded('@collapse', 'false');
     });
 
     it('should be expanded after clicking on the header once', () => {
       cy.get('@header').click();
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it('should be collapsed after clicking on the header twice', () => {
       cy.get('@header').dblclick();
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
   });
 
@@ -102,37 +102,37 @@ describe('collapsible', () => {
     });
 
     it('should be expanded', () => {
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it('should be collapsed after clicking "Toggle" once', () => {
       cy.get('@toggle').click();
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
 
     it('should be expanded after clicking "Toggle" twice', () => {
       cy.get('@toggle').dblclick();
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it('should be collapsed after clicking "Hide" once', () => {
       cy.get('@hide').click();
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
 
     it('should be collapsed after clicking "Hide" twice', () => {
       cy.get('@hide').dblclick();
-      cy.checkVisibility('hidden');
+      cy.get('@collapse').should(`be.hidden`);
     });
 
     it('should be expanded after clicking "Show" once', () => {
       cy.get('@show').click();
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
 
     it('should be expanded after clicking "Show" twice', () => {
       cy.get('@show').dblclick();
-      cy.checkVisibility('visible');
+      cy.get('@collapse').should(`be.visible`);
     });
   });
 });
diff --git a/packages/components/cypress/support/commands.ts b/packages/components/cypress/support/commands.ts
@@ -55,13 +55,8 @@ Cypress.Commands.add('getComponent', (component: string, story = 'default') => {
   cy.get(`post-${alias}`, { timeout: 30000 }).as(alias);
 });
 
-Cypress.Commands.add('checkVisibility', (visibility: 'visible' | 'hidden') => {
-  cy.get('@collapse').should('not.have.class', 'collapsing').and(`be.${visibility}`);
-});
-
-Cypress.Commands.add('checkAriaExpanded', (isExpanded: 'true' | 'false') => {
-  cy.get('@collapse')
-    .should('not.have.class', 'collapsing')
+Cypress.Commands.add('checkAriaExpanded', (controlledElementSelector: string, isExpanded: 'true' | 'false') => {
+  cy.get(controlledElementSelector)
     .invoke('attr', 'id')
     .then(id => {
       cy.get(`[aria-controls="${id}"]`).should('have.attr', 'aria-expanded', isExpanded);

diff --git a/packages/components/cypress/support/index.d.ts b/packages/components/cypress/support/index.d.ts
@@ -2,8 +2,7 @@ declare global {
   namespace Cypress {
     interface Chainable {
       getComponent(component: string, story?: string): Chainable<any>;
-      checkVisibility(visibility: 'visible' | 'hidden'): Chainable<any>;
-      checkAriaExpanded(isExpanded: 'true' | 'false'): Chainable<any>;
+      checkAriaExpanded(controlledElementSelector: string, isExpanded: 'true' | 'false'): Chainable<any>;
     }
   }
 }

diff --git a/packages/components/src/animations/collapse.ts b/packages/components/src/animations/collapse.ts
@@ -0,0 +1,22 @@
+const collapseDuration = 350;
+const collapseEasing = 'ease';
+const collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };
+
+export const collapse = (el: HTMLElement): Animation => {
+  const { height } = window.getComputedStyle(el);
+  const expandedKeyframe: Keyframe = { height };
+
+  return el.animate(
+    [expandedKeyframe, collapsedKeyframe],
+    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },
+  );
+};
+
+export const expand = (el: HTMLElement): Animation => {
+  const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };
+
+  return el.animate(
+    [collapsedKeyframe, expandedKeyframe],
+    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },
+  );
+};
diff --git a/packages/components/src/animations/fade.ts b/packages/components/src/animations/fade.ts
@@ -1,13 +1,13 @@
 const fadeDuration = 200;
-const fadedOutKeyFrame = {opacity: '0'};
-const fadedInKeyFrame = {opacity: '1'};
+const fadedOutKeyframe: Keyframe = {opacity: '0'};
+const fadedInKeyframe: Keyframe = {opacity: '1'};
 
 export const fadeIn = (el: Element): Animation => el.animate(
-  [ fadedOutKeyFrame, fadedInKeyFrame ],
+  [ fadedOutKeyframe, fadedInKeyframe ],
   { duration: fadeDuration }
 );
 
 export const fadeOut = (el: Element): Animation => el.animate(
-  [ fadedInKeyFrame, fadedOutKeyFrame ],
+  [ fadedInKeyframe, fadedOutKeyframe ],
   { duration: fadeDuration }
 );
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -6,9 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AlertType } from "./components/post-alert/alert-types";
+import { HeadingLevel } from "./components/post-collapsible/heading-levels";
 import { BackgroundColor } from "./components/post-tooltip/types";
 import { Placement } from "@floating-ui/dom";
 export { AlertType } from "./components/post-alert/alert-types";
+export { HeadingLevel } from "./components/post-collapsible/heading-levels";
 export { BackgroundColor } from "./components/post-tooltip/types";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
@@ -46,9 +48,9 @@ export namespace Components {
         /**
           * Defines the hierarchical level of the collapsible header within the headings structure.
          */
-        "headingLevel"?: number;
+        "headingLevel"?: HeadingLevel;
         /**
-          * Triggers the collapse programmatically.
+          * Triggers the collapse programmatically.  If there is a collapsing transition running already, it will be reversed.
          */
         "toggle": (open?: boolean) => Promise<boolean>;
     }
@@ -232,7 +234,7 @@ declare namespace LocalJSX {
         /**
           * Defines the hierarchical level of the collapsible header within the headings structure.
          */
-        "headingLevel"?: number;
+        "headingLevel"?: HeadingLevel;
     }
     /**
      * @class PostIcon - representing a stencil component

diff --git a/packages/components/src/components/post-collapsible/heading-levels.ts b/packages/components/src/components/post-collapsible/heading-levels.ts
@@ -0,0 +1,3 @@
+export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;
+
+export type HeadingLevel = typeof HEADING_LEVELS[number];
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/packages/components/src/components/post-collapsible/post-collapsible.scss
@@ -1,5 +1,4 @@
 @use '@swisspost/design-system-styles/components/accordion';
-@use '@swisspost/design-system-styles/components/transitions';
 
 :host {
   display: block;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;

		export type HeadingLevel = typeof HEADING_LEVELS[number];