#7727672 Hosting Config: Describe premium features in the upsell nudge

Proposed Changes

Users in the treatment cohort of the calypso_hosting_configuration_upsell_list_features experiment see an updated upsell nudge on the /hosting-config page.

• Uses <Experiment> component to switch between the two banner variations (read more pbxNRc-2f8-p2)
• Displays spinner if experiment cohort is still being loaded/assigned
• Custom icon for each feature we’re listing: pdKhl6-1th-p2#comment-1839
• Columns resize and wrap as the screen width changes
• CTA links to the checkout, just like the previous nudge
• Banner uses the same tracks events so that the experiment tools can make the comparison

Implementation Discussion

The <UpsellBanner> and <Banner> components feel like god-classes. They have a lot of properties to toggle between all their different modes. Ideally these components would be more composable rather than have lots of modes e.g rather than exposing a primaryButton prop it would allow users to provide their own button.

Rather than adding yet more flags to the shared components I’ve been able to achieve most of the re-styling in CSS. However the CSS selectors need to be very specific (especially overloading specific media queries) which is not ideal. I suppose it’s arguable which is better for long-term maintainability: god-components vs. fragile CSS overrides. I’d be interested in your thoughts.

Out of scope for this PR

This PR doesn’t:

• represent the final copy. We’ll have time to adjust that.
• include the price as scene in the figma design. I’ll do that in a follow up PR.

Testing Instructions

• Go to experiment page 20995-explat-experiment
• Add the treatment bookmarklet to your bookmark bar
• Click bookmarklet and add your user to the treatment cohort (tutorial video p1673249013170409/1673241333.083479-slack-C04H4NY6STW)
• calypso.localhost:3000/hosting-config in a site with no business plan
• You should see the new nudge
• Test being in the other cohort too to confirm nothing has changed.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Related to #71598