Description:

The Tabs component allows users to navigate between multiple views or sections within the same context. This component is ideal for use in dashboards, settings pages, or any interface requiring content organization in a compact and user-friendly manner.

Requirements:

1. Component Implementation:

• Implement the Tabs component in TypeScript.
• Utilize SCSS with BEM methodology for styling.
• Integrate design tokens from @geneui/tokens for consistent colors, typography, spacing, and hover/focus states.
• Support vertical and horizontal layouts with customizable tab alignment (e.g., left, center, right).
• Provide options for dynamic tabs, lazy loading of tab content, and indicator animations.

2. Unit Tests:

• Write unit tests using Jest and React Testing Library.
• Ensure test coverage for all props, including rendering different layouts, dynamic tab additions, and lazy-loaded content.
• Test for edge cases such as empty tabs, unsupported layouts, and rendering with long or truncated tab labels.

3. Storybook Stories:

• Create a Storybook story for the Tabs component.
• Showcase different configurations, such as vertical vs. horizontal layouts, alignment options, and dynamic tabs.
• Create controls for the props so users can interact with the Tabs component in Storybook.
• Document all props of the public interfaces.

4. Figma Design:

Follow the design outlined in the provided Figma link.

Checklist:

• Component is implemented in TypeScript.
• Styling follows SCSS using BEM methodology.
• Design tokens from @geneui/tokens are used for colors, typography, and spacing.
• Unit tests written and cover different states and edge cases.
• Storybook stories created with examples of all props and configuration options.
• Figma design matches the component implementation.