feat(components): split post-collapsible and post-accordion-item

.changeset/swift-humans-kneel.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': major
+'@swisspost/design-system-documentation': patch
+---
+
+Restricted the post-collapsible component to the collapse behaviour only and created a post-accordion-item to use as children for the post-accordion component.

.changeset/tasty-planes-dance.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated the post-accordion background to be white on light and gray backgrounds.

packages/components/src/components.d.ts

@@ -5,31 +5,45 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 import { AlertType } from "./components/post-alert/alert-types";
-import { HeadingLevel } from "./components/post-collapsible/heading-levels";
 import { Placement } from "@floating-ui/dom";
+export { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 export { AlertType } from "./components/post-alert/alert-types";
-export { HeadingLevel } from "./components/post-collapsible/heading-levels";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
         /**
-          * Collapses all `post-collapsible` children.
+          * Collapses all `post-accordion-item`.
          */
         "collapseAll": () => Promise<void>;
         /**
-          * Expands all `post-collapsible` children.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
+          * Expands all `post-accordion-item`.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
          */
         "expandAll": () => Promise<void>;
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple": boolean;
         /**
-          * Toggles the `post-collapsible` children with the given id.
+          * Toggles the `post-accordion-item` with the given id.
          */
         "toggle": (id: string) => Promise<void>;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Triggers the collapse programmatically.
+         */
+        "toggle": (open?: boolean) => Promise<boolean>;
+    }
     interface PostAlert {
         /**
           * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
@@ -61,10 +75,6 @@ export namespace Components {
           * If `true`, the element is initially collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
-        /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
         /**
           * Triggers the collapse programmatically.  If there is a collapsing transition running already, it will be reversed.
          */
@@ -224,6 +234,12 @@ declare global {
         prototype: HTMLPostAccordionElement;
         new (): HTMLPostAccordionElement;
     };
+    interface HTMLPostAccordionItemElement extends Components.PostAccordionItem, HTMLStencilElement {
+    }
+    var HTMLPostAccordionItemElement: {
+        prototype: HTMLPostAccordionItemElement;
+        new (): HTMLPostAccordionItemElement;
+    };
     interface HTMLPostAlertElementEventMap {
         "dismissed": void;
     }
@@ -327,6 +343,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "post-accordion": HTMLPostAccordionElement;
+        "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
@@ -341,10 +358,20 @@ declare global {
 declare namespace LocalJSX {
     interface PostAccordion {
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple"?: boolean;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+    }
     interface PostAlert {
         /**
           * The label to use for the close button of a dismissible alert.
@@ -376,10 +403,6 @@ declare namespace LocalJSX {
           * If `true`, the element is initially collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
-        /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
         /**
           * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.
          */
@@ -476,6 +499,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "post-accordion": PostAccordion;
+        "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
@@ -492,6 +516,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "post-accordion": LocalJSX.PostAccordion & JSXBase.HTMLAttributes<HTMLPostAccordionElement>;
+            "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**

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

@@ -0,0 +1,22 @@
+@use '@swisspost/design-system-styles/components/accordion';
+@use '@swisspost/design-system-styles/mixins/accordion' as accordion-mx;
+
+:host {
+  display: block;
+}
+
+.accordion-button {
+  cursor: pointer;
+
+  > ::slotted(.text-truncate) {
+    display: block;
+  }
+}
+
+post-accordion-item::part(accordion-item) {
+  @include accordion-mx.background-color;
+
+  post-accordion-item + & {
+    border-block-start: 0!important;
+  }
+}

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

@@ -0,0 +1,90 @@
+import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { version } from '../../../package.json';
+import { checkEmptyOrOneOf } from '../../utils';
+import { HEADING_LEVELS, HeadingLevel } from './heading-levels';
+
+@Component({
+  tag: 'post-accordion-item',
+  styleUrl: 'post-accordion-item.scss',
+  shadow: true,
+})
+export class PostAccordionItem {
+  private collapsible: HTMLPostCollapsibleElement;
+
+  @Element() host: HTMLPostAccordionItemElement;
+
+  @State() id: string;
+  @State() isOpen: boolean;
+  @State() headingTag: string;
+
+  /**
+   * If `true`, the element is initially collapsed otherwise it is displayed.
+   */
+  @Prop() readonly collapsed?: boolean = false;
+
+  /**
+   * Defines the hierarchical level of the accordion item header within the headings structure.
+   */
+  @Prop() readonly headingLevel?: HeadingLevel = 2;
+
+  @Watch('headingLevel')
+  validateHeadingLevel(newValue = this.headingLevel) {
+    checkEmptyOrOneOf(
+      newValue,
+      HEADING_LEVELS,
+      'The `headingLevel` property of the `post-accordion-item` must be a number between 1 and 6.',
+    );
+  }
+
+  connectedCallback() {
+    this.validateHeadingLevel();
+  }
+
+  componentWillLoad() {
+    this.isOpen = !this.collapsed;
+  }
+
+  componentWillRender() {
+    this.id = this.host.id || `a${crypto.randomUUID()}`;
+    this.headingTag = `h${this.headingLevel ?? 2}`;
+  }
+
+  @Listen('collapseChange')
+  onCollapseChange(): void {
+    this.isOpen = !this.isOpen;
+  }
+
+  /**
+   * Triggers the collapse programmatically.
+   */
+  @Method()
+  async toggle(open?: boolean): Promise<boolean> {
+    return this.collapsible.toggle(open);
+  }
+
+  render() {
+    return (
+      <Host id={this.id} data-version={version}>
+        <div part="accordion-item" class="accordion-item">
+          <this.headingTag class="accordion-header" id={`${this.id}--header`}>
+            <button
+              aria-controls={`${this.id}--collapse`}
+              aria-expanded={`${this.isOpen}`}
+              class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}
+              onClick={() => this.toggle()}
+              type="button"
+            >
+              <slot name="header" />
+            </button>
+          </this.headingTag>
+
+          <post-collapsible collapsed={this.collapsed} ref={el => (this.collapsible = el)}>
+            <div class="accordion-body">
+              <slot />
+            </div>
+          </post-collapsible>
+        </div>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1,51 @@
+# post-accordion-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description                                                                                | Type                         | Default |
+| -------------- | --------------- | ------------------------------------------------------------------------------------------ | ---------------------------- | ------- |
+| `collapsed`    | `collapsed`     | If `true`, the element is initially collapsed otherwise it is displayed.                   | `boolean`                    | `false` |
+| `headingLevel` | `heading-level` | Defines the hierarchical level of the accordion item header within the headings structure. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`     |
+
+
+## Methods
+
+### `toggle(open?: boolean) => Promise<boolean>`
+
+Triggers the collapse programmatically.
+
+#### Returns
+
+Type: `Promise<boolean>`
+
+
+
+
+## Shadow Parts
+
+| Part               | Description |
+| ------------------ | ----------- |
+| `"accordion-item"` |             |
+
+
+## Dependencies
+
+### Depends on
+
+- [post-collapsible](../post-collapsible)
+
+### Graph
+```mermaid
+graph TD;
+  post-accordion-item --> post-collapsible
+  style post-accordion-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*