As a UX Designer I can edit my style book while previewing the effect on any page of the site

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Product Menu, Style Books
• Labels:
  • d_20_06
  • fc_20_07
  • fc_20_08
• Epic Link: Allow teams to create and edit a customizable set of style guides for consistent experience

Intro/Context:

It is an art to define the right combination of token values, its even more difficult without looking at the result of a combination of values on a real page.

To be able to assist the UX Designer in editing the values of the tokens and set the right ones, it should be possible to view the result of a change on a page while editing the tokens.

The goal of the story is to allow UX Designer define the default values of the tokens while looking at the result on a real given page.

-

When the UX Designer is editing a StyleBook

Then he/she can visualise a page and keep editing the tokens while previewing the changes on a given (default) page.

-

When the UX Designer has edited the StyleBook

Then he/she can save it.

-

 

Figma Mockup

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
Can not preview style book when there are no pages in site	High	Manual	no	no	Yes
Can preview the effect on page when edit the style book	Critical	Manual	no	no	Yes
Can navigate to preview page via page preview info bar but not interact with preview page in style book editor	High	Manual	no	no	Yes
Can preview the effect on page when edit the style book in Staging site	High	Manual	no	no	Yes