EuiTour component

[snide]

We'll need some sort of floating interpage point-to-point tour system in EUI. Mostly for elastic/kibana#16473 (comment) but I think everyone will have use for it.

Related Kibana issues

• Global Kibana concept (May 2018): Add Product Tour to Kibana kibana#18787
• Canvas Getting Started concept (Dec 2019): [Canvas] Add a Getting Started empty state prompt kibana#52750

---

Use cases / requirements

• Introduce new users to a Kibana, solutions, and/or underlying applications
• Keep it fairly short and compact (3-7ish steps?; limited text on each panel/tour stop)
• Implementer defines a specific step-by-step flow
• User may/may not interact with the tour stop directly. Passive tour (confirm step 'Ok, got it'), Interactive (complete a task in the UI to proceed)
• Once completed, hide tour per user (localStorage?)
• Ability to restart tour (from global help menu?)
• Ability to skip (and disable) the tour, per user
• Disable tours globally for all users (out of EUI scope; write as a guideline; e.g. Kibana advanced setting)

Accessibility notes

• Can tab to tour and dismiss/confirm (passive) or receive instructions on how to complete (UI interaction)
• If interactive, tab from tour stop directly to relevant place in UI to complete task?
• Indicate the total number of steps and current step number visually and in voiceover

EUI considerations

• Implementer defines steps in sequence; identifies currently active step
• Assign or attach to a UI element?
• Positioning works like popover or tooltip?
• Uniquely identify/namespace the tour (e.g. scope to the Canvas app)
• Accepts title and description/body (e.g. could include paragraphs, code blocks, image/screenshot, etc.)
• Include a beacon to draw visual attention to the tour stop (animate with CSS)

Sample of guided tour approach

[alexfrancoeur]

New issue to track: elastic/kibana#18787