fix: Merge grid cell files into grid files and directories (#815)

Co-authored-by: Niels Roozemond <[email protected]>

packages/css/src/components/grid/README.md

@@ -0,0 +1,21 @@
+# Grid
+
+Verdeelt de breedte van het scherm in kolommen waarop de elementen van een pagina worden uitgelijnd.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout.
+Het staat dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Vóór deze componenten sluit je een instantie van het grid af.
+Erbinnen en eventueel erna start je een nieuwe.
+Meerdere instanties van het grid component zijn dus mogelijk op een pagina.
+De kolommen van alle grids moeten wel precies op elkaar aansluiten.
+
+Binnen het grid maak je cellen die de gewenste inhoud bevatten.
+Een cel beslaat vaak meerdere kolommen van het grid.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

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

@@ -71,3 +71,43 @@
 .amsterdam-grid--padding-vertical--large {
   padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }
+
+.amsterdam-grid__cell--full-width {
+  grid-column: 1 / -1;
+}
+
+// The order of the following declaration blocks ensures the intended specificity.
+
+@for $i from 1 through 12 {
+  .amsterdam-grid__cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-grid__cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid__cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid__cell--start-#{$i}-medium {
+      grid-column-start: $i;
+    }
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid__cell--span-#{$i}-wide {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid__cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
+  }
+}

packages/css/src/components/index.scss

@@ -21,7 +21,6 @@
 @import "./checkbox/checkbox";
 @import "./form-label/form-label";
 @import "./grid/grid";
-@import "./grid/grid-cell";
 @import "./heading/heading";
 @import "./spotlight/spotlight";
 @import "./icon/icon";

packages/react/src/Grid/Grid.tsx

