diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md index 961a203df5..ed32c6bed8 100644 --- a/packages/css/CHANGELOG.md +++ b/packages/css/CHANGELOG.md @@ -68,7 +68,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * Adjust size of breadcrumb separator and allow natural text wrapping ([#913](https://github.com/Amsterdam/design-system/issues/913)) ([caba940](https://github.com/Amsterdam/design-system/commit/caba94024c5aedf9092a5afbbf625d921fd124b5)) * Improve examples and documentation for cards ([#936](https://github.com/Amsterdam/design-system/issues/936)) ([0f91370](https://github.com/Amsterdam/design-system/commit/0f913702de12cb7b9ca50e8f9da4899c3d934320)) * Merge grid cell files into grid files and directories ([#815](https://github.com/Amsterdam/design-system/issues/815)) ([f4b4ec5](https://github.com/Amsterdam/design-system/commit/f4b4ec5de92d283ee2ef083075297a64b3dfd1cb)) -* Resolve malformed outline and remove excessive whitespace on dialog ([#937](https://github.com/Amsterdam/design-system/issues/937)) ([1fc264a](https://github.com/Amsterdam/design-system/commit/1fc264ac577edaa92e37d4c7e81427dd75b6dbe7)) +* Resolve malformed outline and remove excessive white space on dialog ([#937](https://github.com/Amsterdam/design-system/issues/937)) ([1fc264a](https://github.com/Amsterdam/design-system/commit/1fc264ac577edaa92e37d4c7e81427dd75b6dbe7)) * Use rems for checkbox underline ([#944](https://github.com/Amsterdam/design-system/issues/944)) ([8622326](https://github.com/Amsterdam/design-system/commit/8622326b8686856c44ad03856bac886ee4e5632b)) ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.1.9...@amsterdam/design-system-css@0.2.0) (2023-12-01) @@ -81,7 +81,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * Add common link tokens and use them in all link-like components ([#814](https://github.com/Amsterdam/design-system/issues/814)) ([9b5bd55](https://github.com/Amsterdam/design-system/commit/9b5bd55d0b118f246b828e023b75be1e84f98af4)) * Allow end-alignment on page menu ([#835](https://github.com/Amsterdam/design-system/issues/835)) ([035ca08](https://github.com/Amsterdam/design-system/commit/035ca08842ee8ad955b260fb26693fe739801df4)) -* Allow small and large vertical whitespace on grids ([#821](https://github.com/Amsterdam/design-system/issues/821)) ([aa54eb9](https://github.com/Amsterdam/design-system/commit/aa54eb911bfed633856a74e0be4e11d4ad8f3ebc)) +* Allow small and large vertical white space on grids ([#821](https://github.com/Amsterdam/design-system/issues/821)) ([aa54eb9](https://github.com/Amsterdam/design-system/commit/aa54eb911bfed633856a74e0be4e11d4ad8f3ebc)) * Update typography system and values, implement compact theme ([#803](https://github.com/Amsterdam/design-system/issues/803)) ([9b087ec](https://github.com/Amsterdam/design-system/commit/9b087ec5c6e75dfafadcdcde710747ef63951917)) ## [0.1.9](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-css@0.1.8...@amsterdam/design-system-css@0.1.9) (2023-11-27) diff --git a/packages/css/src/common/size.scss b/packages/css/src/common/size.scss new file mode 100644 index 0000000000..81ce503df9 --- /dev/null +++ b/packages/css/src/common/size.scss @@ -0,0 +1,13 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +/** The set of available options for sizing. */ +$amsterdam-sizes: ( + "xs": "extra-small", + "sm": "small", + "md": "medium", + "lg": "large", + "xl": "extra-large", +); diff --git a/packages/css/src/components/alert/README.md b/packages/css/src/components/alert/README.md index 166bf8722d..4fb77388f3 100644 --- a/packages/css/src/components/alert/README.md +++ b/packages/css/src/components/alert/README.md @@ -15,8 +15,8 @@ There are four types of notifications: - Place an orange Alert directly below the Header for important and urgent information. Examples: system outage or changes in the opening hours of a City Office. -- Ensure sufficient whitespace around the Alert. - The grid’s whitespace is a good reference – place the Alert in its own cell. +- Ensure sufficient white space around the Alert. + The grid’s white space is a good reference – place the Alert in its own cell. - By default, the Alert cannot be closed. This functionality can be added optionally. - Optionally, the title can be omitted. diff --git a/packages/css/src/components/column/README.md b/packages/css/src/components/column/README.md new file mode 100644 index 0000000000..e95e09b600 --- /dev/null +++ b/packages/css/src/components/column/README.md @@ -0,0 +1,3 @@ +# Column + +Stacks its children vertically and adds a vertical gap between them. diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss new file mode 100644 index 0000000000..adfefcba6a --- /dev/null +++ b/packages/css/src/components/column/column.scss @@ -0,0 +1,16 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +@import "../../common/size"; + +.amsterdam-column { + display: grid; +} + +@each $size, $label in $amsterdam-sizes { + .amsterdam-column--#{$label} { + gap: var(--amsterdam-column-gap-#{$size}); + } +} diff --git a/packages/css/src/components/gap/README.md b/packages/css/src/components/gap/README.md new file mode 100644 index 0000000000..b3c52f61f5 --- /dev/null +++ b/packages/css/src/components/gap/README.md @@ -0,0 +1,3 @@ +# Gap + +Use these utility classes to add consistent white space between a set of elements. diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss new file mode 100644 index 0000000000..6e8fc4a9b2 --- /dev/null +++ b/packages/css/src/components/gap/gap.scss @@ -0,0 +1,16 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +@import "../../common/size"; + +[class|="amsterdam-gap-"] { + display: grid !important; +} + +@each $size in map-keys($amsterdam-sizes) { + .amsterdam-gap--#{$size} { + gap: var(--amsterdam-gap-#{$size}) !important; + } +} diff --git a/packages/css/src/components/image/image.scss b/packages/css/src/components/image/image.scss index 870bfcd845..f8dc9f60cb 100644 --- a/packages/css/src/components/image/image.scss +++ b/packages/css/src/components/image/image.scss @@ -15,6 +15,6 @@ } // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes -// [2] Remove ‘phantom’ whitespace +// [2] Remove ‘phantom’ white space // [3] Italicise alt text to visually offset it from surrounding copy // Source: https://x.com/csswizardry/status/1717841334462005661 diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 900e71dd5e..01f3247304 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -4,6 +4,9 @@ */ /* Append here */ +@import "./column/column"; +@import "./margin/margin"; +@import "./gap/gap"; @import "./fieldset/fieldset"; @import "./link-list/link-list"; @import "./badge/badge"; diff --git a/packages/css/src/components/margin/README.md b/packages/css/src/components/margin/README.md new file mode 100644 index 0000000000..09e75835c9 --- /dev/null +++ b/packages/css/src/components/margin/README.md @@ -0,0 +1,3 @@ +# Margin + +Use these utility classes to add white space below a single element. diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss new file mode 100644 index 0000000000..016872d933 --- /dev/null +++ b/packages/css/src/components/margin/margin.scss @@ -0,0 +1,12 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +@import "../../common/size"; + +@each $size in map-keys($amsterdam-sizes) { + .amsterdam-mb--#{$size} { + margin-block-end: var(--amsterdam-margin-#{$size}) !important; + } +} diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 608435ef50..272ded9205 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -/** Apply border box sizing, reset whitespace and list styles. */ +/** Apply border box sizing, reset white space and list styles. */ @mixin reset { box-sizing: border-box; list-style-type: none; diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index ae60becf52..7d02c2977a 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -/** Apply border box sizing, reset whitespace and list styles. */ +/** Apply border box sizing, reset white space and list styles. */ @mixin reset { box-sizing: border-box; list-style: none; diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 3353dbbe67..1d1de0e78a 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -81,7 +81,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline * Add common link tokens and use them in all link-like components ([#814](https://github.com/Amsterdam/design-system/issues/814)) ([9b5bd55](https://github.com/Amsterdam/design-system/commit/9b5bd55d0b118f246b828e023b75be1e84f98af4)) * Allow end-alignment on page menu ([#835](https://github.com/Amsterdam/design-system/issues/835)) ([035ca08](https://github.com/Amsterdam/design-system/commit/035ca08842ee8ad955b260fb26693fe739801df4)) -* Allow small and large vertical whitespace on grids ([#821](https://github.com/Amsterdam/design-system/issues/821)) ([aa54eb9](https://github.com/Amsterdam/design-system/commit/aa54eb911bfed633856a74e0be4e11d4ad8f3ebc)) +* Allow small and large vertical white space on grids ([#821](https://github.com/Amsterdam/design-system/issues/821)) ([aa54eb9](https://github.com/Amsterdam/design-system/commit/aa54eb911bfed633856a74e0be4e11d4ad8f3ebc)) * Update typography system and values, implement compact theme ([#803](https://github.com/Amsterdam/design-system/issues/803)) ([9b087ec](https://github.com/Amsterdam/design-system/commit/9b087ec5c6e75dfafadcdcde710747ef63951917)) ### Bug Fixes diff --git a/packages/react/src/Column/Column.test.tsx b/packages/react/src/Column/Column.test.tsx new file mode 100644 index 0000000000..3b3c3371ee --- /dev/null +++ b/packages/react/src/Column/Column.test.tsx @@ -0,0 +1,67 @@ +import { render, screen } from '@testing-library/react' +import { createRef } from 'react' +import { Column, columnGapSizes } from './Column' +import '@testing-library/jest-dom' + +describe('Column', () => { + it('renders', () => { + 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 component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-column--medium') + }) + + columnGapSizes.map((size) => + it('renders with ${size} gap', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass(`amsterdam-column--${size}`) + }), + ) + + it('renders an additional class name', () => { + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(component).toHaveClass('amsterdam-column--medium extra') + }) + + it('renders with an article tag', () => { + render() + + const component = screen.getByRole('article') + + expect(component).toBeInTheDocument() + }) + + it('renders with a section tag', () => { + const { container } = render() + + const component = container.querySelector('section') + + expect(component).toBeInTheDocument() + }) + + it('supports ForwardRef in React', () => { + const ref = createRef() + + const { container } = render() + + const component = container.querySelector(':only-child') + + expect(ref.current).toBe(component) + }) +}) diff --git a/packages/react/src/Column/Column.tsx b/packages/react/src/Column/Column.tsx new file mode 100644 index 0000000000..881006b115 --- /dev/null +++ b/packages/react/src/Column/Column.tsx @@ -0,0 +1,33 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +import clsx from 'clsx' +import { forwardRef } from 'react' +import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' + +export const columnGapSizes: Array = ['extra-small', 'small', 'medium', 'large', 'extra-large'] + +type ColumnTag = 'article' | 'div' | 'section' +type ColumnGap = (typeof columnGapSizes)[number] + +export type ColumnProps = { + /** The element to render the column with. */ + as?: ColumnTag + /** The amount of vertical space between the column’s children. */ + gap?: ColumnGap +} & PropsWithChildren> + +export const Column = forwardRef( + ( + { as: Tag = 'div', children, className, gap = 'medium', ...restProps }: ColumnProps, + ref: ForwardedRef, + ) => ( + + {children} + + ), +) + +Column.displayName = 'Column' diff --git a/packages/react/src/Column/README.md b/packages/react/src/Column/README.md new file mode 100644 index 0000000000..238a69b086 --- /dev/null +++ b/packages/react/src/Column/README.md @@ -0,0 +1,3 @@ +# React Column component + +[Column documentation](../../../css/src/components/column/README.md) diff --git a/packages/react/src/Column/index.ts b/packages/react/src/Column/index.ts new file mode 100644 index 0000000000..7a073efeec --- /dev/null +++ b/packages/react/src/Column/index.ts @@ -0,0 +1,2 @@ +export { Column } from './Column' +export type { ColumnProps } from './Column' diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx index 37e279419f..05a144ee71 100644 --- a/packages/react/src/Grid/Grid.test.tsx +++ b/packages/react/src/Grid/Grid.test.tsx @@ -24,7 +24,7 @@ describe('Grid', () => { expect(component).toHaveClass('amsterdam-grid') }) - it('renders a medium vertical spacing class name', () => { + it('renders a medium vertical padding class name', () => { const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium') diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index bc27e2955b..179b9d5bdb 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -21,20 +21,20 @@ type GridPaddingSize = 'small' | 'medium' | 'large' type GridPaddingVerticalProp = { paddingBottom?: never paddingTop?: never - /** The amount of vertical whitespace above and below the grid. */ + /** The amount of vertical white space above and below the grid. */ paddingVertical?: GridPaddingSize } type GridPaddingTopAndBottomProps = { - /** The amount of vertical whitespace below the grid. */ + /** The amount of vertical white space below the grid. */ paddingBottom?: GridPaddingSize - /** The amount of vertical whitespace above the grid. */ + /** The amount of vertical white space above the grid. */ paddingTop?: GridPaddingSize paddingVertical?: never } export type GridProps = { - /** The amount of vertical whitespace between rows of the grid. */ + /** The amount of vertical white space between rows of the grid. */ gapVertical?: 'none' | 'small' | 'large' } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren> diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index dfb56d2582..1f55d448d4 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -4,6 +4,7 @@ */ /* Append here */ +export * from './Column' export * from './Fieldset' export * from './LinkList' export * from './Badge' diff --git a/plop-templates/react.tsx.hbs b/plop-templates/react.tsx.hbs index c8c7d3aee3..af314e856b 100644 --- a/plop-templates/react.tsx.hbs +++ b/plop-templates/react.tsx.hbs @@ -7,7 +7,7 @@ import clsx from 'clsx' import { forwardRef } from 'react' import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react' -export interface {{pascalCase name}}Props extends PropsWithChildren> {} +export type {{pascalCase name}}Props = PropsWithChildren> export const {{pascalCase name}} = forwardRef( ({ children, className, ...restProps }: {{pascalCase name}}Props, ref: ForwardedRef) => ( diff --git a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json new file mode 100644 index 0000000000..dededef4d8 --- /dev/null +++ b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json @@ -0,0 +1,11 @@ +{ + "amsterdam": { + "space": { + "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" }, + "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" }, + "md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" }, + "lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" }, + "xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" } + } + } +} diff --git a/proprietary/tokens/src/brand/amsterdam/space.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.tokens.json new file mode 100644 index 0000000000..e47eb6bc33 --- /dev/null +++ b/proprietary/tokens/src/brand/amsterdam/space.tokens.json @@ -0,0 +1,11 @@ +{ + "amsterdam": { + "space": { + "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" }, + "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" }, + "md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" }, + "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" }, + "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/column.tokens.json b/proprietary/tokens/src/components/amsterdam/column.tokens.json new file mode 100644 index 0000000000..a68812bed4 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/column.tokens.json @@ -0,0 +1,13 @@ +{ + "amsterdam": { + "column": { + "gap": { + "xs": { "value": "{amsterdam.space.xs}" }, + "sm": { "value": "{amsterdam.space.sm}" }, + "md": { "value": "{amsterdam.space.md}" }, + "lg": { "value": "{amsterdam.space.lg}" }, + "xl": { "value": "{amsterdam.space.xl}" } + } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/gap.tokens.json b/proprietary/tokens/src/components/amsterdam/gap.tokens.json new file mode 100644 index 0000000000..2608ded0df --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/gap.tokens.json @@ -0,0 +1,11 @@ +{ + "amsterdam": { + "gap": { + "xs": { "value": "{amsterdam.space.xs}" }, + "sm": { "value": "{amsterdam.space.sm}" }, + "md": { "value": "{amsterdam.space.md}" }, + "lg": { "value": "{amsterdam.space.lg}" }, + "xl": { "value": "{amsterdam.space.xl}" } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/margin.tokens.json b/proprietary/tokens/src/components/amsterdam/margin.tokens.json new file mode 100644 index 0000000000..576269df38 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/margin.tokens.json @@ -0,0 +1,11 @@ +{ + "amsterdam": { + "margin": { + "xs": { "value": "{amsterdam.space.xs}" }, + "sm": { "value": "{amsterdam.space.sm}" }, + "md": { "value": "{amsterdam.space.md}" }, + "lg": { "value": "{amsterdam.space.lg}" }, + "xl": { "value": "{amsterdam.space.xl}" } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/mark.tokens.json b/proprietary/tokens/src/components/amsterdam/mark.tokens.json index 3d423de5e8..ee4eefd2ca 100644 --- a/proprietary/tokens/src/components/amsterdam/mark.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/mark.tokens.json @@ -1,7 +1,7 @@ { "amsterdam": { "mark": { - "background-color": { "value": "var(--amsterdam-color-yellow)" } + "background-color": { "value": "{amsterdam.color.yellow}" } } } } diff --git a/storybook/storybook-docs/src/space.stories.mdx b/storybook/storybook-docs/src/space.stories.mdx new file mode 100644 index 0000000000..06e404019a --- /dev/null +++ b/storybook/storybook-docs/src/space.stories.mdx @@ -0,0 +1,42 @@ +import { Meta } from "@storybook/blocks"; + + + +# Space + +## Between components + +Five sizes are available for white space between components. +They are fluid and depend on the width of the window. + +The medium size is the default. +Multiplication factors for the smaller and larger lengths are ¼, ½, 1½, and 2. + +The tables below show the resulting pixels widths at some reference widths. + +#### Spacious + +In spacious mode, the medium white space grows from 16 to 56 pixels between window widths of 320 and 1600. + +| Window width | Extra small | Small | Medium | Large | Extra large | +| :----------: | :---------: | :---: | :----: | :---: | :---------: | +| 320 | 4 | 8 | **16** | 24 | 32 | +| 576 | 6 | 12 | **24** | 36 | 48 | +| 1088 | 10 | 20 | **40** | 60 | 80 | +| 1600 | 14 | 28 | **56** | 84 | 102 | + +#### Compact + +In compact mode, the medium white space grows from 16 to 40 pixels between window widths of 1088 and 2624. + +| Window width | Extra small | Small | Medium | Large | Extra large | +| :----------: | :---------: | :---: | :----: | :---: | :---------: | +| 1088 | 4 | 8 | **16** | 24 | 32 | +| 1600 | 6 | 12 | **24** | 36 | 48 | +| 2112 | 8 | 16 | **32** | 48 | 64 | +| 2624 | 10 | 20 | **40** | 60 | 80 | + +## About the units we use + +We use pixels in our documentation on sizes to convey a more accurate mental image. +In code, sizes are defined in relative units (like `rem`, `em`, `ex`, `vw`, `vh`, and `ch`) to make components more flexible and accessible. diff --git a/storybook/storybook-react/src/Column/Column.docs.mdx b/storybook/storybook-react/src/Column/Column.docs.mdx new file mode 100644 index 0000000000..c70b9af875 --- /dev/null +++ b/storybook/storybook-react/src/Column/Column.docs.mdx @@ -0,0 +1,32 @@ +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as ColumnStories from "./Column.stories.tsx"; +import README from "../../../../packages/css/src/components/column/README.md?raw"; + + + +{README} + +## Design + +The five [spacing](?path=/docs/docs-design-guidelines-spacing--docs) sizes are available for the size of the gap. + +## How to Use + +Wrap a Column around a set of components that need the same amount of white space between them. + +To add white space below a single element, you can alternatively use a utility class for bottom margins, e.g. `class="amsterdam-mb-md"`. + +## Examples + +### Default + + + + + +### Use Another HTML Element + +By default, a Column renders a `
`. +Use the `as` prop to make your markup more semantic. + + diff --git a/storybook/storybook-react/src/Column/Column.stories.tsx b/storybook/storybook-react/src/Column/Column.stories.tsx new file mode 100644 index 0000000000..a27d416b17 --- /dev/null +++ b/storybook/storybook-react/src/Column/Column.stories.tsx @@ -0,0 +1,72 @@ +/** + * @license EUPL-1.2+ + * Copyright (c) 2024 Gemeente Amsterdam + */ + +import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' + +const ThreeBoxes = Array.from(Array(3).keys()).map((i) => ( + + {i + 1} + +)) + +const meta = { + title: 'Layout/Column', + component: Column, + args: { + children: ThreeBoxes, + }, + argTypes: { + as: { + control: { type: 'radio' }, + options: ['article', 'div', 'section'], + }, + children: { + table: { disable: true }, + }, + gap: { + control: 'radio', + options: ['extra-small', 'small', 'medium', 'large', 'extra-large'], + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = {} + +export const CustomTagName: Story = { + args: { + as: 'section', + children: [ + + + + Nieuwe manieren om afval op te halen + + + + Afvalboten, bakfietsen en ondergrondse containers. We experimenteren met nieuwe manieren om afval op te halen + in het centrum. + + Gepubliceerd: 1 juli 2023 + , + + + + Verlenging proef ophalen afval per boot + + + + Een proef met het anders ophalen van afval. We halen vuilniszakken hier op met kleine wagentjes, kleine + vuilniswagens en een afvalboot. + + Gepubliceerd: 15 juni 2023 + , + ], + }, +} diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx index a6d0a561a1..1422e9c414 100644 --- a/storybook/storybook-react/src/Grid/Grid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -77,9 +77,8 @@ An example with `start={2}`: ### Use Another HTML Element -A cell is a `
` in your HTML by default. -You can use the `as` prop if you need a different element. -This way, you can make your markup more semantic. +By default, a Grid Cell renders a `
`. +Use the `as` prop to make your markup more semantic. diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx index fa20e98ef6..be23fd6118 100644 --- a/storybook/storybook-react/src/Grid/Grid.stories.tsx +++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx @@ -37,7 +37,7 @@ const cellMeta = { table: { disable: true }, }, as: { - control: { type: 'inline-radio' }, + control: { type: 'radio' }, options: ['article', 'div', 'section'], }, span: { diff --git a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx index b76798e583..27a83702a5 100644 --- a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx +++ b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx @@ -11,7 +11,7 @@ import README from "../../../../packages/css/src/components/ordered-list/README. ### Default The list uses ascending numbers as bullet points, providing enough space for numbers up to 99. -Extra whitespace between items enhances the distinction, mainly when they consist of multiple lines of text. +Extra white space between items enhances the distinction, mainly when they consist of multiple lines of text. diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx b/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx index d907294aae..59ab071d8a 100644 --- a/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx +++ b/storybook/storybook-react/src/Spotlight/Spotlight.docs.mdx @@ -44,7 +44,7 @@ import README from "../../../../packages/css/src/components/spotlight/README.md? ### Custom HTML Element -By default, a spotlight is included in your HTML as a `
`. -Use the `as` prop to render a different element and make your markup more semantic. +By default, a Spotlight renders a `
`. +Use the `as` prop to make your markup more semantic.