From b2f97cb246f8ae34f4bc42c8b4825bf16bdc9c7d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 13:34:15 +0100
Subject: [PATCH 1/2] Add option for small or large vertical grid gap

---
 packages/css/src/grid/grid.scss               |  8 ++++++++
 packages/react/src/Grid/Grid.test.tsx         | 12 +++++++++++
 packages/react/src/Grid/Grid.tsx              | 14 ++++++++++++-
 .../storybook-react/src/Grid/Grid.docs.mdx    |  9 +++++++++
 .../storybook-react/src/Grid/Grid.stories.tsx | 20 +++++++++++++++++++
 5 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
index 86713c9c96..c03f1f20a3 100644
--- a/packages/css/src/grid/grid.scss
+++ b/packages/css/src/grid/grid.scss
@@ -28,6 +28,14 @@
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-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);
 }
diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index a3d39fddfd..b2b4edcfcc 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/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} />)
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 6799b253aa..6ac8b56d4b 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -48,6 +48,8 @@ export type GridProps = {
    * This is to be implemented more generally – it will be moved into a theme soon.
    */
   density?: GridDensity
+  /** The amount of vertical whitespace between rows of the grid. */
+  gapVertical?: 'small' | 'large'
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
@@ -79,7 +81,16 @@ interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttribu
 
 export const Grid = forwardRef(
   (
-    { children, className, density = 'low', paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    {
+      children,
+      className,
+      density = 'low',
+      gapVertical,
+      paddingBottom,
+      paddingTop,
+      paddingVertical,
+      ...restProps
+    }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
@@ -88,6 +99,7 @@ export const Grid = forwardRef(
       className={clsx(
         'amsterdam-grid',
         density && `amsterdam-grid--density-${density}`,
+        gapVertical && `amsterdam-grid--gap-vertical--${gapVertical}`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,
       )}
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 72ce1a2e03..623cace1ab 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -53,4 +53,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.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index 8f605e0e29..9e3e1cbaa8 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -74,6 +74,26 @@ export const VerticalSpace: Story = {
       options: ['low', 'high'],
     },
   },
+  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',
 }
 

From fd9d2a14e2d5e310e1354569779e39b8d11dd981 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 13:34:34 +0100
Subject: [PATCH 2/2] Apply large vertical gap to Footer

---
 storybook/storybook-react/src/Footer/Footer.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/storybook-react/src/Footer/Footer.stories.tsx b/storybook/storybook-react/src/Footer/Footer.stories.tsx
index ec4e3da4c9..2c6b82417e 100644
--- a/storybook/storybook-react/src/Footer/Footer.stories.tsx
+++ b/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>