READY FOR REVIEW DESIGN IN PROGRESS IMPLEMENTATION PENDING
The purpose of the product tour component is to point out and describe information on a page that users need to learn about. It includes navigation dots and a carat.
Contributors | |
---|---|
Slack channel | |
Paragon Jira ticket | |
Other Jira tickets | |
Design resources | |
Technical docs |
Design
https://www.figma.com/file/2o1hW9WW1mNWr0esZ2A7xq/Onboarding?node-id=156%3A64🌳 Variants
Sequence: A version with navigation dots that are bundled and contain at least 2 tips (pictured above)
Navigation dots to indicate progress through sequence
Dismiss (tertiary button) and Next (Primary)
Last tip in a sequence will change Primary button to “Done”
One-off: A version that is standalone
No navigation dots (N/A)
No dismiss, just an “Okay” button (Primary)
🌞 Best Practices
Do |
|
Don't |
|
♊ Related Components
📐 Specification
What does an engineer need to know in order to build this component?
Redlined Design Spec
♒ Behaviors
Click outside the tip when it’s being shown | What should happen here? Do we close it automatically or do we block interaction while it’s open? |
---|
💕 Accessibility
Notes
Notes from collaborator conversations or meetings regarding this component.