Domain step test: Convert recommended badge to plan-pill

[niranjan-uma-shankar]

Changes proposed in this Pull Request

The next domain step test is being implemented in #39276. The test is hidden behind a feature flag. We will build individual pieces of the UI in separate PRs.

This PR:

• Switches the order of the "Recommended" and "Best Alternative" tags to appear right below the domain.
• Changes the "Recommended" and "Best Alternative" tags to a "pill" UI instead of a "badge" UI.

Web

Mobile

Testing instructions

• Begin a fresh signup at /start or click "Add new site". You need to be in the variantShowUpdates variant of domainStepCopyUpdates test and variantDesignUpdates variant of domainStepDesignUpdates.
• At the domain step, verify the following:
  • The "Recommended" and "Best Alternative" tags UI should match the sketch shown in pbAok1-7N-p2.
  • Verify in both web and mobile.

Verify that control group UI is unchanged

Control of domainStepDesignUpdates test:

• Go through a fresh signup(or "Add new site") while assigned to the variantShowUpdates variant of domainStepCopyUpdates test and control of domainStepDesignUpdates.
• In the domain step, you should see the "badge" version UI.

Control of domainStepCopyUpdates test:

• Go through a fresh signup(or "Add new site") while assigned to the control of domainStepCopyUpdates test.
• In the domain step, you should see the old domain step UI(with progress bar).

[matticbot]

Test live: https://calypso.live/?branch=addd/domain-step-test-v2-sponsored-domains

[matticbot]

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

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

name                   parsed_size            gzip_size
entry-login              +159729 B  (+18.9%)   +46724 B  (+21.1%)
entry-main                +75023 B   (+5.3%)   +16276 B   (+4.8%)
entry-jetpack-cloud       +75023 B   (+5.7%)   +16276 B   (+5.2%)
entry-gutenboarding       +75023 B   (+3.6%)   +16276 B   (+3.0%)
entry-domains-landing      -9194 B   (-2.1%)    -8564 B   (-7.6%)

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

Sections (~1233363 bytes added 📈 [gzipped])

name                   parsed_size             gzip_size
post-editor             -1210901 B   (-64.3%)  -337039 B   (-65.1%)
jetpack-connect         +1093652 B  (+166.1%)  +250882 B  (+145.4%)
signup                  +1058720 B  (+390.6%)  +244193 B  (+357.3%)
wp-super-cache           +816207 B  (+367.8%)  +196487 B  (+353.0%)
reader                   +709728 B  (+166.2%)  +212644 B  (+193.0%)
google-my-business       +701825 B  (+233.0%)  +163097 B  (+205.7%)
posts                    +672883 B  (+399.1%)  +170068 B  (+370.3%)
woocommerce              -605991 B   (-28.6%)  -183057 B   (-33.1%)
export                   +447223 B  (+264.4%)  +110065 B  (+244.4%)
people                   +236825 B   (+98.9%)   +53309 B   (+82.8%)
marketing                +219047 B   (+60.0%)   +52155 B   (+63.1%)
happychat                +216627 B   (+83.4%)   +64462 B   (+91.7%)
site-blocks              +203066 B   (+73.7%)   +50487 B   (+70.5%)
settings                 +145919 B   (+32.5%)   +32224 B   (+27.8%)
me                       -132302 B   (-30.6%)   -27037 B   (-25.4%)
preview                  +118690 B  (+130.6%)   +27568 B  (+109.7%)
mailing-lists            +116427 B  (+832.8%)   +29032 B  (+691.4%)
stats                    -115439 B   (-13.2%)   -25699 B   (-11.8%)
sensei                   +101172 B  (+106.8%)   +22038 B   (+89.2%)
themes                    +91153 B   (+28.4%)   +19902 B   (+23.4%)
comments                  -91131 B   (-17.9%)   -12044 B   (-10.3%)
theme                     +84503 B   (+33.5%)   +18263 B   (+27.1%)
plugins                   +80296 B   (+15.3%)   +20539 B   (+15.4%)
gutenberg-editor          -78931 B   (-12.1%)   -33526 B   (-18.4%)
pages                     +78110 B   (+42.9%)   +17410 B   (+34.7%)
concierge                 +71978 B   (+24.3%)   +20159 B   (+28.9%)
checkout                  -69935 B    (-6.0%)   -11785 B    (-4.1%)
account                   +66270 B   (+21.9%)   +18845 B   (+23.3%)
media                     +65549 B   (+16.3%)   +12738 B   (+11.9%)
domains                   -61581 B    (-7.0%)   -10973 B    (-5.4%)
help                      +61187 B   (+13.9%)   +17655 B   (+16.0%)
checklist                 +61068 B   (+21.3%)   +18005 B   (+23.8%)
account-close             +61068 B   (+21.8%)   +18005 B   (+24.1%)
privacy                   +56334 B   (+25.2%)   +16622 B   (+27.8%)
security                  -49772 B   (-11.3%)    -5335 B    (-4.7%)
settings-performance      -48304 B   (-26.2%)   -10379 B   (-21.2%)
email                     -39320 B   (-12.3%)    -9595 B   (-11.7%)
plans                     -39128 B    (-7.1%)    -9579 B    (-6.9%)
posts-custom              +33744 B   (+22.7%)    +9127 B   (+22.3%)
accept-invite             +27131 B   (+15.1%)    +5940 B   (+12.6%)
settings-writing          +25899 B    (+5.1%)    +7267 B    (+5.7%)
notification-settings     -24618 B    (-8.0%)    -1262 B    (-1.6%)
import                    -22529 B   (-18.2%)    -5353 B   (-16.6%)
hosting                   +18692 B    (+8.6%)    +5393 B    (+9.3%)
sites                     +16703 B   (+19.7%)    +3732 B   (+16.1%)
settings-security         -16324 B    (-6.1%)    -2327 B    (-3.3%)
settings-discussion       -16324 B    (-5.6%)    -2327 B    (-3.1%)
activity                  +14206 B    (+3.1%)     -886 B    (-0.8%)
home                      -10910 B    (-3.3%)    -2154 B    (-2.5%)
zoninator                  -7939 B    (-3.0%)     -903 B    (-1.3%)
purchases                  +7121 B    (+0.7%)   +15215 B    (+6.7%)
migrate                    -7109 B    (-5.9%)     -867 B    (-2.7%)
devdocs                    +6002 B    (+8.8%)    +1962 B   (+10.7%)

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 (~163539 bytes removed 📉 [gzipped])

