From 481a949b31557f24091f21482056fd2d9ed45523 Mon Sep 17 00:00:00 2001 From: Ashwathi23 Date: Wed, 14 Aug 2024 11:45:34 +1000 Subject: [PATCH 1/9] Added Accordion Component --- src/components/Accordion/Accordion.stories.ts | 23 +++++++++++++ src/components/Accordion/Accordion.style.ts | 25 ++++++++++++++ src/components/Accordion/Accordion.test.tsx | 20 +++++++++++ src/components/Accordion/Accordion.tsx | 34 +++++++++++++++++++ 4 files changed, 102 insertions(+) create mode 100644 src/components/Accordion/Accordion.stories.ts create mode 100644 src/components/Accordion/Accordion.style.ts create mode 100644 src/components/Accordion/Accordion.test.tsx create mode 100644 src/components/Accordion/Accordion.tsx diff --git a/src/components/Accordion/Accordion.stories.ts b/src/components/Accordion/Accordion.stories.ts new file mode 100644 index 0000000..4ae2b9f --- /dev/null +++ b/src/components/Accordion/Accordion.stories.ts @@ -0,0 +1,23 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Accordion } from './Accordion'; + +const meta: Meta = { + title: 'Components/Accordion', + component: Accordion, +}; + +export default meta; +type Story = StoryObj; + +const defaultProps = { + items: [ + { title: 'Section 1', content: 'Content for section 1' }, + { title: 'Section 2', content: 'Content for section 2' }, + ], +}; + +export const Default: Story = { + args: { + ...defaultProps, + }, +}; diff --git a/src/components/Accordion/Accordion.style.ts b/src/components/Accordion/Accordion.style.ts new file mode 100644 index 0000000..de0102b --- /dev/null +++ b/src/components/Accordion/Accordion.style.ts @@ -0,0 +1,25 @@ +import styled from 'styled-components'; + +export const AccordionContainer = styled.div` + width: 100%; +`; + +export const AccordionItem = styled.div` + border: 1px solid ${({ theme }) => theme.colors.border || '#ccc'}; + margin-bottom: ${({ theme }) => theme.spacing.xs || '5px'}; +`; + +export const AccordionTitle = styled.div` + background-color: ${({ theme }) => theme.colors.backgroundAlt || '#f1f1f1'}; + padding: ${({ theme }) => theme.spacing.sm || '10px'}; + cursor: pointer; +`; + +export const AccordionContent = styled.div` + padding: ${({ theme }) => theme.spacing.sm || '10px'}; + display: none; + + &.open { + display: block; + } +`; diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx new file mode 100644 index 0000000..214599c --- /dev/null +++ b/src/components/Accordion/Accordion.test.tsx @@ -0,0 +1,20 @@ +import { render, fireEvent } from '@testing-library/react'; +import { Accordion } from './Accordion'; + +describe('', () => { + it('renders the accordion component', () => { + const { getByText } = render( + + ); + expect(getByText('Title')).toBeInTheDocument(); + }); + + it('toggles content on click', () => { + const { getByText } = render( + + ); + const titleElement = getByText('Title'); + fireEvent.click(titleElement); + expect(getByText('Content')).toBeInTheDocument(); + }); +}); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx new file mode 100644 index 0000000..cc0eb72 --- /dev/null +++ b/src/components/Accordion/Accordion.tsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import { + AccordionContainer, + AccordionItem, + AccordionTitle, + AccordionContent, +} from './Accordion.style'; + +type AccordionProps = { + items: { title: string; content: string }[]; +}; + +export const Accordion: React.FC = ({ items }) => { + const [openIndex, setOpenIndex] = useState(null); + + const handleToggle = (index: number) => { + setOpenIndex(index === openIndex ? null : index); + }; + + return ( + + {items.map((item, index) => ( + + handleToggle(index)}> + {item.title} + + + {item.content} + + + ))} + + ); +}; From b24864736e347cbf61b1674ab75f1f1d5d4fcad7 Mon Sep 17 00:00:00 2001 From: Ashwathi23 <139518396+Ashwathi23@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:22:27 +1000 Subject: [PATCH 2/9] Update Accordion.stories.ts --- src/components/Accordion/Accordion.stories.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.ts b/src/components/Accordion/Accordion.stories.ts index 4ae2b9f..2f0a140 100644 --- a/src/components/Accordion/Accordion.stories.ts +++ b/src/components/Accordion/Accordion.stories.ts @@ -2,22 +2,22 @@ import { Meta, StoryObj } from '@storybook/react'; import { Accordion } from './Accordion'; const meta: Meta = { - title: 'Components/Accordion', - component: Accordion, + title: 'Components/Accordion', + component: Accordion, }; export default meta; type Story = StoryObj; const defaultProps = { - items: [ - { title: 'Section 1', content: 'Content for section 1' }, - { title: 'Section 2', content: 'Content for section 2' }, - ], + items: [ + { title: 'Section 1', content: 'Content for section 1' }, + { title: 'Section 2', content: 'Content for section 2' }, + ], }; export const Default: Story = { - args: { - ...defaultProps, - }, + args: { + ...defaultProps, + }, }; From 04acbd34bfded23fa23b8e541c809b90b6ce2a00 Mon Sep 17 00:00:00 2001 From: Ashwathi23 <139518396+Ashwathi23@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:26:38 +1000 Subject: [PATCH 3/9] Update Accordion.style.ts edited the indentation --- src/components/Accordion/Accordion.style.ts | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/Accordion/Accordion.style.ts b/src/components/Accordion/Accordion.style.ts index de0102b..7f7b26f 100644 --- a/src/components/Accordion/Accordion.style.ts +++ b/src/components/Accordion/Accordion.style.ts @@ -1,25 +1,25 @@ import styled from 'styled-components'; export const AccordionContainer = styled.div` - width: 100%; + width: 100%; `; export const AccordionItem = styled.div` - border: 1px solid ${({ theme }) => theme.colors.border || '#ccc'}; - margin-bottom: ${({ theme }) => theme.spacing.xs || '5px'}; + border: 1px solid ${({ theme }) => theme.colors.border || '#ccc'}; + margin-bottom: ${({ theme }) => theme.spacing.xs || '5px'}; `; export const AccordionTitle = styled.div` - background-color: ${({ theme }) => theme.colors.backgroundAlt || '#f1f1f1'}; - padding: ${({ theme }) => theme.spacing.sm || '10px'}; - cursor: pointer; + background-color: ${({ theme }) => theme.colors.backgroundAlt || '#f1f1f1'}; + padding: ${({ theme }) => theme.spacing.sm || '10px'}; + cursor: pointer; `; export const AccordionContent = styled.div` - padding: ${({ theme }) => theme.spacing.sm || '10px'}; - display: none; + padding: ${({ theme }) => theme.spacing.sm || '10px'}; + display: none; - &.open { - display: block; - } + &.open { + display: block; + } `; From 25f58b799b565b85ab18cb3491853eb40d7e8431 Mon Sep 17 00:00:00 2001 From: Ashwathi23 <139518396+Ashwathi23@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:28:21 +1000 Subject: [PATCH 4/9] Update Accordion.test.tsx --- src/components/Accordion/Accordion.test.tsx | 28 ++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 214599c..42ea9b0 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -2,19 +2,19 @@ import { render, fireEvent } from '@testing-library/react'; import { Accordion } from './Accordion'; describe('', () => { - it('renders the accordion component', () => { - const { getByText } = render( - - ); - expect(getByText('Title')).toBeInTheDocument(); - }); + it('renders the accordion component', () => { + const { getByText } = render( + + ); + expect(getByText('Title')).toBeInTheDocument(); + }); - it('toggles content on click', () => { - const { getByText } = render( - - ); - const titleElement = getByText('Title'); - fireEvent.click(titleElement); - expect(getByText('Content')).toBeInTheDocument(); - }); + it('toggles content on click', () => { + const { getByText } = render( + + ); + const titleElement = getByText('Title'); + fireEvent.click(titleElement); + expect(getByText('Content')).toBeInTheDocument(); + }); }); From 5ca5c75e9ec4e22a76bcc122e05ebc5feec6fc81 Mon Sep 17 00:00:00 2001 From: Ashwathi23 <139518396+Ashwathi23@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:31:19 +1000 Subject: [PATCH 5/9] Update Accordion.tsx --- src/components/Accordion/Accordion.tsx | 46 +++++++++++++------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index cc0eb72..003cc6c 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,34 +1,34 @@ import React, { useState } from 'react'; import { - AccordionContainer, - AccordionItem, - AccordionTitle, - AccordionContent, + AccordionContainer, + AccordionItem, + AccordionTitle, + AccordionContent, } from './Accordion.style'; type AccordionProps = { - items: { title: string; content: string }[]; + items: { title: string; content: string }[]; }; export const Accordion: React.FC = ({ items }) => { - const [openIndex, setOpenIndex] = useState(null); + const [openIndex, setOpenIndex] = useState(null); - const handleToggle = (index: number) => { - setOpenIndex(index === openIndex ? null : index); - }; + const handleToggle = (index: number) => { + setOpenIndex(index === openIndex ? null : index); + }; - return ( - - {items.map((item, index) => ( - - handleToggle(index)}> - {item.title} - - - {item.content} - - - ))} - - ); + return ( + + {items.map((item, index) => ( + + handleToggle(index)}> + {item.title} + + + {item.content} + + + ))} + + ); }; From 4af6f59698614b4fbfe76b6818468fc3b2e3b1b5 Mon Sep 17 00:00:00 2001 From: Ashwathi23 Date: Mon, 23 Sep 2024 21:12:37 +1000 Subject: [PATCH 6/9] "Updated Accordion.test.tsx by solving the lint error" --- src/components/Accordion/Accordion.test.tsx | 40 ++++++++++++--------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 214599c..fe2154f 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -1,20 +1,28 @@ -import { render, fireEvent } from '@testing-library/react'; -import { Accordion } from './Accordion'; +import { screen, fireEvent } from '@testing-library/react'; +import { renderWithDeps } from '../../../jest.utils'; +import { Accordion } from './Accordion'; describe('', () => { - it('renders the accordion component', () => { - const { getByText } = render( - - ); - expect(getByText('Title')).toBeInTheDocument(); - }); + it('renders', () => { + renderWithDeps(); + + const titleElement = screen.getByText('Title'); + + expect(titleElement).toBeInTheDocument(); + }); - it('toggles content on click', () => { - const { getByText } = render( - - ); - const titleElement = getByText('Title'); - fireEvent.click(titleElement); - expect(getByText('Content')).toBeInTheDocument(); - }); + it('toggles content on click', () => { + renderWithDeps(); + + const titleElement = screen.getByText('Title'); + fireEvent.click(titleElement); + + const contentElement = screen.getByText('Content'); + expect(contentElement).toBeVisible(); + + fireEvent.click(titleElement); + expect(contentElement).not.toBeVisible(); + }); }); + + From 11585cfd44596388941d7f05753f080065fc2bff Mon Sep 17 00:00:00 2001 From: Ashwathi23 Date: Mon, 23 Sep 2024 21:14:07 +1000 Subject: [PATCH 7/9] "Updated the code to allow complex content using ReactNode" --- src/components/Accordion/Accordion.tsx | 48 +++++++++++++------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index cc0eb72..5a111a3 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -1,34 +1,34 @@ -import React, { useState } from 'react'; +import React, { useState, ReactNode } from 'react'; import { - AccordionContainer, - AccordionItem, - AccordionTitle, - AccordionContent, + AccordionContainer, + AccordionItem, + AccordionTitle, + AccordionContent, } from './Accordion.style'; type AccordionProps = { - items: { title: string; content: string }[]; + items: { title: string; content: ReactNode }[]; // Change content to ReactNode }; export const Accordion: React.FC = ({ items }) => { - const [openIndex, setOpenIndex] = useState(null); + const [openIndex, setOpenIndex] = useState(null); - const handleToggle = (index: number) => { - setOpenIndex(index === openIndex ? null : index); - }; + const handleToggle = (index: number) => { + setOpenIndex(index === openIndex ? null : index); + }; - return ( - - {items.map((item, index) => ( - - handleToggle(index)}> - {item.title} - - - {item.content} - - - ))} - - ); + return ( + + {items.map((item, index) => ( + + handleToggle(index)}> + {item.title} + + + {item.content} + + + ))} + + ); }; From 406a58738edc36b2bd62956187c6ebcf9a05b034 Mon Sep 17 00:00:00 2001 From: Ashwathi23 Date: Mon, 23 Sep 2024 21:14:38 +1000 Subject: [PATCH 8/9] "Solved the lint error" --- src/components/Accordion/Accordion.stories.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Accordion/Accordion.stories.ts b/src/components/Accordion/Accordion.stories.ts index 4ae2b9f..2f0a140 100644 --- a/src/components/Accordion/Accordion.stories.ts +++ b/src/components/Accordion/Accordion.stories.ts @@ -2,22 +2,22 @@ import { Meta, StoryObj } from '@storybook/react'; import { Accordion } from './Accordion'; const meta: Meta = { - title: 'Components/Accordion', - component: Accordion, + title: 'Components/Accordion', + component: Accordion, }; export default meta; type Story = StoryObj; const defaultProps = { - items: [ - { title: 'Section 1', content: 'Content for section 1' }, - { title: 'Section 2', content: 'Content for section 2' }, - ], + items: [ + { title: 'Section 1', content: 'Content for section 1' }, + { title: 'Section 2', content: 'Content for section 2' }, + ], }; export const Default: Story = { - args: { - ...defaultProps, - }, + args: { + ...defaultProps, + }, }; From e6dbfc01f9a13daeb8106029cc798884ba6da344 Mon Sep 17 00:00:00 2001 From: Ashwathi23 Date: Tue, 1 Oct 2024 09:38:27 +1000 Subject: [PATCH 9/9] Added accesibility test --- src/components/Accordion/Accordion.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index fe2154f..738ff74 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -1,6 +1,7 @@ import { screen, fireEvent } from '@testing-library/react'; import { renderWithDeps } from '../../../jest.utils'; import { Accordion } from './Accordion'; +import { axe } from 'jest-axe'; describe('', () => { it('renders', () => { @@ -23,6 +24,13 @@ describe('', () => { fireEvent.click(titleElement); expect(contentElement).not.toBeVisible(); }); + + it('has no accessibility violations', async () => { + const { container } = renderWithDeps(); + const results = await axe(container); + + expect(results).toHaveNoViolations(); + }); });