feat: add grid gap property for more flexibility

[melaniebmn]

Summary | Résumé

Changes

Adding new gap, gap-tablet, and gap-desktop properties to the grid component that will allow users to change the value of the grid gap depending on the viewport and adhere to the vertical rhythm of the new typography.

The allowed spacing values for each of the new gap properties are:

150 | 175 | 200 | 225 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800

Additionally, I manually updated the grid readme to include all grid props. It was previously only loading the grid-col props. The new readme can be found here.

How to test

The new properties can be tested by adding gap, gap-tablet, or gap-desktop to the grid component with any of the above spacing values. Here is an example that can be used to test:

<gcds-grid
    columns-desktop="1fr 1fr 1fr"
    columns-tablet="1fr 1fr"
    columns="1fr"
    gap="150"
    gap-tablet="350"
    gap-desktop="500"
>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
</gcds-grid>

Zenhub ticket

This is the Zenhub ticket for the change.

✅ Token package update required

The token package has been updated to it's latest version 2.1.0.

[ethanWallace]

It's looking good! Can you add the new gap props to storybook?

As for the readme, we may have to split the grid-col component out into it's own directory since the build command will just reset it to the way it was before.

[melaniebmn]

@ethanWallace apologies, the stories completely slipped my mind.

I will separate gcds-grid-col into its own directory in a separate PR.

[ethanWallace]

LGTM!