Improve PricingTable component items

[dkmyta]

Description #
In an attempt to improve upon the fantastic work put in to create and update the new PricingTable component that will be used in the unification of standalone Jetpack product pricing pages, I have identified a number of minor updates that may present difficulties in particular cases and one potential area of improvement.

Updates:

• The new discount label overlaps when price / offPrice values are too significant and/or when a currency symbol has been added

• CSS for the main Gridicon component appears to be overriding the new .popover-icon element styles for the PricingTable component making the icon bold like the preceding text rather than fill: =var(--jp-gray); as intended.

• There is some odd/somewhat random behavior of popover tooltips sticking when hovering over them
  • The primary issue is being addressed in JS Components: Use clicks to summon IconTooltip #26457
• Popovers can become hidden behind the primary admin sidebar menu.

• The TOS element does not remain centered on the columns and becomes cut off as we change screen sizes before entering the mobile view.
  • The primary issue is being addressed in Components: fix the position of TOS component of the Pricing Table component #26509

Improvements:

• We can take advantage of the logic used in the JetpackProductOffer component in Calypso that introduces a discount label and automatically generates the content of the label based on a number of pricing-related variables. This will allow us to bring consistency between the various dashboards that may display a discount badge so there are no discrepancies in the calculations that may lead to unnecessary consumer confusion.
  

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?

Jetpack product discussion

• 1201069996155224-as-1202920335836514
• p1HpG7-hMo-p2

Does this pull request change what data or activity we track or use?

• No

Testing instructions:

• Run npm run storybook:dev from the js-packages/storybook folder
• Change the default price, offPrice, and currency values and verify the promo label reacts accordingly
• Ensure the TOS component remains centered to columns 2 and 3 while decreasing viewport width until the mobile view is activated
• Play with the various options and ensure the components handles the changes as expected
• Load this PR using the Jetpack Beta plugin on a Jurassic Ninja site and verify that the icon tooltip popover handles and displays as expected
• Check the Figma file to ensure the design matches

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run bin/jetpack-downloader test jetpack update/pricing-table-improvements to get started. More details: p9dueE-5Nn-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• 🔴 Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

[danielpost]

Can we leave the option to add a promo label to a column that's not an automatically calculated percentage? In our case we're adding New! as a label to a column, so removing that option wouldn't be ideal.

[retrofox]

Nice enhancements!

I have a feedback about the label

:this: happens in VideoPress standalone plugin now, for instance.

I tried the following:

Screen.Recording.2022-09-29.at.09.33.17.mov

what do you think?

[oskosk]

LGTM!