@@ -101,4 +101,3 @@ export const Grid = forwardRef(
 
 Grid.Cell = GridCell
 Grid.displayName = 'Grid'
-GridCell.displayName = 'Grid.Cell'

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

@@ -14,13 +14,13 @@ describe('Grid.Cell', () => {
   it('renders a design system BEM class name', () => {
     const { container } = render(<Grid.Cell />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid-cell')
+    expect(component).toHaveClass('amsterdam-grid__cell')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Grid.Cell className="extra" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid-cell extra')
+    expect(component).toHaveClass('amsterdam-grid__cell extra')
   })
 
   it('supports ForwardRef in React', () => {
@@ -32,43 +32,43 @@ describe('Grid.Cell', () => {
 
   it('renders no class names for undefined values for start and span', () => {
     const { container } = render(<Grid.Cell />)
-    const elementWithSpanClass = container.querySelector('[class*="amsterdam-grid-cell--span"]')
-    const elementWithStartClass = container.querySelector('[class*="amsterdam-grid-cell--start"]')
+    const elementWithSpanClass = container.querySelector('[class*="amsterdam-grid__cell--span"]')
+    const elementWithStartClass = container.querySelector('[class*="amsterdam-grid__cell--start"]')
     expect(elementWithSpanClass).not.toBeInTheDocument()
     expect(elementWithStartClass).not.toBeInTheDocument()
   })
 
   it('renders class names for single number values for start and span', () => {
     const { container } = render(<Grid.Cell span={4} start={2} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid-cell--span-4 amsterdam-grid-cell--start-2')
+    expect(component).toHaveClass('amsterdam-grid__cell--span-4 amsterdam-grid__cell--start-2')
   })
 
   it('renders class names for a single number value for start', () => {
     const { container } = render(<Grid.Cell span={8} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid-cell--span-8')
+    expect(component).toHaveClass('amsterdam-grid__cell--span-8')
   })
 
   it('renders class names for a single number value for span', () => {
     const { container } = render(<Grid.Cell start={6} />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid-cell--start-6')
+    expect(component).toHaveClass('amsterdam-grid__cell--start-6')
   })
 
   it('renders class names for a single number for span and array values for start', () => {
     const { container } = render(<Grid.Cell span={8} start={{ narrow: 2, medium: 4, wide: 6 }} />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid-cell--span-8 amsterdam-grid-cell--start-2 amsterdam-grid-cell--start-4-medium amsterdam-grid-cell--start-6-wide',
+      'amsterdam-grid__cell--span-8 amsterdam-grid__cell--start-2 amsterdam-grid__cell--start-4-medium amsterdam-grid__cell--start-6-wide',
     )
   })
 
   it('renders class names for array values for span and a single number for start', () => {
     const { container } = render(<Grid.Cell span={{ narrow: 3, medium: 5, wide: 7 }} start={2} />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid-cell--span-3 amsterdam-grid-cell--span-5-medium amsterdam-grid-cell--span-7-wide amsterdam-grid-cell--start-2',
+      'amsterdam-grid__cell--span-3 amsterdam-grid__cell--span-5-medium amsterdam-grid__cell--span-7-wide amsterdam-grid__cell--start-2',
     )
   })
 
@@ -78,7 +78,7 @@ describe('Grid.Cell', () => {
     )
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass(
-      'amsterdam-grid-cell--span-2 amsterdam-grid-cell--span-4-medium amsterdam-grid-cell--span-6-wide amsterdam-grid-cell--start-1 amsterdam-grid-cell--start-3-medium amsterdam-grid-cell--start-5-wide',
+      'amsterdam-grid__cell--span-2 amsterdam-grid__cell--span-4-medium amsterdam-grid__cell--span-6-wide amsterdam-grid__cell--start-1 amsterdam-grid__cell--start-3-medium amsterdam-grid__cell--start-5-wide',
     )
   })
 })

packages/react/src/Grid/GridCell.tsx

@@ -2,10 +2,9 @@
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
-
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
-import type { GridColumnNumber, GridColumnNumbers } from './Grid'
+import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'
+import { GridColumnNumber, GridColumnNumbers } from './Grid'
 import { gridCellClasses } from './gridCellClasses'
 
 type GridCellFullWidthProp = {
@@ -32,8 +31,8 @@ export const GridCell = forwardRef(
       {...restProps}
       ref={ref}
       className={clsx(
-        'amsterdam-grid-cell',
-        fullWidth && 'amsterdam-grid-cell--full-width',
+        'amsterdam-grid__cell',
+        fullWidth && 'amsterdam-grid__cell--full-width',
         gridCellClasses(span, start),
         className,
       )}

packages/react/src/Grid/gridCellClasses.ts

@@ -8,24 +8,24 @@ export const gridCellClasses = (span?: GridCellProps['span'], start?: GridCellPr
   const classes = [] as string[]
 
   if (typeof span === 'number') {
-    classes.push(`amsterdam-grid-cell--span-${span}`)
+    classes.push(`amsterdam-grid__cell--span-${span}`)
   } else if (span) {
     const { narrow, medium, wide } = span
     classes.push(
-      `amsterdam-grid-cell--span-${narrow}`,
-      `amsterdam-grid-cell--span-${medium}-medium`,
-      `amsterdam-grid-cell--span-${wide}-wide`,
+      `amsterdam-grid__cell--span-${narrow}`,
+      `amsterdam-grid__cell--span-${medium}-medium`,
+      `amsterdam-grid__cell--span-${wide}-wide`,
     )
   }
 
   if (typeof start === 'number') {
-    classes.push(`amsterdam-grid-cell--start-${start}`)
+    classes.push(`amsterdam-grid__cell--start-${start}`)
   } else if (start) {
     const { narrow, medium, wide } = start
     classes.push(
-      `amsterdam-grid-cell--start-${narrow}`,
-      `amsterdam-grid-cell--start-${medium}-medium`,
-      `amsterdam-grid-cell--start-${wide}-wide`,
+      `amsterdam-grid__cell--start-${narrow}`,
+      `amsterdam-grid__cell--start-${medium}-medium`,
+      `amsterdam-grid__cell--start-${wide}-wide`,
     )
   }
 

packages/react/src/Grid/index.ts

@@ -1,4 +1,2 @@
 export * from './Grid'
-export * from './GridCell'
-
 export type { GridCellProps } from './GridCell'