Skip to content

[Feat]: New Interactive Card component #340

@HaykKirakosyanSoft

Description

@HaykKirakosyanSoft

Component

Interactive Card

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

Interactive Card component displays information and engage users through actionable content. Unlike static cards, Interactive Cards respond to user interactions, such as clicks or hovers, triggering actions or revealing additional information.

Describe the solution you'd like

Acceptance Criteria
Implementation: Build the component using TypeScript and SCSS (BEM methodology), integrating design tokens from @geneui/tokens.

Variants: Support all visual styles, sizes, and interactive states (hover, active, selected, disabled) from the design.

Interactivity: Support click handlers, and visual feedback for user interactions.

RTL Support: Ensure the component layout and icons adapt correctly for Right-to-Left languages.

Accessibility: Implement necessary ARIA attributes for screen reader compatibility.

Documentation: Create Storybook stories that cover all props and variations.

Testing: Write unit tests using Jest to validate component functionality and props.

Checklist:

  • Component implemented in TS/SCSS.
  • All design variants, sizes, and states are included.
  • RTL and accessibility support is added.
  • Storybook stories are created.
  • Unit tests are written.
  • Final implementation matches the Figma design.

Describe alternatives you've considered

No response

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

yes

Additional context

No response

Metadata

Metadata

Labels

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions