We're trying to replicate the same spotlight effect we see during the WooCommerce's product page tour. We'll show a gradient over the rest of the screen and put spotlight on the element we need to focus on.
We should be able to put spotlight on multiple elements. For example, in the Course Outline block, we may need to put spotlight on both the '+' button and the context menu that opens after clicking it.
[List of steps with elements to focus on will be added here]
Scope
Showing spotlight
Screen resizings
Scrolling
Focused element size getting changed (For example, if a lesson gets added in the Course Outline block, it'll get bigger, the spotlight needs to cover that)
Handle the focused element getting removed, closed (like menu), re-added etc cases
Showing a gray overlay effect like Woo does on the screen outside the element with spotlight
Out of Scope
Showing the tooltip-style tour like Woo does. We're only working on creating the spotlight effect here.
Acceptance Criteria
Scenario: Happy PathGiven I have opened the Course editor
When I am taking the tour
Then I see the spotlight on the focus element for each tour step
Scenario: Screen resize
Given* I have opened the Course editor
When I am taking the tour
And I am resizing the browser window
Then I see the spotlight size and position getting adjusted based on the size and position of the focus element
Scenario: Focus element resize
Given* I have opened the Course editor
When I am taking the tour
And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it)
Then I see the spotlight size getting adjusted based on the size of the focus element
Scenario: Focus element resize
Given* I have opened the Course editor
When I am taking the tour
And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it)
Then I see the spotlight size getting adjusted based on the size of the focus element
Imran92
commented
7 months ago
Goal
We're trying to replicate the same spotlight effect we see during the WooCommerce's product page tour. We'll show a gradient over the rest of the screen and put spotlight on the element we need to focus on.
Context [Optional]
We can follow the logic WooCommerce have for it here - https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/client/guided-tours/add-product-tour/index.tsx
We should be able to put spotlight on multiple elements. For example, in the Course Outline block, we may need to put spotlight on both the '+' button and the context menu that opens after clicking it.
[List of steps with elements to focus on will be added here]
Scope
Out of Scope
Acceptance Criteria
Scenario: Happy Path Given I have opened the Course editor When I am taking the tour Then I see the spotlight on the focus element for each tour step
Scenario: Screen resize Given* I have opened the Course editor When I am taking the tour And I am resizing the browser window Then I see the spotlight size and position getting adjusted based on the size and position of the focus element
Scenario: Focus element resize Given* I have opened the Course editor When I am taking the tour And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it) Then I see the spotlight size getting adjusted based on the size of the focus element
Scenario: Focus element resize Given* I have opened the Course editor When I am taking the tour And The current element in focus is an element that can change size (like the Course Outline block when it gets a new lesson added in it) Then I see the spotlight size getting adjusted based on the size of the focus element
Resources
Woo product tour
https://github.com/Automattic/sensei/assets/6820724/79629cf8-c843-4d91-bcf7-7712916be0d0