Fix open in new tab links in docusaurus (#1000)

Co-authored-by: sushitommy <>
nl-design-system · Jan 9, 2025 · b5e5ba6 · b5e5ba6
1 parent 936e0ce
commit b5e5ba6
Show file tree

Hide file tree

Showing 48 changed files with 143 additions and 112 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>