Pricing page: make product card features collapsable on mobile

[monsieur-z]

Changes proposed in this Pull Request

This PR makes product cards in the pricing page collapsable on mobile. Note that the change is limited to actual product cards in the More Products section.

Testing instructions

• Download the PR and run cloud or Calypso
• Visit the pricing/plans page
• Check that the page looks and behaves the same as in production on desktop
• On mobile, check that cards in the More Products section are collapsed by default and can be expanded

Screenshots

Before	After

[github-actions]

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

[matticbot]

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

Sections (~210 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
plans                       +775 B  (+0.1%)     +210 B  (+0.1%)
jetpack-connect             +775 B  (+0.1%)     +210 B  (+0.1%)
jetpack-cloud-pricing       +775 B  (+0.2%)     +210 B  (+0.2%)

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]

@keoshi, should we apply the collapsable features to the Free and CRM cards as well?

[cbauerman]

This looks great! The a11y aspect of the header being a button are not wonderful, but I think that for such a limited use it is fine 👍

[keoshi]

should we apply the collapsable features to the Free and CRM cards as well?

I think so, yeah. It makes the interaction with all the cards in the entire section more expectable.

Everything else is looking great!

[monsieur-z]

The a11y aspect of the header being a button are not wonderful

You're right @cbauerman, I made another pass at it.

[keoshi]

This is looking great! Ship it.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.