feat: use component-progress in component page

and remove generated logic as it was not easily maintainable

docs/componenten/_template.mdx

@@ -0,0 +1,38 @@
+---
+title: VUL_NAAM_IN
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: VUL_NAAM_IN
+pagination_label: VUL_NAAM_IN
+description: VUL_DOEL_IN
+slug: /VUL_NAAM_ALS_KEBABJE_IN
+sidebar_custom_props:
+  illustration: VUL_NAAM_ALS_PASCAL_IN+SKETCH
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "VUL_NAAM_IN";
+export const description = "VUL_DOEL_IN";
+export const illustration = "VUL_NAAM_ALS_PASCAL_IN+SKETCH";
+export const issueNumber = "VUL_GITHUB_ISSUE_NUMMER_IN";
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/accordion/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Accordion
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Accordion
+pagination_label: Accordion
+description: Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.
+slug: /accordion
+sidebar_custom_props:
+  illustration: AccordionSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Accordion";
+export const description = "Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.";
+export const illustration = "AccordionSketch";
+export const issueNumber = 102;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/action-group/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Action group
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Action group
+pagination_label: Action group
+description: Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.
+slug: /action-group
+sidebar_custom_props:
+  illustration: ActionGroupSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Action group";
+export const description = "Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.";
+export const illustration = "ActionGroupSketch";
+export const issueNumber = 153;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/alert-dialog/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Alert dialog
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Alert dialog
+pagination_label: Alert dialog
+description: " "
+slug: /alert-dialog
+sidebar_custom_props:
+  illustration: AlertDialogSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Alert dialog";
+export const description = "";
+export const illustration = "AlertDialogSketch";
+export const issueNumber = 182;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/alert/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Alert
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Alert
+pagination_label: Alert
+description: " "
+slug: /alert
+sidebar_custom_props:
+  illustration: AlertSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Alert";
+export const description = "";
+export const illustration = "AlertSketch";
+export const issueNumber = 9;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/avatar/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Avatar
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Avatar
+pagination_label: Avatar
+description: " "
+slug: /avatar
+sidebar_custom_props:
+  illustration: AvatarSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Avatar";
+export const description = "";
+export const illustration = "AvatarSketch";
+export const issueNumber = 83;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/blockquote/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Blockquote
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Blockquote
+pagination_label: Blockquote
+description: Toont een citaat dat afwijkt van de hoofdtekst.
+slug: /blockquote
+sidebar_custom_props:
+  illustration: BlockquoteSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Blockquote";
+export const description = "Toont een citaat dat afwijkt van de hoofdtekst.";
+export const illustration = "BlockquoteSketch";
+export const issueNumber = 73;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/breadcrumb-navigation/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Breadcrumb navigation
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Breadcrumb navigation
+pagination_label: Breadcrumb navigation
+description: Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.
+slug: /breadcrumb-navigation
+sidebar_custom_props:
+  illustration: BreadcrumbNavigationSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Breadcrumb navigation";
+export const description = "Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.";
+export const illustration = "BreadcrumbNavigationSketch";
+export const issueNumber = 54;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/button/index.mdx

@@ -0,0 +1,38 @@
+---
+title: Button
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Button
+pagination_label: Button
+description: Biedt de mogelijkheid om een actie uit te voeren.
+slug: /button
+sidebar_custom_props:
+  illustration: ButtonSketch
+---
+
+{/* @license CC0-1.0 */}
+
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Button";
+export const description = "Biedt de mogelijkheid om een actie uit te voeren.";
+export const illustration = "ButtonSketch";
+export const issueNumber = 38;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />

docs/componenten/calendar/index.mdx

@@ -0,0 +1,37 @@
+---
+title: Calendar
+hide_title: true
+hide_table_of_contents: false
+sidebar_label: Calendar
+pagination_label: Calendar
+description: " "
+slug: /Calendar
+sidebar_custom_props:
+  illustration: CalendarSketch
+---
+
+{/* @license CC0-1.0 */}
+import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { Backlog, DefinitionOfDone, Implementations, Introduction } from "../../../src/components/ComponentPage";
+
+{/* Add name and description for the component */}
+export const title = "Calendar";
+export const description = "";
+export const illustration = "CalendarSketch";
+export const issueNumber = 199;
+
+export const component = componentProgress.find((item) => item.number === issueNumber);
+
+<Introduction component={component} headingLevel={1} description={description} illustration={illustration} />
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
+
+## Implementaties
+
+<Implementations component={component} headingLevel={3} />
+
+## Levende Backlog
+
+<Backlog component={component} headingLevel={3} />