diff --git a/packages/react/src/components/Accordion/Accordion.stories.js b/packages/react/src/components/Accordion/Accordion.stories.js index 02ff315ca1b7..764cd69ed157 100644 --- 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 = () => ( ); +export const Controlled = () => { + const [expandAll, setExpandAll] = React.useState(false); + return ( + <> + + + + + + + +

+ 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. +

+
+ +

+ 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. +

+
+ +

+ 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. +

+
+ +

+ 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. +

+
+
+ + ); +}; + export const _WithLayer = () => ( 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, }); 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 ( + <> + + + + + + Panel A + + + Panel B + + + Panel C + + + + ); + }; + + it('should expand All on click to button', async () => { + render(); + + // 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(); + + // 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 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; +}