Add additional WooCommerce onboarding styling to connection flow

[justinshreve]

This PR implements the remaining missing styles for the WooCommerce/Jetpack onboarding connection flow. This includes the white header bar, width/spacing changes, link and color treatments, and the largest visual change: Muriel/Material styled form components.

It is only enabled in development, is only active through a specific connection flow, and builds upon the previously merged PRs: #32993 and #33073.

This PR implements a temporary Muriel styled TextControl component in client/extensions/woocommerce/components that matches the interface of @wordpress/components's TextControl and the calypso-ui component proposed at #34277. This PR can be switched over to use the calypso-ui component, once it is unblocked by WordPress/gutenberg#16227. (The login code is loaded via SSR). This temporary component allows us to test the styles all together, and allows me to keep iterating unblocked on the WooCommerce.com styles next (which are also hosted in Calypso).

Closes woocommerce/woocommerce-admin#2166. Closes woocommerce/woocommerce-admin#2152.

Screenshots

Testing instructions

• Disconnect Jetpack from your site
• npm install to get the updated color-studio package
• npm start

--

If you have WooCommerce / WooCommerce Admin Installed:

• Enable the onboarding flow in WooCommerce Admin and to tell it to point at local Calypso.
  • Start WooCommerce in development (not plugin) mode
  • Define the following constant in your wp-config.php or a plugin file: define( 'WOOCOMMERCE_CALYPSO_LOCAL', true );.
  • Make a POST request to /wp-json/wc-admin/v1/onboarding/profile on your local site, setting skipped and completed to false.
• Visit /wp-admin/admin.php?page=wc-admin on your local site, and the onboarding wizard should be displayed.
• Click Get Started, and then Activate & Continue.

If you don't want to install WooCommerce Admin:

• Disconnect Jetpack from your site
• Click “Setup Jetpack”.
• On the connection/authorization screen ( https://wordpress.com/jetpack/connect/authorize?client_id= ….. ) copy and paste the whole URL.
• Replace https://wordpress.com with http://calypso.localhost:3000 and replace the from parameter in the URL (it may be something like connection-banner or landing-page-bottom) with from=woocommerce-setup-wizard . See Pastebin 213d5 or ping me if you have issues.

---

• Walk through the login and sign-up flows. View both views via the link in the footer. Test typing in the inputs.

• Open config/development.json and disable the jetpack/connect/woocommerce flag. Refresh the login and sign-up pages and verify the existing Jetpack connection flow appears.

[matticbot]

Test live: https://calypso.live/?branch=update/woocommerce-onboarding-connect

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~56 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest       -336 B  (-0.2%)      -56 B  (-0.2%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~4 bytes added 📈 [gzipped])

name        parsed_size           gzip_size
entry-main        +35 B  (+0.0%)       +4 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~2221 bytes added 📈 [gzipped])

name              parsed_size           gzip_size
login                 +8227 B  (+6.6%)    +1842 B  (+5.6%)
accept-invite         +7584 B  (+4.8%)    +1836 B  (+4.5%)
jetpack-connect       +4557 B  (+0.8%)     +734 B  (+0.5%)
stats                   +86 B  (+0.0%)     -293 B  (-0.2%)
zoninator               -78 B  (-0.0%)     -389 B  (-0.7%)
post-editor             -39 B  (-0.0%)     +449 B  (+0.1%)
settings                +24 B  (+0.0%)       +4 B  (+0.0%)
woocommerce             -23 B  (-0.0%)     -909 B  (-0.2%)
settings-writing        -17 B  (-0.0%)    -1057 B  (-0.9%)
posts-pages             +12 B  (+0.0%)       +1 B  (+0.0%)
posts-custom            +12 B  (+0.0%)       +1 B  (+0.0%)
media                   +12 B  (+0.0%)       +1 B  (+0.0%)
gutenberg-editor        +12 B  (+0.0%)       +1 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~2651 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
async-load-signup-steps-user            +7584 B  (+9.3%)    +1805 B  (+8.5%)
async-load-design-blocks                +7501 B  (+0.3%)     +845 B  (+0.1%)
async-load-post-editor-media-modal        +12 B  (+0.0%)       +1 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[simison]

I added e2e labels to just do a test run now; feel free to remove them once they're done. Good to re-run them before merging once more, tho. :-)

[simison]

I've tested that these changes work fine with Jetpack connect flow 👍

[simison]

BTW did I say yet that I love the new styles here and wish we could Murielize all signup flows soon! 💪

Jetpack test failures seemed unrelated (fix in #34401)

Didn't look into failing wp-desktop tests.

[justinshreve]

Thanks for the PR feedback and for looking at the Jetpack test failures!

It looks like other tests are failing now pulling in the new color-studio version. Invalid Version: github:automattic/color-studio#2569acb85214ac2413ab5e8ac7b87b04227ba4c4

I wonder if maybe something is cached on circleci? It shouldn't be pulling from GitHub now. I'll try rerunning them a bit later.

[simison]

It looks like other tests are failing now pulling in the new color-studio version. Invalid Version: github:automattic/color-studio#2569acb85214ac2413ab5e8ac7b87b04227ba4c4

Likely unsynced npm-shrinkwrap.json? You can test locally by running npm ci

[timmyc]

This is testing out well for me.