Gutenborading: premium design flow

[simison]

Add premium designs flow in Gutenboarding.

Design brief was this:

• Note how title is in the middle, followed by the badge on the right
• Tooltip opens right-away (couldn't do, there's 700ms delay)
• Tooltip has space before badge (hence there's additional min-height in elements to achieve that)
• Tooltip is bottom+centered (couldn't do, tooltip seems to have its own life in this regard)

TODO:

• Add selected_design_is_premium: true|false prop to existing calypso_newsite_step_leave event alongside selected_design prop.

• Remove premium status for the demo in Vesta design and follow-up with actual designs.

• Update A/B test date Not doing.

Changes proposed in this Pull Request

• Tag one of the designs as "premium"
• Show premium badge next to design name
• When the premium design is selected, pre-select "premium" plan

Testing instructions

• At Gutenboarding (start fresh with http://calypso.localhost:3000/new/?fresh)
• Confirm that selecting premium design chooses premium plan by default and that picking free design again goes back to free
• Confirm that picking a paid domain does the same separately from design and that switching either one to free doesn't cancel the other one until both are on free options
• Confirm premium plan selected when opening plans grid
• Confirm premium plan in checkout when progressing in the flow

Test the event

• Set localStorage.debug='calypso:analytics'; in console
• Pick premium theme and confirm calypso_newsite_step_leave event with is_selected_design_premium: true prop.
• Pick non-premium theme and confirm calypso_newsite_step_leave event with is_selected_design_premium: false prop.

[matticbot]

Test live: https://calypso.live/new?branch=update/gutenboarding-premium-design

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-gutenboarding      +1020 B  (+0.1%)     +191 B  (+0.0%)

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

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.

[alshakero]

Pretty neat. I tested as instructed and reviewed the code and LGTM!

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/3652688

Thank you @simison for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.