Skip to content

feat: fix minor bug on the accordion #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daniele-zurico merged 1 commit into from
Jan 23, 2024
Merged

feat: fix minor bug on the accordion #589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
"rollup": "3.28.1",
"rollup-plugin-postcss": "4.0.2",
"sass": "1.66.1",
"sourcemap-codec": "^1.4.8",
"storybook": "7.4.1",
"storybook-css-modules-preset": "1.1.1",
"storybook-design-token": "2.10.0",
Expand All @@ -134,4 +135,4 @@
"@cesium133/forgjs": "1.1.10",
"imask": "^6.4.3"
}
}
}
8 changes: 4 additions & 4 deletions src/accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ interface AccordionProps {
/**
* Allows multiple sections of the accordion to be open at the same time
*/
multipleOpen: boolean;
multipleOpen?: boolean;

/**
* Specifies which sections of the accordion should be expanded by default
*/
expanded: string[];
expanded?: string[];

/**
* Customizes the icons displayed when the accordion sections are expanded
Expand Down Expand Up @@ -51,8 +51,8 @@ interface AccordionProps {
}

export const Accordion = ({
multipleOpen,
expanded,
multipleOpen = false,
expanded = [],
children,
expandIcon,
collapsedIcon,
Expand Down
139 changes: 102 additions & 37 deletions src/accordion/__tests__/Accordion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { AccordionDetails } from '../AccordionDetails';
describe('Accordion Component', () => {
it('should handle click when multipleOpen is true and title is not active', async () => {
render(
<Accordion multipleOpen={true} expanded={[]}>
<Accordion multipleOpen={true} expanded={[]}>
<AccordionItem title="1">
<AccordionTitle>
<>Test Title</>
Expand Down Expand Up @@ -146,12 +146,20 @@ describe('Accordion Component', () => {
const { rerender, getByText } = render(
<Accordion expanded={['1']} multipleOpen={false}>
<AccordionItem title="1">
<AccordionTitle><>Section 1</></AccordionTitle>
<AccordionDetails><>Section 1 Details</></AccordionDetails>
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<>Section 1 Details</>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><>Section 2</></AccordionTitle>
<AccordionDetails><>Section 2 Details</></AccordionDetails>
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<>Section 2 Details</>
</AccordionDetails>
</AccordionItem>
</Accordion>
);
Expand All @@ -161,12 +169,20 @@ describe('Accordion Component', () => {
rerender(
<Accordion multipleOpen={false} expanded={['2']}>
<AccordionItem title="1">
<AccordionTitle><>Section 1</></AccordionTitle>
<AccordionDetails><>Section 1 Details</></AccordionDetails>
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<>Section 1 Details</>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><>Section 2</></AccordionTitle>
<AccordionDetails><>Section 2 Details</></AccordionDetails>
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<>Section 2 Details</>
</AccordionDetails>
</AccordionItem>
</Accordion>
);
Expand All @@ -178,12 +194,20 @@ describe('Accordion Component', () => {
const { rerender, getByText } = render(
<Accordion expanded={['1']} multipleOpen={false}>
<AccordionItem title="1">
<AccordionTitle><>Section 1</></AccordionTitle>
<AccordionDetails><>Section 1 Details</></AccordionDetails>
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<>Section 1 Details</>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><>Section 2</></AccordionTitle>
<AccordionDetails><>Section 2 Details</></AccordionDetails>
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<>Section 2 Details</>
</AccordionDetails>
</AccordionItem>
</Accordion>
);
Expand All @@ -193,12 +217,20 @@ describe('Accordion Component', () => {
rerender(
<Accordion multipleOpen={true} expanded={['1', '2']}>
<AccordionItem title="1">
<AccordionTitle><>Section 1</></AccordionTitle>
<AccordionDetails><>Section 1 Details</></AccordionDetails>
<AccordionTitle>
<>Section 1</>
</AccordionTitle>
<AccordionDetails>
<>Section 1 Details</>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><>Section 2</></AccordionTitle>
<AccordionDetails><>Section 2 Details</></AccordionDetails>
<AccordionTitle>
<>Section 2</>
</AccordionTitle>
<AccordionDetails>
<>Section 2 Details</>
</AccordionDetails>
</AccordionItem>
</Accordion>
);
Expand All @@ -212,15 +244,15 @@ describe('Accordion Component', () => {
it('should collapse the item when multipleOpen is true and the item is clicked again', async () => {
render(
<Accordion multipleOpen={true} expanded={['1']}>
<AccordionItem title='1'>
<AccordionItem title="1">
<AccordionTitle>
<>Item 1</>
</AccordionTitle>
<AccordionDetails>
<>Details 1</>
</AccordionDetails>
</AccordionItem>
<AccordionItem title='2'>
<AccordionItem title="2">
<AccordionTitle>
<>Item 2</>
</AccordionTitle>
Expand Down Expand Up @@ -457,20 +489,37 @@ describe('Accordion Component', () => {
const titleClassName = 'test-title-class';
const detailsClassName = 'test-details-class';
render(
<Accordion multipleOpen={false} expanded={[]} titleClassName={titleClassName} detailsClassName={detailsClassName}>
<Accordion
multipleOpen={false}
expanded={[]}
titleClassName={titleClassName}
detailsClassName={detailsClassName}
>
<AccordionItem title="1">
<AccordionTitle><span>Item 1</span></AccordionTitle>
<AccordionDetails><span>Details 1</span></AccordionDetails>
<AccordionTitle>
<span>Item 1</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 1</span>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><span>Item 2</span></AccordionTitle>
<AccordionDetails><span>Details 2</span></AccordionDetails>
<AccordionTitle>
<span>Item 2</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 2</span>
</AccordionDetails>
</AccordionItem>
</Accordion>
);

const titles = screen.getAllByText(/Item/);
const titlesWithClass = titles.filter((title) => title.parentElement && title.parentElement.classList.contains(titleClassName));
const titlesWithClass = titles.filter(
(title) =>
title.parentElement &&
title.parentElement.classList.contains(titleClassName)
);
expect(titlesWithClass.length).toBe(2);
});

Expand All @@ -479,35 +528,51 @@ describe('Accordion Component', () => {
render(
<Accordion multipleOpen expandIcon={expandIcon} expanded={['1', '2']}>
<AccordionItem title="1">
<AccordionTitle><span>Item 1</span></AccordionTitle>
<AccordionDetails><span>Details 1</span></AccordionDetails>
<AccordionTitle>
<span>Item 1</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 1</span>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><span>Item 2</span></AccordionTitle>
<AccordionDetails><span>Details 2</span></AccordionDetails>
<AccordionTitle>
<span>Item 2</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 2</span>
</AccordionDetails>
</AccordionItem>
</Accordion>
);

const expandIcons = screen.getAllByTestId('expand-icon');
expect(expandIcons.length).toBe(2);
});

it('should allow to specify a collapseIcon at the root level and to be visible in every component when it is collapsed', () => {
const collapseIcon = <span data-testid="collapse-icon">-</span>;
render(
<Accordion multipleOpen collapsedIcon={collapseIcon} expanded={[]}>
<Accordion collapsedIcon={collapseIcon}>
<AccordionItem title="1">
<AccordionTitle><span>Item 1</span></AccordionTitle>
<AccordionDetails><span>Details 1</span></AccordionDetails>
<AccordionTitle>
<span>Item 1</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 1</span>
</AccordionDetails>
</AccordionItem>
<AccordionItem title="2">
<AccordionTitle><span>Item 2</span></AccordionTitle>
<AccordionDetails><span>Details 2</span></AccordionDetails>
<AccordionTitle>
<span>Item 2</span>
</AccordionTitle>
<AccordionDetails>
<span>Details 2</span>
</AccordionDetails>
</AccordionItem>
</Accordion>
);
const collapseIcons = screen.getAllByTestId('collapse-icon');
expect(collapseIcons.length).toBe(2);
});
});
});