feat: create AccordionItem component (#95)

Author: estebanperini

src/components/Accordion/README.md

@@ -0,0 +1,81 @@
+# Accordion Component
+
+The `Accordion` component is used to show and hide additional content inside a collapsible card.
+
+## Usage
+
+```jsx
+// Import component
+import { Accordion } from 'dept-central-lib-client'
+```
+
+```jsx
+// Example usage
+const items = [
+  { title: 'Accordion Title 1', content: 'This is the content for item 1.' },
+  { title: 'Accordion Title 2', content: 'This is the content for item 2.' },
+]
+
+<Accordion items={items} />
+```
+
+User prop implements the following interface:
+
+```tsx
+interface User {
+  name: string
+  email?: string
+  image?: string
+}
+```
+
+## Props
+
+| Prop      | Type                                 | Description                                        | Default Value |
+| --------- | ------------------------------------ | -------------------------------------------------- | ------------- |
+| items     | { title: string; content: string }[] | Array of objects representing each accordion item. | -             |
+| className | string                               | Custom CSS className.                              | ""            |
+| width     | string                               | Specifies the card width.                          | "700px"       |
+
+## Examples
+
+```jsx
+// Simple accordion
+<Accordion
+  items={[
+    { title: 'Item 1', content: 'Content for item 1' },
+    { title: 'Item 2', content: 'Content for item 2' },
+  ]}
+/>
+
+// Accordion with long text
+<Accordion
+  items={[
+    {
+      title: 'Details',
+      content:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.',
+    },
+  ]}
+/>
+
+// Accordion with custom styles
+<Accordion
+  className="border border-blue-500 rounded-xl p-4"
+  items={[
+    { title: 'Styled Item', content: 'This item has custom container styles.' },
+  ]}
+/>
+
+// Accordion with custom width
+<Accordion
+  width="100%"
+  items={[
+    { title: 'Wide Item', content: 'This accordion takes the full width.' },
+  ]}
+/>
+```
+
+## Go main README
+
+[Main README](../../../README.md#components)

src/components/Accordion/index.spec.tsx

@@ -0,0 +1,57 @@
+import { render, fireEvent } from '@testing-library/react'
+import { AccordionItem, Accordion } from '.'
+import '@testing-library/jest-dom/extend-expect'
+
+describe('AccordionItem Component', () => {
+  it('renders the AccordionItem with the correct title', () => {
+    const { getByText } = render(
+      <AccordionItem title="Test Title" content="Test Content" />,
+    )
+    expect(getByText('Test Title')).toBeInTheDocument()
+  })
+
+  it('does not show content initially', () => {
+    const { getByText } = render(
+      <AccordionItem title="Title" content="Hidden Content" />,
+    )
+    const contentContainer = getByText('Hidden Content').parentElement
+    expect(contentContainer).toHaveClass('max-h-0', 'opacity-0')
+  })
+
+  it('toggles content visibility when button is clicked', () => {
+    const { getByText, getByRole } = render(
+      <AccordionItem title="Toggle Title" content="Toggle Content" />,
+    )
+    const button = getByRole('button')
+    const contentContainer = getByText('Toggle Content').parentElement
+
+    // Content initially hidden
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(contentContainer).toHaveClass('max-h-0', 'opacity-0')
+
+    // Click to expand
+    fireEvent.click(button)
+    expect(button).toHaveAttribute('aria-expanded', 'true')
+    expect(contentContainer).toHaveClass('max-h-40', 'opacity-100')
+
+    // Click to collapse
+    fireEvent.click(button)
+    expect(button).toHaveAttribute('aria-expanded', 'false')
+    expect(contentContainer).toHaveClass('max-h-0', 'opacity-0')
+  })
+})
+
+describe('Accordion Component', () => {
+  it('renders multiple AccordionItem components', () => {
+    const items = [
+      { title: 'Item 1', content: 'Content 1' },
+      { title: 'Item 2', content: 'Content 2' },
+    ]
+    const { getByText } = render(<Accordion items={items} />)
+
+    expect(getByText('Item 1')).toBeInTheDocument()
+    expect(getByText('Item 2')).toBeInTheDocument()
+    expect(getByText('Content 1').parentElement).toHaveClass('max-h-0')
+    expect(getByText('Content 2').parentElement).toHaveClass('max-h-0')
+  })
+})

src/components/Accordion/index.stories.tsx

@@ -0,0 +1,75 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from '.'
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    docs: {
+      toc: {
+        title: 'On this page',
+        disable: false,
+      },
+    },
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of accordion items with title and content',
+      table: {
+        type: { summary: 'AccordionProps[]' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes for customization',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+} as Meta<typeof Accordion>
+
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `<Accordion items={[{ title: 'Item 1', content: 'Content 1' }, { title: 'Item 2', content: 'Content 2' }]} />`,
+      },
+    },
+  },
+  args: {
+    items: [
+      { title: 'Accordion Item 1', content: 'This is the content of item 1.' },
+      { title: 'Accordion Item 2', content: 'This is the content of item 2.' },
+      { title: 'Accordion Item 3', content: 'This is the content of item 3.' },
+    ],
+  },
+}
+
+export const WithLongContent: Story = {
+  args: {
+    items: [
+      {
+        title: 'Accordion with long content',
+        content:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet.',
+      },
+      {
+        title: 'Another Item',
+        content: 'Short content here.',
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Accordion items={[{ title: 'Accordion with long content', content: 'Lorem ipsum...' }, { title: 'Another Item', content: 'Short content' }]} />`,
+      },
+    },
+  },
+}

src/components/Accordion/index.tsx

@@ -0,0 +1,73 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+
+type AccordionItemProps = {
+  title: string
+  content: string
+}
+
+type AccordionProps = {
+  items: AccordionItemProps[]
+  className?: string
+  width?: string
+}
+
+export const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  content,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const toggleExpand = () => setIsExpanded(!isExpanded)
+
+  return (
+    <div className="max-w-full p-4 border-b border-gray-300 rounded-lg">
+      <div className={classNames(`flex justify-between items-center w-full`)}>
+        <span className="font-semibold text-slate-700">{title}</span>
+
+        <button
+          onClick={toggleExpand}
+          aria-expanded={isExpanded}
+          className="ml-3"
+        >
+          {isExpanded ? (
+            <ChevronUpIcon
+              className="w-6 h-6 cursor-pointer"
+              strokeWidth={2}
+              stroke={'#704FFB'}
+            />
+          ) : (
+            <ChevronDownIcon
+              className="w-6 h-6 cursor-pointer"
+              strokeWidth={2}
+              stroke={'#704FFB'}
+            />
+          )}
+        </button>
+      </div>
+
+      <div
+        className={classNames(
+          'overflow-hidden transition-all duration-300',
+          isExpanded ? 'max-h-40 opacity-100 mt-3' : 'max-h-0 opacity-0',
+        )}
+      >
+        <p className="text-slate-700 leading-6">{content}</p>
+      </div>
+    </div>
+  )
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  className = '',
+  width = '700px',
+}) => {
+  return (
+    <div className={className} style={{ width }}>
+      {items.map((item, index) => (
+        <AccordionItem key={index} title={item.title} content={item.content} />
+      ))}
+    </div>
+  )
+}