name                                                         parsed_size             gzip_size
async-load-design-blocks                                       -618085 B   (-22.6%)  -146365 B   (-22.9%)
async-load-my-sites-site-settings-seo-settings-form            -241492 B   (-86.0%)   -63064 B   (-84.3%)
async-load-reader-following-manage                             +225958 B  (+202.9%)   +61734 B  (+210.9%)
async-load-blocks-calendar-popover                             -125111 B   (-52.0%)   -18658 B   (-39.9%)
async-load-emoji-text                                          -114782 B   (-89.0%)   -17959 B   (-79.8%)
async-load-design-playground                                    -77430 B    (-4.5%)   -11282 B    (-2.9%)
async-load-design                                               -77430 B    (-4.3%)   -11282 B    (-2.7%)
async-load-lib-happychat-connection                             +69396 B  (+112.8%)    +5794 B   (+33.0%)
async-load-components-happychat                                 +51072 B  (+144.7%)   +13705 B  (+122.0%)
async-load-apps-notifications-index-jsx                         +51072 B   (+42.7%)   +13705 B   (+39.4%)
async-load-lib-preferences-helper                               +50983 B  (+348.2%)   +13650 B  (+283.3%)
async-load-components-web-preview-component                     -20865 B    (-5.5%)    -4570 B    (-4.7%)
async-load-post-editor-media-modal                              +11419 B    (+4.2%)    +1411 B    (+1.9%)
async-load-reader-search-stream                                 -11019 B   (-12.9%)     +183 B    (+0.8%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx      -3991 B    (-3.0%)     -682 B    (-2.1%)
async-load-signup-steps-domains                                   +646 B    (+0.3%)     +109 B    (+0.2%)
async-load-signup-steps-plans-atomic-store                        +192 B    (+0.2%)      +16 B    (+0.1%)
async-load-signup-steps-plans                                     +192 B    (+0.1%)      +16 B    (+0.0%)

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

Moment.js Locales (~6618 bytes added 📈 [gzipped])

name                    parsed_size              gzip_size
moment-locale-af           +42157 B  (+3164.9%)   +10802 B  (+1483.8%)
moment-locale-en-au        -12571 B    (-90.9%)    -4211 B    (-86.0%)
moment-locale-ru            -3322 B    (-73.1%)     -893 B    (-55.6%)
moment-locale-sd            +3231 B   (+245.5%)     +904 B   (+128.8%)
moment-locale-te            +1865 B   (+160.6%)     +533 B    (+84.3%)
moment-locale-ta            -1865 B    (-61.6%)     -533 B    (-45.8%)
moment-locale-br            +1702 B   (+109.9%)     +237 B    (+28.3%)
moment-locale-ne            -1352 B    (-52.5%)     -463 B    (-41.8%)
moment-locale-kk            +1341 B    (+94.8%)     +257 B    (+34.8%)
moment-locale-ka            -1341 B    (-48.7%)     -257 B    (-25.8%)
moment-locale-ar            -1331 B    (-50.0%)     -458 B    (-38.6%)
moment-locale-pa-in         -1275 B    (-51.8%)     -381 B    (-37.3%)
moment-locale-ku            -1272 B    (-46.2%)     -417 B    (-36.3%)
moment-locale-ko            +1272 B    (+85.8%)     +417 B    (+56.9%)
moment-locale-ms            +1252 B    (+57.3%)     +305 B    (+31.4%)
moment-locale-mr            -1252 B    (-36.4%)     -305 B    (-23.9%)
moment-locale-sw            -1236 B    (-49.1%)     -392 B    (-35.9%)
moment-locale-en-SG         +1232 B    (+98.4%)     +533 B    (+77.6%)
moment-locale-bn            -1227 B    (-49.6%)     -416 B    (-39.6%)
moment-locale-bg            +1219 B    (+70.5%)     +375 B    (+41.0%)
moment-locale-ar-dz         +1212 B    (+83.5%)     +500 B    (+72.9%)
moment-locale-be            -1191 B    (-40.4%)     -376 B    (-29.1%)
moment-locale-cv            +1189 B    (+70.2%)     +357 B    (+43.9%)
moment-locale-ar-ma         +1074 B    (+75.0%)     +429 B    (+62.9%)
moment-locale-ar-ly         -1074 B    (-42.9%)     -430 B    (-38.7%)
moment-locale-cs            -1059 B    (-36.7%)     -313 B    (-26.8%)
moment-locale-ss             +999 B    (+65.8%)     +286 B    (+35.5%)
moment-locale-tlh            -925 B    (-43.2%)     -234 B    (-26.3%)
moment-locale-nb             +915 B    (+74.7%)     +293 B    (+45.4%)
moment-locale-el             -910 B    (-36.6%)     -402 B    (-33.0%)
moment-locale-tl-ph          +889 B    (+73.0%)     +203 B    (+30.9%)
moment-locale-ur             +876 B    (+37.0%)     +415 B    (+40.7%)
moment-locale-uk             -876 B    (-27.0%)     -415 B    (-28.9%)
moment-locale-es             -853 B    (-38.9%)     -206 B    (-21.9%)
moment-locale-it-ch          -834 B    (-39.0%)     -248 B    (-25.7%)
moment-locale-nn             +816 B    (+68.8%)     +299 B    (+46.6%)
moment-locale-id             +787 B    (+58.3%)     +248 B    (+34.5%)
moment-locale-fo             +777 B    (+64.5%)     +234 B    (+35.5%)
moment-locale-bo             -777 B    (-23.9%)      -23 B     (-2.1%)
moment-locale-pt-br          -760 B    (-36.8%)     -292 B    (-29.3%)
moment-locale-pt             +760 B    (+58.1%)     +292 B    (+41.5%)
moment-locale-et             +711 B    (+47.5%)     +177 B    (+23.0%)
moment-locale-fa             -661 B    (-32.4%)     -248 B    (-26.4%)
moment-locale-mn             +655 B    (+37.4%)      +49 B     (+5.4%)
moment-locale-ml             -655 B    (-27.2%)      -49 B     (-5.1%)
moment-locale-tzm-latn       +632 B    (+53.2%)      +87 B    (+15.4%)
moment-locale-it             +622 B    (+47.7%)     +179 B    (+24.9%)
moment-locale-is             -575 B    (-29.9%)     -179 B    (-20.0%)
moment-locale-mk             -567 B    (-27.7%)     -208 B    (-21.7%)
moment-locale-mi             +567 B    (+38.4%)     +208 B    (+27.8%)
moment-locale-kn             +560 B    (+31.8%)     +135 B    (+15.4%)
moment-locale-km             -560 B    (-24.1%)     -135 B    (-13.4%)
moment-locale-ar-sa          -500 B    (-25.9%)     -239 B    (-26.0%)
moment-locale-ar-tn          +497 B    (+34.6%)     +241 B    (+35.4%)
moment-locale-bm             +484 B    (+38.8%)     +280 B    (+44.1%)
moment-locale-pl             +459 B    (+22.9%)      +82 B     (+8.7%)
moment-locale-gu             +448 B    (+29.5%)     +224 B    (+30.4%)
moment-locale-gom-latn       -448 B    (-22.8%)     -224 B    (-23.3%)
moment-locale-ug-cn          -446 B    (-27.3%)     -301 B    (-34.7%)
moment-locale-nl             +437 B    (+20.4%)     +170 B    (+18.1%)
moment-locale-hr             +431 B    (+22.2%)     +198 B    (+22.5%)
moment-locale-hi             -431 B    (-18.2%)     -198 B    (-18.4%)
moment-locale-bs             -427 B    (-21.6%)      -40 B     (-4.6%)
moment-locale-me             -425 B    (-18.3%)     -253 B    (-23.0%)
moment-locale-lv             +425 B    (+22.4%)     +253 B    (+29.8%)
moment-locale-x-pseudo       +375 B    (+32.4%)     +172 B    (+28.7%)
moment-locale-vi             -375 B    (-24.5%)     -172 B    (-22.3%)
moment-locale-az             -323 B    (-18.4%)     -234 B    (-25.6%)
moment-locale-ky             +318 B    (+17.9%)      +84 B     (+9.4%)
moment-locale-sq             +312 B    (+14.5%)      +60 B     (+6.4%)
moment-locale-sl             -312 B    (-12.7%)      -60 B     (-6.0%)
moment-locale-de             -295 B    (-20.2%)     -120 B    (-15.9%)
moment-locale-lo             -279 B    (-13.3%)      -34 B     (-3.5%)
moment-locale-cy             +274 B    (+19.3%)      +52 B     (+6.8%)
moment-locale-da             +254 B    (+21.8%)     +128 B    (+20.2%)
moment-locale-sv             +237 B    (+18.5%)     +106 B    (+15.2%)
moment-locale-jv             +221 B    (+16.8%)      +50 B     (+6.9%)
moment-locale-ja             -221 B    (-14.4%)      -50 B     (-6.5%)
moment-locale-mt             +197 B    (+16.8%)      +43 B     (+6.3%)
moment-locale-my             -188 B    (-13.8%)      -40 B     (-5.6%)
moment-locale-tzm            -186 B    (-10.2%)     +214 B    (+32.8%)
moment-locale-fr             -183 B    (-13.2%)      -67 B     (-9.2%)
moment-locale-ca             +152 B     (+8.3%)      +20 B     (+2.3%)
moment-locale-zh-cn          -131 B     (-8.5%)     -147 B    (-17.3%)
moment-locale-yo             +131 B     (+9.3%)     +147 B    (+20.9%)
moment-locale-eu             +121 B     (+8.8%)      +76 B    (+11.0%)
moment-locale-fy             +117 B     (+9.3%)      +38 B     (+5.5%)
moment-locale-dv             -112 B     (-7.1%)      -74 B     (-9.0%)
moment-locale-hy-am          -107 B     (-5.0%)       -8 B     (-0.9%)
moment-locale-hu             +107 B     (+5.3%)       +8 B     (+0.9%)
moment-locale-ro              +91 B     (+7.4%)      -11 B     (-1.5%)
moment-locale-eo              -83 B     (-6.2%)      -47 B     (-6.4%)
moment-locale-uz-latn         +74 B     (+5.5%)      -21 B     (-2.9%)
moment-locale-uz              -74 B     (-5.2%)      +21 B     (+3.0%)
moment-locale-fi              +56 B     (+2.8%)      +46 B     (+5.1%)
moment-locale-lb              -39 B     (-2.2%)      -50 B     (-5.3%)
moment-locale-en-nz           -39 B     (-3.1%)      -20 B     (-2.9%)
moment-locale-tr              +36 B     (+1.7%)      +31 B     (+3.6%)
moment-locale-fr-ca           +34 B     (+2.5%)      +14 B     (+2.0%)
moment-locale-en-il           +34 B     (+2.8%)      +19 B     (+2.8%)
moment-locale-gl              +29 B     (+2.2%)      +20 B     (+2.7%)
moment-locale-gd              -29 B     (-2.1%)      -20 B     (-2.6%)
moment-locale-fr-ch           -19 B     (-1.4%)      -11 B     (-1.5%)
moment-locale-ar-kw           +19 B     (+1.3%)       +5 B     (+0.7%)
moment-locale-es-do           -17 B     (-0.8%)       -6 B     (-0.6%)
moment-locale-en-ca           +16 B     (+1.3%)      +11 B     (+1.6%)
moment-locale-en-gb           -12 B     (-1.0%)      -11 B     (-1.6%)
moment-locale-de-at           -11 B     (-0.7%)       -7 B     (-0.9%)

Locale data for moment.js. Unless you are upgrading the moment.js library, changes in these chunks are suspicious.

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.

[ramonjd]

It looks good to me, but just checking the before and after.

Here's what I'm seeing:

Variant

Control

[travisw]

LGTM 🚀

Verify in both web and mobile.

I assume you're referring to screen sizes and not testing in the mobile app?

Here are my results to confirm.

---

domainStepCopyUpdates = variantShowUpdates
domainStepDesignUpdates = variantDesignUpdates

---

domainStepCopyUpdates = variantShowUpdates
domainStepDesignUpdates = control

---

domainStepCopyUpdates = control
domainStepDesignUpdates = control

[niranjan-uma-shankar]

Yes mobile screen size, I'll make that more explicit in future testing instructions.