feat: Create a reusable component for expandable section

src/ui/ExpandableSection/ExpandableSection.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import ExpandableSection from 'ui/ExpandableSection'
+
+describe('ExpandableSection', () => {
+  it('renders the title correctly', () => {
+    const title = 'Test Title'
+    render(
+      <ExpandableSection title={title}>
+        <div>Content</div>
+      </ExpandableSection>
+    )
+    const titleElement = screen.getByText(title)
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it('renders the children correctly after expanding', async () => {
+    render(
+      <ExpandableSection title="Test Title">
+        <div>Test Content</div>
+      </ExpandableSection>
+    )
+
+    const button = screen.getByRole('button')
+    await userEvent.click(button)
+
+    const contentElement = screen.getByText('Test Content')
+    expect(contentElement).toBeInTheDocument()
+  })
+
+  it('collapses the children after clicking the button twice', async () => {
+    render(
+      <ExpandableSection title="Test Title">Test Content</ExpandableSection>
+    )
+
+    const button = screen.getByRole('button')
+
+    await userEvent.click(button)
+    const contentElement = screen.getByText('Test Content')
+    expect(contentElement).toBeInTheDocument()
+
+    await userEvent.click(button)
+    expect(contentElement).not.toBeInTheDocument()
+  })
+})

src/ui/ExpandableSection/ExpandableSection.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import ExpandableSection from './ExpandableSection'
+
+type ExpandableSectionStory = {
+  title: string
+  children: React.ReactNode
+}
+
+const meta: Meta<ExpandableSectionStory> = {
+  title: 'Components/ExpandableSection',
+  component: ExpandableSection,
+  argTypes: {
+    title: {
+      description: 'Title of the expandable section',
+      control: 'text',
+    },
+    children: {
+      description: 'Content of the expandable section',
+      control: 'text',
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<ExpandableSectionStory>
+
+export const Default: Story = {
+  args: {
+    title: 'Expandable Section',
+    children: 'This is the content of the expandable section.',
+  },
+  render: (args) => <ExpandableSection {...args} />,
+}
+
+export const WithHtmlContent: Story = {
+  args: {
+    title: 'Expandable Section with HTML',
+    children: (
+      <div>
+        <p>This is the content of the expandable section.</p>
+        <p>
+          It can contain HTML elements like <strong>bold text</strong> and{' '}
+          <em>italic text</em>.
+        </p>
+      </div>
+    ),
+  },
+  render: (args) => <ExpandableSection {...args} />,
+}

src/ui/ExpandableSection/ExpandableSection.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode, useState } from 'react'
+
+import Icon from 'ui/Icon'
+
+interface ExpandableSectionProps {
+  title: string
+  children: ReactNode
+}
+
+const ExpandableSection: React.FC<ExpandableSectionProps> = ({
+  title,
+  children,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className="my-2 border border-gray-200">
+      <button
+        onClick={() => {
+          setIsExpanded(!isExpanded)
+        }}
+        className="flex w-full items-center justify-between p-4 text-left font-semibold hover:bg-gray-100"
+      >
+        <span>{title}</span>
+        <Icon name={isExpanded ? 'chevronUp' : 'chevronDown'} size="sm" />
+      </button>
+      {isExpanded && (
+        <div className="border-t border-gray-200 p-4">{children}</div>
+      )}
+    </div>
+  )
+}
+
+export default ExpandableSection

src/ui/ExpandableSection/index.ts

@@ -0,0 +1 @@
+export { default } from './ExpandableSection'