feat(components, components-angular): update the post-collapsible col…

…lapsed property
swisspost · Jul 2, 2024 · a74d0fe · a74d0fe
1 parent 10b906c
commit a74d0fe
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 13 deletions.
diff --git a/.changeset/plenty-experts-admire.md b/.changeset/plenty-experts-admire.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-components-angular': patch
+---
+
+Updated the collapsed property to toggle the visibility of the post-collapsible element throughout the component lifecycle, rather than only initially.
diff --git a/.changeset/thin-eyes-join.md b/.changeset/thin-eyes-join.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-angular-workspace': patch
+---
+
+Added a toggle button for the `post-collapsible`.
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -30,7 +30,16 @@ <h2>Post Card-Control</h2>
 
 <div class="my-4">
   <h2>Post Collapsible</h2>
-  <post-collapsible>
+  <button
+    (click)="isCollapsed = !isCollapsed"
+    [attr.aria-expanded]="!isCollapsed"
+    aria-controls="collapsible"
+    class="btn btn-default mb-regular"
+    type="button"
+  >
+    Toggle
+  </button>
+  <post-collapsible id="collapsible" [collapsed]="isCollapsed">
     <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
   </post-collapsible>
 </div>

diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts
@@ -4,4 +4,6 @@ import { Component } from '@angular/core';
   selector: 'home-page',
   templateUrl: './home.component.html',
 })
-export class HomeComponent {}
+export class HomeComponent {
+  isCollapsed = false;
+}
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -126,7 +126,7 @@ export namespace Components {
     }
     interface PostCollapsible {
         /**
-          * If `true`, the element is initially collapsed otherwise it is displayed.
+          * If `true`, the element is collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
         /**
@@ -600,7 +600,7 @@ declare namespace LocalJSX {
     }
     interface PostCollapsible {
         /**
-          * If `true`, the element is initially collapsed otherwise it is displayed.
+          * If `true`, the element is collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
         /**

diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -33,17 +33,19 @@ export class PostCollapsible {
   @State() id: string;
 
   /**
-   * If `true`, the element is initially collapsed otherwise it is displayed.
+   * If `true`, the element is collapsed otherwise it is displayed.
    */
   @Prop() readonly collapsed?: boolean = false;
 
   @Watch('collapsed')
-  validateCollapsed(newValue = this.collapsed) {
+  collapsedChange(collapsed = this.collapsed) {
     checkEmptyOrType(
-      newValue,
+      collapsed,
       'boolean',
       'The `collapsed` property of the `post-collapsible` must be a boolean.',
     );
+
+    void this.toggle(!collapsed);
   }
 
   /**
@@ -53,16 +55,12 @@ export class PostCollapsible {
    */
   @Event() postToggle: EventEmitter<boolean>;
 
-  connectedCallback() {
-    this.validateCollapsed();
-  }
-
   componentWillRender() {
     this.id = this.host.id || `c${crypto.randomUUID()}`;
   }
 
   componentDidLoad() {
-    if (this.collapsed) void this.toggle(false);
+    this.collapsedChange();
     this.isLoaded = true;
   }
 

diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -1,3 +1,4 @@
+import { useArgs } from '@storybook/preview-api';
 import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { spreadArgs } from '@/utils';
@@ -61,8 +62,25 @@ function externalControls(story: StoryFn, context: StoryContext) {
 }
 
 //RENDERER
+let ignoreToggle = true;
 function renderCollapsible(args: Partial<HTMLPostCollapsibleElement>) {
-  return html` <post-collapsible ${spreadArgs(args)}></post-collapsible> `;
+  const [_, updateArgs] = useArgs();
+  const handleToggle = (e: CustomEvent<boolean>) => {
+    if (ignoreToggle) return;
+
+    const collapsed = !e.detail;
+    updateArgs({ collapsed });
+  };
+
+  // ignore the first toggle event after a collapsed arg update
+  ignoreToggle = true;
+  setTimeout(() => {
+    ignoreToggle = false;
+  }, 200);
+
+  return html`
+    <post-collapsible ${spreadArgs(args)} @postToggle="${handleToggle}"></post-collapsible>
+  `;
 }
 
 // STORIES