Add a defaultOpen argument to the AuAccordion component

Author: Windvis

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<AuAccordionSignature> {
-  @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';

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}}
     >
       <p>I am information. I can even contain a <AuLink>A Link</AuLink>!</p>
     </AuAccordion>`,
@@ -65,4 +71,5 @@ Component.args = {
   iconClosed: 'nav-right',
   buttonLabel: 'Accordion with arrows',
   loading: false,
+  defaultOpen: false,
 };

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(
+      <template>
+        <AuAccordion @defaultOpen={{true}}>
+          Content
+        </AuAccordion>
+      </template>,
+    );
+
+    assert.dom(ACCORDION.CONTENT).exists().hasText('Content');
+  });
+
   test('it toggles its content rendering when clicking it', async function (assert) {
     await render(
       <template>