Add co-branded Jetpack & WooCommerce header during connection process

[justinshreve]

This PR builds upon the WooCommerce styles added in #32993 by updating the header to contain a co-branded WooCommerce & Jetpack logo. The header is styled per the designs at p6riRB-4rG-p2 and woocommerce/woocommerce-admin#2152. It also updates the heading and sub-heading copy.

Testing instructions

To Test:

• 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 the new logo and copy.
• 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, logo, and copy.

[matticbot]

Test live: https://calypso.live/?branch=update/woocommerce-jetpack-onboarding-logo-copy

[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.

[justinshreve]

Thank you for the great feedback! I've updated that color to a CSS variable, adjusted the line-height on those login links, and persisted the isWoo data flow into the JetpackHeader component.

[timmyc]

Minor comment on the code structure and matching what is already there, but still testing out great in both logged-in and logged-out flows.

[MichaelArestad]

I think we should use the same design language across our cobranded login screens. Here's the one from Pressable:

The biggest difference is the removal of the black line under the logos and the larger, brighter logos. I recommend going the same route as the Pressable cobranding by making the logos bigger and brighter. I also think the dark line (probably a bottom border) can be removed. What do you think?

[MichaelArestad]

Also, I tested this, and it worked as expected. 👍

[timmyc]

/cc @jameskoster for

The biggest difference is the removal of the black line under the logos and the larger, brighter logos. I recommend going the same route as the Pressable cobranding by making the logos bigger and brighter. I also think the dark line (probably a bottom border) can be removed. What do you think?

[jameskoster]

This design is based on the recent Muriel sprint where we sought to align account steps across our products. It carries through to the rest of our on-boarding experience. So if this step looked / felt different to the rest, that would create unwanted friction and disruption.

Based on this, if anything, I would suggest that the other co-branded screens are updated to match this one. But that deserves some discussion as we didn't definitively lock those designs down.

For now, if it's not a lot of work to make this particular screen match the original designs (seems like it's already done) then I think we should stick with it to avoid the aforementioned friction.

[joshuatf]

Nice work, @justinshreve! Pre-approving, but one very tiny thing I noticed (both in the wc-admin onboarding and here) is that the logo in the designs has a slightly thicker "+".

I know this logo was swapped recently, so the Figma one may be irrelevant at this point and you may have more details on this.

Current:

Figma: