Expose close function to Accordion::Item

hashicorp · Jun 19, 2024 · 211a212 · 211a212
1 parent 6cc1757
commit 211a212
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/packages/components/src/components/hds/accordion/item/index.hbs b/packages/components/src/components/hds/accordion/item/index.hbs
@@ -26,7 +26,7 @@
     </div>
   </:toggle>
 
-  <:content>
+  <:content as |c|>
     <Hds::Text::Body
       class="hds-accordion-item__content"
       @tag="div"
@@ -35,7 +35,7 @@
       @color="primary"
       id={{this.contentId}}
     >
-      {{yield to="content"}}
+      {{yield (hash close=c.close) to="content"}}
     </Hds::Text::Body>
   </:content>
 </Hds::DisclosurePrimitive>
diff --git a/packages/components/src/components/hds/accordion/item/index.ts b/packages/components/src/components/hds/accordion/item/index.ts
@@ -14,8 +14,13 @@ export interface HdsAccordionItemSignature {
     forceState?: 'open' | 'close';
   };
   Blocks: {
-    content?: [];
     toggle?: [];
+    content: [
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        close: (...args: any[]) => void;
+      }
+    ];
   };
   Element: HTMLElement;
 }

diff --git a/showcase/app/templates/components/accordion.hbs b/showcase/app/templates/components/accordion.hbs
@@ -248,7 +248,7 @@
 
   <Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
     <SG.Item @label="Forced state">
-      <button {{style padding=".25rem" marginBottom="1rem"}} type="button" {{on "click" this.toggleState}}>
+      <button type="button" {{style padding=".25rem" marginBottom="1rem"}} {{on "click" this.toggleState}}>
         {{if (eq this.state "open") "Collapse all" "Expand all"}}
       </button>
       <Hds::Accordion @forceState={{this.state}} as |A|>
@@ -401,6 +401,19 @@
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::Body><strong>close</strong></Shw::Text::Body>
+
+  <Shw::Flex {{style gap="2rem" marginBottom="2rem"}} @direction="column" as |SF|>
+    <SF.Item @label="Close action within content">
+      <Hds::Accordion::Item>
+        <:toggle>Item one</:toggle>
+        <:content as |c|>
+          <button type="button" {{style padding=".25rem" marginBottom="1rem"}} {{on "click" c.close}}>Close</button>
+        </:content>
+      </Hds::Accordion::Item>
+    </SF.Item>
+  </Shw::Flex>
+
   <Shw::Divider @level={{2}} />
 
   <Shw::Text::H3>Accordion::Item::Button</Shw::Text::H3>

diff --git a/showcase/tests/integration/components/hds/accordion/index-test.js b/showcase/tests/integration/components/hds/accordion/index-test.js
@@ -180,4 +180,23 @@ module('Integration | Component | hds/accordion/index', function (hooks) {
     await click('.hds-accordion-item__button');
     assert.dom('.hds-accordion-item__content').exists({ count: 1 });
   });
+
+  // close
+
+  test('it should hide the content when an accordion item triggers `close`', async function (assert) {
+    await render(hbs`
+      <Hds::Accordion::Item>
+        <:toggle>Item one</:toggle>
+        <:content as |c|>
+          <button type="button" {{on "click" c.close}}>Close</button>
+        </:content>
+      </Hds::Accordion::Item>
+    `);
+    await click('.hds-accordion-item__button');
+    assert.dom('.hds-accordion-item__content').exists();
+
+    await click('.hds-accordion-item__content button');
+    assert.dom('.hds-accordion-item__content').doesNotExist();
+    assert.dom('.hds-accordion-item__content button').doesNotExist();
+  });
 });