The three statuses above and their possible values:

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

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	Hilary Gordon (Deactivated) Kavya Basu
Slack channel	If one exists, paste a link to the working Slack channel...
Paragon Jira ticket	Insert a link to the Paragon ticket or epic for this component...
Other Jira tickets	Insert links to related work...
Design resources	Insert links to Figma or Miro design specs or explorations...
Technical docs	Insert a link to the tech docs when they are created...

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)

https://www.figma.com/file/2o1hW9WW1mNWr0esZ2A7xq/Onboarding?node-id=184%3A71

Best Practices

Do

Use when you need to introduce a new feature or new information to the user
Show only once in a learner journey and allow dismissibility if they aren’t interested in the content
Scroll the learner to the correct focus area as they sequence through (on mobile, that means scrolling the page for them)

Don't

Put a paragraph of text in the tip! Keep it short and sweet.
Put >5 in a sequence variant or the user will have fatigue

Related Components

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

Paste a link to a Figma frame here and choose "Display as embed"...

Behaviors

Click outside the tip when it’s being shown	Will not close; works like our current tooltip where you need to interact to close it
Clicking Dismiss (Sequence variant) or Okay (One-off variant)	Closes the tooltip
Clicking Next (Sequence variant)	Center screen on tooltip

Accessibility

Add rows to the table outlining focus management, semantic markup, or other a11y related specifications...

Notes

Notes from collaborator conversations or meetings regarding this component.