feat(components): add collapseItem and expandItem to SwirlAccordion

getflip · Oct 9, 2023 · 4e297ef · 4e297ef
1 parent 75b9368
commit 4e297ef
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 17 deletions.
diff --git a/.changeset/chatty-singers-agree.md b/.changeset/chatty-singers-agree.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add "expandItem" and "collapseItem" methods to swirl-accordion
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -127,10 +127,18 @@ export namespace Components {
     interface FileManager {
     }
     interface SwirlAccordion {
+        /**
+          * Collapses an accordion item.
+         */
+        "collapseItem": (itemId: string) => Promise<void>;
+        /**
+          * Expands an accordion item.
+         */
+        "expandItem": (itemId: string) => Promise<void>;
     }
     interface SwirlAccordionItem {
         /**
-          * Collapsed the accordion item.
+          * Collapses the accordion item.
          */
         "collapse": () => Promise<void>;
         "description"?: string;
@@ -142,6 +150,7 @@ export namespace Components {
         "heading": string;
         "headingLevel"?: SwirlHeadingLevel;
         "initiallyOpen"?: boolean;
+        "itemId"?: string;
         /**
           * Toggles the accordion item.
          */
@@ -4100,6 +4109,7 @@ declare namespace LocalJSX {
         "heading": string;
         "headingLevel"?: SwirlHeadingLevel;
         "initiallyOpen"?: boolean;
+        "itemId"?: string;
         "onExpansionChange"?: (event: SwirlAccordionItemCustomEvent<boolean>) => void;
     }
     interface SwirlActionList {

diff --git a/packages/swirl-components/src/components/swirl-accordion-item/swirl-accordion-item.spec.tsx b/packages/swirl-components/src/components/swirl-accordion-item/swirl-accordion-item.spec.tsx
@@ -8,23 +8,23 @@ describe("swirl-accordion-item", () => {
       components: [SwirlAccordionItem],
       html: `
         <swirl-accordion>
-          <swirl-accordion-item description="Description" heading="heading">
+          <swirl-accordion-item description="Description" heading="heading" item-id="item-id">
             Content
           </swirl-accordion-item>
         </swirl-accordion>
       `,
     });
 
-    const id = page.root.shadowRoot.querySelector(
-      ".accordion-item__content"
+    const headingId = page.root.shadowRoot.querySelector(
+      ".accordion-item__toggle"
     ).id;
 
     expect(page.root).toEqualHtml(`
-      <swirl-accordion-item description="Description" heading="heading">
+      <swirl-accordion-item description="Description" heading="heading" item-id="item-id">
         <mock:shadow-root>
           <div class="accordion-item">
             <h2 class="accordion-item__heading">
-              <button aria-controls="${id}" aria-expanded="false" class="accordion-item__toggle" id="${id}-heading" type="button">
+              <button aria-controls="item-id" aria-expanded="false" class="accordion-item__toggle" id="${headingId}" type="button">
                 <span class="accordion-item__toggle-text">
                   heading
                   <swirl-text as="span" color="subdued" size="sm">
@@ -36,7 +36,7 @@ describe("swirl-accordion-item", () => {
                 </span>
               </button>
             </h2>
-            <div aria-labelledby="${id}-heading" class="accordion-item__content" id="${id}" role="region">
+            <div aria-labelledby="${headingId}" class="accordion-item__content" id="item-id" role="region">
               <slot></slot>
             </div>
           </div>

diff --git a/packages/swirl-components/src/components/swirl-accordion-item/swirl-accordion-item.tsx b/packages/swirl-components/src/components/swirl-accordion-item/swirl-accordion-item.tsx
@@ -26,14 +26,14 @@ export class SwirlAccordionItem {
   @Prop() heading!: string;
   @Prop() headingLevel?: SwirlHeadingLevel = 2;
   @Prop() initiallyOpen?: boolean;
+  @Prop() itemId?: string = uuid();
 
   @Event() expansionChange: EventEmitter<boolean>;
 
   @State() expanded = false;
 
   private accordion: HTMLSwirlAccordionElement;
-  private id = `accordion-item-${uuid()}`;
-  private headingId = `${this.id}-heading`;
+  private headingId = `${uuid()}-heading`;
 
   componentWillLoad() {
     this.accordion = this.el.closest("swirl-accordion");
@@ -47,7 +47,7 @@ export class SwirlAccordionItem {
   }
 
   /**
-   * Collapsed the accordion item.
+   * Collapses the accordion item.
    */
   @Method()
   async collapse() {
@@ -100,7 +100,7 @@ export class SwirlAccordionItem {
         <div class={className}>
           <HeadingTag class="accordion-item__heading">
             <button
-              aria-controls={this.id}
+              aria-controls={this.itemId}
               aria-expanded={String(this.expanded)}
               class="accordion-item__toggle"
               disabled={this.disabled}
@@ -129,7 +129,7 @@ export class SwirlAccordionItem {
           <div
             aria-labelledby={this.headingId}
             class="accordion-item__content"
-            id={this.id}
+            id={this.itemId}
             role="region"
           >
             <slot></slot>

diff --git a/packages/swirl-components/src/components/swirl-accordion/swirl-accordion.stories.ts b/packages/swirl-components/src/components/swirl-accordion/swirl-accordion.stories.ts
@@ -16,7 +16,7 @@ const Template = (args) => {
   const element = generateStoryElement("swirl-accordion", args);
 
   element.innerHTML = `
-  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 1" initially-open>
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 1" initially-open item-id="item-1">
     <swirl-stack spacing="16">
       <swirl-text size="sm">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
@@ -27,7 +27,7 @@ const Template = (args) => {
       <swirl-button label="A button" variant="flat"></swirl-button>
     </swirl-stack>
   </swirl-accordion-item>
-  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 2">
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 2" item-id="item-2">
     <swirl-stack spacing="16">
       <swirl-text size="sm">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
@@ -38,7 +38,7 @@ const Template = (args) => {
       <swirl-button label="A button" variant="flat"></swirl-button>
     </swirl-stack>
   </swirl-accordion-item>
-  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 3">
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." heading="Accordion item 3" item-id="item-3">
     <swirl-stack spacing="16">
       <swirl-text size="sm">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod
@@ -49,7 +49,7 @@ const Template = (args) => {
       <swirl-button label="A button" variant="flat"></swirl-button>
     </swirl-stack>
   </swirl-accordion-item>
-  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." disabled heading="Accordion item 4">
+  <swirl-accordion-item description="Lorem ipsum dolor sit amet, consectetur adipiscing elit." disabled heading="Accordion item 4" item-id="item-4">
     <swirl-stack spacing="16">
       <swirl-text size="sm">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod

diff --git a/packages/swirl-components/src/components/swirl-accordion/swirl-accordion.tsx b/packages/swirl-components/src/components/swirl-accordion/swirl-accordion.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host } from "@stencil/core";
+import { Component, Element, h, Host, Method } from "@stencil/core";
 
 @Component({
   shadow: true,
@@ -21,6 +21,38 @@ export class SwirlAccordion {
     );
   }
 
+  /**
+   * Collapses an accordion item.
+   */
+  @Method()
+  async collapseItem(itemId: string) {
+    const item = Array.from(
+      this.el.querySelectorAll("swirl-accordion-item")
+    ).find((item) => item.itemId === itemId);
+
+    if (!Boolean(item)) {
+      return;
+    }
+
+    item.collapse();
+  }
+
+  /**
+   * Expands an accordion item.
+   */
+  @Method()
+  async expandItem(itemId: string) {
+    const item = Array.from(
+      this.el.querySelectorAll("swirl-accordion-item")
+    ).find((item) => item.itemId === itemId);
+
+    if (!Boolean(item)) {
+      return;
+    }
+
+    item.expand();
+  }
+
   private collapseInactiveItems(activeItem: HTMLSwirlAccordionItemElement) {
     Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach(
       (item) => {

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -43,6 +43,10 @@
         {
           "name": "initially-open",
           "description": ""
+        },
+        {
+          "name": "item-id",
+          "description": ""
         }
       ]
     },