chore(components): update post-collapsible

swisspost · Nov 29, 2023 · 11102bd · 11102bd
1 parent d37c00a
commit 11102bd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.scss b/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;
+}
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/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>
     );
   }

diff --git a/packages/components/src/components/post-collapsible/readme.md b/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/)*