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

.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 of the `post-collapsible` and `post-accordion-item` to toggle the content visibility throughout the component lifecycle, rather than only initially.

.changeset/thin-eyes-join.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components-angular-workspace': patch
+---
+
+Added a toggle button for the `post-collapsible`.

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;
+}

packages/components/src/components.d.ts

@@ -36,7 +36,7 @@ export namespace Components {
     }
     interface PostAccordionItem {
         /**
-          * If `true`, the element is initially collapsed otherwise it is displayed.
+          * If `true`, the element is collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
         /**
@@ -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;
         /**
@@ -535,7 +535,7 @@ declare namespace LocalJSX {
     }
     interface PostAccordionItem {
         /**
-          * If `true`, the element is initially collapsed otherwise it is displayed.
+          * If `true`, the element is collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
         /**
@@ -621,7 +621,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;
         /**

packages/components/src/components/post-accordion-item/post-accordion-item.tsx

@@ -19,12 +19,11 @@ export class PostAccordionItem {
   @Element() host: HTMLPostAccordionItemElement;
 
   @State() id: string;
-  @State() isOpen: boolean;
 
   /**
-   * 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;
+  @Prop({ mutable: true }) collapsed?: boolean = false;
 
   /**
    * Defines the hierarchical level of the accordion item header within the headings structure.
@@ -46,14 +45,14 @@ export class PostAccordionItem {
   }
 
   componentWillLoad() {
-    this.isOpen = !this.collapsed;
     this.id = this.host.id || `a${crypto.randomUUID()}`;
   }
 
-  @Listen('postToggle')
+  // capture to make sure the "collapsed" property is updated before the event is consumed
+  @Listen('postToggle', { capture: true })
   onCollapseToggle(event: CustomEvent<boolean>): void {
     if ((event.target as HTMLElement).localName === 'post-accordion-item') {
-      this.isOpen = event.detail;
+      this.collapsed = !event.detail;
     }
   }
 
@@ -74,8 +73,8 @@ export class PostAccordionItem {
           <HeadingTag class="accordion-header" id={`${this.id}--header`}>
             <button
               aria-controls={`${this.id}--collapse`}
-              aria-expanded={`${this.isOpen}`}
-              class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}
+              aria-expanded={`${!this.collapsed}`}
+              class={`accordion-button${this.collapsed ? ' collapsed' : ''}`}
               onClick={() => this.toggle()}
               type="button"
             >

packages/components/src/components/post-accordion-item/readme.md

@@ -9,7 +9,7 @@
 
 | Property       | Attribute       | Description                                                                                                                                                                                                                  | Type                         | Default |
 | -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------- |
-| `collapsed`    | `collapsed`     | If `true`, the element is initially collapsed otherwise it is displayed.                                                                                                                                                     | `boolean`                    | `false` |
+| `collapsed`    | `collapsed`     | If `true`, the element is collapsed otherwise it is displayed.                                                                                                                                                               | `boolean`                    | `false` |
 | `headingLevel` | `heading-level` | <span style="color:red">**[DEPRECATED]**</span> set the `heading-level` property on the parent `post-accordion` instead.<br/><br/>Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`     |
 
 

packages/components/src/components/post-collapsible/post-collapsible.tsx

@@ -29,17 +29,19 @@ export class PostCollapsible {
   @Element() host: HTMLPostCollapsibleElement;
 
   /**
-   * 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;
+  @Prop({ mutable: true }) collapsed?: boolean = false;
 
   @Watch('collapsed')
-  validateCollapsed(newValue = this.collapsed) {
+  collapsedChange() {
     checkEmptyOrType(
-      newValue,
+      this.collapsed,
       'boolean',
       'The `collapsed` property of the `post-collapsible` must be a boolean.',
     );
+
+    void this.toggle(!this.collapsed);
   }
 
   /**
@@ -49,12 +51,8 @@ export class PostCollapsible {
    */
   @Event() postToggle: EventEmitter<boolean>;
 
-  connectedCallback() {
-    this.validateCollapsed();
-  }
-
   componentDidLoad() {
-    if (this.collapsed) void this.toggle(false);
+    this.collapsedChange();
     this.isLoaded = true;
 
     this.updateTriggers();
@@ -69,8 +67,9 @@ export class PostCollapsible {
   async toggle(open = !this.isOpen): Promise<boolean> {
     if (open === this.isOpen) return open;
 
-    this.isOpen = !this.isOpen;
-    if (this.isLoaded) this.postToggle.emit(this.isOpen);
+    this.isOpen = open;
+    this.collapsed = !open;
+    if (this.isLoaded) this.postToggle.emit(open);
 
     const animation = open ? expand(this.host) : collapse(this.host);
 
@@ -80,7 +79,7 @@ export class PostCollapsible {
 
     animation.commitStyles();
 
-    return this.isOpen;
+    return open;
   }
 
   /**

packages/components/src/components/post-collapsible/readme.md

@@ -7,9 +7,9 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                                              | Type      | Default |
-| ----------- | ----------- | ------------------------------------------------------------------------ | --------- | ------- |
-| `collapsed` | `collapsed` | If `true`, the element is initially collapsed otherwise it is displayed. | `boolean` | `false` |
+| Property    | Attribute   | Description                                                    | Type      | Default |
+| ----------- | ----------- | -------------------------------------------------------------- | --------- | ------- |
+| `collapsed` | `collapsed` | If `true`, the element is collapsed otherwise it is displayed. | `boolean` | `false` |
 
 
 ## Events

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';
@@ -31,16 +32,30 @@ function gap(story: StoryFn, context: StoryContext) {
 }
 
 //RENDERER
+let ignoreToggle = true;
 function renderCollapsible(
   { innerHTML, ...args }: Partial<HTMLPostCollapsibleElement>,
   context: StoryContext<HTMLPostCollapsibleElement>,
 ) {
+  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-trigger for=${context.id}>
       <button class="btn btn-secondary">Toggle Collapsible</button>
     </post-collapsible-trigger>
 
-    <post-collapsible id=${context.id} ${spreadArgs(args)}>
+    <post-collapsible id=${context.id} ${spreadArgs(args)}  @postToggle="${handleToggle}">
       ${unsafeHTML(innerHTML)}
     </post-collapsible>
   `;