[React Native]: Create Tabs component in shared UI component library

[georgewrmarshall]

Description

Create a reusable Tabs component for the shared UI component library. The component should follow the design standards outlined in the Tabs Audit & Insights FigJam Board. This task is part of the migration to the new shared UI component library, ensuring consistency with the conventions set by existing components.

Technical Details

• Component Implementation:

  • Build using React Native and TypeScript.

• Integration:

  • Ensure compatibility with twrnc or any relevant design system tokens (e.g., spacing, colors, typography).
  • Align with global typography and accessibility standards outlined in the Tabs Audit.

• Testing:

  • Integrate unit tests using Jest and React Testing Library.
  • Add accessibility tests to ensure ARIA compliance for keyboard and screen reader users.

• Documentation:

  • Provide detailed usage examples for different variants, sizes, and states.
  • Include a storybook story for each prop and for default configurations.

Acceptance Criteria

• The Tabs component should match the design specs in the Tabs Audit & Insights FigJam Board.
• Component implementation must cover the following:
  • Proper alignment with typography and spacing standards.
  • Compatibility with all design system color tokens and themes.
  • Inclusion of hover, focus, and active states.
• Unit tests must cover at least 80% of the component’s functionality, including interactivity and accessibility.
• Component must be reviewed and approved by both engineering and design teams.
• Documentation for the component should be added, covering usage, available props, and examples.
• Ensure all aspects meet the Definition of Done

References

• Tabs Audit & Insights FigJam Board
• Definition of Done