From b5e5ba605eed3cae4d86b0b7569fa4c16fb434e5 Mon Sep 17 00:00:00 2001
From: Tom Jonkman <tom@tomjonkman.com>
Date: Thu, 9 Jan 2025 14:14:03 +0100
Subject: [PATCH] Fix open in new tab links in docusaurus (#1000)

Co-authored-by: sushitommy <>
---
 components/accordion/accordion.docusaurus.mdx |  2 +-
 .../action-group/action-group.docusaurus.mdx  |  2 +-
 components/alert/alert.docusaurus.mdx         |  2 +-
 .../breadcrumbs/breadcrumbs.docusaurus.mdx    |  2 +-
 components/button/button.docusaurus.mdx       | 26 +++++++++----
 components/card/card.docusaurus.mdx           |  5 +--
 components/data-list/data-list.docusaurus.mdx |  6 +--
 components/dialog/dialog.docusaurus.mdx       |  4 +-
 .../expandable-content.docusaurus.mdx         |  2 +-
 components/favicon/favicon.docusaurus.mdx     |  7 +++-
 components/footer/footer.docusaurus.mdx       |  2 +-
 .../form-feedback/feedback.docusaurus.mdx     |  4 +-
 .../form-field-checkbox.docusaurus.mdx        |  4 +-
 .../form-field-dateinput.docusaurus.mdx       |  4 +-
 .../form-field-fileinput.docusaurus.mdx       |  2 +-
 .../form-field-label/label.docusaurus.mdx     |  2 +-
 .../form-field-radio-button.docusaurus.mdx    |  2 +-
 .../form-field-select.docusaurus.mdx          |  6 +--
 .../form-field-textarea.docusaurus.mdx        |  4 +-
 .../form-field-textinput.docusaurus.mdx       |  4 +-
 .../form-field-timeinput.docusaurus.mdx       |  4 +-
 .../form-fieldset.docusaurus.mdx              |  8 ++--
 components/grid/grid.docusaurus.mdx           | 11 ++++--
 components/header/header.docusaurus.mdx       |  2 +-
 components/heading/heading.docusaurus.mdx     | 14 ++-----
 components/hero/hero.docusaurus.mdx           |  5 +--
 .../horizontal-rule.docusaurus.mdx            |  2 +-
 components/icon/icon.docusaurus.mdx           |  2 +-
 components/item-list/item-list.docusaurus.mdx |  2 +-
 .../layout-flow/layout-flow.docusaurus.mdx    | 17 +++++++--
 components/link/link.docusaurus.mdx           |  2 +-
 components/logo/logo.docusaurus.mdx           |  2 +-
 .../max-width-layout.docusaurus.mdx           |  6 +--
 .../menubar-mobile.docusaurus.mdx             |  2 +-
 components/menubar/menubar.docusaurus.mdx     |  2 +-
 .../ordered-unordered-list.docusaurus.mdx     |  4 +-
 .../pagination/pagination.docusaurus.mdx      |  2 +-
 components/paragraph/paragraph.docusaurus.mdx |  4 +-
 .../progress-tracker.docusaurus.mdx           |  4 +-
 .../scrollable-content.docusaurus.mdx         |  7 +---
 components/skip-link/skip-link.docusaurus.mdx | 11 ++++--
 .../status-icon/status-icon.docusaurus.mdx    |  2 +-
 .../status-indicator.docusaurus.mdx           |  2 +-
 components/table/table.docusaurus.mdx         |  2 +-
 components/tabs/tabs.docusaurus.mdx           |  2 +-
 components/tag/tag.docusaurus.mdx             |  2 +-
 components/toggle/toggle.docusaurus.mdx       |  2 +-
 .../src/components/ComponentExample/index.tsx | 38 +++++++++++--------
 48 files changed, 143 insertions(+), 112 deletions(-)

diff --git a/components/accordion/accordion.docusaurus.mdx b/components/accordion/accordion.docusaurus.mdx
index 103b4bf4ec..ad0d96806d 100644
--- a/components/accordion/accordion.docusaurus.mdx
+++ b/components/accordion/accordion.docusaurus.mdx
@@ -10,7 +10,7 @@ import Documentation from "./README.md";
 import Accordion from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-accordion--default">
   <Accordion />
 </ComponentExample>
 
diff --git a/components/action-group/action-group.docusaurus.mdx b/components/action-group/action-group.docusaurus.mdx
index 776f8d31e4..acfb81faf6 100644
--- a/components/action-group/action-group.docusaurus.mdx
+++ b/components/action-group/action-group.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import ActionGroup from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-action-group--default">
   <ActionGroup />
 </ComponentExample>
 
diff --git a/components/alert/alert.docusaurus.mdx b/components/alert/alert.docusaurus.mdx
index f3bd3d7494..c380a3bf34 100644
--- a/components/alert/alert.docusaurus.mdx
+++ b/components/alert/alert.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Alert from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-alert--default">
   <Alert />
 </ComponentExample>
 
diff --git a/components/breadcrumbs/breadcrumbs.docusaurus.mdx b/components/breadcrumbs/breadcrumbs.docusaurus.mdx
index faccecd053..74322030ed 100644
--- a/components/breadcrumbs/breadcrumbs.docusaurus.mdx
+++ b/components/breadcrumbs/breadcrumbs.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import BreadCrumbs from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-breadcrumbs--default">
   <BreadCrumbs />
 </ComponentExample>
 
diff --git a/components/button/button.docusaurus.mdx b/components/button/button.docusaurus.mdx
index 796d9ecc6f..971b9f3bd9 100644
--- a/components/button/button.docusaurus.mdx
+++ b/components/button/button.docusaurus.mdx
@@ -14,26 +14,38 @@ import Heading from "../heading/src/template";
 
 Primary button:
 
-<ComponentExample>
+<ComponentExample storyName="componenten-button--default">
   <Button />
 </ComponentExample>
 
 Secondary button:
+{(() => {
+const props = { kind: "secondary" };
+return (
 
-<ComponentExample>
-  <Button kind="secondary" />
+<ComponentExample storyName="componenten-button--default">
+  <Button {...props} />
 </ComponentExample>
+); })()}
 
 Tertiary button:
+{(() => {
+const props = { kind: "tertiary" };
+return (
 
-<ComponentExample>
-  <Button kind="tertiary" />
+<ComponentExample storyName="componenten-button--default" args={props}>
+  <Button {...props} />
 </ComponentExample>
+); })()}
 
 Quaternary button:
+{(() => {
+const props = { kind: "quaternary" };
+return (
 
-<ComponentExample>
-  <Button kind="quaternary" />
+<ComponentExample storyName="componenten-button--default" args={props}>
+  <Button {...props} />
 </ComponentExample>
+); })()}
 
 <Documentation />
diff --git a/components/card/card.docusaurus.mdx b/components/card/card.docusaurus.mdx
index 11428f3a23..370e97fc0d 100644
--- a/components/card/card.docusaurus.mdx
+++ b/components/card/card.docusaurus.mdx
@@ -7,11 +7,10 @@ slug: .
 
 import Documentation from "./README.md";
 import Card from "./src/template";
-import CardImageUrl from "../../documentation/demopages/common/images/www/home.jpg";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Card outline={true} image={CardImageUrl} fullCardLink={true} />
+<ComponentExample storyName="componenten-card--default">
+  <Card />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/data-list/data-list.docusaurus.mdx b/components/data-list/data-list.docusaurus.mdx
index 35eb435134..7f8c6c2036 100644
--- a/components/data-list/data-list.docusaurus.mdx
+++ b/components/data-list/data-list.docusaurus.mdx
@@ -6,11 +6,11 @@ slug: .
 ---
 
 import Documentation from "./README.md";
-import Datalist from "./src/template.tsx";
+import DataList from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Datalist />
+<ComponentExample storyName="componenten-data-list--default">
+  <DataList />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/dialog/dialog.docusaurus.mdx b/components/dialog/dialog.docusaurus.mdx
index 9d6efa49a1..11825350c4 100644
--- a/components/dialog/dialog.docusaurus.mdx
+++ b/components/dialog/dialog.docusaurus.mdx
@@ -9,8 +9,8 @@ import Documentation from "./README.md";
 import Dialog from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Dialog>Dialog content</Dialog>
+<ComponentExample storyName="componenten-dialog--default">
+  <Dialog />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/expandable-content/expandable-content.docusaurus.mdx b/components/expandable-content/expandable-content.docusaurus.mdx
index 01d8fa8045..e390ee2a12 100644
--- a/components/expandable-content/expandable-content.docusaurus.mdx
+++ b/components/expandable-content/expandable-content.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import ExpandableContent from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-expandable-content--default">
   <ExpandableContent />
 </ComponentExample>
 
diff --git a/components/favicon/favicon.docusaurus.mdx b/components/favicon/favicon.docusaurus.mdx
index 6a687926e3..b2bd2f3a6d 100644
--- a/components/favicon/favicon.docusaurus.mdx
+++ b/components/favicon/favicon.docusaurus.mdx
@@ -10,8 +10,13 @@ import Favicon from "./src/template";
 import FavIconUrl from "../../documentation/demopages/common/favicon.ico";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
+{(() => {
+const props = { src: FavIconUrl };
+return (
+
 <ComponentExample>
-  <Favicon src={FavIconUrl} />
+  <Favicon {...props} />
 </ComponentExample>
+); })()}
 
 <Documentation />
diff --git a/components/footer/footer.docusaurus.mdx b/components/footer/footer.docusaurus.mdx
index 6d65300037..a965757957 100644
--- a/components/footer/footer.docusaurus.mdx
+++ b/components/footer/footer.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Footer from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-footer--default">
   <Footer />
 </ComponentExample>
 
diff --git a/components/form-feedback/feedback.docusaurus.mdx b/components/form-feedback/feedback.docusaurus.mdx
index cd06786d1d..71d7e7fd83 100644
--- a/components/form-feedback/feedback.docusaurus.mdx
+++ b/components/form-feedback/feedback.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Feedback
+title: Form feedback
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Feedback from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-feedback--default">
   <Feedback />
 </ComponentExample>
 
diff --git a/components/form-field-checkbox/form-field-checkbox.docusaurus.mdx b/components/form-field-checkbox/form-field-checkbox.docusaurus.mdx
index 23d918886e..1c9dd09077 100644
--- a/components/form-field-checkbox/form-field-checkbox.docusaurus.mdx
+++ b/components/form-field-checkbox/form-field-checkbox.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Checkboxes
+title: Checkbox field
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -10,7 +10,7 @@ import FormFieldCheckbox from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-checkbox-field--default">
   <FormFieldCheckbox />
 </ComponentExample>
 
diff --git a/components/form-field-dateinput/form-field-dateinput.docusaurus.mdx b/components/form-field-dateinput/form-field-dateinput.docusaurus.mdx
index 9b2fc1451c..74e6a5e945 100644
--- a/components/form-field-dateinput/form-field-dateinput.docusaurus.mdx
+++ b/components/form-field-dateinput/form-field-dateinput.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Date input
+title: Date input field
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -10,7 +10,7 @@ import FormFieldDateInput from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-dateinput-field--default">
   <FormFieldDateInput />
 </ComponentExample>
 
diff --git a/components/form-field-fileinput/form-field-fileinput.docusaurus.mdx b/components/form-field-fileinput/form-field-fileinput.docusaurus.mdx
index ffca6645b7..984555b871 100644
--- a/components/form-field-fileinput/form-field-fileinput.docusaurus.mdx
+++ b/components/form-field-fileinput/form-field-fileinput.docusaurus.mdx
@@ -10,7 +10,7 @@ import FormFieldFileInput from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-fileinput-field--default">
   <FormFieldFileInput />
 </ComponentExample>
 
diff --git a/components/form-field-label/label.docusaurus.mdx b/components/form-field-label/label.docusaurus.mdx
index 197ec24f35..736559fef2 100644
--- a/components/form-field-label/label.docusaurus.mdx
+++ b/components/form-field-label/label.docusaurus.mdx
@@ -10,7 +10,7 @@ import Label from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-label--default">
   <Label />
 </ComponentExample>
 
diff --git a/components/form-field-radio-button/form-field-radio-button.docusaurus.mdx b/components/form-field-radio-button/form-field-radio-button.docusaurus.mdx
index bdfa778ee7..effb2f5784 100644
--- a/components/form-field-radio-button/form-field-radio-button.docusaurus.mdx
+++ b/components/form-field-radio-button/form-field-radio-button.docusaurus.mdx
@@ -10,7 +10,7 @@ import FormFieldFileInput from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-radio-button-field--default">
   <FormFieldFileInput />
 </ComponentExample>
 
diff --git a/components/form-field-select/form-field-select.docusaurus.mdx b/components/form-field-select/form-field-select.docusaurus.mdx
index 633ee759e4..4832d3d47a 100644
--- a/components/form-field-select/form-field-select.docusaurus.mdx
+++ b/components/form-field-select/form-field-select.docusaurus.mdx
@@ -6,12 +6,12 @@ slug: .
 ---
 
 import Documentation from "./README.md";
-import FormFieldFileInput from "./src/template";
+import FormFieldSelect from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
-  <FormFieldFileInput />
+<ComponentExample storyName="componenten-select-field--default">
+  <FormFieldSelect />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/form-field-textarea/form-field-textarea.docusaurus.mdx b/components/form-field-textarea/form-field-textarea.docusaurus.mdx
index 7ac2643c64..c303ca3277 100644
--- a/components/form-field-textarea/form-field-textarea.docusaurus.mdx
+++ b/components/form-field-textarea/form-field-textarea.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Textarea
+title: Text area field
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -10,7 +10,7 @@ import FormFieldTextarea from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-textarea-field--default">
   <FormFieldTextarea />
 </ComponentExample>
 
diff --git a/components/form-field-textinput/form-field-textinput.docusaurus.mdx b/components/form-field-textinput/form-field-textinput.docusaurus.mdx
index a310458dae..58d4c76756 100644
--- a/components/form-field-textinput/form-field-textinput.docusaurus.mdx
+++ b/components/form-field-textinput/form-field-textinput.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Text input
+title: Text input field
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -10,7 +10,7 @@ import FormFieldTextInput from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-textinput-field--default">
   <FormFieldTextInput />
 </ComponentExample>
 
diff --git a/components/form-field-timeinput/form-field-timeinput.docusaurus.mdx b/components/form-field-timeinput/form-field-timeinput.docusaurus.mdx
index 3c16a0daff..ab6a72ad1c 100644
--- a/components/form-field-timeinput/form-field-timeinput.docusaurus.mdx
+++ b/components/form-field-timeinput/form-field-timeinput.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Time input
+title: Time input field
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -10,7 +10,7 @@ import FormFieldTimeInput from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 import FieldDocumentation from "../form-field/README.md";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-timeinput-field--default">
   <FormFieldTimeInput />
 </ComponentExample>
 
diff --git a/components/form-fieldset/form-fieldset.docusaurus.mdx b/components/form-fieldset/form-fieldset.docusaurus.mdx
index ed4f5e888c..8185b92280 100644
--- a/components/form-fieldset/form-fieldset.docusaurus.mdx
+++ b/components/form-fieldset/form-fieldset.docusaurus.mdx
@@ -1,16 +1,16 @@
 ---
-title: Fieldset
+title: Form fieldset
 hide_title: false
 hide_table_of_contents: true
 slug: .
 ---
 
 import Documentation from "./README.md";
-import Fieldset from "./src/template";
+import FormFieldset from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Fieldset />
+<ComponentExample storyName="componenten-fieldset--default">
+  <FormFieldset />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/grid/grid.docusaurus.mdx b/components/grid/grid.docusaurus.mdx
index 52631ccedd..b07024a889 100644
--- a/components/grid/grid.docusaurus.mdx
+++ b/components/grid/grid.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Grid layout
+title: Grid
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -9,8 +9,13 @@ import Documentation from "./README.md";
 import Grid from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Grid gap="md" />
+{(() => {
+const props = { columns: "three" };
+return (
+
+<ComponentExample storyName="layout-grid--default" args={props}>
+  <Grid {...props} />
 </ComponentExample>
+); })()}
 
 <Documentation />
diff --git a/components/header/header.docusaurus.mdx b/components/header/header.docusaurus.mdx
index c3cb337d8e..45bffd61ed 100644
--- a/components/header/header.docusaurus.mdx
+++ b/components/header/header.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Header from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-header--default">
   <Header />
 </ComponentExample>
 
diff --git a/components/heading/heading.docusaurus.mdx b/components/heading/heading.docusaurus.mdx
index 5508c654e2..7479d0e030 100644
--- a/components/heading/heading.docusaurus.mdx
+++ b/components/heading/heading.docusaurus.mdx
@@ -9,18 +9,10 @@ import Documentation from "./README.md";
 import Heading from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<br />
-Alle headings van niveau 1 t/m 6:
+<Heading type="h2">Heading</Heading>
 
-<ComponentExample>
-  <div>
-    <Heading type="h1">Heading 1</Heading>
-    <Heading type="h2">Heading 2</Heading>
-    <Heading type="h3">Heading 3</Heading>
-    <Heading type="h4">Heading 4</Heading>
-    <Heading type="h5">Heading 5</Heading>
-    <Heading type="h6">Heading 6</Heading>
-  </div>
+<ComponentExample storyName="componenten-heading--default">
+  <Heading />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/hero/hero.docusaurus.mdx b/components/hero/hero.docusaurus.mdx
index fdcc376787..046aeeb23f 100644
--- a/components/hero/hero.docusaurus.mdx
+++ b/components/hero/hero.docusaurus.mdx
@@ -7,11 +7,10 @@ slug: .
 
 import Documentation from "./README.md";
 import Hero from "./src/template";
-import HeroImageUrl from "../../documentation/demopages/common/images/www/home.jpg";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <Hero image={HeroImageUrl} />
+<ComponentExample storyName="componenten-hero--default">
+  <Hero />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/horizontal-rule/horizontal-rule.docusaurus.mdx b/components/horizontal-rule/horizontal-rule.docusaurus.mdx
index f5b63ae313..cd411cbf1e 100644
--- a/components/horizontal-rule/horizontal-rule.docusaurus.mdx
+++ b/components/horizontal-rule/horizontal-rule.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Hr from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-horizontal-rule--default">
   <Hr />
 </ComponentExample>
 
diff --git a/components/icon/icon.docusaurus.mdx b/components/icon/icon.docusaurus.mdx
index 715b808881..bdfa86778c 100644
--- a/components/icon/icon.docusaurus.mdx
+++ b/components/icon/icon.docusaurus.mdx
@@ -10,7 +10,7 @@ import Documentation from "./README.md";
 import Icon from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-icon--default">
   <Icon />
 </ComponentExample>
 
diff --git a/components/item-list/item-list.docusaurus.mdx b/components/item-list/item-list.docusaurus.mdx
index 7050905b39..fa03bad3f8 100644
--- a/components/item-list/item-list.docusaurus.mdx
+++ b/components/item-list/item-list.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import ItemList from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-item-list--default">
   <ItemList />
 </ComponentExample>
 
diff --git a/components/layout-flow/layout-flow.docusaurus.mdx b/components/layout-flow/layout-flow.docusaurus.mdx
index 215340c8ad..47d3fbd72e 100644
--- a/components/layout-flow/layout-flow.docusaurus.mdx
+++ b/components/layout-flow/layout-flow.docusaurus.mdx
@@ -10,16 +10,25 @@ import LayoutFlow from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
 Column:
+{(() => {
+const props = { gap: "lg" };
+return (
 
-<ComponentExample>
-  <LayoutFlow gap="lg" />
+<ComponentExample storyName="layout-flow--default" args={props}>
+  <LayoutFlow {...props} />
 </ComponentExample>
+); })()}
+
 <br />
 
 Row:
+{(() => {
+const props = { row: true, gap: "lg" };
+return (
 
-<ComponentExample>
-  <LayoutFlow row={true} gap="lg" />
+<ComponentExample storyName="layout-flow--default" args={props}>
+  <LayoutFlow {...props} />
 </ComponentExample>
+); })()}
 
 <Documentation />
diff --git a/components/link/link.docusaurus.mdx b/components/link/link.docusaurus.mdx
index e5bcb0ffb0..8bd1a2b55f 100644
--- a/components/link/link.docusaurus.mdx
+++ b/components/link/link.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Link from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-link--default">
   <Link />
 </ComponentExample>
 
diff --git a/components/logo/logo.docusaurus.mdx b/components/logo/logo.docusaurus.mdx
index c6ac5a4e82..779722552f 100644
--- a/components/logo/logo.docusaurus.mdx
+++ b/components/logo/logo.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Logo from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-logo--default">
   <Logo />
 </ComponentExample>
 
diff --git a/components/max-width-layout/max-width-layout.docusaurus.mdx b/components/max-width-layout/max-width-layout.docusaurus.mdx
index c45866b75f..fccf87b010 100644
--- a/components/max-width-layout/max-width-layout.docusaurus.mdx
+++ b/components/max-width-layout/max-width-layout.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Max-width layout
+title: Max width layout
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -9,8 +9,8 @@ import Documentation from "./README.md";
 import MaxWidthLayout from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <MaxWidthLayout>Deze layout heeft een maximale breedte.</MaxWidthLayout>
+<ComponentExample storyName="layout-max-width-layout--default">
+  <MaxWidthLayout />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/menubar-mobile/menubar-mobile.docusaurus.mdx b/components/menubar-mobile/menubar-mobile.docusaurus.mdx
index 858bb6b45e..a584b561b4 100644
--- a/components/menubar-mobile/menubar-mobile.docusaurus.mdx
+++ b/components/menubar-mobile/menubar-mobile.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import MenuBarMobile from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-menubar-mobile--default">
   <MenuBarMobile />
 </ComponentExample>
 
diff --git a/components/menubar/menubar.docusaurus.mdx b/components/menubar/menubar.docusaurus.mdx
index 546787d6da..cb23568fb3 100644
--- a/components/menubar/menubar.docusaurus.mdx
+++ b/components/menubar/menubar.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import MenuBar from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-menubar--default">
   <MenuBar />
 </ComponentExample>
 
diff --git a/components/ordered-unordered-list/ordered-unordered-list.docusaurus.mdx b/components/ordered-unordered-list/ordered-unordered-list.docusaurus.mdx
index 8b3488f7f8..e36b739d81 100644
--- a/components/ordered-unordered-list/ordered-unordered-list.docusaurus.mdx
+++ b/components/ordered-unordered-list/ordered-unordered-list.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Ordered & unordered list
+title: List
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import List from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-ordered-unordered-list--default">
   <List />
 </ComponentExample>
 
diff --git a/components/pagination/pagination.docusaurus.mdx b/components/pagination/pagination.docusaurus.mdx
index 1f905c2ea7..5e16c1af18 100644
--- a/components/pagination/pagination.docusaurus.mdx
+++ b/components/pagination/pagination.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Pagination from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-pagination--default">
   <Pagination />
 </ComponentExample>
 
diff --git a/components/paragraph/paragraph.docusaurus.mdx b/components/paragraph/paragraph.docusaurus.mdx
index 4f2f005c10..37e0605fc2 100644
--- a/components/paragraph/paragraph.docusaurus.mdx
+++ b/components/paragraph/paragraph.docusaurus.mdx
@@ -7,9 +7,9 @@ slug: .
 
 import Documentation from "./README.md";
 import Paragraph from "./src/template";
-import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample/index.tsx";
+import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-paragraph--default">
   <Paragraph />
 </ComponentExample>
 
diff --git a/components/progress-tracker/progress-tracker.docusaurus.mdx b/components/progress-tracker/progress-tracker.docusaurus.mdx
index 84e2876a03..5efcbd5b6b 100644
--- a/components/progress-tracker/progress-tracker.docusaurus.mdx
+++ b/components/progress-tracker/progress-tracker.docusaurus.mdx
@@ -1,5 +1,5 @@
 ---
-title: Progress Tracker
+title: Progress tracker
 hide_title: false
 hide_table_of_contents: true
 slug: .
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import ProgressTracker from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-progress-tracker--default">
   <ProgressTracker />
 </ComponentExample>
 
diff --git a/components/scrollable-content/scrollable-content.docusaurus.mdx b/components/scrollable-content/scrollable-content.docusaurus.mdx
index 8646331cf8..cc2ac5283a 100644
--- a/components/scrollable-content/scrollable-content.docusaurus.mdx
+++ b/components/scrollable-content/scrollable-content.docusaurus.mdx
@@ -6,14 +6,11 @@ slug: .
 ---
 
 import Documentation from "./README.md";
-import { defaultArgs } from "./src/defaultArgs";
 import ScrollableContent from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
-  <ScrollableContent height={defaultArgs.height} useStyleAttribute={true}>
-    {defaultArgs.content}
-  </ScrollableContent>
+<ComponentExample storyName="componenten-scrollable-content--default">
+  <ScrollableContent />
 </ComponentExample>
 
 <Documentation />
diff --git a/components/skip-link/skip-link.docusaurus.mdx b/components/skip-link/skip-link.docusaurus.mdx
index 35dcb9f4ef..5d1542fac7 100644
--- a/components/skip-link/skip-link.docusaurus.mdx
+++ b/components/skip-link/skip-link.docusaurus.mdx
@@ -1,17 +1,22 @@
 ---
-title: Skip-link
+title: Skip link
 hide_title: false
 hide_table_of_contents: true
 slug: .
 ---
 
 import Documentation from "./README.md";
-import SkipLink from "./src/template.tsx";
+import SkipLink from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample minHeight={95}>
+{(() => {
+const props = { minHeight: 95 };
+return (
+
+<ComponentExample storyName="componenten-skip-link--default" args={props}>
   <SkipLink />
 </ComponentExample>
+); })()}
 
 <br />
 Klik op de lege ruimte in het voorbeeld en druk op TAB om de skip-link te tonen.
diff --git a/components/status-icon/status-icon.docusaurus.mdx b/components/status-icon/status-icon.docusaurus.mdx
index c1bae028c3..a54323437e 100644
--- a/components/status-icon/status-icon.docusaurus.mdx
+++ b/components/status-icon/status-icon.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import StatusIcon from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-status-icon--default">
   <StatusIcon />
 </ComponentExample>
 
diff --git a/components/status-indicator/status-indicator.docusaurus.mdx b/components/status-indicator/status-indicator.docusaurus.mdx
index 6918a63108..ee31f35650 100644
--- a/components/status-indicator/status-indicator.docusaurus.mdx
+++ b/components/status-indicator/status-indicator.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import StatusIndicator from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-status-indicator--default">
   <StatusIndicator />
 </ComponentExample>
 
diff --git a/components/table/table.docusaurus.mdx b/components/table/table.docusaurus.mdx
index 952f03f1d8..b313429fe2 100644
--- a/components/table/table.docusaurus.mdx
+++ b/components/table/table.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Table from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-table--default">
   <Table />
 </ComponentExample>
 
diff --git a/components/tabs/tabs.docusaurus.mdx b/components/tabs/tabs.docusaurus.mdx
index 15828b40be..61e0b0b823 100644
--- a/components/tabs/tabs.docusaurus.mdx
+++ b/components/tabs/tabs.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Tabs from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-tabs--default">
   <Tabs />
 </ComponentExample>
 
diff --git a/components/tag/tag.docusaurus.mdx b/components/tag/tag.docusaurus.mdx
index 3ce929828a..e26eb305e1 100644
--- a/components/tag/tag.docusaurus.mdx
+++ b/components/tag/tag.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Tag from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-tag--default">
   <Tag />
 </ComponentExample>
 
diff --git a/components/toggle/toggle.docusaurus.mdx b/components/toggle/toggle.docusaurus.mdx
index 341b095893..2777e59c30 100644
--- a/components/toggle/toggle.docusaurus.mdx
+++ b/components/toggle/toggle.docusaurus.mdx
@@ -9,7 +9,7 @@ import Documentation from "./README.md";
 import Toggle from "./src/template";
 import ComponentExample from "../../packages/docusaurus/src/components/ComponentExample";
 
-<ComponentExample>
+<ComponentExample storyName="componenten-toggle--default">
   <Toggle />
 </ComponentExample>
 
diff --git a/packages/docusaurus/src/components/ComponentExample/index.tsx b/packages/docusaurus/src/components/ComponentExample/index.tsx
index 38786ec0e7..edba18a5da 100644
--- a/packages/docusaurus/src/components/ComponentExample/index.tsx
+++ b/packages/docusaurus/src/components/ComponentExample/index.tsx
@@ -7,9 +7,8 @@ import prettier from 'prettier/standalone';
 import { useMemo } from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import styles from './styles.module.css';
-import { serialize } from '../../utils/react-serialize';
 
-function formatHTML(children) {
+const formatHTML = (children) => {
   return prettier
     .format(ReactDOMServer.renderToStaticMarkup(children), {
       parser: 'babel',
@@ -17,13 +16,20 @@ function formatHTML(children) {
     })
     .replace(/\{" "\}/gm, ' ')
     .replace(/(;)[^;]*$/g, '');
-}
+};
+
+const ComponentExample = ({ children, minHeight, storyName, args }) => {
+  const { siteConfig } = useDocusaurusContext();
+  const isDevelopment = process.env.NODE_ENV === 'development';
+  const baseUrl = isDevelopment ? 'http://localhost:6006/' : siteConfig.baseUrl.replace('/docs', '');
 
-const ComponentExample = ({ children, minHeight }) => {
-  const serialized = useMemo(() => encodeURIComponent(serialize(children)), [children]);
-  const previewLink = `${useDocusaurusContext().siteConfig.baseUrl}preview?${serialized}`;
+  const argsParam = args
+    ? `&args=${Object.entries(args)
+        .map(([key, value]) => `${key}:${encodeURIComponent(String(value))}`)
+        .join(',')}`
+    : '';
+  const previewLink = `${baseUrl}iframe.html?id=${storyName}&viewMode=story${argsParam}`;
 
-  // On the server side, using renderToStaticMarkup inside useMemo results in a bug
   let html;
   if (typeof window !== 'undefined') {
     html = useMemo(() => formatHTML(children), [children]);
@@ -38,14 +44,16 @@ const ComponentExample = ({ children, minHeight }) => {
       </div>
       <div className={clsx(styles.infoContainer, 'rvo-layout-row')}>
         <ExpandableContent title="Voorbeeld HTML" content={<CodeBlock language="html">{html}</CodeBlock>} />
-        <Link
-          className={styles.openInNewTabLink}
-          content="Open in nieuwe tab"
-          href={previewLink}
-          target="_blank"
-          showIcon="after"
-          icon="externe-link"
-        />
+        {storyName && (
+          <Link
+            className={styles.openInNewTabLink}
+            content="Open in nieuwe tab"
+            href={previewLink}
+            target="_blank"
+            showIcon="after"
+            icon="externe-link"
+          />
+        )}
       </div>
     </div>
   );