Added Accordion Component (#23)

Co-authored-by: Ashwathi23 <[email protected]>

src/components/Accordion/Accordion.stories.ts

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+
+const meta: Meta<typeof Accordion> = {
+	title: 'Components/Accordion',
+	component: Accordion,
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+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,
+	},
+};

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

src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,36 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils';
+import { Accordion } from './Accordion'; 
+import { axe } from 'jest-axe';
+
+describe('<Accordion />', () => {
+	it('renders', () => {
+		renderWithDeps(<Accordion items={[{ title: 'Title', content: 'Content' }]} />);
+
+		const titleElement = screen.getByText('Title');
+
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('toggles content on click', () => {
+		renderWithDeps(<Accordion items={[{ title: 'Title', content: 'Content' }]} />);
+
+		const titleElement = screen.getByText('Title');
+		fireEvent.click(titleElement);
+
+		const contentElement = screen.getByText('Content');
+		expect(contentElement).toBeVisible();
+
+		fireEvent.click(titleElement);
+		expect(contentElement).not.toBeVisible();
+	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = renderWithDeps(<Accordion items={[{ title: 'Title', content: 'Content' }]} />);
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+});
+
+

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,34 @@
+import React, { useState, ReactNode } from 'react';
+import {
+	AccordionContainer,
+	AccordionItem,
+	AccordionTitle,
+	AccordionContent,
+} from './Accordion.style';
+
+type AccordionProps = {
+	items: { title: string; content: ReactNode }[]; // Change content to ReactNode
+};
+
+export const Accordion: React.FC<AccordionProps> = ({ items }) => {
+	const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+	const handleToggle = (index: number) => {
+		setOpenIndex(index === openIndex ? null : index);
+	};
+
+	return (
+		<AccordionContainer>
+			{items.map((item, index) => (
+				<AccordionItem key={index}>
+					<AccordionTitle onClick={() => handleToggle(index)}>
+						{item.title}
+					</AccordionTitle>
+					<AccordionContent className={openIndex === index ? 'open' : ''}>
+						{item.content}
+					</AccordionContent>
+				</AccordionItem>
+			))}
+		</AccordionContainer>
+	);
+};