fix: Merge grid cell files into grid files and directories

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

@@ -20,7 +20,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

@@ -12,7 +12,7 @@ import {
   PropsWithChildren,
   RefAttributes,
 } from 'react'
-import { GridCell } from './GridCell'
+import { gridCellClasses } from './gridCellClasses'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
@@ -99,6 +99,41 @@ export const Grid = forwardRef(
   ),
 ) as GridComponent
 
+type GridCellFullWidthProp = {
+  /** Whether the cell spans the full width of the grid. */
+  fullWidth?: boolean
+  span?: never
+  start?: never
+}
+
+type GridCellColumnProps = {
+  fullWidth?: never
+  /** The amount of grid columns the cell spans. */
+  span?: GridColumnNumber | GridColumnNumbers
+  /** The index of the grid column the cell starts at. */
+  start?: GridColumnNumber | GridColumnNumbers
+}
+
+export type GridCellProps = (GridCellFullWidthProp | GridCellColumnProps) &
+  PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+const GridCell = forwardRef(
+  ({ children, className, fullWidth, span, start, ...restProps }: GridCellProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div
+      {...restProps}
+      ref={ref}
+      className={clsx(
+        'amsterdam-grid-cell',
+        fullWidth && 'amsterdam-grid-cell--full-width',
+        gridCellClasses(span, start),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  ),
+)
+
 Grid.Cell = GridCell
 Grid.displayName = 'Grid'
 GridCell.displayName = 'Grid.Cell'

packages/react/src/Grid/gridCellClasses.ts

@@ -1,4 +1,4 @@
-import { GridCellProps } from './GridCell'
+import { GridCellProps } from './Grid'
 
 export const gridCellClasses = (span?: GridCellProps['span'], start?: GridCellProps['start']): string[] => {
   if (!span && !start) {

packages/react/src/Grid/index.ts

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

storybook/storybook-docs/config/manager.js

@@ -2,4 +2,14 @@ import { addons } from '@storybook/manager-api'
 import { create } from '@storybook/theming/create'
 import themeConfig from '../../../storybook/theme.config'
 
-addons.setConfig({ theme: create(themeConfig) })
+addons.setConfig({
+  theme: create(themeConfig),
+  sidebar: {
+    filters: {
+      hidden: (item) => {
+        console.log(item.title, item.tags)
+        return !item.tags.includes('hidden')
+      },
+    },
+  },
+})

storybook/storybook-react/config/manager.js

@@ -2,4 +2,14 @@ import { addons } from '@storybook/manager-api'
 import { create } from '@storybook/theming/create'
 import themeConfig from '../../../storybook/theme.config'
 
-addons.setConfig({ theme: create(themeConfig) })
+addons.setConfig({
+  theme: create(themeConfig),
+  sidebar: {
+    filters: {
+      hidden: (item) => {
+        console.log(item.title, item.tags)
+        return !item.tags.includes('hidden')
+      },
+    },
+  },
+})