[Feat]: New DataCard component

[GaroGabrielyan]

Component

DataCard

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

The DataCard component is a flexible container designed to display a collection of related data points. On larger screens, it appears as a card, while on mobile, it should adapt into a table-like structure for better readability. The card as a whole can be interactive, redirecting to a detailed page on click. Additionally, it can contain a dedicated footer with actions, such as buttons for editing or deleting the item. Its primary use is to summarize information on dashboards or in lists where each item needs to be actionable.

Describe the solution you'd like

Requirements:

1. Component Implementation

   • Implement the DataCard component in TypeScript.

   • Utilize SCSS with BEM methodology for styling.

   • Responsive Layout: The component must display as a card on desktop and transform into a table layout on mobile viewports.

   • Integrate design tokens from @geneui/tokens for consistent colors, font sizes, spacing, and border radius.

2. Unit Tests

   • Write unit tests using enzyme.

   • Ensure test coverage for all props, including the title, data rows, and footer elements.

   • Test individual footer button actions.

3. Storybook Stories

   • Create a Storybook story for the DataCard component.

   • Showcase different configurations, including cards with varying amounts of data and with/without a footer.

   • Provide a clear example demonstrating the RTL layout.

   • Document all props of the public interfaces.

Describe alternatives you've considered

No response

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

yes

Additional context

Checklist:

• - Component is implemented in TypeScript.

• - Styling follows SCSS using BEM methodology.

• - Component is fully responsive (card/table).

• - Design tokens from @geneui/tokens are used.

• - Full RTL support is implemented correctly.

• - Unit tests are written and cover interactivity and responsive states.

• - Storybook stories are created for all variations and props.

• - Component matches the Figma design specification.