Implement a DXP UI component to render walkthrough steps

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: JS APIs and Utilities
• Labels: None
• Story Points: 1
• Epic Link: step-by-step-demo-components
• Sprint: S05E03 - Tibia, S05E04 - Half Life, S05E05 - Tetris
• Git Pull Request: https://github.com/liferay-frontend/liferay-portal/pull/2164

Goal of this task is to create a DXP high-level react component in charge of:

• Building/configuring each specific walkthrough step for the current page, according to the JSON specification that applies to it (LPS-150776)
• Manage state of the walktrhough for the page: current step, current interaction mode (popover/hotspot)

Walktrhough steps managed by this component will be compositions of existing Clay components such as the ClayPopover or OverlayMask

Any additional component required to implement the walktrhough steps will be added to Clay in a new ticket in the current epic (Hotspot)

Acceptance criteria

• DXP includes a Walkthrough react component that takes a JSON object, already filtered with only the steps applicable to the current page
• Component will parse the JSON and set the initial state as first step in the list, then render it. By default, in this iteration, the initial step will be rendered in hotspot mode
• Component will render the current step as follows
  • If mode is hotspot, the <hotspot> will be rendered next to the current step's nodeToHighlight, according to the hotspot positioning policy defined in the JSON. If that node is not unique, it will use the first occurrrence and report a warning in the console
  • If mode is popover, component will render an overaly mask uncovering the current step's nodeToHighlight. If needed, vertical scroll will be made to position the nodeToHighlight in the visible area. Then, the popover will be rendered next to the highlighted element, according to the popover positioning policy defined in the JSON. 
  • Popover will contain a title and the content specified in the JSON (no translations supported in this iteration). Also, depending on the current step, popover will include buttons as per the design (first step, intermediate steps, last step)
• When closing the popover, component will switch to hotspot mode in the current step
• When clicking on the hotspot,  component will switch to popover mode in the current step

 

Test Scenarios:

Requirement	Test Scenarios	Covered by frontend/backend Unit Test?	Test Priority (business impact)	Chrome Pass/Fail
Sample walkthrough component that renders a clickable hotspot element on page as initial state.	Given: frontend-js-components-sample-web deployed to test page When: Navigate to Walkable tab on sample portlet Then: Hospot element is present And Then: popover element is not present	no	5-critical
When clicking on the hotspot, component will switch to popover mode in the current step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet When: Click hospot element Then: popover is present And Then: hotspot element is not present	no	5-critical
When closing popover, component will switch to hotspot mode in the current step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: Click hospot element When: Click close icon Then: hotspot element is present	no	5-critical
When closing popover, component will switch to hotspot mode in the current step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: Click hospot element When: Click on next step And When: Click on close icon Then: hotspot element is present on the 2nd element	no	4-major
In popover mode, component highlights the element in current step with either of the following: 1. The element is outlined with a shadow 2. The element does not have a shadow, and outside the element has a dark background overlay	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet When: Click hospot element Then: element is outlined with a shadow (depends on how the portlet is configured, may need to go to subsequent popovers)	no	2-low
A dark background overlay can be toggled per step with JSON.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet When: Click hospot element Then: outside the element has a dark background overlay (depends on how the portlet is configured, may need to go to subsequent popovers to check)	no	3-medium
In popover mode, popover contains a title and content specified in JSON.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet When: Click hospot element Then: title text is present on popover And Then: content is present on popover	no	5-critical
In popover mode, popover contains a button to transition to previous step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: popover mode When: navigate to 2nd step popover Then: Then previous step button is present And When: click on previous step button And Then: 1st step popover is present And Then: 2nd step popover is not present	no	5-critical
In popover mode, popover contains a button to transition to next step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: popover mode When: on 1st step popover Then: previous step button is not present And Then: the primary button next step is present And When: click on next step button Then: 2nd step popover is present And Then: 1st step popover is not present	no	5-critical
In popover mode, popover contains a button to transition to next step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: popover mode When: on 1st step popover And When: Click on next steps until final step Then: Able to reach final step 5 And Then: primary button is present And Then: secondary button previous step is present	no	5-critical
In popover mode, popover contains a button to transition to next step.	Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet And Given: popover mode When: on 1st step popover And When: Click on all next steps Then: transitions to hotspot mode And Then: hotspot is on final element And Then: popover is not present	no	5-critical
If the JSON file includes an element that does not exist on the page, when the walkthrough transitions to that step, then there would be an error message displayed to the user. User can still continue to previous/next steps.	Given: JSON file includes an element that does not exist on the page/sample portlet And Given: frontend-js-components-sample-web deployed to test page And Given: Navigate to Walkable tab on sample portlet When: popover mode transitions to the step that has no element Then: error message is displayed	no	3-medium

Exploratory Test Scenarios:

Requirement	Test Scenarios	Covered by frontend/backend Unit Test?	Test Priority (business impact)	Chrome (latest) Pass/Fail	Firefox (latest) Pass/Fail	Safari (latest) Pass/Fail	Edge (latest) Pass/Fail
	Given sample walkthrough component (Walkthrough tab in frontend-js-components-sample-web), check basic functionality and visually ok. 10 mins exploratory each browser.	no	3-medium	n/a
In hotspot mode, the hotspot element will be rendered next to current step and is visibly contained within boundaries of the page.	Manipulate browser page and location of hotpost element to try and break the UI	no	3-medium	n/a		n/a
In popover mode, popover is visibly contained within boundaries of the page, regardless of where the element is positioned on the page.	manipulate browser page and location of popover element to try and break UI	no	3-medium		n/a		n/a