Migrate grid components to TypeScript

[connor-baer]

Addresses #516.

Purpose

When I started to remove the use of lodash in Circuit UI, I quickly found that it was used most heavily in the grid components. The current implementation is quite complicated, so I didn't feel comfortable refactoring it without the safety of types.

Approach and changes

• Move all grid components (Grid, Row, and Col) into a single folder and migrate them to TypeScript
• Refactor the grid util functions for clarity, to remove the use of most lodash methods, and to be used consistently across all grid components

ℹ️ API change: The Col component's span and skip props now accept numbers or numeric strings, even when nested in a breakpoints object. Here are some examples:

<Col span={2} />
<Col span="2" />
<Col span={{ default: 2, kilo: "4" }} />

Previously, a simple value would have to be a numeric string, while a breakpoint object value would work with either. Since this is an extension of the API, it is not a breaking change.

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[changeset-bot]

🦋 Changeset detected

Latest commit: e3af387

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sumup/circuit-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sumup/oss-circuit-ui/4zY8hxSpjWWoM9JbMiWDZFBjsheQ
✅ Preview: https://oss-circuit-ui-git-feature-grid-typescript.sumup-vercel.app

[codecov]

Codecov Report

Merging #1504 (e3af387) into main (bbd20fd) will increase coverage by 0.11%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #1504      +/-   ##
==========================================
+ Coverage   92.33%   92.44%   +0.11%     
==========================================
  Files         202      202              
  Lines        4213     4210       -3     
  Branches     1351     1353       +2     
==========================================
+ Hits         3890     3892       +2     
+ Misses        303      298       -5     
  Partials       20       20              

Impacted Files	Coverage Δ
packages/circuit-ui/components/Grid/constants.ts	100.00% <ø> (ø)
packages/circuit-ui/components/Grid/Col/Col.ts	100.00% <100.00%> (ø)
packages/circuit-ui/components/Grid/Grid/Grid.ts	100.00% <100.00%> (ø)
packages/circuit-ui/components/Grid/Row/Row.ts	100.00% <100.00%> (ø)
packages/circuit-ui/components/Grid/utils.ts	100.00% <100.00%> (ø)
packages/circuit-ui/util/helpers.ts	100.00% <100.00%> (ø)
packages/circuit-ui/util/type-check.ts	100.00% <100.00%> (ø)

[connor-baer]

This addition to the default styles is caused by the consistent use of composeBreakpoints in all grid components. It has no effect since it's overridden by the breakpoint styles below which have higher specificity.

[connor-baer]

This addition to the default styles is caused by the consistent use of composeBreakpoints in all grid components. It has no effect since it's overridden by the breakpoint styles below which have higher specificity.

[connor-baer]

This remaining lodash method is required for compatibility with IE11 and can be removed in v5.

[robinmetral]

Nice! Looks good to me, GitHub didn't show a super useful diff because of the file renaming but I trust Chromatic and our unit tests 👍