feat: Allow small and large vertical whitespace on grids

packages/css/src/grid/grid.scss

@@ -28,6 +28,14 @@
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
 }
 
+.amsterdam-grid--gap-vertical--small {
+  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--gap-vertical--large {
+  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+}
+
 .amsterdam-grid--padding-bottom--small {
   padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
 }

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

@@ -66,6 +66,18 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
   })
 
+  it('renders a class name for a vertical 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')
+  })
+
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
     const { container } = render(<Grid ref={ref} />)

packages/react/src/Grid/Grid.tsx

@@ -47,6 +47,8 @@ export type GridProps = {
    * @todo Implement more generally – it will be moved into a theme soon.
    */
   compact?: boolean
+  /** The amount of vertical whitespace between rows of the grid. */
+  gapVertical?: 'small' | 'large'
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
@@ -78,7 +80,7 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, compact, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    { children, className, compact, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -87,6 +89,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         compact && `amsterdam-grid--compact`,
+        gapVertical && `amsterdam-grid--gap-vertical--${gapVertical}`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
       )}

storybook/storybook-react/src/Footer/Footer.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story = {
         <VisuallyHidden>
           <Heading>Colofon</Heading>
         </VisuallyHidden>
-        <Grid paddingVertical="medium">
+        <Grid gapVertical="large" paddingVertical="medium">
           <Grid.Cell span={3}>
             <div style={{ display: 'grid', gap: '2.5rem' }}>
               <Heading level={2} size="level-4" inverseColor>

storybook/storybook-react/src/Grid/Grid.docs.mdx

@@ -52,4 +52,13 @@ Elke cel biedt ruimte voor een afbeelding.
 
 <Canvas of={GridStories.Cells} />
 
+### Verticale witruimte
+
+Een grid maakt automatisch meerdere rijen als de eerstvolgende cel niet meer op de huidige rij past.
+
+Standaard zit tussen twee rijen evenveel witruimte als tussen twee kolommen.
+In sommige gevallen kan daar beter meer of minder witruimte staan.
+
+<Canvas of={GridStories.VerticalGap} />
+
 Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cell--docs) zelf.

storybook/storybook-react/src/Grid/Grid.stories.tsx

@@ -58,6 +58,26 @@ export const VerticalSpace: Story = {
     compact: false,
     paddingVertical: 'medium',
   },
+  name: 'Verticale marge',
+}
+
+export const VerticalGap: Story = {
+  ...StoryTemplate,
+  args: {
+    children: Array.from(Array(6).keys()).map((i) => (
+      <Grid.Cell className="amsterdam-docs-pink-box" span={4} key={i} />
+    )),
+    gapVertical: 'small',
+  },
+  argTypes: {
+    gapVertical: {
+      control: {
+        type: 'radio',
+        labels: { small: 'small', undefined: 'medium', large: 'large' },
+      },
+      options: ['small', undefined, 'large'],
+    },
+  },
   name: 'Verticale witruimte',
 }