Merge branch 'main' into feature/DES-408-media-query-syntax

packages/css/src/grid/README.grid-cell.md

@@ -0,0 +1,14 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
+
+## Gebruik
+
+Verdeel hiermee een grid in cellen.
+Geef aan hoeveel kolommen van het grid de cel beslaat.
+Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
+In elke cel plaats je vervolgens de gewenste inhoud.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

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

@@ -0,0 +1,17 @@
+# Grid
+
+Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout, 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.
+Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
+
+Meerdere instanties van dit component zijn dus mogelijk op een pagina.
+Visueel moeten ze wel allemaal op elkaar aansluiten.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

packages/css/src/grid-cell/grid-cell.scss → packages/css/src/grid/grid-cell.scss

@@ -5,41 +5,41 @@
 
 @import "../../utils/breakpoint";
 
-.amsterdam-page-grid > .amsterdam-grid-cell--full-width {
+.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-page-grid > .amsterdam-grid-cell--span-#{$i} {
+  .amsterdam-grid-cell--span-#{$i} {
     grid-column-end: span $i;
   }
 
-  .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$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-page-grid > .amsterdam-grid-cell--span-#{$i}-medium {
+    .amsterdam-grid-cell--span-#{$i}-medium {
       grid-column-end: span $i;
     }
 
-    .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$i}-medium {
+    .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-page-grid > .amsterdam-grid-cell--span-#{$i}-wide {
+    .amsterdam-grid-cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
 
-    .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$i}-wide {
+    .amsterdam-grid-cell--start-#{$i}-wide {
       grid-column-start: $i;
     }
   }

packages/css/src/grid/grid.scss

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-grid {
+  display: grid;
+  gap: var(--amsterdam-grid-gap);
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  margin-inline: auto;
+  padding-inline: var(--amsterdam-grid-padding-inline);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  }
+}

packages/css/src/index.scss

@@ -14,13 +14,13 @@
 @import "./checkbox/checkbox";
 @import "./footer/footer";
 @import "./form-label/form-label";
-@import "./grid-cell/grid-cell";
+@import "./grid/grid";
+@import "./grid/grid-cell";
 @import "./heading/heading";
 @import "./highlight/highlight";
 @import "./icon/icon";
 @import "./link/link";
 @import "./ordered-list/ordered-list";
-@import "./page-grid/page-grid";
 @import "./page-heading/page-heading";
 @import "./page-menu/page-menu";
 @import "./paragraph/paragraph";

packages/css/src/screen/README.md

@@ -2,13 +2,19 @@
 
 Verzorgt de maximale breedte en de uitlijning van de hele website of applicatie.
 
-## Richtlijnen
+## Gebruik
 
-Gebruik het `Screen` component als de buitenste component van je website of applicatie.
+Dit moet het buitenste component van je website of applicatie zijn.
+Daarbinnen combineer je componenten als
+[Grid](?path=/docs/react_layout-grid--docs),
+Header,
+[Footer](?path=/docs/react_containers-footer--docs),
+[Highlight](?path=/docs/react_containers-highlight--docs)
+en Figure.
+
+## Ontwerp
 
 Standaard groeit dit component tot een breedte van 1600 pixels.
 Dit is de maximale breedte voor een website van de gemeente Amsterdam.
 Voor applicaties kun je kiezen voor een grotere maximale breedte van 2112 pixels.
 Het component centreert zowel zichzelf als zijn inhoud horizontaal.
-
-Gebruik erbinnen de componenten `PageGrid`, `Header`, `Footer`, `Highlight` of `Figure`.

packages/react/src/Accordion/Accordion.tsx

@@ -4,8 +4,17 @@
  */
 
 import clsx from 'clsx'
-import type { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, useImperativeHandle, useRef } from 'react'
+import {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+  RefAttributes,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 import AccordionContext from './AccordionContext'
 import { AccordionSection } from './AccordionSection'
 import useFocusWithArrows from './useFocusWithArrows'

packages/react/src/Alert/Alert.tsx

@@ -5,7 +5,7 @@
 
 import { AlertIcon, CheckmarkIcon, CloseIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import React, { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, useMemo } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
@@ -42,7 +42,7 @@ export const Alert = forwardRef(
   ) => {
     const alertSize = title ? 'level-5' : 'level-6'
 
-    const alertIcon = React.useMemo(() => {
+    const alertIcon = useMemo(() => {
       if (!icon || !severity) {
         return null
       }

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -1,10 +1,14 @@
-import React, { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  PropsWithChildren,
+  RefAttributes,
+} from 'react'
 
 interface BreadcrumbComponent
-  extends React.ForwardRefExoticComponent<
-    PropsWithChildren<HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>
-  > {
+  extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLElement>> & RefAttributes<HTMLElement>> {
   Item: typeof BreadcrumbItem
 }
 

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

@@ -1,43 +1,33 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
-import { PageGrid } from './PageGrid'
+import { Grid } from './Grid'
 import '@testing-library/jest-dom'
 
-describe('PageGrid', () => {
+describe('Grid', () => {
   it('renders', () => {
-    const { container } = render(<PageGrid />)
-
+    const { container } = render(<Grid />)
     const component = container.querySelector(':only-child')
-
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<PageGrid />)
-
+    const { container } = render(<Grid />)
     const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-page-grid')
+    expect(component).toHaveClass('amsterdam-grid')
   })
 
   it('can have a additional class name', () => {
-    const { container } = render(<PageGrid className="extra" />)
-
+    const { container } = render(<Grid className="extra" />)
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('extra')
-
-    expect(component).toHaveClass('amsterdam-page-grid')
+    expect(component).toHaveClass('amsterdam-grid')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
-
-    const { container } = render(<PageGrid ref={ref} />)
-
+    const { container } = render(<Grid ref={ref} />)
     const component = container.querySelector(':only-child')
-
     expect(ref.current).toBe(component)
   })
 })

packages/react/src/Grid/Grid.tsx

@@ -0,0 +1,43 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  PropsWithChildren,
+  RefAttributes,
+} from 'react'
+import { GridCell } from './GridCell'
+
+export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+export type GridColumnNumbers = {
+  narrow: GridColumnNumber
+  medium: GridColumnNumber
+  wide: GridColumnNumber
+}
+
+interface GridComponent
+  extends ForwardRefExoticComponent<PropsWithChildren<HTMLAttributes<HTMLDivElement>> & RefAttributes<HTMLDivElement>> {
+  Cell: typeof GridCell
+}
+
+export const Grid = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-grid', className)}>
+      {children}
+    </div>
+  ),
+) as GridComponent
+
+Grid.Cell = GridCell
+Grid.displayName = 'Grid'
+GridCell.displayName = 'Grid.Cell'