From 7345869a22cac24263a00b90964c29e250ed3e71 Mon Sep 17 00:00:00 2001
From: riddhybansal <riddhybansal@gmail.com>
Date: Fri, 16 Feb 2024 18:54:04 +0530
Subject: [PATCH 1/6] feat: added a story named controlled in accordian

---
 .../components/Accordion/Accordion.stories.js | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index 02ff315ca1b7..30903aba281c 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -69,6 +69,57 @@ export const Default = () => (
   </Accordion>
 );
 
+export const Controlled = () => {
+  const [expandAll, setExpandAll] = React.useState(false);
+  return (
+    <>
+      <Button onClick={() => setExpandAll(true)}>Click to expand all</Button>
+      <Button
+        onClick={() => {
+          expandAll || expandAll === null
+            ? setExpandAll(false)
+            : setExpandAll(null);
+        }}>
+        Click to collapse all
+      </Button>
+      <Accordion>
+        <AccordionItem title="Section 1 title" open={expandAll}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+        <AccordionItem title="Section 2 title" open={expandAll}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+        <AccordionItem title="Section 3 title" open={expandAll}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+        <AccordionItem title="Section 4 title" open={expandAll}>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+};
+
 export const _WithLayer = () => (
   <WithLayer>
     <Accordion>

From 07f8651047a400d33a6ab1e283c16de01b44c05d Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Mon, 26 Feb 2024 21:10:52 +0530
Subject: [PATCH 2/6] test: added test cases for controlled accordion

---
 .../Accordion/Accordion-test.avt.e2e.js       | 45 ++++++++++++++
 .../Accordion/__tests__/Accordion-test.js     | 59 ++++++++++++++++++-
 2 files changed, 103 insertions(+), 1 deletion(-)

diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js
index 7a224b0176a7..1808dc42667a 100644
--- a/e2e/components/Accordion/Accordion-test.avt.e2e.js
+++ b/e2e/components/Accordion/Accordion-test.avt.e2e.js
@@ -48,6 +48,19 @@ test.describe('@avt Accordion', () => {
     );
   });
 
+  test('@avt-advanced-states controlled', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Accordion',
+      id: 'components-accordion--controlled',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Accordion @avt-advanced-states controlled'
+    );
+  });
+
   test('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {
       component: 'Accordion',
@@ -144,4 +157,36 @@ test.describe('@avt Accordion', () => {
       'Accordion @avt-advanced-states disabled'
     );
   });
+
+  test('@avt-keyboard-nav expand/collapseAll', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Accordion',
+      id: 'components-accordion--controlled',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const expand_all_btn = page.getByRole('button', {
+      name: 'Click to expand all',
+    });
+    const collapse_all_btn = page.getByRole('button', {
+      name: 'Click to collapse all',
+    });
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    await expect(expand_all_btn).toBeVisible();
+    await expect(collapse_all_btn).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Check the focus on Expand button
+    await expect(expand_all_btn).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'true');
+    //focus on collapse button
+    await page.keyboard.press('Tab');
+    await expect(collapse_all_btn).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'false');
+  });
 });
diff --git a/packages/react/src/components/Accordion/__tests__/Accordion-test.js b/packages/react/src/components/Accordion/__tests__/Accordion-test.js
index 408d51e9a3db..f7b79c71533c 100644
--- a/packages/react/src/components/Accordion/__tests__/Accordion-test.js
+++ b/packages/react/src/components/Accordion/__tests__/Accordion-test.js
@@ -6,7 +6,7 @@
  */
 
 import '../../../../scss/components/accordion/_index.scss';
-
+import Button from '../../Button';
 import React from 'react';
 import { default as Accordion, AccordionItem } from '../';
 import { render, screen } from '@testing-library/react';
@@ -197,4 +197,61 @@ describe('Accordion', () => {
       );
     });
   });
+
+  describe('Expand/Collapse All', () => {
+    const ControlledAccordion = () => {
+      const [expandAll, setExpandAll] = React.useState(false);
+      return (
+        <>
+          <Button onClick={() => setExpandAll(true)}>
+            Click to expand all
+          </Button>
+          <Button
+            onClick={() => {
+              expandAll || expandAll === null
+                ? setExpandAll(false)
+                : setExpandAll(null);
+            }}>
+            Click to collapse all
+          </Button>
+
+          <Accordion className="extra-class">
+            <AccordionItem className="child" title="Heading A" open={expandAll}>
+              Panel A
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading B" open={expandAll}>
+              Panel B
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading C" open={expandAll}>
+              Panel C
+            </AccordionItem>
+          </Accordion>
+        </>
+      );
+    };
+
+    it('should expand All on click to button', async () => {
+      render(<ControlledAccordion />);
+
+      // click to open
+      await userEvent.click(screen.getByText('Click to expand all'));
+
+      // test when open
+      expect(screen.getByText('Panel A')).toBeVisible();
+      expect(screen.getByText('Panel B')).toBeVisible();
+      expect(screen.getByText('Panel C')).toBeVisible();
+    });
+
+    it('should Collapse All on click to button', async () => {
+      render(<ControlledAccordion />);
+
+      // click to close
+      await userEvent.click(screen.getByText('Click to collapse all'));
+
+      // test when close
+      expect(screen.getByText('Panel A')).not.toBeVisible();
+      expect(screen.getByText('Panel B')).not.toBeVisible();
+      expect(screen.getByText('Panel C')).not.toBeVisible();
+    });
+  });
 });

