From 808245f5861a5d3bd8cbf4459b661a17abd8bca4 Mon Sep 17 00:00:00 2001
From: Ian <ian.harrison@adhocteam.us>
Date: Fri, 20 Sep 2024 15:00:39 -0500
Subject: [PATCH] va-accordion: check for open accordion items on load (#1341)

* check for open accordion items on load

* add test
---
 .../va-accordion/va-accordion.e2e.ts          | 25 +++++++++++++++++++
 .../components/va-accordion/va-accordion.tsx  | 11 +++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
index ba68b1d90..fcb293a99 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
+++ b/packages/web-components/src/components/va-accordion/va-accordion.e2e.ts
@@ -285,4 +285,29 @@ describe('va-accordion', () => {
       },
     });
   });
+
+  it('shows "Collapse all -" if all accordion-items are open on load', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-accordion section-heading="The Section Heading">
+        <va-accordion-item header="First item" open="true">Some content</va-accordion-item>
+      </va-accordion>`);
+    
+    const button = await page.find('va-accordion >>> button');
+
+    expect(button.innerText).toEqual('collapse-all -');
+  });
+
+  it('shows "Collapse all -" if some of accordion-items are open on load', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-accordion section-heading="The Section Heading">
+        <va-accordion-item header="First item" open="true">Some content</va-accordion-item>
+        <va-accordion-item header="Second item">Some content</va-accordion-item>
+      </va-accordion>`);
+    
+    const button = await page.find('va-accordion >>> button');
+
+    expect(button.innerText).toEqual('collapse-all -');
+  });
 });
diff --git a/packages/web-components/src/components/va-accordion/va-accordion.tsx b/packages/web-components/src/components/va-accordion/va-accordion.tsx
index ce8871f58..fa4093f51 100644
--- a/packages/web-components/src/components/va-accordion/va-accordion.tsx
+++ b/packages/web-components/src/components/va-accordion/va-accordion.tsx
@@ -138,7 +138,7 @@ export class VaAccordion {
       this.accordionsOpened();
   }
 
-  private accordionsOpened() {
+  private accordionsOpened(method='every') {
     // Track user clicks on va-accordion-item within an array to compare if all values are true or false
     let accordionItems = [];
     getSlottedNodes(this.el, 'va-accordion-item').forEach(item => {
@@ -146,10 +146,10 @@ export class VaAccordion {
     });
     const allOpen = currentValue => currentValue === 'true';
     const allClosed = currentValue => currentValue === 'false';
-    if (accordionItems.every(allOpen)) {
+    if (accordionItems[method](allOpen)) {
       this.expanded = true;
     }
-    if (accordionItems.every(allClosed)) {
+    if (accordionItems[method](allClosed)) {
       this.expanded = false;
     }
   }
@@ -183,6 +183,11 @@ export class VaAccordion {
     i18next.off('languageChanged');
   }
 
+  // if one or more accordion-items are open on load, then we should put component in state to "Collapse all"
+  componentDidLoad() {
+    this.accordionsOpened('some');
+  }
+
   render() {
     const { openSingle } = this;