(Optional) Pattern Assembler: Make a new preview component to preview the selected patterns

[arthur791004]

Description

We want to show the preview of the selected patterns and the user could easily know what their home page look like. We could re-use the <WebPreview /> component and make a new toolbar for it.

7l53h5fxAUNjVRBQ82YFwn-fi-238%3A41198

Acceptance Criteria

• This component could be shared in both [Spike/Research] Style Selection in the onboarding Design Picker #66456 and [Spike/Research] Blank Canvas: Pattern Assembler in onboarding #66589

Desktop

• The preview toolbar contains dots, the URL bar, and the device switcher. But according to this, we could use <WebPreview /> component first and do it in the next iteration
• (optional) A scale selector on the left side of the device switcher but it will be next iteration. See https://www.figma.com/file/7l53h5fxAUNjVRBQ82YFwn?node-id=249:41386#249913056

Mobile

UPDATE: we will not being creating a mobile version in this release. Please see pbxlJb-2ki-p2#user-facing-acceptance-criteria

• The preview toolbar should be hidden
  

See pbxlJb-2gk-p2#mobile

Dev Tasks

• TBD

Related

• [Spike/Research] Blank Canvas: Pattern Assembler in onboarding #66589

[miksansegundo]

The team Cylon were recently working on the component <WebPreview> as part of LaunchPad v1. Here is a conversation about the changes.

[arthur791004]

Close it via #67424 and we decided to re-use the existing layout of the device switcher. See 7l53h5fxAUNjVRBQ82YFwn-fi-256%3A42065