Plans: Update styling for Jetpack CRM card to match other product cards

[mattgawarecki]

Resolves 1200412004370260-as-1201272180272104.
Relates to #57362.

Changes proposed in this Pull Request

• Split the JetpackCrmFreeCard component into two versions: one with, and one without, the price display.
• Add styling rules for the new displayed-price version of the CRM Free card to match other product cards.
• Add support for easier custom styling on the JetpackProductCard component.
• Add a property for abovePriceText on the JetpackProductCard component.
• Add support for the hideSavingLabel prop on free product price displays.

Testing instructions

NOTE: Please test this PR in both Calypso Blue and Calypso Green, for both wide and narrow screen layouts.

1. Visit the pricing page in any non-production environment.
2. Verify the product grid still renders correctly and flows naturally as the screen resizes.
3. Verify the Jetpack CRM Free card still shows up to the right of the VideoPress product card, and that its styles match the other product cards.
4. Verify the Jetpack CRM Free card's price display and copy are aligned appropriately compared to other product cards.

Reference screenshots

[github-actions]

Link to Calypso live: https://calypso.live?image=registry.a8c.com/calypso/app:build-18501
Link to Jetpack Cloud live: https://calypso.live?image=registry.a8c.com/calypso/app:build-18501&env=jetpack

[matticbot]

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

Sections (~395 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                      +1902 B  (+0.3%)     +395 B  (+0.2%)
jetpack-connect            +1902 B  (+0.3%)     +395 B  (+0.2%)
jetpack-cloud-pricing      +1902 B  (+0.6%)     +395 B  (+0.4%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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.

[monsieur-z]

Card and code look good.

As for the grid, the Jetpack Free card doesn't take the full height at medium size viewport:

[mattgawarecki]

As for the grid, the Jetpack Free card doesn't take the full height at medium size viewport:

@jeffgolenski I wonder what we can do to address this so that the Free card doesn't look wonky next to other cards. I tried stretching the card out vertically in the screenshot below, but as you can see, the buttons don't line up. Should Free also have a "Start for Free" price display to match CRM Free?

[monsieur-z]

It now looks good on medium viewport, but the Free card is not arranged in 2 columns on wider screens anymore.

[jeffgolenski]

@mattgawarecki Here's a really quick mock. During that middle breakpoint when the 2 columns looks like this...

Can you make CRM and Jetpack Free both span 100% and stack like this? (keep all the same styles that currently exist, just change the structure)

When the small mobile breakpoint kicks in, we'll keep it exactly as you have it now.

[mattgawarecki]

@jeffgolenski Okie dokie, it took a hot minute but I think I've got it! I updated the PR so you can see the changes live as well, but here are some screenshots:

Calypso Green

Calypso Blue

[jeffgolenski]

@mattgawarecki Just gave it a go! Looks good on every viewport! Ship it!

[monsieur-z]

LGTM!

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.