MetaMask / MetaMask/metamask-mobile
Create component: Toggle
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### **Description**
Describe the component. Example: What is it and what is it meant to be used for?
For more context, it is recommended to reference a Figma link or post a screenshot of the component in this section.
Example Screenshot:

### **Technical Details**
Unless audited by Design System - Place component in `components-temp` directory location in `app/component-library/components-temp` directory.
- Component Structure (Assume `NAME` = your component's name)
- Under `NAME` directory
- [ ] `NAME`.tsx - Actual component file.
- [ ] `NAME`.types.ts - Includes all TypeScript related types/interfaces/enums etc.
- [ ] `NAME`.styles.ts - Includes styles for the `NAME` component.
- [ ] `NAME`.test.tsx - Includes both snapshots AND unit tests.
- [ ] `NAME`.stories.ts - Includes stories for the `NAME` component.
- [ ] `NAME`.constants.ts - Includes any constants that is used in any `NAME` file. For example, test IDs for tests, mappings for the component, etc.
- [ ] `NAME`.utils.ts - Includes any utility functions specific to be used with the `NAME` component.
- [ ] index.ts - Exports both `NAME` component as default and anything else such as types, test IDs, etc if needed.
- [ ] README.md - Documentation on how the `NAME` component will be used and the props associated with it.
- Caveat
- Components may differ in terms of files to include depending on what is needed.
- For example - you might not need a constants file or a styles file depending on how the component is built.
- A more specific example - you can omit the styles file if your component doesn't require styles. Just use your best judgement.
- Refer to an example component such as `AvatarFavicon` for more details.
### **Acceptance Criteria**
- [ ] Snapshot and unit tests pass
- [ ] Storybook shows interactive version of component. Include screenshot or video in pull request for visual reference.
- [ ] Component structure should resemble the structure listed in the Technical Details section above.
### **References**
- References go here.
- Figma links.
- Slack threads.
- Etc.
Contributor guide
Assessment
This issue has not been assessed yet.