@utrecht/component-library-react 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -0,0 +1,200 @@
+# @utrecht/component-library-react
+
+## 7.1.0
+
+### Minor Changes
+
+- a26f139: Add `FormFieldTextarea` component to the React component library.
+- b520118: Support `restProps` for React `ColumnLayout` component.
+- 4c0f337: Add `inputRequired` property to React `Textarea`.
+- b8b8100: Add `<FormFieldCheckbox>` component.
+
+### Patch Changes
+
+- ecaf6a6: Fix missing CSS when loading `Button` from `dist/css-module/`.
+
+## 7.0.0
+
+### Major Changes
+
+- c3660c1: Rename design token `utrecht.button.icon.gap` to `utrecht.button.column-gap`
+
+### Minor Changes
+
+- 200e34b: Add `utrecht.number-badge.border-color` and `utrecht.number-badge.border-width` design tokens.
+- 27f15a9: Add `required` state to the `Fieldset` component in React.'
+- c09705f: Add "heading" to the accordion provider.
+  Add "heading level" to the accordion provider.
+- 24b4813: Add an optional `label` property to React `Button` component, to support better styling of icons.
+
+### Patch Changes
+
+- 27f15a9: Fix `Fieldset` component in React to only render `aria-invalid` for `role="radiogroup"`.
+- 9e32a67: - Refactored Icon component: default role="presentation", conditional aria-hidden
+  - Added possibility for custom roles and ARIA labels
+  - edited unit tests for accessibility tree hidden or not
+  - tested in React Storybook
+
+## 6.2.1
+
+### Patch Changes
+
+- 8622506: Fix errors for missing TypeScript definitions in `@utrecht/component-library-react`.
+
+## 6.2.0
+
+### Minor Changes
+
+- 6c0db88: Add Superscript React component.
+- 1227678: Add Table of Contents component for the PDF component library.
+- f3d47bb: Add `errorMessage` property to FormField.
+- a6a2187: Add Subscript React component.
+- a919a87: Add new `type` options to the `SpotlightSection` component: `error` and `ok`.
+- 38c31c8: - Support `...restProps`, `className` and `forwardRef` for `NavList` React component.
+  - Support `className` for `NavListLink` and `NavListButton` React components.
+
+### Patch Changes
+
+- f3d47bb: Fix FormField to render the description before the input.
+
+## 6.1.0
+
+### Minor Changes
+
+- 8431fb9: Add the following design tokens to breadcrumb navigation:
+
+  - `utrecht.breadcrumb-nav.line-height`
+  - `utrecht.breadcrumb-nav.link.active.color`
+  - `utrecht.breadcrumb-nav.link.active.text-decoration`
+
+- d6bb92d: Add Number badge component as replacement for Badge counter
+- 48ccd57: Support bold form controls.
+
+  Add the following design tokens:
+
+  - `utrecht.form-control.font-weight` (common token)
+  - `utrecht.listbox.font-weight`
+  - `utrecht.select.font-weight`
+  - `utrecht.textarea.font-weight`
+  - `utrecht.textbox.font-weight`
+
+### Patch Changes
+
+- 5695c6c: Improve table component CSS to explicitly fallback to `background-color: transparent` to have a valid CSS value. ([GitHub Issue nl-design-system/utrecht#2435](https://github.com/nl-design-system/utrecht/issues/2435))
+- 9aa2be4: Fix regression in `utrecht.button.font-family` support.
+
+## 6.0.0
+
+### Major Changes
+
+- ecf877a: Refactor the Alert component for more consistent token names and use flex instead of grid layout. Adding support for content and message sections.
+
+  - Rename `utrecht.alert.icon.gap` to `utrecht.alert.column-gap`
+  - Add `utrecht.alert.message.row-gap` token
+  - Add `utrecht.alert.content.row-gap` token
+  - Add `utrecht.alert.icon.size` token
+  - Add `utrecht.alert.icon.inset-block-start` token
+  - Add `utrecht-alert__content` class
+  - Change implementation of layout from grid to flex
+
+## 5.0.0
+
+### Major Changes
+
+- 886b038: Breaking change: Changed Heading to HTML Heading, so the class name 'utrecht-heading-x' is no longer used.
+
+### Minor Changes
+
+- 4037f4c: Add two new design tokens to "Badge counter":
+
+  - `utrecht.badge-counter.min-block-size`
+  - `utrecht.badge-counter.min-inline-size`: the primary token to configure the size.
+
+  The following design token is now deprecated. Reason for deprecation: it does not follow naming conventions, to use existing CSS property names — "`min-size`" is a made-up property.
+
+  - `utrecht.badge-counter.min-size`
+
+- a045934: Add HTML Heading component to the React component library.
+- 5299695: Button now support two new design tokens for each appearance: `font-size` and a matching `line-height`. These are optional, by default the button still uses `utrecht.button.font-size` and `utrecht.button.line-height`.
+
+  These are the 6 new design tokens:
+
+  - `utrecht.button.primary-action.font-size`
+  - `utrecht.button.primary-action.line-height`
+  - `utrecht.button.secondary-action.font-size`
+  - `utrecht.button.secondary-action.line-height`
+  - `utrecht.button.subtle.font-size`
+  - `utrecht.button.subtle.line-height`
+
+## 4.2.0
+
+### Minor Changes
+
+- c5a7e71: Add margin tokens to the Accordion component:
+
+  - `utrecht.accordion.margin-block-end`
+  - `utrecht.accordion.margin-block-start`
+
+## 4.1.0
+
+### Minor Changes
+
+- a07687b: Add new component: RichText - a container component around components such as paragraph, table, list, accordion etcetera.
+
+## 4.0.0
+
+### Major Changes
+
+- 14c8559: Replace `utrecht.link-list.item.margin-block-start` design token with `utrecht.link-list.row-gap`.
+- bd0514c: Rename tokens in the Link list component, because they should be on `link` instead of on `item`. "Item" currently only exists in CSS, but is not necessary to build the Link list in Figma.
+
+  - Rename `utrecht.link-list.item.font-weight` to `utrecht.link-list.link.font-weight`.
+  - Rename `utrecht.link-list.item.column-gap` to `utrecht.link-list.link.column-gap`.
+
+### Minor Changes
+
+- c5c2eff: Checkbox supports the `indeterminate` boolean property: `<Checkbox indeterminate />`.
+
+  - It renders the `utrecht-checkbox--indeterminate` class name.
+  - It renders the `aria-checked="mixed"` attribute.
+  - It sets the `indeterminate` property in the DOM, so the `:indeterminate` CSS pseudo selector is supported too.
+
+  Important note: you must implement behavior for removing the `indeterminate` state after `onChange` yourself.
+
+- 482aa36: Add `FormFieldTextbox` component, that combines `FormField`, `FormLabel`, `Textbox`, `FormFieldDescription` and `FormFieldErrorMessage` in one.
+- b007c47: Allow any `string` for Textbox `type`, in addition to the existing enumeration of supported types.
+- 12abd0c: Add Blockquote component for React.
+- e2b188d: Add design token to Link list component: `utrecht.link-list.link.text-decoration`, so you can enable or disable the underline. By default the links have no underline.
+
+### Patch Changes
+
+- c401145: Use `<ul role="list">` for the `LinkList` component, so VoiceOver in Safari recognizes the list. See ["Fixing" lists (by Scott O'Hara)](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) for context.
+- 0e2e4da: Fix rendering of the checkbox component in the combined indeterminate and checked state, to have an indeterminate icon instead of a checked icon.'
+
+## 3.1.0
+
+### Minor Changes
+
+- f9c23c6: Add `icon` and `appearance` properties to `<AccordionProvider>` and `<AccordionSection>`.
+- f9c23c6: Add `utrecht-accordion__button-icon--utrecht` mixin
+- f9c23c6: Add `utrecht.accordion.button.icon.gap` design token.
+
+## 3.0.0
+
+### Major Changes
+
+- af24025682: `ButtonGroup` boolean property `vertical` now is `direction="column"`'
+
+## 1.0.1
+
+### Patch Changes
+
+- 0e434e0a19: fix rendering glitch in Firefox when hovering over a button
+
+## 1.0.0
+
+### Patch Changes
+
+- c7cae76a0d: allow word wrap for URL data, so it is fully readable in print and on screen
+- 28a3ef848a: Support rendering of `<select>` element with multiple attribute.
+- b1ac291a45: Omit rendering `aria-required="false"` for `required={false}` in React `Select` component.

package/CONTRIBUTING.md

@@ -0,0 +1,169 @@
+<!-- @license CC0-1.0 -->
+
+# Developing components
+
+Warning: the code examples are deliberately simplified to show one concept at a time. Do not use the code snippets as-is.
+
+For more complete examples, look at the source code of existing components.
+
+## Develop for extensibility
+
+### Class names
+
+Enable front-end developers to add their own class names to the outermost HTML element of your component. Since all components have BEM class names, you must combine your BEM class names with any class names from the parameters. We typically use `clsx` to format the `class` attribute.
+
+```jsx
+import clsx from "clsx";
+
+export const MyComponent = ({ children, className }) => (
+  <div className={clsx("my-component", className)}>{children}</div>
+);
+```
+
+### Allow rich text content
+
+Allow `ReactNode` contents for text parameters, so front-end developers can use accessible and meaningful markup. Using `PropsWithChildren` is recommended for non-empty components, because it allows `ReactNode` for children.
+
+```tsx
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+
+export interface MyComponentProps {
+  // ...
+}
+
+export const MyComponent = ({ children }: PropsWithChildren<MyComponentProps>) => <div>{children}</div>;
+```
+
+For other parameters using `ReactNode` might not be as obvious, since you might feel like starting with `string`. For example:
+
+```tsx
+import clsx from "clsx";
+import type { PropsWithChildren } from "react";
+
+export interface MyLandmarkComponentProps {
+  label: ReactNode;
+}
+
+export const MyLandmarkComponent = ({ children, label }: PropsWithChildren<MyComponentProps>) => {
+  const headingId = useId();
+  return (
+    <div role="region" aria-labelledby={label ? labelId : undefined}>
+      {label && <div id={labelId}>{label}</div>}
+      {children}
+    </div>
+  );
+};
+```
+
+This allows front-end developers to use any markup:
+
+```jsx
+<MyLandmarkComponent
+  label={
+    <>
+      <LandmarkIcon /> Landmark label
+    </>
+  }
+>
+  <p>Landmark content</p>
+</MyLandmarkComponent>
+```
+
+Allowing rich text is one more reason to use `aria-labelledby` instead of `aria-label`.
+
+## Export interfaces and types
+
+Export the type definitions for parameters, so other developers can easily use those to develop wrapper components.
+
+```tsx
+export type TextboxTypes = "password" | "text";
+
+export interface TextboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  type?: TextboxTypes;
+}
+
+export const Textbox = ({ type }: TextboxProps) => <input {...restProps} type={type} />;
+```
+
+This way another developer could extend your component:
+
+```tsx
+import type { TextboxProps, TextboxTypes } from "@my/textbox";
+
+export interface AdvancedTextboxProps extends TextboxProps {
+  type?: TextboxTypes | "date";
+}
+
+export const AdvancedTextbox = ({ type }: AdvancedTextboxProps) => <input {...restProps} type={type} />;
+```
+
+## Use `forwardRef`
+
+Use [`forwardRef`](https://react.dev/reference/react/forwardRef) to expose the DOM node with a [ref](https://react.dev/learn/manipulating-the-dom-with-refs).
+
+```tsx
+import clsx from "clsx";
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from "react";
+
+export interface MyComponentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const MyComponent = forwardRef(
+  ({ children, ...restProps }: PropsWithChildren<MyComponentProps>, ref: ForwardedRef<HTMLDivElement>) => (
+    <div ref={ref} {...restProps}>
+      {children}
+    </div>
+  ),
+);
+```
+
+This allows front-end developers to perform actions that need access to the DOM, such as focusing an element:
+
+```tsx
+const ref = useRef<HTMLDivElement>(null);
+
+render(<MyComponent tabIndex={0} ref={ref} />);
+
+ref.current?.focus();
+```
+
+## Don't break native HTML
+
+### Global attributes
+
+Use `restProps` to allow front-end developers to global attributes as well as specific attributes to an HTML element:
+
+```jsx
+import clsx from "clsx";
+
+export const MyComponent = ({ children, ...restProps }) => <div {...restProps}>{children}</div>;
+```
+
+With TypeScript you will need to extend the interface with the `HTMLAttributes` of the outermost element, and it will look like this:
+
+```tsx
+import clsx from "clsx";
+import type { HTMLAttributes, PropsWithChildren } from "react";
+
+export interface MyComponentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const MyComponent = ({ children, ...restProps }) => <div {...restProps}>{children}</div>;
+```
+
+For different elements you need to import different types `HTMLAttributes`, but I don't think React offers documentation on this subject. The most effective approach might be using an IDE like Visual Code with a TypeScript plugin, to find out which interface you need — or simply check existing components that use the same HTML element.
+
+### Prevent duplicate IDs
+
+Generate `id` attributes with [`useId()` from React](https://react.dev/reference/react/useId). Do not use hardcoded `id` values, because that could break accessibility.
+
+```jsx
+export const MyLandmarkComponent = ({ children, label }) => {
+  const headingId = useId();
+  return (
+    <div role="region" aria-labelledby={label ? labelId : undefined}>
+      {label && <div id={labelId}>{label}</div>}
+      {children}
+    </div>
+  );
+};
+```

package/README.md

@@ -1,22 +1,12 @@
 <!-- @license CC0-1.0 -->
 
-# Component library for React apps
+# Component library for React
 
-The `@utrecht/component-library-react` package contains React implementations of various components. You can use this package in React apps, both client side and server side, to render the right HTML elements with the Utrecht design system class names.
+You can use React components from [`@utrecht/component-library-react` npm package](https://www.npmjs.com/package/@utrecht/component-library-react) for your website. The components are "white label", which means they do not have Utrecht branding — you can choose your own design with design tokens.
 
-The CSS components that implement the Utrecht design system class names are published in a separate npm package, so don't forget to install and include `@utrecht/component-library-css` too for the styling of the white-label components, as well as a package with design tokens for your theme.
+You can use this package in React apps, both client side and server side, to render the right HTML elements with the Utrecht design system class names.
 
-## Stability of the components
-
-The React components are released as _alpha_ version, which means the components are still work in progress and it is likely that some APIs will between releases.
-
-Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs.
-
-## React Component or React Web Component?
-
-We currently have two packages with React components, and you might wonder which to choose. Our Web Components are still experimental and since the Shadow DOM prevents you from simply extending the CSS implementation, you wouldn't be able to easily tweak it to your needs. Therefore we suggest using the React components when they are available.
-
-In the future this advice might change since some components could be released exclusively as Web Component while others will remain available as CSS component with React wrapper only.
+Documentation is in the [Storybook for Utrecht React components](http://nl-design-system.github.io/utrecht/storybook-react/).
 
 ## Getting started
 
@@ -27,8 +17,7 @@ npm install --save-dev --save-exact @utrecht/component-library-react
 With this package available, you can render any component from the library in your page. For example:
 
 ```jsx
-import { Document } from "@utrecht/component-library-react/Document";
-import { Heading1 } from "@utrecht/component-library-react/Heading1";
+import { Document, Heading1 } from "@utrecht/component-library-react/dist/css-module";
 
 export const MyPage = () => (
   <Document>
@@ -37,6 +26,63 @@ export const MyPage = () => (
 );
 ```
 
+If you don't want to use CSS injection, you can import the same components from another path (without `/dist/css-module`):
+
+```jsx
+import { Document, Heading1 } from "@utrecht/component-library-react";
+
+export const MyPage = () => (
+  <Document>
+    <Heading1>Page styled with NL Design System</Heading1>
+  </Document>
+);
+```
+
+## Add the design using a theme
+
+Add your own design using a theme.
+
+1. [Make your own theme based on design tokens.](https://nldesignsystem.nl/handboek/developer/thema-maken/)
+2. Load the CSS for your theme. It contains CSS variables for the visual design of the components.
+3. Insert the CSS class name for your theme in your HTML code, at the level above the components.
+
+### Add the Utrecht theme
+
+Install the npm package that contains the CSS:
+
+```shell
+npm install --save-dev @utrecht/design-tokens
+```
+
+In many React projects it is possible to import the CSS file in JavaScript. Add the `import` for the theme CSS, and use the `utrecht-theme` class name at the level above the React components.
+
+```jsx
+import { Document, Heading1 } from "@utrecht/component-library-react";
+import "@utrecht/design-tokens/dist/index.css";
+
+export const MyPage = () => (
+  <div className="utrecht-theme">
+    <Document>
+      <Heading1>Page styled with NL Design System</Heading1>
+    </Document>
+  </div>
+);
+```
+
+## TypeScript
+
+TypeScript declarations for React componenten are shipped by default in this package, you don't need to install them separately.
+
+## Support
+
+Ask you support questions in the [#nl-design-system-developers Slack channel](https://codefornl.slack.com/archives/C01DAT4TRPF).
+
+## React Component or React Web Component?
+
+We currently have two packages with React components, and you might wonder which to choose. Our Web Components are still experimental and since the Shadow DOM prevents you from simply extending the CSS implementation, you wouldn't be able to easily tweak it to your needs. Therefore we suggest using the React components when they are available.
+
+In the future this advice might change since some components could be released exclusively as Web Component while others will remain available as CSS component with React wrapper only.
+
 Additionally you should also include the CSS for the components and the design tokens to configure the CSS components. For example:
 
 ```js
@@ -83,65 +129,8 @@ export const MyPage = () => (
 );
 ```
 
-## Components overview
-
-We make components for React available when needed in a project. Not every component is available yet, and we welcome you to discuss contributions.
-
-Currently the following components are available:
-
-```js
-import { Article } from "@utrecht/component-library-react/Article";
-import { Backdrop } from "@utrecht/component-library-react/Backdrop";
-import { Button } from "@utrecht/component-library-react/Button";
-import { Checkbox } from "@utrecht/component-library-react/Checkbox";
-import { Document } from "@utrecht/component-library-react/Document";
-import { Fieldset } from "@utrecht/component-library-react/Fieldset";
-import { FieldsetLegend } from "@utrecht/component-library-react/FieldsetLegend";
-import { FormField } from "@utrecht/component-library-react/FormField";
-import { FormFieldDescription } from "@utrecht/component-library-react/FormFieldDescription";
-import { FormLabel } from "@utrecht/component-library-react/FormLabel";
-import { HTMLContent } from "@utrecht/component-library-react/HTMLContent";
-import { Heading1 } from "@utrecht/component-library-react/Heading1";
-import { Heading2 } from "@utrecht/component-library-react/Heading2";
-import { Heading3 } from "@utrecht/component-library-react/Heading3";
-import { Heading4 } from "@utrecht/component-library-react/Heading4";
-import { Heading5 } from "@utrecht/component-library-react/Heading5";
-import { Heading6 } from "@utrecht/component-library-react/Heading6";
-import { Link } from "@utrecht/component-library-react/Link";
-import { OrderedList } from "@utrecht/component-library-react/OrderedList";
-import { OrderedListItem } from "@utrecht/component-library-react/OrderedListItem";
-import { Page } from "@utrecht/component-library-react/Page";
-import { PageContent } from "@utrecht/component-library-react/PageContent";
-import { PageFooter } from "@utrecht/component-library-react/PageFooter";
-import { PageHeader } from "@utrecht/component-library-react/PageHeader";
-import { Paragraph } from "@utrecht/component-library-react/Paragraph";
-import { RadioButton } from "@utrecht/component-library-react/RadioButton";
-import { Select, SelectOption } from "@utrecht/component-library-react/Select";
-import { Separator } from "@utrecht/component-library-react/Separator";
-import { Surface } from "@utrecht/component-library-react/Surface";
-import { Table } from "@utrecht/component-library-react/Table";
-import { TableBody } from "@utrecht/component-library-react/TableBody";
-import { TableCaption } from "@utrecht/component-library-react/TableCaption";
-import { TableCell } from "@utrecht/component-library-react/TableCell";
-import { TableFooter } from "@utrecht/component-library-react/TableFooter";
-import { TableHeader } from "@utrecht/component-library-react/TableHeader";
-import { TableHeaderCell } from "@utrecht/component-library-react/TableHeaderCell";
-import { TableRow } from "@utrecht/component-library-react/TableRow";
-import { Textarea } from "@utrecht/component-library-react/Textarea";
-import { Textbox } from "@utrecht/component-library-react/Textbox";
-import { URLData } from "@utrecht/component-library-react/URLData";
-import { UnorderedList } from "@utrecht/component-library-react/UnorderedList";
-import { UnorderedListItem } from "@utrecht/component-library-react/UnorderedListItem";
-```
-
-Alternatively it is possible to include them via the collection of components too, but be careful: you will likely need to take additional steps prevent your site from also including the code for components you don't actually use. Including unused components would negatively impact the performance of your site.
-
-For example:
-
-```js
-import { Document, Heading1, Link, Paragraph } from "@utrecht/component-library-react";
-```
+## Stability of the components
 
-## Contributing
+Most components are used in production for Utrecht websites, but it is likely that some APIs will between releases. For breaking changes we release a new major version, so pay special attention to the changelog of major versions.
 
-When a project needs a component from the design system that already exists as CSS component with an HTML example, they will create a React component for it internally. Projects that have new React components can let the design system team know and create a pull request to include it in this component library. No
+Make sure you specify the exact version as dependency, so you can schedule to upgrade to the latest version when you have time to test for regression bugs.

package/README.nl.md

@@ -0,0 +1,82 @@
+<!-- @license CC0-1.0 -->
+
+# Component library voor React
+
+Je kunt de React componenten van de [`@utrecht/component-library-react` npm package](https://www.npmjs.com/package/@utrecht/component-library-react) gebruiken voor je eigen website. Het zijn "white label" componenten, dat betekent dat ze niet de Utrecht huisstijl hebben — je kunt je eigen ontwerp gebruiken met design tokens.
+
+Je kunt deze package gebruiken in React apps, zowel client side als server side, om de juiste HTML elementen te renderen met CSS class names van het Utrecht Design System.
+
+Documentation staat in de [Storybook voor Utrecht React componenten](http://nl-design-system.github.io/utrecht/storybook-react/).
+
+## Aan de slag
+
+```shell
+npm install --save-dev --save-exact @utrecht/component-library-react
+```
+
+Wanneer je dit pakketje hebt geïnstalleerd, dan kun je elke component uit de React component gebruiken voor je pagina. Bijvoorbeeld:
+
+```jsx
+import { Document, Heading1 } from "@utrecht/component-library-react/dist/css-module";
+
+export const MyPage = () => (
+  <div className="voorbeeld-theme">
+    <Document>
+      <Heading1>Page styled with NL Design System</Heading1>
+    </Document>
+  </div>
+);
+```
+
+Als je geen CSS injection wilt, dan kun je dezelfde componenten importeren uit een andere plek (zonder `/dist/css-module`). CSS injection levert soms problemen op bij websites met een stricte `Content-Security-Policy`.
+
+```jsx
+import { Document, Heading1 } from "@utrecht/component-library-react";
+
+export const MyPage = () => (
+  <div className="voorbeeld-theme">
+    <Document>
+      <Heading1>Page styled with NL Design System</Heading1>
+    </Document>
+  </div>
+);
+```
+
+## Design toevoegen met een thema
+
+Gebruik je eigen design met de volgende stappen:
+
+1. [Maak een eigen thema op basis van design tokens.](https://nldesignsystem.nl/handboek/developer/thema-maken/)
+2. Laad de CSS van je thema in. Daarin zitten de CSS variables voor het ontwerp van de componenten.
+3. Voeg in HTML de CSS class name toe van je theme, op het niveau boven je componenten.
+
+### Utrecht huisstijl toevoegen
+
+Installeer de npm package met de CSS:
+
+```shell
+npm install --save-dev @utrecht/design-tokens
+```
+
+In veel React projecten is het mogelijk de CSS te importeren in JavaScript. Voeg de `import` voor de thema CSS toe, en gebruik de `utrecht-theme` class name op een niveau boven de React componenten.
+
+```jsx
+import { Document, Heading1 } from "@utrecht/component-library-react";
+import "@utrecht/design-tokens/dist/index.css";
+
+export const MyPage = () => (
+  <div className="utrecht-theme">
+    <Document>
+      <Heading1>Page styled with NL Design System</Heading1>
+    </Document>
+  </div>
+);
+```
+
+## TypeScript
+
+De TypeScript declarations voor de React componenten worden standaard meegeleverd.
+
+## Support
+
+Stel je support-vragen in het [#nl-design-system-developers Slack-kanaal](https://codefornl.slack.com/archives/C01DAT4TRPF).