diff --git a/packages/css/src/common/size.scss b/packages/css/src/common/size.scss index ea28904f2d..804c4e9ca6 100644 --- a/packages/css/src/common/size.scss +++ b/packages/css/src/common/size.scss @@ -3,11 +3,12 @@ * Copyright Gemeente Amsterdam */ -/** The set of available options for sizing. */ +/** The set of available widths for gaps and margins. */ $ams-sizes: ( "no": "none", "xs": "extra-small", "sm": "small", + "md": "medium", "lg": "large", "xl": "extra-large", ); diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss index 56599223b2..361768b037 100644 --- a/packages/css/src/components/column/column.scss +++ b/packages/css/src/components/column/column.scss @@ -12,7 +12,9 @@ } @each $size, $label in $ams-sizes { - .ams-column--gap-#{$label} { - gap: var(--ams-column-gap-#{$size}); + @if $size != "md" { + .ams-column--gap-#{$label} { + gap: var(--ams-column-gap-#{$size}); + } } } diff --git a/packages/css/src/components/gap/README.md b/packages/css/src/components/gap/README.md index 8c3ca5cd5c..2088f3d198 100644 --- a/packages/css/src/components/gap/README.md +++ b/packages/css/src/components/gap/README.md @@ -2,4 +2,25 @@ # Gap -Use these utility classes to add consistent white space between a set of elements. +Adds white space between a set of elements. + +## Class names + +The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the width or height of the gap. + +| Class name | Preview | +| ------------- | ----------------------------------------------------------------------------------------- | +| `ams-gap--xs` |
| +| `ams-gap--sm` |
| +| `ams-gap--md` |
| +| `ams-gap--lg` |
| +| `ams-gap--xl` |
| + +## Guidelines + +- Use this utility class to vertically separate the children of a parent element from each other. +- It can be used on any element and sets the `gap` CSS property. + It also makes the element a grid container; the gap would be ignored otherwise. + These declarations are marked with the `!important` flag to ensure they override any other gaps and display modes. +- To add a gap between 2 siblings, the first one can be given a [Margin Bottom](/docs/utilities-css-margin--docs) instead. + This may be preferable because it doesn’t change the parent’s display mode. diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss index fa3da29bb6..b5e2b5ee2a 100644 --- a/packages/css/src/components/gap/gap.scss +++ b/packages/css/src/components/gap/gap.scss @@ -10,7 +10,9 @@ } @each $size in map-keys($ams-sizes) { - .ams-gap--#{$size} { - gap: var(--ams-gap-#{$size}) !important; + @if $size != "no" { + .ams-gap--#{$size} { + grid-gap: var(--ams-gap-#{$size}) !important; + } } } diff --git a/packages/css/src/components/margin/README.md b/packages/css/src/components/margin/README.md index 1b4767a941..8078032e37 100644 --- a/packages/css/src/components/margin/README.md +++ b/packages/css/src/components/margin/README.md @@ -2,4 +2,24 @@ # Margin -Use these utility classes to add white space below a single element. +Adds white space below a single element. + +## Class names + +The five sizes of [Component Space](/docs/foundation-design-tokens-space--docs) are available for the height of the bottom margin. + +| Class name | Preview | +| ------------ | -------------------------------------------------------------------------------------------- | +| `ams-mb--xs` |
| +| `ams-mb--sm` |
| +| `ams-mb--md` |
| +| `ams-mb--lg` |
| +| `ams-mb--xl` |
| + +## Guidelines + +- Use this utility class to vertically separate one element from the next. +- It can be used on any element and sets the `margin-block-end` CSS property. This declaration is marked with the `!important` flag to ensure it overrides any other margins. +- Elements’ top and bottom margins are sometimes collapsed into a single margin. Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details. +- To add equal margins between elements, either use the [Gap](/docs/utilities-css-gap--docs) utility class on their common parent or wrap them in a [Column](/docs/components-layout-column--docs) component. + This helps in loops: it prevents having to treat the last element differently. diff --git a/packages/css/src/components/margin/margin.scss b/packages/css/src/components/margin/margin.scss index 2ba5b5c1b1..45b9953919 100644 --- a/packages/css/src/components/margin/margin.scss +++ b/packages/css/src/components/margin/margin.scss @@ -6,7 +6,9 @@ @import "../../common/size"; @each $size in map-keys($ams-sizes) { - .ams-mb--#{$size} { - margin-block-end: var(--ams-margin-#{$size}) !important; + @if $size != "no" { + .ams-mb--#{$size} { + margin-block-end: var(--ams-margin-#{$size}) !important; + } } } diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss index 30c6164048..943401dc44 100644 --- a/packages/css/src/components/row/row.scss +++ b/packages/css/src/components/row/row.scss @@ -12,8 +12,10 @@ } @each $size, $label in $ams-sizes { - .ams-row--gap-#{$label} { - gap: var(--ams-row-gap-#{$size}); + @if $size != "md" { + .ams-row--gap-#{$label} { + gap: var(--ams-row-gap-#{$size}); + } } } diff --git a/packages/css/src/components/visually-hidden/README.md b/packages/css/src/components/visually-hidden/README.md index 8f270effc3..03ce067799 100644 --- a/packages/css/src/components/visually-hidden/README.md +++ b/packages/css/src/components/visually-hidden/README.md @@ -4,7 +4,11 @@ Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers. +## Class name + +`ams-visually-hidden` + ## Guidelines - In most cases, visually available content should be accessible to non-visual user agents and vice versa. -- Elaborate instructions or guidance read only by non-visual user agents can do more harm than good. + Elaborate instructions or guidance read only by non-visual user agents can do more harm than good. diff --git a/storybook/config/manager-head.html b/storybook/config/manager-head.html index c45ed87fff..1566bdbed2 100644 --- a/storybook/config/manager-head.html +++ b/storybook/config/manager-head.html @@ -2,7 +2,7 @@ // Somewhat hacky way to expand all folders. Storybook does not support that natively. var clickCollapsedItemsUntilNoneLeft = () => { const collapsedItems = document.querySelectorAll( - ':is(button[data-parent-id="components"], button[data-parent-id="pages"])[aria-expanded="false"]', + ':is(button[data-parent-id="foundation"], button[data-parent-id="components"], button[data-parent-id="utilities"], button[data-parent-id="pages"])[aria-expanded="false"]', ); for (item of collapsedItems) { diff --git a/storybook/config/preview-body.html b/storybook/config/preview-body.html index 9debb3fd07..3ee161dd8b 100644 --- a/storybook/config/preview-body.html +++ b/storybook/config/preview-body.html @@ -59,4 +59,17 @@ margin: -1rem; /* stylelint-disable-line */ padding: 1rem; /* stylelint-disable-line */ } + + [class*="ams-docs-token-preview--"] { + block-size: 1rem; + } + + [class*="ams-docs-token-preview--border"] { + border-inline-start-style: solid; + } + + [class*="ams-docs-token-preview--space"] { + outline: 1px dashed var(--ams-color-neutral-grey2); + background-color: var(--ams-color-primary-white); + } diff --git a/storybook/src/components/Accordion/Accordion.stories.tsx b/storybook/src/components/Accordion/Accordion.stories.tsx index 654460aaa1..5153940da1 100644 --- a/storybook/src/components/Accordion/Accordion.stories.tsx +++ b/storybook/src/components/Accordion/Accordion.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Accordion, Paragraph } from '@amsterdam/design-system-react/src' +import { Paragraph } from '@amsterdam/design-system-react' +import { Accordion } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleAccordionHeading, exampleParagraph } from '../shared/exampleContent' diff --git a/storybook/src/components/Alert/Alert.stories.tsx b/storybook/src/components/Alert/Alert.stories.tsx index 65e30655bb..694f11f315 100644 --- a/storybook/src/components/Alert/Alert.stories.tsx +++ b/storybook/src/components/Alert/Alert.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Alert, Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react/src' +import { Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react' +import { Alert } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/AspectRatio/AspectRatio.stories.tsx b/storybook/src/components/AspectRatio/AspectRatio.stories.tsx index 12554de7e4..d1814cc75a 100644 --- a/storybook/src/components/AspectRatio/AspectRatio.stories.tsx +++ b/storybook/src/components/AspectRatio/AspectRatio.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Image } from '@amsterdam/design-system-react/src' +import { Image } from '@amsterdam/design-system-react' +import { AspectRatio } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Avatar/Avatar.stories.tsx b/storybook/src/components/Avatar/Avatar.stories.tsx index bd88e42a62..e4c2095385 100644 --- a/storybook/src/components/Avatar/Avatar.stories.tsx +++ b/storybook/src/components/Avatar/Avatar.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Avatar, Header, PageMenu } from '@amsterdam/design-system-react/src' +import { Header, PageMenu } from '@amsterdam/design-system-react' +import { Avatar } from '@amsterdam/design-system-react/src' import { SearchIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Button/Button.stories.tsx b/storybook/src/components/Button/Button.stories.tsx index 32e91cca62..57255852da 100644 --- a/storybook/src/components/Button/Button.stories.tsx +++ b/storybook/src/components/Button/Button.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Button, Icon } from '@amsterdam/design-system-react/src' +import { Icon } from '@amsterdam/design-system-react' +import { Button } from '@amsterdam/design-system-react/src' import { ShareIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Card/Card.stories.tsx b/storybook/src/components/Card/Card.stories.tsx index f1fda4c4f8..1ce91605cb 100644 --- a/storybook/src/components/Card/Card.stories.tsx +++ b/storybook/src/components/Card/Card.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Card, Heading, Image, Paragraph } from '@amsterdam/design-system-react/src' +import { AspectRatio, Heading, Image, Paragraph } from '@amsterdam/design-system-react' +import { Card } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleTopTask } from '../shared/exampleContent' diff --git a/storybook/src/components/Column/Column.docs.mdx b/storybook/src/components/Column/Column.docs.mdx index fdb5a262ea..79c81d4267 100644 --- a/storybook/src/components/Column/Column.docs.mdx +++ b/storybook/src/components/Column/Column.docs.mdx @@ -16,7 +16,7 @@ The five [space](/docs/foundation-design-tokens-space--docs) sizes are available 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="ams-mb--md"`. +To add white space below a single element, the [Margin Bottom](/docs/utilities-css-margin--docs) utility class can be used as well. ## Examples diff --git a/storybook/src/components/Column/Column.stories.tsx b/storybook/src/components/Column/Column.stories.tsx index d7f8782858..1b8f14925e 100644 --- a/storybook/src/components/Column/Column.stories.tsx +++ b/storybook/src/components/Column/Column.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Card, Column, Heading, Paragraph } from '@amsterdam/design-system-react/src' +import { Card, Heading, Paragraph } from '@amsterdam/design-system-react' +import { Column } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const ThreeBoxes = Array.from(Array(3).keys()).map((i) => ( diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index e0602180aa..898cad3ce7 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { DescriptionList } from '@amsterdam/design-system-react' +import { DescriptionList } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { inverseColorDecorator } from '../shared/decorators' import { exampleParagraph } from '../shared/exampleContent' diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index 459b7753ea..08505065c3 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Button, Dialog, Heading, Paragraph } from '@amsterdam/design-system-react/src' +import { Button, Heading, Paragraph } from '@amsterdam/design-system-react' +import { Dialog } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { MouseEvent } from 'react' diff --git a/storybook/src/components/Field/Field.stories.tsx b/storybook/src/components/Field/Field.stories.tsx index e542c88ea8..5fb9d0600a 100644 --- a/storybook/src/components/Field/Field.stories.tsx +++ b/storybook/src/components/Field/Field.stories.tsx @@ -3,8 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { ErrorMessage, Label, TextInput } from '@amsterdam/design-system-react' -import { Field, Paragraph } from '@amsterdam/design-system-react/src' +import { ErrorMessage, Label, Paragraph, TextInput } from '@amsterdam/design-system-react' +import { Field } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/FieldSet/FieldSet.stories.tsx b/storybook/src/components/FieldSet/FieldSet.stories.tsx index 23a61323a3..136e56cf52 100644 --- a/storybook/src/components/FieldSet/FieldSet.stories.tsx +++ b/storybook/src/components/FieldSet/FieldSet.stories.tsx @@ -8,12 +8,12 @@ import { Column, ErrorMessage, Field, - FieldSet, Label, Paragraph, Radio, TextInput, -} from '@amsterdam/design-system-react/src' +} from '@amsterdam/design-system-react' +import { FieldSet } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx index 09fe28144b..aa7d77e744 100644 --- a/storybook/src/components/Footer/Footer.stories.tsx +++ b/storybook/src/components/Footer/Footer.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Footer, Grid, Heading, LinkList, PageMenu, Paragraph } from '@amsterdam/design-system-react/src' +import { Grid, Heading, LinkList, PageMenu, Paragraph } from '@amsterdam/design-system-react' +import { Footer } from '@amsterdam/design-system-react/src' import { CameraIcon, ClockIcon, diff --git a/storybook/src/components/Grid/Grid.stories.tsx b/storybook/src/components/Grid/Grid.stories.tsx index d25052bb18..74e46ba618 100644 --- a/storybook/src/components/Grid/Grid.stories.tsx +++ b/storybook/src/components/Grid/Grid.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Screen } from '@amsterdam/design-system-react/src' +import { Screen } from '@amsterdam/design-system-react' +import { Grid } from '@amsterdam/design-system-react/src' import type { GridCellProps } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx index fadec57ba5..08da3fd90e 100644 --- a/storybook/src/components/Header/Header.stories.tsx +++ b/storybook/src/components/Header/Header.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Header, PageMenu } from '@amsterdam/design-system-react/src' +import { PageMenu } from '@amsterdam/design-system-react' +import { Header } from '@amsterdam/design-system-react/src' import { SearchIcon } from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Heading/Heading.stories.tsx b/storybook/src/components/Heading/Heading.stories.tsx index e4873be940..6917492710 100644 --- a/storybook/src/components/Heading/Heading.stories.tsx +++ b/storybook/src/components/Heading/Heading.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Column, Heading } from '@amsterdam/design-system-react/src' +import { Column } from '@amsterdam/design-system-react' +import { Heading } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { inverseColorDecorator } from '../shared/decorators' import { exampleHeading } from '../shared/exampleContent' diff --git a/storybook/src/components/Icon/Icon.stories.tsx b/storybook/src/components/Icon/Icon.stories.tsx index 12fd25c2f1..d4cdc705f6 100644 --- a/storybook/src/components/Icon/Icon.stories.tsx +++ b/storybook/src/components/Icon/Icon.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Heading, Icon } from '@amsterdam/design-system-react/src' +import { Heading } from '@amsterdam/design-system-react' +import { Icon } from '@amsterdam/design-system-react/src' import * as Icons from '@amsterdam/design-system-react-icons' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Link/Link.stories.tsx b/storybook/src/components/Link/Link.stories.tsx index 3f1e6c08b2..3853f33ac6 100644 --- a/storybook/src/components/Link/Link.stories.tsx +++ b/storybook/src/components/Link/Link.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Link, Paragraph } from '@amsterdam/design-system-react/src' +import { Paragraph } from '@amsterdam/design-system-react' +import { Link } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' type Story = StoryObj diff --git a/storybook/src/components/Mark/Mark.stories.tsx b/storybook/src/components/Mark/Mark.stories.tsx index 4a0795c1b0..b98c52fe87 100644 --- a/storybook/src/components/Mark/Mark.stories.tsx +++ b/storybook/src/components/Mark/Mark.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Mark, Paragraph } from '@amsterdam/design-system-react/src' +import { Paragraph } from '@amsterdam/design-system-react' +import { Mark } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/MegaMenu/MegaMenu.stories.tsx b/storybook/src/components/MegaMenu/MegaMenu.stories.tsx index 819c0e5fcf..e09d0ee19a 100644 --- a/storybook/src/components/MegaMenu/MegaMenu.stories.tsx +++ b/storybook/src/components/MegaMenu/MegaMenu.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Heading, LinkList, MegaMenu, Screen } from '@amsterdam/design-system-react/src' +import { Grid, Heading, LinkList, Screen } from '@amsterdam/design-system-react' +import { MegaMenu } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/OrderedList/OrderedList.stories.tsx b/storybook/src/components/OrderedList/OrderedList.stories.tsx index 29859b40d4..7cae91e187 100644 --- a/storybook/src/components/OrderedList/OrderedList.stories.tsx +++ b/storybook/src/components/OrderedList/OrderedList.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Heading, OrderedList, Paragraph } from '@amsterdam/design-system-react/src' +import { Heading, Paragraph } from '@amsterdam/design-system-react' +import { OrderedList } from '@amsterdam/design-system-react/src' import type { Meta, StoryObj } from '@storybook/react' import { inverseColorDecorator } from '../shared/decorators' import { exampleOrderedList } from '../shared/exampleContent' diff --git a/storybook/src/components/Overlap/Overlap.stories.tsx b/storybook/src/components/Overlap/Overlap.stories.tsx index ce8ae980f5..0db19d72ac 100644 --- a/storybook/src/components/Overlap/Overlap.stories.tsx +++ b/storybook/src/components/Overlap/Overlap.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { AspectRatio, Grid, Image, Overlap, SearchField } from '@amsterdam/design-system-react/src' +import { AspectRatio, Grid, Image, SearchField } from '@amsterdam/design-system-react' +import { Overlap } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Radio/Radio.stories.tsx b/storybook/src/components/Radio/Radio.stories.tsx index 1f1a215b5b..6b14618265 100644 --- a/storybook/src/components/Radio/Radio.stories.tsx +++ b/storybook/src/components/Radio/Radio.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { FieldSet, Radio } from '@amsterdam/design-system-react/src' +import { FieldSet } from '@amsterdam/design-system-react' +import { Radio } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Row/Row.stories.tsx b/storybook/src/components/Row/Row.stories.tsx index b127e6b74a..7076a12c44 100644 --- a/storybook/src/components/Row/Row.stories.tsx +++ b/storybook/src/components/Row/Row.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Avatar, Button, Heading, Link, Paragraph, Row } from '@amsterdam/design-system-react/src' +import { Avatar, Button, Heading, Link, Paragraph } from '@amsterdam/design-system-react' +import { Row } from '@amsterdam/design-system-react/src' import { crossAlignOptions, mainAlignOptions } from '@amsterdam/design-system-react/src/common/layout' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Select/Select.stories.tsx b/storybook/src/components/Select/Select.stories.tsx index 20741154da..50639dd6e2 100644 --- a/storybook/src/components/Select/Select.stories.tsx +++ b/storybook/src/components/Select/Select.stories.tsx @@ -3,7 +3,7 @@ * Copyright Gemeente Amsterdam */ -import { Select } from '@amsterdam/design-system-react' +import { Select } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/SkipLink/SkipLink.stories.tsx b/storybook/src/components/SkipLink/SkipLink.stories.tsx index 9a0a260203..fe449999bb 100644 --- a/storybook/src/components/SkipLink/SkipLink.stories.tsx +++ b/storybook/src/components/SkipLink/SkipLink.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Grid, Paragraph, Screen, SkipLink } from '@amsterdam/design-system-react/src' +import { Grid, Paragraph, Screen } from '@amsterdam/design-system-react' +import { SkipLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/Spotlight/Spotlight.stories.tsx b/storybook/src/components/Spotlight/Spotlight.stories.tsx index af13e7705d..61d949fb4f 100644 --- a/storybook/src/components/Spotlight/Spotlight.stories.tsx +++ b/storybook/src/components/Spotlight/Spotlight.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Blockquote, Grid, Spotlight } from '@amsterdam/design-system-react/src' +import { Blockquote, Grid } from '@amsterdam/design-system-react' +import { Spotlight } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { exampleQuote } from '../shared/exampleContent' diff --git a/storybook/src/components/Switch/Switch.stories.tsx b/storybook/src/components/Switch/Switch.stories.tsx index 9aabad13e9..368a9f750f 100644 --- a/storybook/src/components/Switch/Switch.stories.tsx +++ b/storybook/src/components/Switch/Switch.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Label, Switch } from '@amsterdam/design-system-react/src' +import { Label } from '@amsterdam/design-system-react' +import { Switch } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx index b9d7811f01..e7af747a91 100644 --- a/storybook/src/components/Tabs/Tabs.stories.tsx +++ b/storybook/src/components/Tabs/Tabs.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Heading, Paragraph, Tabs } from '@amsterdam/design-system-react/src' +import { Heading, Paragraph } from '@amsterdam/design-system-react' +import { Tabs } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' import { PropsWithChildren, ReactNode } from 'react' import { exampleParagraph } from '../shared/exampleContent' diff --git a/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx b/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx index 6a6955b6aa..ce289ed9ca 100644 --- a/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx +++ b/storybook/src/components/TopTaskLink/TopTaskLink.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Grid, TopTaskLink } from '@amsterdam/design-system-react/src' +import { Grid } from '@amsterdam/design-system-react' +import { TopTaskLink } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' const meta = { diff --git a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx index cede15a8f5..f9d4e568ef 100644 --- a/storybook/src/components/UnorderedList/UnorderedList.stories.tsx +++ b/storybook/src/components/UnorderedList/UnorderedList.stories.tsx @@ -3,7 +3,8 @@ * Copyright Gemeente Amsterdam */ -import { Icon, Paragraph, UnorderedList } from '@amsterdam/design-system-react/src' +import { Icon, Paragraph } from '@amsterdam/design-system-react' +import { UnorderedList } from '@amsterdam/design-system-react/src' import { AlertIcon, AnnouncementIcon, diff --git a/storybook/src/foundation/design-tokens/border.docs.mdx b/storybook/src/foundation/design-tokens/border.docs.mdx index d1e890de12..19bec7cd73 100644 --- a/storybook/src/foundation/design-tokens/border.docs.mdx +++ b/storybook/src/foundation/design-tokens/border.docs.mdx @@ -12,9 +12,9 @@ Elements that have a border, outline or underline use one of these widths. We have 4 border widths: -| Size | px | rem | Token name | Example | -| :-------------- | :-: | :----: | :-------------------- | ----------------------------------------------------------------------------------------- | -| **Small** | 1 | 0.0625 | `ams.border.width.sm` |
| -| **Medium** | 2 | 0.125 | `ams.border.width.md` |
| -| **Large** | 3 | 0.1875 | `ams.border.width.lg` |
| -| **Extra large** | 4 | 0.25 | `ams.border.width.xl` |
| +| Size | px | rem | Token name | Example | +| :-------------- | :-: | :----: | :-------------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Small** | 1 | 0.0625 | `ams.border.width.sm` |
| +| **Medium** | 2 | 0.125 | `ams.border.width.md` |
| +| **Large** | 3 | 0.1875 | `ams.border.width.lg` |
| +| **Extra large** | 4 | 0.25 | `ams.border.width.xl` |
| diff --git a/storybook/src/foundation/design-tokens/space.docs.mdx b/storybook/src/foundation/design-tokens/space.docs.mdx index c959909682..72338708b2 100644 --- a/storybook/src/foundation/design-tokens/space.docs.mdx +++ b/storybook/src/foundation/design-tokens/space.docs.mdx @@ -15,33 +15,33 @@ This is the space between components, e.g. between a list of cards, a row of but Or at the 4 edges of a component: at the top, bottom, start, and end of its containing box, as used for buttons and input fields, and for larger components with a coloured background or border. -This type of space is based on the font size – the medium space length equals the default Paragraph font size. -We offer 5 lengths. +This type of space is based on the font size – the medium space size equals the default Paragraph font size. +We offer 5 sizes. ### Spacious Because our typography is fluid in Spacious Mode, spacing is as well. The medium space grows from 18 to 24 pixels between window widths of 320 and 1600. -| | | 320 | 832 | 1600 | -| --------------: | :--: | -----: | -------: | -----: | -| **Extra small** | `xs` | 4.5 | 5.1 | 6 | -| **Small** | `sm` | 9 | 8.3 | 12 | -| **Medium** | `md` | **18** | **16.5** | **24** | -| **Large** | `lg` | 27 | 24.9 | 36 | -| **Extra large** | `xl` | 36 | 33.2 | 48 | +| | | 320 | 832 | 1600 | Preview | +| --------------: | :--: | -----: | -------: | -----: | ----------------------------------------------------------------------------------------------- | +| **Extra small** | `xs` | 4.5 | 5.1 | 6 |
| +| **Small** | `sm` | 9 | 8.3 | 12 |
| +| **Medium** | `md` | **18** | **16.5** | **24** |
| +| **Large** | `lg` | 27 | 24.9 | 36 |
| +| **Extra large** | `xl` | 36 | 33.2 | 48 |
| ### Compact In Compact Mode, the medium space is 16 pixels. -| | | | -| --------------: | :--: | -----: | -| **Extra small** | `xs` | 4 | -| **Small** | `sm` | 8 | -| **Medium** | `md` | **16** | -| **Large** | `lg` | 24 | -| **Extra large** | `xl` | 32 | +| | | | Preview | +| --------------: | :--: | -----: | ------------------------------------------------------------------------------------------------------------------ | +| **Extra small** | `xs` | 4 |
| +| **Small** | `sm` | 8 |
| +| **Medium** | `md` | **16** |
| +| **Large** | `lg` | 24 |
| +| **Extra large** | `xl` | 32 |
| ## Grid Space @@ -52,20 +52,20 @@ It implements the Law of Proximity, one of the [Gestalt Principles](https://www. The width or height of this type of space is fluid, depending on the width of the window. Five options are available, of which the middle one is the default. -Multiplication factors for the smaller and larger lengths are ¼, ½, 1½, and 2. +Multiplication factors for the smaller and larger sizes are ¼, ½, 1½, and 2. The tables below show the resulting pixel widths at some reference widths. #### Spacious In Spacious Mode, the medium grid space grows from 16 to 56 pixels between window widths of 320 and 1600. -| | 320 | 576 | 832 | 1088 | 1344 | 1600 | -| --------------: | :----: | :----: | :----: | :----: | :----: | :----: | -| **Extra small** | 4 | 6 | 8 | 10 | 12 | 14 | -| **Small** | 8 | 12 | 16 | 20 | 24 | 28 | -| **Medium** | **16** | **24** | **32** | **40** | **48** | **56** | -| **Large** | 24 | 36 | 48 | 60 | 72 | 84 | -| **Extra large** | 32 | 48 | 64 | 80 | 96 | 112 | +| | 320 | 576 | 832 | 1088 | 1344 | 1600 | Preview | +| --------------: | :----: | :----: | :----: | :----: | :----: | :----: | ---------------------------------------------------------------------------------------------------- | +| **Extra small** | 4 | 6 | 8 | 10 | 12 | 14 |
| +| **Small** | 8 | 12 | 16 | 20 | 24 | 28 |
| +| **Medium** | **16** | **24** | **32** | **40** | **48** | **56** |
| +| **Large** | 24 | 36 | 48 | 60 | 72 | 84 |
| +| **Extra large** | 32 | 48 | 64 | 80 | 96 | 112 |
| #### Compact @@ -85,6 +85,7 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 2112 2368 2624 + Preview @@ -101,6 +102,12 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 8 9 10 + +
+ @@ -115,6 +122,12 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 16 18 20 + +
+ @@ -141,6 +154,12 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 40 + +
+ @@ -155,6 +174,12 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 48 54 60 + +
+ @@ -169,6 +194,12 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window 64 72 80 + +
+ diff --git a/storybook/src/utils/Gap/Gap.docs.mdx b/storybook/src/utils/Gap/Gap.docs.mdx new file mode 100644 index 0000000000..770d444af0 --- /dev/null +++ b/storybook/src/utils/Gap/Gap.docs.mdx @@ -0,0 +1,13 @@ +{/* @license CC0-1.0 */} + +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as GapStories from "./Gap.stories.tsx"; +import README from "../../../../packages/css/src/components/gap/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/src/utils/Gap/Gap.stories.tsx b/storybook/src/utils/Gap/Gap.stories.tsx new file mode 100644 index 0000000000..5f42b9da2a --- /dev/null +++ b/storybook/src/utils/Gap/Gap.stories.tsx @@ -0,0 +1,33 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Paragraph } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' +import { Gap } from './Gap' +import type { GapProps } from './Gap' + +const render = ({ size }: GapProps) => ( +
+ These paragraphs are separated by a gap. + These paragraphs are separated by a gap. + These paragraphs are separated by a gap. +
+) + +const meta = { + title: 'Utilities/CSS/Gap', + component: Gap, + args: { + size: 'xs', + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render, +} diff --git a/storybook/src/utils/Gap/Gap.tsx b/storybook/src/utils/Gap/Gap.tsx new file mode 100644 index 0000000000..7dceadb6a0 --- /dev/null +++ b/storybook/src/utils/Gap/Gap.tsx @@ -0,0 +1,14 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { HTMLAttributes, PropsWithChildren } from 'react' + +export type GapProps = { + /** The amount of space between the element’s children. */ + size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' +} & PropsWithChildren> + +/** Renders examples in Storybook. Not for reuse. */ +export const Gap = ({ children, size }: GapProps) => {children} diff --git a/storybook/src/utils/Margin/Margin.docs.mdx b/storybook/src/utils/Margin/Margin.docs.mdx new file mode 100644 index 0000000000..6ef6f026af --- /dev/null +++ b/storybook/src/utils/Margin/Margin.docs.mdx @@ -0,0 +1,13 @@ +{/* @license CC0-1.0 */} + +import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import * as MarginStories from "./Margin.stories.tsx"; +import README from "../../../../packages/css/src/components/margin/README.md?raw"; + + + +{README} + + + + diff --git a/storybook/src/utils/Margin/Margin.stories.tsx b/storybook/src/utils/Margin/Margin.stories.tsx new file mode 100644 index 0000000000..deafe2a1a7 --- /dev/null +++ b/storybook/src/utils/Margin/Margin.stories.tsx @@ -0,0 +1,34 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Heading, Paragraph } from '@amsterdam/design-system-react' +import { Meta, StoryObj } from '@storybook/react' +import type { MarginProps } from './Margin' +import { Margin } from './Margin' + +const render = ({ size }: MarginProps) => ( + <> + + This heading has a bottom margin + + It introduces white space between the heading and this paragraph below. + +) + +const meta = { + title: 'Utilities/CSS/Margin', + component: Margin, + args: { + size: 'xs', + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Default: Story = { + render, +} diff --git a/storybook/src/utils/Margin/Margin.tsx b/storybook/src/utils/Margin/Margin.tsx new file mode 100644 index 0000000000..07667c5acb --- /dev/null +++ b/storybook/src/utils/Margin/Margin.tsx @@ -0,0 +1,14 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import type { HTMLAttributes, PropsWithChildren } from 'react' + +export type MarginProps = { + /** The amount of space below the element. */ + size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' +} & PropsWithChildren> + +/** Renders examples in Storybook. Not for reuse. */ +export const Margin = ({ children, size }: MarginProps) => {children} diff --git a/storybook/src/utils/VisuallyHidden/VisuallyHidden.stories.tsx b/storybook/src/utils/VisuallyHidden/VisuallyHidden.stories.tsx index 929ff807e9..69703315b5 100644 --- a/storybook/src/utils/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/storybook/src/utils/VisuallyHidden/VisuallyHidden.stories.tsx @@ -5,20 +5,17 @@ import { Paragraph } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import type { HTMLAttributes } from 'react' - -type VisuallyHiddenProps = HTMLAttributes - -const VisuallyHidden = ({ children }: VisuallyHiddenProps) => {children} +import type { VisuallyHiddenProps } from './VisuallyHidden' +import { VisuallyHidden } from './VisuallyHidden' const render = ({ children }: VisuallyHiddenProps) => ( -
+ <> This paragraph is available for everyone. Below this is a second paragraph, but it is aimed at non-visual user agents only. It is not perceivable on a screen. {children} -
+ ) const meta = { diff --git a/storybook/src/utils/VisuallyHidden/VisuallyHidden.tsx b/storybook/src/utils/VisuallyHidden/VisuallyHidden.tsx new file mode 100644 index 0000000000..e2c732580c --- /dev/null +++ b/storybook/src/utils/VisuallyHidden/VisuallyHidden.tsx @@ -0,0 +1,13 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import type { HTMLAttributes, PropsWithChildren } from 'react' + +export type VisuallyHiddenProps = PropsWithChildren> + +/** Renders examples in Storybook. Not for reuse. */ +export const VisuallyHidden = ({ children }: VisuallyHiddenProps) => ( + {children} +)