Display WooCommerce styles during JP Onboarding when coming from the setup wizard

[justinshreve]

This PR detects when we are in the Jetpack onboarding wizard, but have entered through the WooCommerce setup wizard. This is so we can do some co-branding, and keep the connection experience consistent throughout the store setup process. See p6riRB-4rG-p2 and woocommerce/woocommerce-admin#2152.

This is step one of the process. It only adds the ability to target styles for this case, and implements the base background/button styles. It does not update the copy yet, or display the Woo logo, etc. It is also behind a feature flag so we can iterate on these differences without affecting the current flows.

@jameskoster I believe I could use some help here making sure I'm using the correct colors, hovers, accents, etc. I only had the background, text color, and button color to work with. See the mixin.

To Test:

• Run npm run test-client and make sure all tests pass.
• Disconnect Jetpack Jetpack > Dashboard > Connections > Site connection > Manage site connection > Disconnect.
• 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.
• Hit enter, and you should see Woo Purples
• Disconnect
• Logout
• Try the same same URL logged out
• Test the standard Jetpack connection process, without the WooCommerce query string appended, and verify you see the standard Jetpack Onboarding styles.

Screenshots:

[matticbot]

Test live: https://calypso.live/?branch=add/woocommerce-jetpack-onboarding-styles

[matticbot]

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

Webpack Runtime (~528 bytes added 📈)

name      parsed_size           gzip_size
manifest       +528 B  (+0.3%)      +46 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 (~561 bytes added 📈)

name   parsed_size           gzip_size
build       +561 B  (+0.0%)     +143 B  (+0.0%)

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

Legacy SCSS Stylesheet (~1278 bytes added 📈)

name       parsed_size           gzip_size
style.css      +1278 B  (+0.4%)     +238 B  (+0.4%)

The monolithic CSS stylesheet that is downloaded on every app load.
👎 This PR increases the size of the stylesheet, which is a bad news. Please consider migrating the CSS styles you modified to webpack imports.

Sections (~2059 bytes added 📈)

name             parsed_size           gzip_size
jetpack-connect      +1245 B  (+0.2%)     +267 B  (+0.2%)
login                 +814 B  (+0.8%)     +205 B  (+0.8%)

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 (~7887 bytes added 📈)

name                                              parsed_size           gzip_size
async-load-components-jetpack-header-woocommerce      +5613 B    (new)    +1445 B    (new)
async-load-design-blocks                              +1179 B  (+0.0%)     +253 B  (+0.0%)
async-load-design-playground                           +365 B  (+0.0%)      +62 B  (+0.0%)
async-load-design                                      +365 B  (+0.0%)      +54 B  (+0.0%)
async-load-components-jetpack-header                   +365 B  (+5.8%)      +52 B  (+2.4%)

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.

[tyxla]

Quickly glanced through the code, and it's looking well, nice work 👍

Haven't tested though, and I think this could use some thorough testing in most of the big Jetpack in addition to the mentioned Woo flows.

I'm pinging @Automattic/luna and @Automattic/jetpack-design for review and testing, as I'm no longer working on Jetpack NUX & Onboarding.

[justinshreve]

Fixed some issues in 260bfd5. Thanks!

I've been making sure to run through this PR with the normal flow as well (no &from= override) as well as testing this with the feature flag disabled. All looks well.

I've adjusted the testing directions to make sure we get some more 👀 on that as well.

[timmyc]

Tested the flows with and without the modified from attribute and both are working as expected.

[jameskoster]

As I mentioned last week, we might be changing the background color, so no need to change that (or the text color) for now.

I messaged you on Slack re colors in general. The button bg / stroke colors were incorrect (my bad), I've updated this in Figma just now.

For the hover color, we can use Woo Purple 600 for the background.

I've addressed the color feedback over in the other PR.