diff --git a/packages/components/src/components/hds/accordion/item/index.hbs b/packages/components/src/components/hds/accordion/item/index.hbs index 4860446c64..0495282629 100644 --- a/packages/components/src/components/hds/accordion/item/index.hbs +++ b/packages/components/src/components/hds/accordion/item/index.hbs @@ -26,7 +26,7 @@ - <:content> + <:content as |c|> - {{yield to="content"}} + {{yield (hash close=c.close) to="content"}} \ No newline at end of file diff --git a/packages/components/src/components/hds/accordion/item/index.ts b/packages/components/src/components/hds/accordion/item/index.ts index 99bde4a93e..e793fa30d6 100644 --- 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 index 15d85784a1..f3c100210c 100644 --- a/showcase/app/templates/components/accordion.hbs +++ b/showcase/app/templates/components/accordion.hbs @@ -248,7 +248,7 @@ - @@ -401,6 +401,19 @@ + close + + + + + <:toggle>Item one + <:content as |c|> + + + + + + Accordion::Item::Button diff --git a/showcase/tests/integration/components/hds/accordion/index-test.js b/showcase/tests/integration/components/hds/accordion/index-test.js index 55f61989cb..770569e171 100644 --- 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` + + <:toggle>Item one + <:content as |c|> + + + + `); + 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(); + }); });