MetaMask / MetaMask/metamask-design-system
[React]: Create `Tabs` component in shared UI component library
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **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](https://www.figma.com/board/umuGIdF6XJDmBw0r2mLjLg/Tabs%3A-Audit-%26-Insights?node-id=0-1&t=E55yVcSF6yDyfUld-1). 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 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](https://www.figma.com/board/umuGIdF6XJDmBw0r2mLjLg/Tabs%3A-Audit-%26-Insights?node-id=0-1&t=E55yVcSF6yDyfUld-1).
- 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](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c)
### **References**
- [Tabs Audit & Insights FigJam Board](https://www.figma.com/board/umuGIdF6XJDmBw0r2mLjLg/Tabs%3A-Audit-%26-Insights?node-id=0-1&t=E55yVcSF6yDyfUld-1)
- [Definition of Done](https://www.notion.so/metamask-consensys/Definition-of-Done-778a1a8b231d4b8a99b6ad4bc115056a?pvs=4#c63409afae6b47d6a92e975d47c3737c)
Contributor guide
Assessment
This issue has not been assessed yet.