From c6b4187e503141d9c84dc5f6e8f3eee51803ff53 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Tue, 27 Feb 2024 16:17:25 +0530
Subject: [PATCH 3/6] feat(controlledAccordions): supports toggles, disabled
 panels

---
 .../react/src/components/Accordion/Accordion.stories.js    | 7 ++++++-
 packages/react/src/components/Accordion/AccordionItem.tsx  | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index 30903aba281c..db43494e5820 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -73,7 +73,12 @@ export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
   return (
     <>
-      <Button onClick={() => setExpandAll(true)}>Click to expand all</Button>
+      <Button
+        onClick={() => {
+          expandAll === true ? setExpandAll(1) : setExpandAll(true);
+        }}>
+        Click to expand all
+      </Button>
       <Button
         onClick={() => {
           expandAll || expandAll === null
diff --git a/packages/react/src/components/Accordion/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem.tsx
index 15584ad9782e..d2b8af3bdb10 100644
--- a/packages/react/src/components/Accordion/AccordionItem.tsx
+++ b/packages/react/src/components/Accordion/AccordionItem.tsx
@@ -129,7 +129,7 @@ function AccordionItem({
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--accordion__item`]: true,
-    [`${prefix}--accordion__item--active`]: isOpen,
+    [`${prefix}--accordion__item--active`]: isOpen && !disabled,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName,
   });

From e743025065b63065852b896006f6c88bad19c1f5 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Tue, 27 Feb 2024 19:02:57 +0530
Subject: [PATCH 4/6] refactor(controlled-accordion): changes button styles

---
 .../components/Accordion/Accordion.stories.js | 35 +++++++++++--------
 .../scss/components/accordion/_accordion.scss |  6 ++++
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index db43494e5820..ad30bcec2133 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -14,7 +14,9 @@ import {
   AccordionSkeleton,
 } from '../Accordion';
 import Button from '../Button';
+import ButtonSet from '../ButtonSet';
 import mdx from './Accordion.mdx';
+import { usePrefix } from '../../internal/usePrefix';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
@@ -71,22 +73,27 @@ export const Default = () => (
 
 export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
+  const prefix = usePrefix();
   return (
     <>
-      <Button
-        onClick={() => {
-          expandAll === true ? setExpandAll(1) : setExpandAll(true);
-        }}>
-        Click to expand all
-      </Button>
-      <Button
-        onClick={() => {
-          expandAll || expandAll === null
-            ? setExpandAll(false)
-            : setExpandAll(null);
-        }}>
-        Click to collapse all
-      </Button>
+      <div className={`${prefix}--controlled__accordion`}>
+        <ButtonSet>
+          <Button
+            onClick={() => {
+              expandAll === true ? setExpandAll(1) : setExpandAll(true);
+            }}>
+            Click to expand all
+          </Button>
+          <Button
+            onClick={() => {
+              expandAll || expandAll === null
+                ? setExpandAll(false)
+                : setExpandAll(null);
+            }}>
+            Click to collapse all
+          </Button>
+        </ButtonSet>
+      </div>
       <Accordion>
         <AccordionItem title="Section 1 title" open={expandAll}>
           <p>
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 214067fd960e..4aca8431281b 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -305,3 +305,9 @@ $content-padding: 0 0 0 $spacing-05 !default;
   inline-size: calc(100% + 32px);
   inset-inline-start: -1rem;
 }
+
+//controlled-accordion
+.#{$prefix}--controlled__accordion .#{$prefix}--btn-set .#{$prefix}--btn {
+  inline-size: 100%;
+  max-inline-size: 13.25rem;
+}

From 3e8be93d5fcbab3663c996080a541ea703a3ffe7 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Thu, 29 Feb 2024 14:51:54 +0530
Subject: [PATCH 5/6] chore: styles updated and moved to story.scss

---
 .../components/Accordion/Accordion.stories.js | 41 +++++++++----------
 .../react/src/components/Accordion/story.scss | 14 +++++++
 .../scss/components/accordion/_accordion.scss |  6 ---
 3 files changed, 34 insertions(+), 27 deletions(-)
 create mode 100644 packages/react/src/components/Accordion/story.scss

diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js
index ad30bcec2133..764cd69ed157 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.js
+++ b/packages/react/src/components/Accordion/Accordion.stories.js
@@ -8,6 +8,7 @@
 /* eslint-disable no-console */
 
 import React from 'react';
+import './story.scss';
 import {
   default as Accordion,
   AccordionItem,
@@ -16,8 +17,6 @@ import {
 import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import mdx from './Accordion.mdx';
-import { usePrefix } from '../../internal/usePrefix';
-
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 export default {
@@ -73,27 +72,27 @@ export const Default = () => (
 
 export const Controlled = () => {
   const [expandAll, setExpandAll] = React.useState(false);
-  const prefix = usePrefix();
   return (
     <>
-      <div className={`${prefix}--controlled__accordion`}>
-        <ButtonSet>
-          <Button
-            onClick={() => {
-              expandAll === true ? setExpandAll(1) : setExpandAll(true);
-            }}>
-            Click to expand all
-          </Button>
-          <Button
-            onClick={() => {
-              expandAll || expandAll === null
-                ? setExpandAll(false)
-                : setExpandAll(null);
-            }}>
-            Click to collapse all
-          </Button>
-        </ButtonSet>
-      </div>
+      <ButtonSet className={'controlled-accordion-btnset'}>
+        <Button
+          className={'controlled-accordion-btn'}
+          onClick={() => {
+            expandAll === true ? setExpandAll(1) : setExpandAll(true);
+          }}>
+          Click to expand all
+        </Button>
+        <Button
+          className={'controlled-accordion-btn'}
+          onClick={() => {
+            expandAll || expandAll === null
+              ? setExpandAll(false)
+              : setExpandAll(null);
+          }}>
+          Click to collapse all
+        </Button>
+      </ButtonSet>
+
       <Accordion>
         <AccordionItem title="Section 1 title" open={expandAll}>
           <p>
diff --git a/packages/react/src/components/Accordion/story.scss b/packages/react/src/components/Accordion/story.scss
new file mode 100644
index 000000000000..635d0c797ae7
--- /dev/null
+++ b/packages/react/src/components/Accordion/story.scss
@@ -0,0 +1,14 @@
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+.controlled-accordion-btnset {
+  padding-block-end: 0.5rem;
+}
+
+.controlled-accordion-btnset .controlled-accordion-btn {
+  max-inline-size: 13.25rem;
+}
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 4aca8431281b..214067fd960e 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -305,9 +305,3 @@ $content-padding: 0 0 0 $spacing-05 !default;
   inline-size: calc(100% + 32px);
   inset-inline-start: -1rem;
 }
-
-//controlled-accordion
-.#{$prefix}--controlled__accordion .#{$prefix}--btn-set .#{$prefix}--btn {
-  inline-size: 100%;
-  max-inline-size: 13.25rem;
-}

From ecb5590511e6b084ba407aaee5e8f9e3ba38331c Mon Sep 17 00:00:00 2001
From: Preeti Bansal <design.preeti@gmail.com>
Date: Thu, 29 Feb 2024 20:16:57 +0530
Subject: [PATCH 6/6] fix: removed avt test cases as per the PR review
 suggestions

---
 .../Accordion/Accordion-test.avt.e2e.js       | 45 -------------------
 1 file changed, 45 deletions(-)

diff --git a/e2e/components/Accordion/Accordion-test.avt.e2e.js b/e2e/components/Accordion/Accordion-test.avt.e2e.js
index 1808dc42667a..7a224b0176a7 100644
--- a/e2e/components/Accordion/Accordion-test.avt.e2e.js
+++ b/e2e/components/Accordion/Accordion-test.avt.e2e.js
@@ -48,19 +48,6 @@ test.describe('@avt Accordion', () => {
     );
   });
 
-  test('@avt-advanced-states controlled', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Accordion',
-      id: 'components-accordion--controlled',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations(
-      'Accordion @avt-advanced-states controlled'
-    );
-  });
-
   test('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {
       component: 'Accordion',
@@ -157,36 +144,4 @@ test.describe('@avt Accordion', () => {
       'Accordion @avt-advanced-states disabled'
     );
   });
-
-  test('@avt-keyboard-nav expand/collapseAll', async ({ page }) => {
-    await visitStory(page, {
-      component: 'Accordion',
-      id: 'components-accordion--controlled',
-      globals: {
-        theme: 'white',
-      },
-    });
-    const expand_all_btn = page.getByRole('button', {
-      name: 'Click to expand all',
-    });
-    const collapse_all_btn = page.getByRole('button', {
-      name: 'Click to collapse all',
-    });
-    const accordion_btn1 = page.getByRole('button', {
-      name: 'Section 1 title',
-    });
-    await expect(expand_all_btn).toBeVisible();
-    await expect(collapse_all_btn).toBeVisible();
-    await page.keyboard.press('Tab');
-
-    // Check the focus on Expand button
-    await expect(expand_all_btn).toBeFocused();
-    await page.keyboard.press('Enter');
-    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'true');
-    //focus on collapse button
-    await page.keyboard.press('Tab');
-    await expect(collapse_all_btn).toBeFocused();
-    await page.keyboard.press('Enter');
-    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'false');
-  });
 });