DXP step-by-step walkable demos: components and rendering infrastructure

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Clay, JS APIs and Utilities
• Labels:
  • fc_22_04
  • fi-s-capy
  • fi-s-clay
  • now-dxp
  • team_fi_epic_category_frontend_components
  • team_fi_epic_category_platform_architecture
• Epic/Theme:
  • lxc-dxp
• Story Points: 1
• Main Core Job: Engage - Inform Users
• Secondary Core Job(s):
  Engage - Discover Content and Products
• Epic Status: To Do
• Sprint: S05E04 - Half Life

DXP does not have a native mechanism to help users to understand how features work. To solve this need, a collaboration between Delta and FI teams was created, which goal is to provide a new component that allows to guide user through a set of steps to utilize a product feature.

The basic pieces of this feature are distributed along 2 separate epics (this one led by Frontend Infrastructure team and LPS-146819, led by Delta team) with some interdependencies as follows:

• Delta: A design requested in DESIGN-664 as part of LPS-146819
• FI: Implementation of UI components as per the design. Depends on DESIGN-664
• Delta: A JSON -based mechanism (LPS-146819), with 2 subtasks
  • file format definition to allow describing the steps making up the walktrhough at site level (LPS-150776)
  • Provide storage & provision mechanism for the step-by-step JSON file (LPS-150778)
• FI: Rendering the UI components in DXP according to the available JSON file to provide the walktrhough. Depends on LPS-150776 and LPS-150778)
• Delta: Allow step-by-step demo to be provisioned from a site initializer and create a sample (LPS-150865, task of LPS-146819).Depends on all above things

The goal of this epic is to provide the UI components that will be rendered as part of the walkable demo UX and integrate them into DXP page render logic according to the JSON specification available in the current site.

Acceptance criteria

• DXP provides the required components needed to provide the step-by-step experience: <WalkthoughStep>, <Hotspot> and <Popover>
• Provided components match design specifications
• When rendering a DXP page, system must be able to know whether a walktrhough step has to be rendered or not. 
• Component behavior is described in a JSON object provided to the page at render time. This includes placement, associated UI item to highlight, step order, instructions and other interactions
• If a walkthrough step has to be rendered in the page, then page will output the necessary JS  along with the JSON, so the first step of the walkthrough defined for that page will be rendered
• If there are no defined steps for a page, no additional JS should be added to the page
• An instance-level setting will be available to enable/disable walkthroughs