From 7b6bdb02a9929d1609da39367ad68222ab21e54a Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 15 Feb 2024 16:06:41 +0100
Subject: [PATCH] Add an `isOpenInitially` argument to the `AuAccordion`
 component

---
 addon/components/au-accordion.gts                   |  9 ++++++++-
 stories/5-components/Content/AuAccordion.stories.js |  7 +++++++
 tests/integration/components/au-accordion-test.gts  | 12 ++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/addon/components/au-accordion.gts b/addon/components/au-accordion.gts
index 340301480..1f32c4bb6 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;
+    isOpenInitially?: 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.isOpenInitially);
+  }
 
   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..7e4f124ef 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',
     },
+    isOpenInitially: {
+      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}}
+      @isOpenInitially={{this.isOpenInitially}}
     >
       <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,
+  isOpenInitially: false,
 };
diff --git a/tests/integration/components/au-accordion-test.gts b/tests/integration/components/au-accordion-test.gts
index e2f77b02b..5f5ea089d 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 `isOpenInitially` is set to `true`', async function (assert) {
+    await render(
+      <template>
+        <AuAccordion @isOpenInitially={{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>