diff --git a/addon/components/au-accordion.gts b/addon/components/au-accordion.gts index 340301480..2739b219c 100644 --- a/addon/components/au-accordion.gts +++ b/addon/components/au-accordion.gts @@ -18,6 +18,7 @@ export interface AuAccordionSignature { buttonLabel?: string; iconClosed?: string; iconOpen?: string; + defaultOpen?: boolean; loading?: boolean; reverse?: boolean; skin?: 'border'; @@ -30,7 +31,13 @@ export interface AuAccordionSignature { } export default class AuAccordion extends Component { - @tracked isOpen = false; + @tracked isOpen; + + constructor(owner: unknown, args: AuAccordionSignature['Args']) { + super(owner, args); + + this.isOpen = Boolean(this.args.defaultOpen); + } get loading() { if (this.args.loading) return 'is-loading'; diff --git a/stories/5-components/Content/AuAccordion.stories.js b/stories/5-components/Content/AuAccordion.stories.js index d02e5ff94..40972bdf9 100644 --- a/stories/5-components/Content/AuAccordion.stories.js +++ b/stories/5-components/Content/AuAccordion.stories.js @@ -34,6 +34,11 @@ export default { control: 'boolean', description: 'Adds a loading state to the button', }, + defaultOpen: { + control: 'boolean', + description: + 'When set to true, this will render the accordion in the "open" state from the start.', + }, }, parameters: { layout: 'padded', @@ -50,6 +55,7 @@ const Template = (args) => ({ @iconClosed={{this.iconClosed}} @buttonLabel={{this.buttonLabel}} @loading={{this.loading}} + @defaultOpen={{this.defaultOpen}} >

I am information. I can even contain a A Link!

`, @@ -65,4 +71,5 @@ Component.args = { iconClosed: 'nav-right', buttonLabel: 'Accordion with arrows', loading: false, + defaultOpen: false, }; diff --git a/tests/integration/components/au-accordion-test.gts b/tests/integration/components/au-accordion-test.gts index e2f77b02b..d5263bc72 100644 --- a/tests/integration/components/au-accordion-test.gts +++ b/tests/integration/components/au-accordion-test.gts @@ -35,6 +35,18 @@ module('Integration | Component | au-accordion', function (hooks) { assert.dom(ACCORDION.CONTENT).doesNotExist(); }); + test('it renders the content by default if `defaultOpen` is set to `true`', async function (assert) { + await render( + , + ); + + assert.dom(ACCORDION.CONTENT).exists().hasText('Content'); + }); + test('it toggles its content rendering when clicking it', async function (assert) { await render(