feat!: Use spacing tokens in Grid component

packages/css/src/components/grid/grid.scss

@@ -6,10 +6,11 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
+  column-gap: var(--amsterdam-grid-column-gap);
   display: grid;
-  gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
+  row-gap: var(--amsterdam-grid-row-gap-md);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -25,47 +26,47 @@
 }
 
 .amsterdam-grid--gap-vertical--small {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+  row-gap: var(--amsterdam-grid-row-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+  row-gap: var(--amsterdam-grid-row-gap-lg);
 }
 
 .amsterdam-grid--padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid__cell--span-all {

packages/react/src/Grid/Grid.test.tsx

@@ -1,63 +1,101 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
 import { Grid } from './Grid'
+import type { GridPaddingSize } from './Grid'
 import '@testing-library/jest-dom'
 
+const paddingSizes = ['small', 'medium', 'large']
+
 describe('Grid', () => {
   it('renders', () => {
     const { container } = render(<Grid />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toBeInTheDocument()
+
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<Grid />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('amsterdam-grid')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Grid className="extra" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('extra')
+
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('renders a medium vertical padding class name', () => {
-    const { container } = render(<Grid paddingVertical="medium" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
-  })
+  it('renders the correct class name for a zero gap', () => {
+    const { container } = render(<Grid gapVertical="none" />)
 
-  it('renders a small top class name', () => {
-    const { container } = render(<Grid paddingTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
+
+    expect(component).toHaveClass('amsterdam-grid--gap-vertical--none')
   })
 
-  it('renders a large bottom class name', () => {
-    const { container } = render(<Grid paddingBottom="large" />)
+  it(`renders the correct class name for a small gap`, () => {
+    const { container } = render(<Grid gapVertical="small" />)
+
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
+
+    expect(component).toHaveClass('amsterdam-grid--gap-vertical--small')
   })
 
-  it('renders a class name for a vertical gap', () => {
+  it(`renders the correct class name for a large gap`, () => {
     const { container } = render(<Grid gapVertical="large" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('amsterdam-grid--gap-vertical--large')
   })
 
-  it('renders a class name for a vertical gap and a vertical padding', () => {
-    const { container } = render(<Grid gapVertical="small" paddingVertical="large" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--gap-vertical--small amsterdam-grid--padding-vertical--large')
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} bottom padding`, () => {
+      const { container } = render(<Grid paddingBottom={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-bottom--${size}`)
+    })
+  })
+
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} top padding`, () => {
+      const { container } = render(<Grid paddingTop={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-top--${size}`)
+    })
+  })
+
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} vertical padding`, () => {
+      const { container } = render(<Grid paddingVertical={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-vertical--${size}`)
+    })
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
+
     const { container } = render(<Grid ref={ref} />)
+
     const component = container.querySelector(':only-child')
+
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Grid/Grid.tsx

@@ -16,7 +16,7 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-type GridPaddingSize = 'small' | 'medium' | 'large'
+export type GridPaddingSize = 'small' | 'medium' | 'large'
 
 type GridPaddingVerticalProp = {
   paddingBottom?: never

proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json

@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
       "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },
-      "md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" },
       "xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" }
     }

proprietary/tokens/src/brand/amsterdam/space.tokens.json

@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
       "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
-      "md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
       "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
     }

proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json

@@ -1,14 +1,7 @@
 {
   "amsterdam": {
     "grid": {
-      "gap": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
-      },
-      "padding-inline": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Equals the gap."
-      }
+      "padding-inline": { "value": "{amsterdam.space.md}" }
     }
   }
 }

proprietary/tokens/src/components/amsterdam/grid.tokens.json

@@ -2,13 +2,17 @@
   "amsterdam": {
     "grid": {
       "column-count": { "value": "4" },
-      "gap": {
-        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
-        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+      "column-gap": { "value": "{amsterdam.space.md}" },
+      "padding-block": {
+        "sm": { "value": "{amsterdam.space.sm}" },
+        "md": { "value": "{amsterdam.space.md}" },
+        "lg": { "value": "{amsterdam.space.lg}" }
       },
-      "padding-inline": {
-        "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
-        "comment": "Equals 1.5 times the gap."
+      "padding-inline": { "value": "{amsterdam.space.lg}" },
+      "row-gap": {
+        "sm": { "value": "{amsterdam.space.sm}" },
+        "md": { "value": "{amsterdam.space.md}" },
+        "lg": { "value": "{amsterdam.space.lg}" }
       },
       "medium": {
         "column-count": { "value": "8" }

proprietary/tokens/src/components/amsterdam/header.tokens.json

@@ -1,7 +1,10 @@
 {
   "amsterdam": {
     "header": {
-      "column-gap": { "value": "{amsterdam.grid.gap}" }
+      "column-gap": {
+        "value": "{amsterdam.space.md}",
+        "comment": "Must have the same value as `amsterdam.grid.column-gap`."
+      }
     }
   }
 }

proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json

@@ -2,10 +2,16 @@
   "amsterdam": {
     "mega-menu": {
       "list-category": {
-        "column-gap": { "value": "{amsterdam.grid.gap}" },
+        "column-gap": {
+          "value": "{amsterdam.space.md}",
+          "comment": "Must have the same value as `amsterdam.grid.column-gap`."
+        },
         "column-width": { "value": "20rem" },
         "padding-block-start": { "value": "1rem" },
-        "padding-block-end": { "value": "{amsterdam.grid.gap}" }
+        "padding-block-end": {
+          "value": "{amsterdam.space.md}",
+          "comment": "Must have the same value as `amsterdam.grid.row-gap.md`."
+        }
       }
     }
   }

storybook/src/components/Grid/Grid.docs.mdx

@@ -19,7 +19,7 @@ On narrow screens, you will see three rows of four columns; on medium-wide scree
 ### Vertical Margin
 
 Unlike the horizontal margins between columns, the vertical ones above and below are adjustable.
-The options `paddingVertical`, `paddingTop`, and `paddingBottom` add white space.
+The`paddingVertical`, `paddingTop`, and `paddingBottom` props add white space above and below the grid.
 This is useful in a coloured area like [Footer](/docs/components-containers-footer--docs) or [Spotlight](/docs/components-containers-spotlight--docs) or between two consecutive grids.
 
 Specify a value of `medium` for vertical white space as wide as the horizontal.