Basic comparison grid component

[markbiek]

The only existing comparison grid components we have currently are heavily tied to the plans page. This adds a basic component that's more generic. (Currently only tested with 2 columns)

Related to #87905

Proposed Changes

For the new Site Migration flow, we have a step which will show the benefits of migrating over importing and we need some basic UI for it. I envisioned a comparison grid like the Plans pages. Unfortunately, all of the existing components are heavily tied to the Plans page.

This adds a new component to display a more generic comparison grid.

The goal here is to get some feedback about the component itself and any tweaks we might need to make. For the first iteration, we're only going to worry about having 2 columns. We'll mobile styles next (in a separate PR) and then larger numbers of columns.

Testing Instructions

• Clone this branch locally.
• Run yarn run storybook:start.
• Once Storybook is fully running, go to http://localhost:6006/?path=/story/packages-components-standalonecomparisongrid--normal

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md 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-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99645

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-99645&env=jetpack

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[gabrielcaires]

@markbiek I liked to see the component on the storybook, it helped me a lot to see the component usage. 👍 .
I left some comments to improve the overall component architecture.

[markbiek]

@andres-blanco You may already be thinking about this but the HTML markup changes you suggested will probably make it way easier to support lots of columns and work on mobile.

It might be worth adding new storybook stories for different numbers of columns.

@gabrielcaires Is there a way to simulate a mobile view in a story?

[andres-blanco]

@andres-blanco You may already be thinking about this but the HTML markup changes you suggested will probably make it way easier to support lots of columns and work on mobile.

It might be worth adding new storybook stories for different numbers of columns.

@gabrielcaires Is there a way to simulate a mobile view in a story?

I've pushed changes that should support multiple columns and basic stacking on mobile

[gabrielcaires]

I left more suggestions but there is one case that requires more investigation:

Having fluid grid + gap led the layout to have an extra space after the last element.

[gabrielcaires]

I think we don't need the prefix Standalone and it making hard to read
Maybe we can use just:
ComparisonGrid
Column << imported from the same package module.

[markbiek]

The issue is that there is an existing ComparisonGrid component that's specific to the plans page. I wanted something to make it clear that this was a generic, general purpose component.

But I am super open to naming suggestions.

[andres-blanco]

I left the StandAlone prefix but renamed the columns to Column. I felt as mark regarding avoiding confusion with the older ComparisonGrid

[andres-blanco]

Leaving this open either way if you feel like we should still drop / replace the prefix

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug 87905-update/site-migration-import-v-migrate on your sandbox.

[andres-blanco]

I left more suggestions but there is one case that requires more investigation:

Having fluid grid + gap led the layout to have an extra space after the last element.

I moved to a flex display instead of grid and now it seems to behave correctly:

[markbiek]

LGTM!

I can't officially approve it since I opened the PR. But everything looks great.

[sixhours]

LGTM as a starting point! 👍

[tyxla]

Folks, are we still planning to use this component? It's been a year, and it's still unused.

In case we mean to use it, should it really be in @automattic/components or could it be moved inline where we mean to use it?

In case we don't want to use it, I'm happy to clean it up.

[tyxla]

Here's a PR to clean it up: #99490