15757 create a controlled accordion stories

packages/react/src/components/Accordion/Accordion.stories.js

@@ -8,14 +8,15 @@
 /* eslint-disable no-console */
 
 import React from 'react';
+import './story.scss';
 import {
   default as Accordion,
   AccordionItem,
   AccordionSkeleton,
 } from '../Accordion';
 import Button from '../Button';
+import ButtonSet from '../ButtonSet';
 import mdx from './Accordion.mdx';
-
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 export default {
@@ -69,6 +70,67 @@ export const Default = () => (
   </Accordion>
 );
 
+export const Controlled = () => {
+  const [expandAll, setExpandAll] = React.useState(false);
+  return (
+    <>
+      <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>
+            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>

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,
   });

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();
+    });
+  });
 });

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;
+}