From 3d25409fe4bc87ac1b3384f7b5b0856398310462 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 1 Nov 2023 10:26:34 +0100 Subject: [PATCH] Rename Page Grid to Grid and make Grid Cell a subcomponent (#684) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Rename Page Grid to Grid * Make GridCell a subcomponent of Grid * Improve some other imports from React * Remove parent selector from grid cell styles * Import type as type explicitly Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> * Use a single directory for CSS files * Move long grid docs from story to docs * Hide code by default * Show controls for Grid Cell * Remove ‘narrow’ from design token * Use explicite typing for `div` element * Use subcomponent everywhere * Sort exports consistently * Add usage section to grid docs * Delete remaining mentions of a now default setting * Fix duplicate usage section for grid * Remove unnecessary whitespace in tests file * Nest media queries in declaration block --------- Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- packages/css/src/grid-cell/README.md | 9 ---- packages/css/src/grid/README.grid-cell.md | 14 ++++++ packages/css/src/grid/README.grid.md | 17 +++++++ .../src/{grid-cell => grid}/grid-cell.scss | 14 +++--- packages/css/src/grid/grid.scss | 22 +++++++++ packages/css/src/index.scss | 4 +- packages/css/src/page-grid/page-grid.scss | 26 ----------- packages/css/src/screen/README.md | 14 ++++-- packages/react/src/Accordion/Accordion.tsx | 13 +++++- packages/react/src/Alert/Alert.tsx | 4 +- packages/react/src/Breadcrumb/Breadcrumb.tsx | 14 ++++-- .../Grid/{PageGrid.test.tsx => Grid.test.tsx} | 26 ++++------- packages/react/src/Grid/Grid.tsx | 43 +++++++++++++++++ packages/react/src/Grid/GridCell.test.tsx | 26 +++++------ packages/react/src/Grid/GridCell.tsx | 8 ++-- packages/react/src/Grid/PageGrid.tsx | 27 ----------- packages/react/src/Grid/index.ts | 7 ++- ...page-grid.tokens.json => grid.tokens.json} | 22 +++++---- storybook/storybook-docs/config/preview.tsx | 6 --- .../storybook-docs/src/grid.stories.mdx | 11 ++++- storybook/storybook-react/config/preview.tsx | 6 --- .../src/AspectRatio/AspectRatio.stories.tsx | 14 ------ .../src/Footer/Footer.stories.tsx | 37 ++++++--------- .../PageGrid.docs.mdx => Grid/Grid.docs.mdx} | 8 ++-- .../Grid.stories.tsx} | 28 +++-------- .../src/GridCell/GridCell.docs.mdx | 30 ++++++++---- .../src/GridCell/GridCell.stories.tsx | 40 ++++++---------- .../src/Highlight/Highlight.stories.tsx | 10 ++-- .../src/OrderedList/OrderedList.stories.tsx | 7 --- .../src/Screen/Screen.stories.tsx | 5 -- .../src/TopTaskLink/TopTaskLink.stories.tsx | 46 +++++++++---------- .../UnorderedList/UnorderedList.stories.tsx | 7 --- 32 files changed, 274 insertions(+), 291 deletions(-) delete mode 100644 packages/css/src/grid-cell/README.md create mode 100644 packages/css/src/grid/README.grid-cell.md create mode 100644 packages/css/src/grid/README.grid.md rename packages/css/src/{grid-cell => grid}/grid-cell.scss (59%) create mode 100644 packages/css/src/grid/grid.scss delete mode 100644 packages/css/src/page-grid/page-grid.scss rename packages/react/src/Grid/{PageGrid.test.tsx => Grid.test.tsx} (65%) create mode 100644 packages/react/src/Grid/Grid.tsx delete mode 100644 packages/react/src/Grid/PageGrid.tsx rename proprietary/tokens/src/components/amsterdam/{page-grid.tokens.json => grid.tokens.json} (69%) rename packages/css/src/page-grid/README.md => storybook/storybook-docs/src/grid.stories.mdx (96%) rename storybook/storybook-react/src/{PageGrid/PageGrid.docs.mdx => Grid/Grid.docs.mdx} (84%) rename storybook/storybook-react/src/{PageGrid/PageGrid.stories.tsx => Grid/Grid.stories.tsx} (59%) diff --git a/packages/css/src/grid-cell/README.md b/packages/css/src/grid-cell/README.md deleted file mode 100644 index faadb6ced3..0000000000 --- a/packages/css/src/grid-cell/README.md +++ /dev/null @@ -1,9 +0,0 @@ -# Grid cell - -Beslaat een aantal kolommen in een [Page Grid](?path=/docs/react_layout-page-grid--docs). - -## Gebruik - -Gebruik het `GridCell` component om een grid in cellen te verdelen. -Op de cel kun je aangeven hoeveel kolommen van het grid het element beslaat. -In elke cel plaats je vervolgens een component of element. diff --git a/packages/css/src/grid/README.grid-cell.md b/packages/css/src/grid/README.grid-cell.md new file mode 100644 index 0000000000..454e68b477 --- /dev/null +++ b/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. diff --git a/packages/css/src/grid/README.grid.md b/packages/css/src/grid/README.grid.md new file mode 100644 index 0000000000..ccdc73a5d4 --- /dev/null +++ b/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. diff --git a/packages/css/src/grid-cell/grid-cell.scss b/packages/css/src/grid/grid-cell.scss similarity index 59% rename from packages/css/src/grid-cell/grid-cell.scss rename to packages/css/src/grid/grid-cell.scss index 69d0f47434..b60ffe67bb 100644 --- a/packages/css/src/grid-cell/grid-cell.scss +++ b/packages/css/src/grid/grid-cell.scss @@ -5,29 +5,29 @@ @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; } } @@ -35,11 +35,11 @@ @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; } } diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss new file mode 100644 index 0000000000..02e3b8981e --- /dev/null +++ b/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); + } +} diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss index c919baa0d7..8ac71c86a4 100644 --- a/packages/css/src/index.scss +++ b/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"; diff --git a/packages/css/src/page-grid/page-grid.scss b/packages/css/src/page-grid/page-grid.scss deleted file mode 100644 index 0c2ed52ade..0000000000 --- a/packages/css/src/page-grid/page-grid.scss +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam - */ - -@import "../../utils/breakpoint"; - -.amsterdam-page-grid { - display: grid; - gap: var(--amsterdam-page-grid-gap); - grid-template-columns: repeat(var(--amsterdam-page-grid-narrow-column-count), 1fr); - margin-inline: auto; - padding-inline: var(--amsterdam-page-grid-padding-inline); -} - -@media screen and (min-width: $amsterdam-breakpoint-medium) { - .amsterdam-page-grid { - grid-template-columns: repeat(var(--amsterdam-page-grid-medium-column-count), 1fr); - } -} - -@media screen and (min-width: $amsterdam-breakpoint-wide) { - .amsterdam-page-grid { - grid-template-columns: repeat(var(--amsterdam-page-grid-wide-column-count), 1fr); - } -} diff --git a/packages/css/src/screen/README.md b/packages/css/src/screen/README.md index 2ba3a4239a..9ce55a6ab3 100644 --- a/packages/css/src/screen/README.md +++ b/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`. diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx index 310adc8a6b..74d9366861 100644 --- a/packages/react/src/Accordion/Accordion.tsx +++ b/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' diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx index 24dfef6bf5..f599727feb 100644 --- a/packages/react/src/Alert/Alert.tsx +++ b/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 } diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx index c7f9b4d2e5..164bb1af1a 100644 --- a/packages/react/src/Breadcrumb/Breadcrumb.tsx +++ b/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> & React.RefAttributes - > { + extends ForwardRefExoticComponent> & RefAttributes> { Item: typeof BreadcrumbItem } diff --git a/packages/react/src/Grid/PageGrid.test.tsx b/packages/react/src/Grid/Grid.test.tsx similarity index 65% rename from packages/react/src/Grid/PageGrid.test.tsx rename to packages/react/src/Grid/Grid.test.tsx index 308c5c2e0c..16d75e9e34 100644 --- a/packages/react/src/Grid/PageGrid.test.tsx +++ b/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() - + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toBeInTheDocument() expect(component).toBeVisible() }) it('renders a design system BEM class name', () => { - const { container } = render() - + const { container } = render() 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() - + const { container } = render() 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() - - const { container } = render() - + const { container } = render() const component = container.querySelector(':only-child') - expect(ref.current).toBe(component) }) }) diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx new file mode 100644 index 0000000000..32e96f317d --- /dev/null +++ b/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> & RefAttributes> { + Cell: typeof GridCell +} + +export const Grid = forwardRef( + ( + { children, className, ...restProps }: PropsWithChildren>, + ref: ForwardedRef, + ) => ( +
+ {children} +
+ ), +) as GridComponent + +Grid.Cell = GridCell +Grid.displayName = 'Grid' +GridCell.displayName = 'Grid.Cell' diff --git a/packages/react/src/Grid/GridCell.test.tsx b/packages/react/src/Grid/GridCell.test.tsx index 9fd301ee83..bcefeafff8 100644 --- a/packages/react/src/Grid/GridCell.test.tsx +++ b/packages/react/src/Grid/GridCell.test.tsx @@ -1,37 +1,37 @@ import { render } from '@testing-library/react' import { createRef } from 'react' -import { GridCell } from './GridCell' +import { Grid } from './Grid' import '@testing-library/jest-dom' -describe('GridCell', () => { +describe('Grid.Cell', () => { it('renders', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toBeInTheDocument() expect(component).toBeVisible() }) it('renders a design system BEM class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid-cell') }) it('can have a additional class name', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid-cell extra') }) it('supports ForwardRef in React', () => { const ref = createRef() - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(ref.current).toBe(component) }) it('generates no class names for undefined values for start and span', () => { - const { container } = render() + const { container } = render() const elementWithSpanClass = container.querySelector('[class*="amsterdam-grid-cell--span"]') const elementWithStartClass = container.querySelector('[class*="amsterdam-grid-cell--start"]') expect(elementWithSpanClass).not.toBeInTheDocument() @@ -39,25 +39,25 @@ describe('GridCell', () => { }) it('generates class names for single number values for start and span', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid-cell--span-4 amsterdam-grid-cell--start-2') }) it('generates class names for a single number value for start', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid-cell--span-8') }) it('generates class names for a single number value for span', () => { - const { container } = render() + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid-cell--start-6') }) it('generates class names for a single number for span and array values for start', () => { - const { container } = render() + const { container } = render() 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', @@ -65,7 +65,7 @@ describe('GridCell', () => { }) it('generates class names for array values for span and a single number for start', () => { - const { container } = render() + const { container } = render() 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', @@ -74,7 +74,7 @@ describe('GridCell', () => { it('generates class names for an array of three numbers for start and span', () => { const { container } = render( - , + , ) const component = container.querySelector(':only-child') expect(component).toHaveClass( diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx index ba6e8b1f98..78ee2b57dd 100644 --- a/packages/react/src/Grid/GridCell.tsx +++ b/packages/react/src/Grid/GridCell.tsx @@ -5,7 +5,7 @@ import clsx from 'clsx' import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react' -import type { PageGridColumnNumber, PageGridColumnNumbers } from './PageGrid' +import type { GridColumnNumber, GridColumnNumbers } from './Grid' import { gridCellClasses } from './gridCellClasses' type GridCellFullWidthProp = { @@ -18,9 +18,9 @@ type GridCellFullWidthProp = { type GridCellColumnProps = { fullWidth?: never /** The amount of grid columns the cell spans. */ - span?: PageGridColumnNumber | PageGridColumnNumbers + span?: GridColumnNumber | GridColumnNumbers /** The index of the grid column the cell starts at. */ - start?: PageGridColumnNumber | PageGridColumnNumbers + start?: GridColumnNumber | GridColumnNumbers } // The discriminated union and the `never` types prevent using `fullWidth` together with `span` or `start`. @@ -44,4 +44,4 @@ export const GridCell = forwardRef( ), ) -GridCell.displayName = 'GridCell' +GridCell.displayName = 'Grid.Cell' diff --git a/packages/react/src/Grid/PageGrid.tsx b/packages/react/src/Grid/PageGrid.tsx deleted file mode 100644 index b6f6495b44..0000000000 --- a/packages/react/src/Grid/PageGrid.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license EUPL-1.2+ - * Copyright (c) 2023 Gemeente Amsterdam - */ - -import clsx from 'clsx' -import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react' - -export type PageGridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 - -export type PageGridColumnNumbers = { - narrow: PageGridColumnNumber - medium: PageGridColumnNumber - wide: PageGridColumnNumber -} - -export type PageGridProps = PropsWithChildren> - -export const PageGrid = forwardRef( - ({ children, className, ...restProps }: PageGridProps, ref: ForwardedRef) => ( -
- {children} -
- ), -) - -PageGrid.displayName = 'PageGrid' diff --git a/packages/react/src/Grid/index.ts b/packages/react/src/Grid/index.ts index e45a155292..3af022b7f9 100644 --- a/packages/react/src/Grid/index.ts +++ b/packages/react/src/Grid/index.ts @@ -1,5 +1,4 @@ -export type { GridCellProps } from './GridCell' -export type { PageGridProps } from './PageGrid' - +export * from './Grid' export * from './GridCell' -export * from './PageGrid' + +export type { GridCellProps } from './GridCell' diff --git a/proprietary/tokens/src/components/amsterdam/page-grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json similarity index 69% rename from proprietary/tokens/src/components/amsterdam/page-grid.tokens.json rename to proprietary/tokens/src/components/amsterdam/grid.tokens.json index a7d89fff18..8e1bc9faea 100644 --- a/proprietary/tokens/src/components/amsterdam/page-grid.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json @@ -1,14 +1,8 @@ { "amsterdam": { - "page-grid": { - "narrow": { - "column-count": { "value": "4" } - }, - "medium": { - "column-count": { "value": "8" } - }, - "wide": { - "column-count": { "value": "12" } + "grid": { + "column-count": { + "value": "4" }, "gap": { "value": "clamp(0.5rem, 0.375rem + 3.125vw, 3.5rem)", @@ -17,6 +11,16 @@ "padding-inline": { "value": "clamp(0.75rem, 0.5625rem + 4.875vw, 5.25rem)", "comment": "Equals 1.5 times the gap." + }, + "medium": { + "column-count": { + "value": "8" + } + }, + "wide": { + "column-count": { + "value": "12" + } } } } diff --git a/storybook/storybook-docs/config/preview.tsx b/storybook/storybook-docs/config/preview.tsx index c88f5bfe72..30ec671a86 100644 --- a/storybook/storybook-docs/config/preview.tsx +++ b/storybook/storybook-docs/config/preview.tsx @@ -9,12 +9,6 @@ export const parameters = { date: /Date$/, }, }, - docs: { - // Show code by default. - canvas: { - sourceState: 'shown', - }, - }, options: { storySort: { order: ['Docs', ['Intro']], diff --git a/packages/css/src/page-grid/README.md b/storybook/storybook-docs/src/grid.stories.mdx similarity index 96% rename from packages/css/src/page-grid/README.md rename to storybook/storybook-docs/src/grid.stories.mdx index 8375c97d3a..99a8317f9a 100644 --- a/packages/css/src/page-grid/README.md +++ b/storybook/storybook-docs/src/grid.stories.mdx @@ -1,4 +1,8 @@ -# Page grid +import { Meta } from "@storybook/blocks"; + + + +# Grid Onder elke pagina ligt hetzelfde grid. Alle elementen op een pagina worden op het grid geplaatst. @@ -105,3 +109,8 @@ Dat zorgt ervoor dat content op zo veel mogelijk vensterbreedtes en met diverse Op dit moment reageert de typografie nog op één breakpoint bij een vensterbreedte van 854 pixels. Nu het grid doorontwikkeld is, stemmen we de typografie daar weer op af. Dit aparte breakpoint komt dus snel te vervallen. + +## Componenten + +- [Grid](?path=/docs/react_layout-grid--docs) +- [Grid Cell](?path=/docs/react_layout-grid-cell--docs) diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx index b2d9a38843..9eee3d011a 100644 --- a/storybook/storybook-react/config/preview.tsx +++ b/storybook/storybook-react/config/preview.tsx @@ -13,12 +13,6 @@ export const parameters = { date: /Date$/, }, }, - docs: { - // Show code by default. - canvas: { - sourceState: 'shown', - }, - }, options: { storySort: { order: ['Buttons', 'Containers', 'Feedback', 'Forms', 'Layout', 'Media', 'Navigation', 'Text'], diff --git a/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx b/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx index 5aacee376b..e125a1a321 100644 --- a/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx +++ b/storybook/storybook-react/src/AspectRatio/AspectRatio.stories.tsx @@ -18,13 +18,6 @@ const meta = { options: ['extra-wide', 'wide', 'square', 'tall', 'extra-tall'], }, }, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, } satisfies Meta export default meta @@ -71,13 +64,6 @@ const StoryTemplate: Story = { export const Default: Story = { ...StoryTemplate, - parameters: { - docs: { - canvas: { - sourceState: 'shown', - }, - }, - }, } export const ExtraWide: Story = { diff --git a/storybook/storybook-react/src/Footer/Footer.stories.tsx b/storybook/storybook-react/src/Footer/Footer.stories.tsx index eb7c6a4f89..c16d0241ac 100644 --- a/storybook/storybook-react/src/Footer/Footer.stories.tsx +++ b/storybook/storybook-react/src/Footer/Footer.stories.tsx @@ -5,10 +5,9 @@ import { Footer, - GridCell, + Grid, Heading, Link, - PageGrid, PageMenu, Paragraph, UnorderedList, @@ -19,16 +18,6 @@ import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Containers/Footer', component: Footer, - args: { - children: 'Nieuw component', - }, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, } satisfies Meta export default meta @@ -42,8 +31,8 @@ export const Default: Story = { Colofon - - + +
Contact @@ -64,8 +53,8 @@ export const Default: Story = {
- - + +
Panels en enquêtes @@ -91,8 +80,8 @@ export const Default: Story = {
- - + +
Onderzoek en Statistiek @@ -120,21 +109,21 @@ export const Default: Story = {
- - + + , Over deze website - - + + Privacy Toegankelijkheid - - + + , ], }, diff --git a/storybook/storybook-react/src/PageGrid/PageGrid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx similarity index 84% rename from storybook/storybook-react/src/PageGrid/PageGrid.docs.mdx rename to storybook/storybook-react/src/Grid/Grid.docs.mdx index 0c9db5e322..8a4791f670 100644 --- a/storybook/storybook-react/src/PageGrid/PageGrid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -1,8 +1,8 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; -import * as PageGridStories from "./PageGrid.stories.tsx"; -import README from "../../../../packages/css/src/page-grid/README.md?raw"; +import * as GridStories from "./Grid.stories.tsx"; +import README from "../../../../packages/css/src/grid/README.grid.md?raw"; - + {README} @@ -26,6 +26,6 @@ Elke cel biedt ruimte voor een afbeelding. - Op middelbrede vensters heeft het grid 8 kolommen en staan de eerste twee afbeeldingen naast elkaar en de derde onder de eerste. - Op smalle schermen heeft het grid 4 kolommen en staan de afbeeldingen onder elkaar. - + Voor meer voorbeelden raadpleeg je [Grid Cell](?path=/docs/react_layout-grid-cell--docs) zelf. diff --git a/storybook/storybook-react/src/PageGrid/PageGrid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx similarity index 59% rename from storybook/storybook-react/src/PageGrid/PageGrid.stories.tsx rename to storybook/storybook-react/src/Grid/Grid.stories.tsx index ead823667d..553b7f8006 100644 --- a/storybook/storybook-react/src/PageGrid/PageGrid.stories.tsx +++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx @@ -4,20 +4,13 @@ */ import { Screen } from '@amsterdam/design-system-react' -import { GridCell, PageGrid } from '@amsterdam/design-system-react' +import { Grid } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { - title: 'Layout/Page Grid', - component: PageGrid, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, -} satisfies Meta + title: 'Layout/Grid', + component: Grid, +} satisfies Meta export default meta @@ -36,7 +29,7 @@ const StoryTemplate: Story = { export const Default: Story = { ...StoryTemplate, args: { - children: Array.from(Array(12).keys()).map((i) => ), + children: Array.from(Array(12).keys()).map((i) => ), }, name: 'Basis', } @@ -45,19 +38,12 @@ export const Cells: Story = { ...StoryTemplate, args: { children: Array.from(Array(3).keys()).map((i) => ( - +
- + )), }, name: 'Cellen', - parameters: { - docs: { - canvas: { - sourceState: 'shown', - }, - }, - }, } diff --git a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx index 04f172667b..a87e2d6792 100644 --- a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx +++ b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx @@ -1,23 +1,21 @@ -import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridCellStories from "./GridCell.stories.tsx"; -import README from "../../../../packages/css/src/grid-cell/README.md?raw"; +import README from "../../../../packages/css/src/grid/README.grid-cell.md?raw"; {README} +## Voorbeelden + +### Basis + Een cel beslaat standaard 1 kolom in het grid. Om een cel meer kolommen te laten beslaan, gebruik je de `span` prop. -### Startpositie - -Elke cel start automatisch in de eerstvolgende beschikbare positie in het grid. -Je kunt de startpositie van een cel aanpassen met de `start` prop. -In dit geval `start={2}`: - - + ### Verschillende breedtes @@ -28,7 +26,7 @@ Via `span={{ narrow: 4, medium: 6, wide: 8 }}` is deze cel 4 van de 4 kolommen b -Het kan zelfs voorkomen dat ook de startpositie van een cel afhangt van de vensterbreedte. +Het kan ook voorkomen dat ook de startpositie van een cel afhangt van de vensterbreedte. Gebruik hiervoor de `start` prop met 3 waarden. ### Volledige breedte @@ -37,6 +35,18 @@ Om de cel de volledige breedte te geven – of het grid nu 4, 8, of 12 kolommen +### Startpositie + +Elke cel start automatisch in de eerstvolgende beschikbare positie in het grid. +Een waarde van 1 hoef je dus meestal niet expliciet op te geven. +Je kunt de startpositie van een cel aanpassen met de `start` prop. +Op brede schermen kan het zijn dat een cel een aantal van de middelste kolommen beslaat. +Ook komt dit voor als je halverwege de rij een kolom leeg wil laten. + +Een voorbeeld met `start={2}`: + + + ## Richtlijnen - Zorg ervoor dat het aantal kolommen dat je aan een cel toekent past bij het aantal kolommen van het grid voor de betreffende vensterbreedte. Datzelfde geldt voor het starten van een cel in een latere kolom. Als het totaal van beide waarden is te groot is voegt de browser kolommen toe aan het grid. Dit is niet toegestaan. diff --git a/storybook/storybook-react/src/GridCell/GridCell.stories.tsx b/storybook/storybook-react/src/GridCell/GridCell.stories.tsx index c6f489e8c7..11e92aed9a 100644 --- a/storybook/storybook-react/src/GridCell/GridCell.stories.tsx +++ b/storybook/storybook-react/src/GridCell/GridCell.stories.tsx @@ -4,36 +4,25 @@ */ import { Screen } from '@amsterdam/design-system-react' -import { GridCell, PageGrid } from '@amsterdam/design-system-react' +import { Grid } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { title: 'Layout/Grid Cell', - component: GridCell, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, -} satisfies Meta + component: Grid.Cell, +} satisfies Meta export default meta type Story = StoryObj const StoryTemplate: Story = { - args: { - span: 1, - start: 1, - }, decorators: [ (Story) => ( - + - + ), ], @@ -44,16 +33,6 @@ export const Default: Story = { args: { children:

Deze cel beslaat 4 kolommen.

, span: 4, - start: 1, - }, -} - -export const StartPosition: Story = { - ...StoryTemplate, - args: { - children:

Deze cel start in kolom 2.

, - span: 2, - start: 2, }, } @@ -78,3 +57,12 @@ export const FullWidth: Story = { fullWidth: true, }, } + +export const StartPosition: Story = { + ...StoryTemplate, + args: { + children:

Deze cel start in kolom 2.

, + span: 2, + start: 2, + }, +} diff --git a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx index 45b5512a52..3f03afae3f 100644 --- a/storybook/storybook-react/src/Highlight/Highlight.stories.tsx +++ b/storybook/storybook-react/src/Highlight/Highlight.stories.tsx @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -import { Blockquote, GridCell, Highlight, PageGrid } from '@amsterdam/design-system-react' +import { Blockquote, Grid, Highlight } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' const meta = { @@ -34,14 +34,14 @@ const meta = { }, render: ({ color }) => ( - - + +
We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te sporten. Buitenspelen zou een vak moeten zijn op school.
- - + + ), } satisfies Meta diff --git a/storybook/storybook-react/src/OrderedList/OrderedList.stories.tsx b/storybook/storybook-react/src/OrderedList/OrderedList.stories.tsx index 7c99683c97..bcc5dc4e9d 100644 --- a/storybook/storybook-react/src/OrderedList/OrderedList.stories.tsx +++ b/storybook/storybook-react/src/OrderedList/OrderedList.stories.tsx @@ -12,13 +12,6 @@ const meta = { argTypes: { markers: { control: 'boolean' }, }, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, } satisfies Meta export default meta diff --git a/storybook/storybook-react/src/Screen/Screen.stories.tsx b/storybook/storybook-react/src/Screen/Screen.stories.tsx index 74837ee755..73ddb62387 100644 --- a/storybook/storybook-react/src/Screen/Screen.stories.tsx +++ b/storybook/storybook-react/src/Screen/Screen.stories.tsx @@ -10,11 +10,6 @@ const meta = { title: 'Layout/Screen', component: Screen, parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, layout: 'fullscreen', }, } satisfies Meta diff --git a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx index de4cdbaa91..95df0a8737 100644 --- a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx +++ b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -import { GridCell, PageGrid, TopTaskLink } from '@amsterdam/design-system-react' +import { Grid, TopTaskLink } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' import '@amsterdam/design-system-css/src/top-task-link/top-task-link.scss' @@ -23,11 +23,11 @@ type Story = StoryObj export const Default: Story = { decorators: [ (Story) => ( - - + + - - + + ), ], args: { @@ -42,17 +42,17 @@ export const WithoutDescription: Story = { label: 'Titel', }, render: () => ( - - + + - - + + - - + + - - + + ), parameters: { docs: { @@ -66,20 +66,20 @@ export const WithDescription: Story = { label: 'Titel', }, render: () => ( - - + + - - + + - - + + - - + + - - + + ), parameters: { docs: { diff --git a/storybook/storybook-react/src/UnorderedList/UnorderedList.stories.tsx b/storybook/storybook-react/src/UnorderedList/UnorderedList.stories.tsx index b454c95c4d..a69c40a712 100644 --- a/storybook/storybook-react/src/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/storybook-react/src/UnorderedList/UnorderedList.stories.tsx @@ -22,13 +22,6 @@ const meta = { argTypes: { markers: { control: 'boolean' }, }, - parameters: { - docs: { - canvas: { - sourceState: 'hidden', - }, - }, - }, } satisfies Meta export default meta