⚙️ GitHub-Markdown aan Storybook toegevoegd

.storybook/main.js

@@ -1,7 +1,23 @@
+import remarkGfm from "remark-gfm";
+
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
 	stories: ["../stories/**/*.stories.@(js|ts)", "../stories/**/*.mdx"],
-	addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+	addons: [
+		"@storybook/addon-a11y",
+		// MDX 3 kent geen GitHub-Markdown: zonder remark-gfm verschijnt een takenlijst (- [ ]) als
+		// letterlijke tekst. Nodig voor de Definition of Done in stories/UXOpleveringen.mdx.
+		{
+			name: "@storybook/addon-docs",
+			options: {
+				mdxPluginOptions: {
+					mdxCompileOptions: {
+						remarkPlugins: [remarkGfm],
+					},
+				},
+			},
+		},
+	],
 	framework: {
 		name: "@storybook/html-vite",
 		options: {},

.storybook/preview-head.html

@@ -32,6 +32,21 @@
 		font-size: inherit !important;
 		padding: 0;
 	}
+	/* Takenlijst uit Markdown (- [ ], via remark-gfm): het vakje vervangt het opsommingsteken */
+	/* en een afgebroken regel loopt door onder de tekst, niet onder het vakje. */
+	.sbdocs .contains-task-list {
+		list-style: none;
+		padding-inline-start: 0;
+	}
+	.sbdocs .task-list-item {
+		padding-inline-start: 2.5em;
+		position: relative;
+	}
+	.sbdocs .task-list-item > input {
+		inset-inline-start: 0;
+		margin: 0;
+		position: absolute;
+	}
 	/* Storybook story-containers: hoogte aanpassen aan content */
 	#storybook-root,
 	.sb-show-main {

.storybook/preview.js

@@ -30,7 +30,7 @@ const preview = {
 			storySort: {
 				order: [
 					"Introductie",
-					["Over dit prototype", "Ontwerpprincipes", "Ontwerpprincipes: Wat: Visie en principes", "Ontwerpprincipes: Hoe: Werkwijze en techniek", "Schrijfwijzer"],
+					["Over dit prototype", "Ontwerpprincipes", "Ontwerpprincipes: Wat: Visie en principes", "Ontwerpprincipes: Hoe: Werkwijze en techniek", "Schrijfwijzer", "UX-opleveringen en Definition of Done"],
 					"Typografie",
 					["Koppen", "Paragraaf", "Block-level tekst", "Inline tekst"],
 					"Design tokens",