[Feat]: New Accordion Component

[HaykKirakosyanSoft]

Component

Accordion

Is your feature request related to a problem? Please describe.

Accordion component organizes content into expandable and collapsible sections, allowing users to reveal or hide detailed information as needed. Each section, or "panel," typically includes a header that summarizes the content and can be clicked to expand or collapse the corresponding panel.

Describe the solution you'd like

Requirements:

Component Implementation

Implement the Accordion component in TypeScript with a parent-child structure (Accordion and AccordionItem). The component must support dynamic content and handle expand/collapse interactions.

Use SCSS with BEM methodology for styling to maintain a clean separation between structure and presentation.

Integrate design tokens from @geneui/tokens for consistent usage of colors, typography, spacing, borders, and shadows following Gene UI visual guidelines.

Support Key Features:

Parent-Child Structure: Accordion wrapper component that provides context (size) to AccordionItem children via React Context.

Size Variants: Support three size variants (large, medium, small) that control the overall appearance of accordion items.

Expandable Content: Each AccordionItem can be expanded or collapsed independently, showing/hiding its content area.

Header Elements: Each accordion item header includes:

• Chevron icon that rotates/changes based on expanded state
• Optional icon before the title (IconBefore prop)
• Title text with ellipsis for long titles
• Optional action buttons (array of button props) displayed in a ButtonGroup

Content Area: Expandable body section with scrollable content using Scrollbar component when content exceeds available space.

Independent State: Each AccordionItem maintains its own expanded/collapsed state independently.

RTL Support: Ensure full Right-to-Left (RTL) support for layout, alignment, and positioning of controls and action buttons, including proper chevron icon direction.

Accessibility: Include full accessibility support with ARIA roles (aria-expanded), keyboard navigation, and focus management for all interactive elements.

Unit Tests:

Write comprehensive unit tests using Jest and Enzyme.

Ensure test coverage for all props and states, including edge cases:

Verify correct rendering of Accordion wrapper and AccordionItem components.

Test size context propagation from Accordion to AccordionItem.

Validate expand/collapse functionality for individual items.

Test independent state management (multiple items can be expanded simultaneously).

Verify correct rendering of IconBefore, title, and actions.

Test action buttons functionality and event handling.

Check display of children content when expanded.

Confirm proper RTL rendering and chevron icon direction.

Test keyboard accessibility and focus behavior.

Edge cases: empty actions array, missing IconBefore, long titles with ellipsis, multiple accordion items.

Storybook Stories:

Create detailed Storybook stories for the Accordion component.

Showcase all key use cases and states, including:

Default Accordion with multiple AccordionItems.

AccordionItem with all props (IconBefore, actions, children).

Different size variants (large, medium, small).

RTL layout example.

Interactive controls to test expand/collapse behavior.

Separate stories for Accordion wrapper and AccordionItem subcomponent.

Each story should include interactive props controls allowing users to modify component behavior.

Document all props, event handlers, and component structure.

Checklist:

• Component implemented in TypeScript with parent-child structure.

• Styling follows SCSS using BEM methodology.

• Design tokens from @geneui/tokens are consistently applied.

• Supports all defined features: size variants, expand/collapse, IconBefore, actions, independent state.

• Fully accessible (ARIA roles, keyboard navigation, focus management).

• RTL layout supported and verified.

• Unit tests written for all props, interactions, and edge cases.

• Storybook stories created for all component states with interactive examples.

• Implementation visually matches Figma design specifications.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes

Additional context

No response