feat: Allow small and large vertical whitespace on grids (#821)

Amsterdam · Nov 29, 2023 · aa54eb9 · aa54eb9
1 parent 4c25f43
commit aa54eb9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 2 deletions.
diff --git 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-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);
 }

diff --git 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
@@ -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,
       )}

diff --git 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>

diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/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.
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/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',
 }