search

MetaMask / metamask-extension

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites
https://metamask.io
Other
11.96k stars 4.89k forks source link

Create new seed phrase flow bread crumbs component #10897

Open danjm opened 3 years ago

danjm commented 3 years ago

A redesign of our onboarding flow can be found here https://www.figma.com/file/iCOjL3k1BkQqpYHFUVVFUZ/Extension-Onboarding?node-id=73%3A2

A number of the screens in that new flow have a breadcrumbs component.

Screenshot from 2021-04-17 13-58-19

This can specifically be seen in this part of the figma file: https://www.figma.com/file/iCOjL3k1BkQqpYHFUVVFUZ/Extension-Onboarding?node-id=173%3A1187

This task is to create this as a stand alone component. Because the screens in which the component will live are not yet in place, a storybook story can be added for the component. Run yarn storybook to see the current storybook stories. These are located through the the ui/app directory and have file names of *.stories.js

As can be seen in the designs, there are to be three "breadcrumbs" represented by the three circles. Each circle needs to be able to be in 3 different states (grey, highlighted border blue but white background, border blue and blue background. Whether the circles are in this state should be based on parameters the component receives from its parent. The component can be stateless.

BboyAkers commented 3 years ago

Still working on this, will try to create a PR in the next few days 🙂