chore(styles): update accordion

.changeset/breezy-knives-itch.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the accordion styles.

.changeset/few-baboons-count.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+- Deprecated Bootstrap accordions in favor of the post-accordion web component.
+- Updated ng-bootstrap component-based accordion example in favor of the directive-based implementation.

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

@@ -2,8 +2,16 @@
 
 :host {
   display: block;
+}
+
+.accordion-button {
+  cursor: pointer;
 
-  .accordion-button > ::slotted(.text-truncate) {
+  > ::slotted(.text-truncate) {
     display: block;
   }
 }
+
+post-collapsible + post-collapsible::part(accordion-item) {
+  border-block-start: 0!important;
+}

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

@@ -1,4 +1,15 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import { version } from '../../../package.json';
 import { collapse, expand } from '../../animations/collapse';
 import { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';
@@ -27,7 +38,11 @@ export class PostCollapsible {
 
   @Watch('collapsed')
   validateCollapsed(newValue = this.collapsed) {
-    checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');
+    checkEmptyOrType(
+      newValue,
+      'boolean',
+      'The `collapsed` property of the `post-collapsible` must be a boolean.',
+    );
   }
 
   /**
@@ -37,7 +52,11 @@ export class PostCollapsible {
 
   @Watch('headingLevel')
   validateHeadingLevel(newValue = this.headingLevel) {
-    checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');
+    checkEmptyOrOneOf(
+      newValue,
+      HEADING_LEVELS,
+      'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',
+    );
   }
 
   /**
@@ -73,7 +92,7 @@ export class PostCollapsible {
     this.isOpen = !this.isOpen;
     if (this.isLoaded) this.collapseChange.emit();
 
-    const animation = open ? expand(this.collapsible): collapse(this.collapsible);
+    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);
 
     if (!this.isLoaded || isMotionReduced()) animation.finish();
 
@@ -90,22 +109,22 @@ export class PostCollapsible {
         aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}
         class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}
         id={`${this.id}--collapse`}
-        ref={el => this.collapsible = el}
+        ref={el => (this.collapsible = el)}
       >
         {this.hasHeader ? (
           <div class="accordion-body">
-            <slot/>
+            <slot />
           </div>
         ) : (
-          <slot/>
+          <slot />
         )}
       </div>
     );
 
     return (
       <Host id={this.id} data-version={version}>
         {this.hasHeader ? (
-          <div class="accordion-item">
+          <div part="accordion-item" class="accordion-item">
             <this.headingTag class="accordion-header" id={`${this.id}--header`}>
               <button
                 aria-controls={`${this.id}--collapse`}
@@ -114,13 +133,15 @@ export class PostCollapsible {
                 onClick={() => this.toggle()}
                 type="button"
               >
-                <slot name="header"/>
+                <slot name="header" />
               </button>
             </this.headingTag>
 
             {collapse}
           </div>
-        ) : collapse}
+        ) : (
+          collapse
+        )}
       </Host>
     );
   }

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

@@ -35,6 +35,13 @@ Type: `Promise<boolean>`
 
 
 
+## Shadow Parts
+
+| Part               | Description |
+| ------------------ | ----------- |
+| `"accordion-item"` |             |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html

@@ -3,6 +3,21 @@ <h1 class="bold font-curve-large">Accordion</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-big">
+  <p class="alert-heading">Bootstrap accordions are deprecated and will soon be removed.</p>
+  <p>
+    For a similar behavior, check out our new
+    <a
+      href="https://next.design-system.post.ch/?path=/docs/components-accordion--docs"
+      rel="noopener"
+      target="_blank"
+    >
+      post-accordion component
+    </a>
+    .
+  </p>
+</div>
+
 <section>
   <h3>Using JavaScript</h3>
   <div class="alert alert-info my-large">

packages/demo/src/app/bootstrap/components/accordion/accordion-demo/accordion-demo.component.html

@@ -9,8 +9,8 @@ <h2 class="accordion-header" id="headingOne">
         aria-expanded="true"
         aria-controls="collapseOne"
       >
-        Default Title Wrapping - This accordion title is way too long, it wraps because there is not
-        enough space for it to display completely on one line.
+        Default title wrapping - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia curae nullam sagittis vel augue eget pellentesque lacus sapien.
       </button>
     </h2>
     <div
@@ -20,13 +20,16 @@ <h2 class="accordion-header" id="headingOne">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the first item's accordion body.</strong>
-        It is shown by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the first item's accordion body.</strong>
+          It is shown by default, until the collapse plugin adds the appropriate classes that we use
+          to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>
@@ -41,8 +44,8 @@ <h2 class="accordion-header" id="headingTwo">
         aria-controls="collapseTwo"
       >
         <span class="text-truncate">
-          Title truncated - This accordion title is way too long, it will be truncated in CSS
-          because there is not enough space for it to display completely.
+          Truncated title - Pellentesque interdum diam eget feugiat aliquet nullam tincidunt nunc eu
+          lorem vehicula, a porta nisl eleifend integer non ullamcorper massa
         </span>
       </button>
     </h2>
@@ -53,13 +56,16 @@ <h2 class="accordion-header" id="headingTwo">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the second item's accordion body.</strong>
-        It is hidden by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the second item's accordion body.</strong>
+          It is hidden by default, until the collapse plugin adds the appropriate classes that we
+          use to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>
@@ -73,9 +79,9 @@ <h2 class="accordion-header" id="headingThree">
         aria-expanded="false"
         aria-controls="collapseThree"
       >
-        &#9733;&nbsp;
-        <strong>Fancy</strong>
-        title&nbsp;&#9733;
+        &#9733;
+        <em>Fancy</em>
+        title &#9733;
       </button>
     </h2>
     <div
@@ -85,13 +91,16 @@ <h2 class="accordion-header" id="headingThree">
       data-bs-parent="#accordionExample"
     >
       <div class="accordion-body">
-        <strong>This is the third item's accordion body.</strong>
-        It is hidden by default, until the collapse plugin adds the appropriate classes that we use
-        to style each element. These classes control the overall appearance, as well as the showing
-        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our
-        default variables. It's also worth noting that just about any HTML can go within the
-        <code>.accordion-body</code>
-        , though the transition does limit overflow.
+        <p>
+          <strong>This is the third item's accordion body.</strong>
+          It is hidden by default, until the collapse plugin adds the appropriate classes that we
+          use to style each element. These classes control the overall appearance, as well as the
+          showing and hiding via CSS transitions. You can modify any of this with custom CSS or
+          overriding our default variables. It's also worth noting that just about any HTML can go
+          within the
+          <code>.accordion-body</code>
+          , though the transition does limit overflow.
+        </p>
       </div>
     </div>
   </div>

packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html

@@ -1,42 +1,63 @@
-<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0" [destroyOnHide]="false">
-  <ngb-panel
-    title="Simple Title - This is an accordion title which is way to long and gets truncated via CSS if there is not enough space."
-  >
-    <ng-template ngbPanelContent>
-      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
-      squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
-      nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
-      single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
-      labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
-      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
-      haven't heard of them accusamus labore sustainable VHS.
-    </ng-template>
-  </ngb-panel>
-  <ngb-panel>
-    <ng-template ngbPanelTitle>
-      &#9733;
-      <strong>Fancy</strong>
-      title &#9733;
-    </ng-template>
-    <ng-template ngbPanelContent>
-      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
-      squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
-      nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
-      single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
-      labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
-      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
-      haven't heard of them accusamus labore sustainable VHS.
-    </ng-template>
-  </ngb-panel>
-  <ngb-panel title="Disabled" [disabled]="true">
-    <ng-template ngbPanelContent>
-      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
-      squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa
-      nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
-      single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
-      labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
-      Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably
-      haven't heard of them accusamus labore sustainable VHS.
-    </ng-template>
-  </ngb-panel>
-</ngb-accordion>
+<div ngbAccordion [closeOthers]="true">
+  <div ngbAccordionItem [collapsed]="false">
+    <h2 ngbAccordionHeader>
+      <button ngbAccordionButton>
+        Default title wrapping - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia curae nullam sagittis vel augue eget pellentesque lacus sapien.
+      </button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>
+          <p>
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+            squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
+            quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
+            squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
+            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
+            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
+            nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+          </p>
+
+          <div class="d-flex flex-row-reverse gap-mini mt-mini">
+            <button class="btn btn-primary" type="button">Primary</button>
+            <button class="btn btn-secondary" type="button">Secondary</button>
+            <button class="btn btn-tertiary" type="button">Tertiary</button>
+          </div>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+
+  <div ngbAccordionItem>
+    <h2 ngbAccordionHeader>
+      <button
+        ngbAccordionButton
+        class="text-truncate"
+        title="Title truncated with .text-truncate (requires a title attribute) - Pellentesque interdum diam eget feugiat aliquet nullam tincidunt nunc eu lorem vehicula, a porta nisl eleifend integer non ullamcorper massa."
+      >
+        Title truncated with
+        <code>.text-truncate</code>
+        (requires a
+        <code>title</code>
+        attribute) - Pellentesque interdum diam eget feugiat aliquet nullam tincidunt nunc eu lorem
+        vehicula, a porta nisl eleifend integer non ullamcorper massa.
+      </button>
+    </h2>
+    <div ngbAccordionCollapse>
+      <div ngbAccordionBody>
+        <ng-template>
+          <p>
+            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+            squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
+            quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
+            squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
+            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
+            butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
+            nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+          </p>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+</div>