Accordion

[synuns]

Component Function Definition

Accordion is a collection of vertically stacked interactive headings, where each heading can show or hide its associated content section.

• User interaction animation support

Design Requirements

Types

State

Anatomy

• Headers (Title)

• Icon (chevron arrow)

• Panels (Body Text)

• default design

  • Accordion.Root
    • border-radius: 12px
    • border: 1px solid #2d3748
    • background-color: #1a202c
    • padding: 20px
  • Accordion.Header
    • font-weight: 700
    • font-size: 14px
    • font-color: #ffffff
  • Accordion.Body
    • border-radius: 8px
    • background-color: #2d3748
  • Accordion.Content
    • font-color: #e4e4e7;
    • font-size: 14px;
    • font-weight: 600
    • margin-top: 12px;
    • padding: 12px 16px;

• design requirement

  • border
    • radius
    • color
    • width
  • padding
  • margin
  • background color
  • text
    • size
    • color
    • bold

Component Specifications

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <Accordion.Trigger>
        <AccordionArrowIcon/>
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Body>
     {/* contents */}
    </Accordion.Body>
  </Accordion.Item>
  ...
</Accordion.Root>

Technical Considerations

• Support for compound components pattern with composable interface
• Compliance with WAI-ARIA design patterns

Reference Materials

• Radix UI > Accordion
• Chakra UI > Accordion
• WAI-ARIA > Accordion Pattern
• Korea Desing System > Accordion
• SIPE > recruit page > Accordion
• Gmarket Design System
• 11st corporation Desgin Sytem

Additional Discussion Points

• Need to add media queries for responsive design
• Add Keyboard Interaction support

[kimdaeyeob]

After discussions with the originator of the issue, I switched the assignment to me.

cc. @synuns