Implement DesignButtonCover to show the Start and Preview buttons when you hover on the design so that we can choose different options.
Use stepSectionName to decide the selected design and then we can preview and back easliy.
Use /template/demo endpoint to show the preview with translation. The only problem I have no idea is that when I use this endpoint as previewUrl for <WebPreview /> component, it will misunderstand the loading result as failure and redirect the whole page. Therefore, I use disableRedirects to fix this problem temporarily
Use next button base on #56311 to show Start with <theme> button on the top-right corner.
Make <WebPreview /> component accept toolbarComponent so that we can customize the toolbar we need
Don’t show DesignButtonCover on mobile because it cannot preview different device
Demo
design-preview-demo.mov
Preview with translation
Dev Testing instructions
Apply D67443-code and follow its TEST PLAN (Deployed), but ensure pointing your API to production because iframe preview doesn’t work on the sandbox. See: p1632891540262700-slack-C029SB8JT8S
Go to /start/setup-site?siteSlug=<your_site>
Hover on the design
Select Preview <design_name>
Choose different devices
Click Start with <design_name> button at top-right corner
User Facing (non-dev) Testing instructions
Go to https://container-vigilant-gould.calypso.live/start/domains?flags=signup/setup-site-after-checkout
Go through the signup flow and get to the Design Picker
Hover on any design
Select Preview <design_name>
Choose different devices
Click Start with <design_name> button at top-right corner
