Apply column layout to migration instructions

[andres-blanco]

Closes DOTOBRD-64

Proposed Changes

Apply the new container v2 column layout to the site migration instructions step.

This is still a WIP since

• we might need some changes on the new Layout or design input.
• I need to conditionally add support when no preview is available.
• Fix the tests

Desktop with preview

before	after

Mobile with preview

before	after

Desktop without preview

before	after

Mobile without preview

before	after

Why are these changes being made?

To conform with the rest of the onboarding design

Testing Instructions

• Open the calypso.live link in the comments
• Navigate to /setup/site-migration
• Enter a WP site (a jurassic ninja site will work)
• Click on the top right link to go through the Do it yourself experience
• Pay
• Check the mobile/desktop view
• Remove the from query param from the URL and reload to load the view without preview.
• Check the mobile/desktop view without the preview

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145152

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145152&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-145152&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• help-center
• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug DOTOBRD-64-apply-new-layout on your sandbox.

[gabrielcaires]

We should use an aria label to describe the preview panel, something like:
<div aria-label= {translate("Preview image from my")}>

and
getByLabelText

[fditrapani]

Tested with the preview and without. Looks good to me!