diff --git a/docs/componenten/code-block/index.mdx b/docs/componenten/code-block/index.mdx
index 9f94b0a6618..61962d46f8c 100644
--- a/docs/componenten/code-block/index.mdx
+++ b/docs/componenten/code-block/index.mdx
@@ -13,6 +13,7 @@ keywords:
{/* @license CC0-1.0 */}
import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import CodeBlockIllustration from "@nl-design-system-candidate/code-block-docs/docs/anatomy/anatomy.svg";
import AcIntro from "@nl-design-system-unstable/documentation/componenten/ac/_ac_intro.md";
import Wcag131 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.3.1-code-block.md";
import Wcag1411 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.11-code.md";
@@ -20,6 +21,8 @@ import Wcag1412 from "@nl-design-system-unstable/documentation/componenten/ac/_w
import Wcag143 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.3.md";
import Wcag144 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.4.md";
import Wcag141 from "@nl-design-system-unstable/documentation/wcag/summaries/_1.4.1-summary.md";
+import { ComponentAliases } from "@site/src/components/ComponentAliases";
+import { ComponentAnatomy } from "@site/src/components/ComponentAnatomy";
import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
import {
DefinitionOfDone,
@@ -37,6 +40,12 @@ export const component = componentProgress.find((item) => item.number === issueN
+
+
+## Anatomie
+
+
+
## Definition of Done
diff --git a/docs/componenten/code/index.mdx b/docs/componenten/code/index.mdx
index 7e5a9db5609..d8a7f2f425f 100644
--- a/docs/componenten/code/index.mdx
+++ b/docs/componenten/code/index.mdx
@@ -13,6 +13,7 @@ keywords:
{/* @license CC0-1.0 */}
import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import CodeIllustration from "@nl-design-system-candidate/code-docs/docs/anatomy/anatomy.svg";
import AcIntro from "@nl-design-system-unstable/documentation/componenten/ac/_ac_intro.md";
import Wcag131 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.3.1-code.md";
import Wcag1411 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.11-code.md";
@@ -20,6 +21,8 @@ import Wcag1412 from "@nl-design-system-unstable/documentation/componenten/ac/_w
import Wcag143 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.3.md";
import Wcag144 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.4.md";
import Wcag141 from "@nl-design-system-unstable/documentation/wcag/summaries/_1.4.1-summary.md";
+import { ComponentAliases } from "@site/src/components/ComponentAliases";
+import { ComponentAnatomy } from "@site/src/components/ComponentAnatomy";
import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
import {
DefinitionOfDone,
@@ -37,8 +40,14 @@ export const component = componentProgress.find((item) => item.number === issueN
+
+
Let op: Gebruik de component [Code Block](/code-block) als de code meerdere regels beslaat.
+## Anatomie
+
+
+
## Definition of Done
diff --git a/docs/componenten/color-sample/index.mdx b/docs/componenten/color-sample/index.mdx
index 86e6b756d88..7e8617ed6fe 100644
--- a/docs/componenten/color-sample/index.mdx
+++ b/docs/componenten/color-sample/index.mdx
@@ -16,6 +16,7 @@ keywords:
{/* @license CC0-1.0 */}
import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import ColorSampleIllustration from "@nl-design-system-candidate/color-sample-docs/docs/anatomy/anatomy.svg";
import AcIntro from "@nl-design-system-unstable/documentation/componenten/ac/_ac_intro.md";
import Wcag111 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.1.1-color-sample.md";
import Wcag131 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.3.1-color-sample.md";
@@ -25,6 +26,8 @@ import Wcag1412 from "@nl-design-system-unstable/documentation/componenten/ac/_w
import Wcag144 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.4.md";
import Wcag145 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.5-color-sample.md";
import Wcag143 from "@nl-design-system-unstable/documentation/wcag/summaries/_1.4.3-summary.md";
+import { ComponentAliases } from "@site/src/components/ComponentAliases";
+import { ComponentAnatomy } from "@site/src/components/ComponentAnatomy";
import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
import {
DefinitionOfDone,
@@ -42,6 +45,12 @@ export const component = componentProgress.find((item) => item.number === issueN
+
+
+## Anatomie
+
+
+
## Definition of Done
diff --git a/docs/componenten/data-badge/index.mdx b/docs/componenten/data-badge/index.mdx
index 6703f350501..975156ff3ea 100644
--- a/docs/componenten/data-badge/index.mdx
+++ b/docs/componenten/data-badge/index.mdx
@@ -41,6 +41,7 @@ keywords:
{/* @license CC0-1.0 */}
import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import DataBadgeIllustration from "@nl-design-system-candidate/data-badge-docs/docs/anatomy/anatomy.svg";
import AcIntro from "@nl-design-system-unstable/documentation/componenten/ac/_ac_intro.md";
import Wcag111 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.1.1-data-badge.md";
import Wcag131 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.3.1-data-badge.md";
@@ -50,6 +51,8 @@ import Wcag143 from "@nl-design-system-unstable/documentation/componenten/ac/_wc
import Wcag144 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.4.md";
import Wcag145 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-1.4.5.md";
import Wcag312 from "@nl-design-system-unstable/documentation/componenten/ac/_wcag-3.1.2.md";
+import { ComponentAliases } from "@site/src/components/ComponentAliases";
+import { ComponentAnatomy } from "@site/src/components/ComponentAnatomy";
import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
import {
DefinitionOfDone,
@@ -67,6 +70,12 @@ export const component = componentProgress.find((item) => item.number === issueN
+
+
+## Anatomie
+
+
+
## Definition of Done
diff --git a/package.json b/package.json
index a6658762344..2241d648242 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,10 @@
"@docusaurus/theme-common": "3.1.0",
"@docusaurus/theme-search-algolia": "3.1.0",
"@iframe-resizer/react": "5.3.2",
+ "@nl-design-system-candidate/code-block-docs": "1.0.0",
+ "@nl-design-system-candidate/code-docs": "1.0.0",
+ "@nl-design-system-candidate/color-sample-docs": "1.0.0",
+ "@nl-design-system-candidate/data-badge-docs": "1.0.0",
"@tabler/icons-react": "3.17.0",
"@utrecht/design-tokens": "1.1.0",
"clsx": "2.1.1",
@@ -93,7 +97,7 @@
"@nl-design-system-unstable/documentation": "workspace:*",
"@nl-design-system-unstable/nlds-design-tokens": "workspace:*",
"@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.151",
- "@nl-design-system/component-progress": "1.0.1-alpha.80",
+ "@nl-design-system/component-progress": "1.0.1-alpha.82",
"@nl-design-system/eslint-config": "0.0.1",
"@persoonlijke-regelingen-assistent/components-react": "1.0.0-alpha.152",
"@playwright/test": "1.47.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e5725b6bc8..471f0b963b7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,18 @@ importers:
'@iframe-resizer/react':
specifier: 5.3.2
version: 5.3.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@nl-design-system-candidate/code-block-docs':
+ specifier: 1.0.0
+ version: 1.0.0
+ '@nl-design-system-candidate/code-docs':
+ specifier: 1.0.0
+ version: 1.0.0
+ '@nl-design-system-candidate/color-sample-docs':
+ specifier: 1.0.0
+ version: 1.0.0
+ '@nl-design-system-candidate/data-badge-docs':
+ specifier: 1.0.0
+ version: 1.0.0
'@tabler/icons-react':
specifier: 3.17.0
version: 3.17.0(react@18.3.1)
@@ -103,8 +115,8 @@ importers:
specifier: 1.0.0-alpha.151
version: 1.0.0-alpha.151
'@nl-design-system/component-progress':
- specifier: 1.0.1-alpha.80
- version: 1.0.1-alpha.80
+ specifier: 1.0.1-alpha.82
+ version: 1.0.1-alpha.82
'@nl-design-system/eslint-config':
specifier: 0.0.1
version: 0.0.1(eslint@9.16.0(jiti@1.21.0))(typescript@5.6.2)
@@ -1761,11 +1773,23 @@ packages:
'@types/react': '>=16'
react: '>=16'
+ '@nl-design-system-candidate/code-block-docs@1.0.0':
+ resolution: {integrity: sha512-q/CkCZ6yRMOz0bk8KLbf84/B0v4YGR7pAHtPASuWwiNlfZMGAfUx3DrA8dV4hhpwnU0DwPHn66ZH/nVLhtBWqQ==}
+
+ '@nl-design-system-candidate/code-docs@1.0.0':
+ resolution: {integrity: sha512-W2/nT/7IBtjevimcDjdVEsAVahn+fxjsfIMOV2gsRMvfRqqdkt7gbm93+Ft57gBV7IjmQwEM+kve0evBKs1BiQ==}
+
+ '@nl-design-system-candidate/color-sample-docs@1.0.0':
+ resolution: {integrity: sha512-86THgXAlKVTibK02yS9GNcfCcTI9oqRVfAxAh2KALw8GwtLwkqzMDyZYN+bjXJCB2lIumuGEtpuwmeab8WZibQ==}
+
+ '@nl-design-system-candidate/data-badge-docs@1.0.0':
+ resolution: {integrity: sha512-dIyFVgn00Yf/WYXwOdAiTim2izKuswPDJt3ajzAJ59pWLqs0lig7OoTvRmaNp79iee9oE/nuoa1liKqs2HXQhA==}
+
'@nl-design-system-unstable/voorbeeld-design-tokens@1.0.0-alpha.151':
resolution: {integrity: sha512-KrrBCiDdR1zGI3/7rqPkknHBMnOG8GO0BgEimyVKesEa591OooP6SXjS28sBlbPBhYeMQSmyu/u2STOCZqAAJg==}
- '@nl-design-system/component-progress@1.0.1-alpha.80':
- resolution: {integrity: sha512-PJT8gbuMCFOys1OM6FzB7w+CO87rFQbN023CPbgbdGMhxodtbW5yhkEg9i2ooVVuYxtkXR/ospqFpdAAnNbPJg==}
+ '@nl-design-system/component-progress@1.0.1-alpha.82':
+ resolution: {integrity: sha512-9QmyZHcK4VD41KsdqLpxgNmEL8SwLL1JbB0cVF6Q/Mw7tQBXoxuCA2ihODXKAC16MHTodz89vsTVLFsTTs6PBw==}
'@nl-design-system/eslint-config@0.0.1':
resolution: {integrity: sha512-zgKEBk0S88bkRX4zRihhoOidQtekpvOHWOOPl0aJhTy5aF2hyFzbzDTGjPgpseo0lDbwZjd7LUwLJevOj83WYg==}
@@ -10006,9 +10030,17 @@ snapshots:
'@types/react': 18.3.12
react: 18.3.1
+ '@nl-design-system-candidate/code-block-docs@1.0.0': {}
+
+ '@nl-design-system-candidate/code-docs@1.0.0': {}
+
+ '@nl-design-system-candidate/color-sample-docs@1.0.0': {}
+
+ '@nl-design-system-candidate/data-badge-docs@1.0.0': {}
+
'@nl-design-system-unstable/voorbeeld-design-tokens@1.0.0-alpha.151': {}
- '@nl-design-system/component-progress@1.0.1-alpha.80': {}
+ '@nl-design-system/component-progress@1.0.1-alpha.82': {}
'@nl-design-system/eslint-config@0.0.1(eslint@9.16.0(jiti@1.21.0))(typescript@5.6.2)':
dependencies:
diff --git a/src/components/ComponentAliases.tsx b/src/components/ComponentAliases.tsx
new file mode 100644
index 00000000000..50f55463964
--- /dev/null
+++ b/src/components/ComponentAliases.tsx
@@ -0,0 +1,26 @@
+import { Markdown } from '@site/src/components/Markdown';
+import React, { type PropsWithChildren, Suspense } from 'react';
+import { toKebabCase } from '../utils';
+import type { CleanComponentProgress as ComponentProgressObject } from '@nl-design-system/component-progress/dist/utils';
+
+interface ComponentAliasesProps {
+ component?: ComponentProgressObject;
+}
+
+export const ComponentAliases = ({ component }: PropsWithChildren) => {
+ const { title } = component;
+ const slug = toKebabCase(title);
+ const Aliases = React.lazy(() =>
+ import(`@nl-design-system-candidate/${slug}-docs/docs/aliases.md`).catch(() => {
+ return { default: () => null };
+ }),
+ );
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/components/ComponentAnatomy.css b/src/components/ComponentAnatomy.css
new file mode 100644
index 00000000000..59254a83d83
--- /dev/null
+++ b/src/components/ComponentAnatomy.css
@@ -0,0 +1,7 @@
+.component-anatomy {
+ margin: 0;
+}
+.component-anatomy__illustration {
+ max-width: 100%;
+ height: auto;
+}
diff --git a/src/components/ComponentAnatomy.tsx b/src/components/ComponentAnatomy.tsx
new file mode 100644
index 00000000000..69c3eefbd35
--- /dev/null
+++ b/src/components/ComponentAnatomy.tsx
@@ -0,0 +1,46 @@
+import { Markdown } from '@site/src/components/Markdown';
+import clsx from 'clsx';
+import React, { type PropsWithChildren, Suspense } from 'react';
+import { toKebabCase } from '../utils';
+import './ComponentAnatomy.css';
+import type { CleanComponentProgress as ComponentProgressObject } from '@nl-design-system/component-progress/dist/utils';
+
+interface IllustrationProps {
+ className?: string;
+ height?: boolean;
+}
+
+interface ComponentAnatomyProps {
+ component?: ComponentProgressObject;
+ illustration?: React.ComponentType;
+}
+
+export const ComponentAnatomy = ({
+ component,
+ illustration: AnatomyIllustration,
+}: PropsWithChildren) => {
+ const { title } = component;
+ const slug = toKebabCase(title);
+ const AnatomyLegend = React.lazy(() =>
+ import(`@nl-design-system-candidate/${slug}-docs/docs/anatomy/anatomy.md`).catch(() => {
+ return { default: () => null };
+ }),
+ );
+
+ return (
+
+
+ {AnatomyIllustration && (
+
+ )}
+ {AnatomyIllustration && AnatomyLegend && (
+
+
+
+
+
+ )}
+
+
+ );
+};
diff --git a/src/css/custom.css b/src/css/custom.css
index e4ce0eb5079..e0e8f0f7f2c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -940,6 +940,10 @@ pre {
display: none !important;
}
+.utrecht-paragraph--lead + p {
+ margin-block-start: var(--utrecht-paragraph-margin-block-start);
+}
+
/* Temporary fix for accordion spacing */
.utrecht-accordion__header {
margin: 0;