15757 create a controlled accordion stories (#15827)

* feat: added a story named controlled in accordian * test: added test cases for controlled accordion * feat(controlledAccordions): supports toggles, disabled panels * refactor(controlled-accordion): changes button styles * chore: styles updated and moved to story.scss * fix: removed avt test cases as per the PR review suggestions --------- Co-authored-by: riddhybansal <[email protected]> Co-authored-by: Nikhil Tomar <[email protected]> Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · Mar 7, 2024 · 0474bce · 0474bce
1 parent 536d342
commit 0474bce
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 3 deletions.
diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/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>

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

diff --git 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();
+    });
+  });
 });
diff --git a/packages/react/src/components/Accordion/story.scss 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;
+}