MetaMask / MetaMask/metamask-extension
Add Storybook Documentation for LottieAnimation Component
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
### What is this about?
Add Storybook documentation for the `LottieAnimation` component. This component has been introduced for micro animations and motion standards across MetaMask mobile and extension platforms, but currently lacks documentation in Storybook. Proper documentation will facilitate future development and ensure consistency in the use of animations.
### Scenario
_No response_
### Design
_No response_
### Technical Details
- Create a Storybook entry for the `LottieAnimation` component.
- Ensure the documentation covers:
- Available props for the component.
- Example use cases in both mobile and extension environments.
- Clear guidelines on how to implement the component in various contexts.
- Include any necessary information about loading animations, format requirements, and performance considerations for Lottie files.
### Threat Modeling Framework
_No response_
### Acceptance Criteria
- The `LottieAnimation` component should have a complete and clear entry in Storybook.
- Props and usage examples are documented and easy to understand.
- The documentation should be accessible and cover both mobile and extension use cases.
- The component should be visually represented with functional examples.
### Stakeholder review needed before the work gets merged
- [X] Engineering (needed in most cases)
- [X] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)
### References
- https://github.com/MetaMask/metamask-extension/pull/27632
- https://github.com/MetaMask/metamask-extension/pull/27650
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the LottieAnimation component and reviewing the referenced pull requests #27632 and #27650 to understand its existing implementation and Storybook conventions. Done means a functional Storybook entry documents its props, mobile and extension examples, loading and format requirements, and performance guidance, with visual examples that receive engineering and design review.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100