feat: Create a reusable component for expandable section

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@hookform/resolvers": "^2.8.5",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",

src/ui/ExpandableSection/ExpandableSection.spec.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React, { ReactNode, useState } from 'react'
+
+import { ExpandableSection } from 'ui/ExpandableSection'
+
+interface TestExpandableSectionProps {
+  title: string
+  children: ReactNode
+}
+
+const TestExpandableSection: React.FC<TestExpandableSectionProps> = ({
+  title,
+  children,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <ExpandableSection>
+      <ExpandableSection.Trigger
+        isExpanded={isExpanded}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {title}
+      </ExpandableSection.Trigger>
+      <ExpandableSection.Content>{children}</ExpandableSection.Content>
+    </ExpandableSection>
+  )
+}
+
+describe('ExpandableSection', () => {
+  it('renders the title correctly', () => {
+    const title = 'Test Title'
+    render(
+      <TestExpandableSection title={title}>
+        <div>Content</div>
+      </TestExpandableSection>
+    )
+    const titleElement = screen.getByText(title)
+    expect(titleElement).toBeInTheDocument()
+  })
+
+  it('renders the children correctly after expanding', async () => {
+    render(
+      <TestExpandableSection title="Test Title">
+        <div>Test Content</div>
+      </TestExpandableSection>
+    )
+
+    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(
+      <TestExpandableSection title="Test Title">
+        Test Content
+      </TestExpandableSection>
+    )
+
+    const button = screen.getByRole('button')
+
+    await userEvent.click(button)
+    const contentElement = screen.getByText('Test Content')
+    expect(contentElement).toBeInTheDocument()
+
+    await userEvent.click(button)
+    const contentElementAfterCollapse = screen.queryByText('Test Content')
+    expect(contentElementAfterCollapse).not.toBeInTheDocument()
+  })
+})

src/ui/ExpandableSection/ExpandableSection.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import { ExpandableSection } from './ExpandableSection'
+
+const meta: Meta<typeof ExpandableSection> = {
+  title: 'Components/ExpandableSection',
+  component: ExpandableSection,
+}
+export default meta
+
+type Story = StoryObj<typeof ExpandableSection>
+
+const DefaultStory: React.FC = () => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  return (
+    <ExpandableSection>
+      <ExpandableSection.Trigger
+        isExpanded={isExpanded}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        Expandable Section
+      </ExpandableSection.Trigger>
+      <ExpandableSection.Content>
+        This is the content of the expandable section.
+      </ExpandableSection.Content>
+    </ExpandableSection>
+  )
+}
+
+const WithHtmlContentStory: React.FC = () => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  return (
+    <ExpandableSection>
+      <ExpandableSection.Trigger
+        isExpanded={isExpanded}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        Expandable Section with HTML
+      </ExpandableSection.Trigger>
+      <ExpandableSection.Content>
+        <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>
+      </ExpandableSection.Content>
+    </ExpandableSection>
+  )
+}
+
+export const Default: Story = {
+  render: () => <DefaultStory />,
+}
+
+export const WithHtmlContent: Story = {
+  render: () => <WithHtmlContentStory />,
+}

src/ui/ExpandableSection/ExpandableSection.tsx

@@ -0,0 +1,67 @@
+import * as Collapsible from '@radix-ui/react-collapsible'
+import cs from 'classnames'
+import React, { forwardRef, ReactNode } from 'react'
+
+import Icon from 'ui/Icon'
+
+const ExpandableSectionRoot = forwardRef<
+  React.ElementRef<typeof Collapsible.Root>,
+  React.ComponentPropsWithoutRef<typeof Collapsible.Root>
+>(({ children, className, ...props }, ref) => (
+  <Collapsible.Root
+    className={cs('my-2 border border-gray-200', className)}
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </Collapsible.Root>
+))
+
+ExpandableSectionRoot.displayName = 'ExpandableSectionRoot'
+
+interface ExpandableSectionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Collapsible.Trigger> {
+  isExpanded: boolean
+  children: ReactNode
+}
+
+const ExpandableSectionTrigger = forwardRef<
+  React.ElementRef<typeof Collapsible.Trigger>,
+  ExpandableSectionTriggerProps
+>(({ isExpanded, className, children, ...props }, ref) => (
+  <Collapsible.Trigger asChild>
+    <button
+      className={cs(
+        'flex w-full items-center justify-between p-4 text-left font-semibold hover:bg-gray-100',
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <span>{children}</span>
+      <Icon name={isExpanded ? 'chevronUp' : 'chevronDown'} size="sm" />
+    </button>
+  </Collapsible.Trigger>
+))
+
+ExpandableSectionTrigger.displayName = 'ExpandableSectionTrigger'
+
+const ExpandableSectionContent = forwardRef<
+  React.ElementRef<typeof Collapsible.Content>,
+  React.ComponentPropsWithoutRef<typeof Collapsible.Content>
+>(({ children, className, ...props }, ref) => (
+  <Collapsible.Content
+    className={cs('border-t border-gray-200 p-4', className)}
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </Collapsible.Content>
+))
+
+ExpandableSectionContent.displayName = 'ExpandableSectionContent'
+
+export const ExpandableSection = Object.assign(ExpandableSectionRoot, {
+  Trigger: ExpandableSectionTrigger,
+  Content: ExpandableSectionContent,
+})

src/ui/ExpandableSection/index.ts

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