From 7bd78f6b500bc93a2f8d08e250f824e300e8fbfe Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Sat, 28 Dec 2024 23:13:08 +0100
Subject: [PATCH] build: format code with Perfectionist

---
 components/icon/src/build.js                  |  4 +-
 components/icon/svgo.config.mjs               |  2 +-
 eslint.config.mjs                             | 83 +++++++------------
 packages/components-css/rollup.config.mjs     |  8 +-
 packages/components-react/rollup.config.mjs   | 10 +--
 packages/components-react/src/Button.test.tsx |  2 +-
 packages/components-react/vite.config.ts      |  2 +-
 packages/mendix-css/rollup.config.mjs         | 20 ++---
 packages/storybook/config/main.ts             | 10 +--
 packages/storybook/config/preview.tsx         |  4 +-
 .../src/css-denhaag-action.stories.tsx        | 18 ++--
 .../src/css-denhaag-sidenav.stories.tsx       | 16 ++--
 .../src/css-utrecht-alert.stories.tsx         | 16 ++--
 .../src/css-utrecht-badge-list.stories.tsx    | 14 ++--
 .../css-utrecht-breadcrumb-nav.stories.tsx    | 16 ++--
 .../src/css-utrecht-button-group.stories.tsx  | 14 ++--
 .../src/css-utrecht-button.stories.tsx        | 14 ++--
 .../src/css-utrecht-counter-badge.stories.tsx | 20 ++---
 .../src/css-utrecht-data-badge.stories.tsx    | 14 ++--
 .../src/css-utrecht-form-label.stories.tsx    | 14 ++--
 .../src/css-utrecht-heading.stories.tsx       | 14 ++--
 .../src/css-utrecht-link-list.stories.tsx     | 20 ++---
 .../src/css-utrecht-link.stories.tsx          | 14 ++--
 .../src/css-utrecht-nav-bar.stories.tsx       | 14 ++--
 .../src/css-utrecht-ordered-list.stories.tsx  | 14 ++--
 .../src/css-utrecht-paragraph.stories.tsx     | 14 ++--
 .../src/css-utrecht-status-badge.stories.tsx  | 22 ++---
 .../src/css-utrecht-table.stories.tsx         | 18 ++--
 .../src/css-utrecht-textarea.stories.tsx      | 14 ++--
 .../src/css-utrecht-textbox.stories.tsx       | 14 ++--
 .../css-utrecht-unordered-list.stories.tsx    | 14 ++--
 .../storybook/src/icon/CustomIconGallery.tsx  |  3 +-
 .../storybook/src/mendix-badge.stories.tsx    | 14 ++--
 ...mendix-breadcrumb-nav.stories-disabled.tsx | 14 ++--
 .../storybook/src/mendix-button.stories.tsx   | 14 ++--
 ...orm-field-radio-group.stories-disabled.tsx | 14 ++--
 .../mendix-form-field-textarea.stories.tsx    | 14 ++--
 .../src/mendix-text-input.stories.tsx         | 14 ++--
 .../storybook/src/mendix-text.stories.tsx     | 14 ++--
 .../src/template/page-mijn-loket.stories.tsx  | 20 ++---
 .../web-component-rods-logo-image.stories.tsx | 10 +--
 .../src/button/stencil.tsx                    |  4 +-
 .../src/logo-image-avatar.tsx                 |  4 +-
 .../src/logo-image-mark.tsx                   |  4 +-
 .../src/logo-image-square.tsx                 |  4 +-
 .../web-components-stencil/src/logo-image.tsx |  4 +-
 .../web-components-stencil/stencil.config.ts  | 10 +--
 proprietary/design-tokens/rollup.config.mjs   |  8 +-
 48 files changed, 310 insertions(+), 332 deletions(-)

diff --git a/components/icon/src/build.js b/components/icon/src/build.js
index b0162ba0..910b31b2 100644
--- a/components/icon/src/build.js
+++ b/components/icon/src/build.js
@@ -3,9 +3,9 @@ const lodash = require('lodash');
 const argv = require('minimist')(process.argv.slice(2), {
   string: ['prefix', 'path'],
 });
-const { readdir, readFile, writeFile, mkdir } = require('node:fs/promises');
+const { mkdir, readdir, readFile, writeFile } = require('node:fs/promises');
 const path = require('path');
-const { component, test, generateIconsName, style, iconContainerComponent } = require('./component_templates.js');
+const { component, generateIconsName, iconContainerComponent, style, test } = require('./component_templates.js');
 
 const { kebabCase } = lodash;
 const componentPrefix = `${argv.prefix}-`;
diff --git a/components/icon/svgo.config.mjs b/components/icon/svgo.config.mjs
index cd3f9435..1406e717 100644
--- a/components/icon/svgo.config.mjs
+++ b/components/icon/svgo.config.mjs
@@ -1,9 +1,9 @@
 export default {
-  multipass: true,
   js2svg: {
     indent: 2,
     pretty: true,
   },
+  multipass: true,
   plugins: [
     "preset-default",
     "removeDimensions",
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 42e9f8d0..5dc23d38 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,24 +1,3 @@
-// import config from "@nl-design-system/eslint-config";
-
-// export default [
-//   ...config,
-//   {
-//     name: "rotterdam/global-ignores",
-//     ignores: [
-//       "build/",
-//       "coverage/",
-//       "dist/",
-//       "target/",
-//       "tmp/",
-//       "components/components.d.ts",
-//       "packages/web-components-angular/src/directives/angular-component-lib/utils.ts",
-//       "packages/web-components-angular/src/directives/proxies.ts",
-//       "packages/web-components-stencil/loader",
-//       "packages/web-components-react/src/react-component-lib/",
-//       "packages/web-components-react/src/components.ts",
-//     ],
-//   },
-// ];
 import js from "@eslint/js";
 import json from "@eslint/json";
 import eslintConfigPrettier from "eslint-config-prettier";
@@ -49,15 +28,15 @@ export default tseslint.config(
       "packages/web-components-react/src/components.ts",
     ],
   },
-  // {
-  //   name: "nl-design-system/plugins-settings",
-  //   plugins: { perfectionist, react },
-  //   settings: {
-  //     react: {
-  //       version: "detect",
-  //     },
-  //   },
-  // },
+  {
+    name: "nl-design-system/plugins-settings",
+    plugins: { perfectionist, react },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
   {
     name: "@eslint/js/recommended",
     files: [
@@ -75,10 +54,10 @@ export default tseslint.config(
     extends: [...tseslint.configs.strict],
     files: ["**/*.ts", "**/*.mts", "**/*.tsx"],
   },
-  // {
-  //   name: "eslint-plugin-perfectionist/recommended-natural",
-  //   ...perfectionist["recommended-natural"],
-  // },
+  {
+    name: "eslint-plugin-perfectionist/recommended-natural",
+    ...perfectionist["recommended-natural"],
+  },
   {
     name: "eslint-plugin-react/recommended",
     files: ["**/*.jsx", "**/*.tsx"],
@@ -130,7 +109,6 @@ export default tseslint.config(
     // This section applies to all files
     name: "nl-design-system/all",
     rules: {
-      "typescript-eslint/no-unused-expressions": "off",
       "array-callback-return": ["error", { checkForEach: false }],
       "block-scoped-var": "error",
       "consistent-return": "error",
@@ -160,25 +138,26 @@ export default tseslint.config(
       "no-useless-concat": "error",
       "no-useless-return": "error",
       "no-void": "error",
-      // "perfectionist/sort-imports": [
-      //   "error",
-      //   {
-      //     ignoreCase: false,
-      //     newlinesBetween: "never",
-      //   },
-      // ],
-      // "perfectionist/sort-objects": [
-      //   "error",
-      //   {
-      //     customGroups: {
-      //       first: ["id", "name"],
-      //       last: ["overrides"],
-      //     },
-      //     groups: ["first", "unknown", "last"],
-      //   },
-      // ],
+      "perfectionist/sort-imports": [
+        "error",
+        {
+          ignoreCase: false,
+          newlinesBetween: "never",
+        },
+      ],
+      "perfectionist/sort-objects": [
+        "error",
+        {
+          customGroups: {
+            first: ["id", "name"],
+            last: ["overrides"],
+          },
+          groups: ["first", "unknown", "last"],
+        },
+      ],
       "prefer-regex-literals": "error",
       radix: "error",
+      "typescript-eslint/no-unused-expressions": "off",
       yoda: "error",
     },
   },
diff --git a/packages/components-css/rollup.config.mjs b/packages/components-css/rollup.config.mjs
index 98a5821c..111d0b02 100644
--- a/packages/components-css/rollup.config.mjs
+++ b/packages/components-css/rollup.config.mjs
@@ -1,20 +1,20 @@
-import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
+import postcss from "rollup-plugin-postcss";
 
 export default [
   {
     input: "src/index.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
diff --git a/packages/components-react/rollup.config.mjs b/packages/components-react/rollup.config.mjs
index 0b8f0e66..1c2efb7a 100644
--- a/packages/components-react/rollup.config.mjs
+++ b/packages/components-react/rollup.config.mjs
@@ -5,8 +5,8 @@ import { readFileSync } from "fs";
 import filesize from "rollup-plugin-filesize";
 import nodeExternal from "rollup-plugin-node-externals";
 import nodePolyfills from "rollup-plugin-node-polyfills";
-import postcss from "rollup-plugin-postcss";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
 
 const packageJson = JSON.parse(readFileSync("./package.json", "utf8"));
@@ -23,22 +23,22 @@ export const outputGlobals = {
 
 export default [
   {
+    external: [/@babel\/runtime/, "react-dom", "react"],
     input: "src/index.ts",
     output: [
       {
         file: packageJson.main,
         format: "cjs",
-        sourcemap: true,
         globals: outputGlobals,
+        sourcemap: true,
       },
       {
         file: packageJson.module,
         format: "esm",
-        sourcemap: true,
         globals: outputGlobals,
+        sourcemap: true,
       },
     ],
-    external: [/@babel\/runtime/, "react-dom", "react"],
     plugins: [
       peerDepsExternal({ includeDependencies: true }),
       nodeExternal(),
@@ -53,12 +53,12 @@ export default [
       }),
       typescript({ includeDependencies: false }),
       babel({
-        presets: ["@babel/preset-react"],
         babelHelpers: "runtime",
         exclude: ["node_modules/**", "dist/**"],
         extensions: [".ts", ".tsx"],
         inputSourceMap: true,
         plugins: ["@babel/plugin-transform-runtime"],
+        presets: ["@babel/preset-react"],
       }),
       filesize(),
     ],
diff --git a/packages/components-react/src/Button.test.tsx b/packages/components-react/src/Button.test.tsx
index bf7a495c..ac9f9c9c 100644
--- a/packages/components-react/src/Button.test.tsx
+++ b/packages/components-react/src/Button.test.tsx
@@ -1,7 +1,7 @@
+import { describe, expect, it } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Button } from './Button';
-import { describe, expect, it } from '@jest/globals';
 import '@testing-library/jest-dom';
 
 describe('Button', () => {
diff --git a/packages/components-react/vite.config.ts b/packages/components-react/vite.config.ts
index e2482fe8..5c798003 100644
--- a/packages/components-react/vite.config.ts
+++ b/packages/components-react/vite.config.ts
@@ -6,9 +6,9 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     lib: {
+      name: 'Components React',
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'Components React',
       // the proper extensions will be added
       fileName: 'components-react',
     },
diff --git a/packages/mendix-css/rollup.config.mjs b/packages/mendix-css/rollup.config.mjs
index 99983cc5..ac6a1fff 100644
--- a/packages/mendix-css/rollup.config.mjs
+++ b/packages/mendix-css/rollup.config.mjs
@@ -1,36 +1,36 @@
-import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
+import postcss from "rollup-plugin-postcss";
 
 export default [
   {
     input: "src/mendix-nl-design-system-rotterdam-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
   {
     input: "src/mendix-nl-design-system-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
@@ -53,16 +53,16 @@ export default [
   {
     input: "src/mendix-default-theme.scss",
     output: {
+      compact: true,
       dir: "./dist",
-      sourcemap: false,
       format: "esm",
-      compact: true,
+      sourcemap: false,
     },
     plugins: [
       postcss({
         extensions: [".css", ".scss"],
-        plugins: [discardDuplicates()],
         extract: true,
+        plugins: [discardDuplicates()],
       }),
     ],
   },
diff --git a/packages/storybook/config/main.ts b/packages/storybook/config/main.ts
index 78e3ede0..2a8464c2 100644
--- a/packages/storybook/config/main.ts
+++ b/packages/storybook/config/main.ts
@@ -1,7 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-docs',
@@ -10,10 +9,6 @@ const config: StorybookConfig = {
     '@storybook/addon-designs',
     '@storybook/addon-themes',
   ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
   core: {
     disableTelemetry: true,
     disableWhatsNewNotifications: true,
@@ -22,7 +17,12 @@ const config: StorybookConfig = {
     autodocs: true,
   },
   features: {},
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
   staticDirs: ['../../../proprietary/assets/src'],
+  stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
 };
 
 export default config;
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
index ff5b8cea..feba208a 100644
--- a/packages/storybook/config/preview.tsx
+++ b/packages/storybook/config/preview.tsx
@@ -1,9 +1,9 @@
 import '@gemeente-rotterdam/design-tokens/dist/index.css';
 import '@gemeente-rotterdam/font/src/index.scss';
+import type { Preview } from '@storybook/react';
 import { defineCustomElements } from '@gemeente-rotterdam/web-components-stencil/loader/index.js';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Controls, Description, Primary, Stories } from '@storybook/blocks';
-import type { Preview } from '@storybook/react';
 import { ButtonGroup, Document } from '@utrecht/component-library-react/dist/css-module';
 import { FigmaBlock } from './FigmaBlock';
 import { GitHubBlock } from './GitHubBlock';
@@ -13,11 +13,11 @@ defineCustomElements();
 const preview: Preview = {
   decorators: [
     withThemeByClassName({
+      defaultTheme: 'Rotterdam',
       themes: {
         Rotterdam: 'rods-theme',
         'Rotterdam dark color scheme': 'rods-theme rods-theme--media-query-color-scheme-dark',
       },
-      defaultTheme: 'Rotterdam',
     }),
     (Story) => <Document>{Story()}</Document>,
   ],
diff --git a/packages/storybook/src/css-denhaag-action.stories.tsx b/packages/storybook/src/css-denhaag-action.stories.tsx
index 50af678c..223ea7f1 100644
--- a/packages/storybook/src/css-denhaag-action.stories.tsx
+++ b/packages/storybook/src/css-denhaag-action.stories.tsx
@@ -1,27 +1,25 @@
 /* @license CC0-1.0 */
 
-import { ActionSingle } from '@gemeente-denhaag/action';
 import type { Meta, StoryObj } from '@storybook/react';
+import { ActionSingle } from '@gemeente-denhaag/action';
 import readme from './action.md?raw';
 
 const meta = {
-  title: 'CSS Component/Action',
   id: 'css-denhaag-action',
-  component: ActionSingle,
+  args: {
+    defaultValue: '',
+  },
   argTypes: {
     defaultValue: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    defaultValue: '',
-  },
-  tags: ['autodocs'],
+  component: ActionSingle,
   parameters: {
     design: {
       type: 'figma',
@@ -33,6 +31,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Action',
 } satisfies Meta<typeof ActionSingle>;
 
 export default meta;
@@ -42,6 +42,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   name: 'Single action',
   args: {
+    children: <strong>Betaal uw parkeerbon van €68,90</strong>,
     dateTime: '2023-09-30T19:47:36.593Z',
     labels: {
       approachingDeadline: () => 'nog 2 dagen',
@@ -52,6 +53,5 @@ export const Default: Story = {
     link: '#',
     now: '2023-09-28T19:47:36.593Z',
     relativeDate: true,
-    children: <strong>Betaal uw parkeerbon van €68,90</strong>,
   },
 };
diff --git a/packages/storybook/src/css-denhaag-sidenav.stories.tsx b/packages/storybook/src/css-denhaag-sidenav.stories.tsx
index 024544fa..c9e790d5 100644
--- a/packages/storybook/src/css-denhaag-sidenav.stories.tsx
+++ b/packages/storybook/src/css-denhaag-sidenav.stories.tsx
@@ -1,5 +1,6 @@
 /* @license CC0-1.0 */
 
+import type { Meta, StoryObj } from '@storybook/react';
 import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav';
 import {
   RodsIconBox,
@@ -11,28 +12,25 @@ import {
   RodsIconSummary,
   RodsIconUser,
 } from '@gemeente-rotterdam/web-components-react';
-import type { Meta, StoryObj } from '@storybook/react';
 import { BadgeCounter } from '@utrecht/component-library-react/dist/css-module';
 import readme from './sidenav.md?raw';
 
 const meta = {
-  title: 'CSS Component/Side navigation',
   id: 'css-denhaag-sidenav',
-  component: Sidenav,
+  args: {
+    defaultValue: '',
+  },
   argTypes: {
     defaultValue: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    defaultValue: '',
-  },
-  tags: ['autodocs'],
+  component: Sidenav,
   parameters: {
     design: {
       type: 'figma',
@@ -44,6 +42,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Side navigation',
 } satisfies Meta<typeof Sidenav>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-alert.stories.tsx b/packages/storybook/src/css-utrecht-alert.stories.tsx
index 9cb9ea64..bc62c11c 100644
--- a/packages/storybook/src/css-utrecht-alert.stories.tsx
+++ b/packages/storybook/src/css-utrecht-alert.stories.tsx
@@ -1,33 +1,31 @@
 /* @license CC0-1.0 */
 
+import type { Meta, StoryObj } from '@storybook/react';
 import {
   RodsIconBadgeAlert,
   RodsIconBadgeAlertSolid,
   RodsIconBadgeCheck,
   RodsIconBadgeInfo,
 } from '@gemeente-rotterdam/web-components-react';
-import type { Meta, StoryObj } from '@storybook/react';
 import { Alert, Paragraph } from '@utrecht/component-library-react/dist/css-module';
 import readme from './alert.md?raw';
 
 const meta = {
-  title: 'CSS Component/Alert',
   id: 'css-utrecht-alert',
-  component: Alert,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Alert,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Falert',
     design: {
@@ -40,6 +38,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Alert',
 } satisfies Meta<typeof Alert>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-badge-list.stories.tsx b/packages/storybook/src/css-utrecht-badge-list.stories.tsx
index 54f25d4a..ecf5686b 100644
--- a/packages/storybook/src/css-utrecht-badge-list.stories.tsx
+++ b/packages/storybook/src/css-utrecht-badge-list.stories.tsx
@@ -5,23 +5,21 @@ import { BadgeList, DataBadge, Link } from '@utrecht/component-library-react/dis
 import readme from './badge-list.md?raw';
 
 const meta = {
-  title: 'CSS Component/Badge list',
   id: 'css-utrecht-badge-list',
-  component: BadgeList,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: BadgeList,
   parameters: {
     docs: {
       description: {
@@ -29,6 +27,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Badge list',
 } satisfies Meta<typeof BadgeList>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-breadcrumb-nav.stories.tsx b/packages/storybook/src/css-utrecht-breadcrumb-nav.stories.tsx
index 852c9bb1..ed49262e 100644
--- a/packages/storybook/src/css-utrecht-breadcrumb-nav.stories.tsx
+++ b/packages/storybook/src/css-utrecht-breadcrumb-nav.stories.tsx
@@ -1,7 +1,7 @@
 /* @license CC0-1.0 */
 
-import { RodsIconChevronRight } from '@gemeente-rotterdam/web-components-react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { RodsIconChevronRight } from '@gemeente-rotterdam/web-components-react';
 import {
   BreadcrumbNav,
   BreadcrumbNavLink,
@@ -10,23 +10,21 @@ import {
 import readme from './breadcrumb-nav.md?raw';
 
 const meta = {
-  title: 'CSS Component/Breadcrumb navigation',
   id: 'css-utrecht-breadcrumb-nav',
-  component: BreadcrumbNav,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: BreadcrumbNav,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbreadcrumb-nav',
     design: {
@@ -39,6 +37,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Breadcrumb navigation',
 } satisfies Meta<typeof BreadcrumbNav>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-button-group.stories.tsx b/packages/storybook/src/css-utrecht-button-group.stories.tsx
index 14346d74..c84c4210 100644
--- a/packages/storybook/src/css-utrecht-button-group.stories.tsx
+++ b/packages/storybook/src/css-utrecht-button-group.stories.tsx
@@ -5,23 +5,21 @@ import { Button, ButtonGroup, LinkButton } from '@utrecht/component-library-reac
 import readme from './button-group.md?raw';
 
 const meta = {
-  title: 'CSS Component/Button group',
   id: 'css-utrecht-button-group',
-  component: ButtonGroup,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: ButtonGroup,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbutton-group',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Button group',
 } satisfies Meta<typeof ButtonGroup>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-button.stories.tsx b/packages/storybook/src/css-utrecht-button.stories.tsx
index 4884eda6..b6df65b0 100644
--- a/packages/storybook/src/css-utrecht-button.stories.tsx
+++ b/packages/storybook/src/css-utrecht-button.stories.tsx
@@ -5,24 +5,22 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import readme from './button.md?raw';
 
 const meta = {
-  title: 'CSS Component/Button',
   id: 'css-utrecht-button',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fbutton',
     design: {
@@ -35,6 +33,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Button',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-counter-badge.stories.tsx b/packages/storybook/src/css-utrecht-counter-badge.stories.tsx
index c0f9ed8e..8b1e5706 100644
--- a/packages/storybook/src/css-utrecht-counter-badge.stories.tsx
+++ b/packages/storybook/src/css-utrecht-counter-badge.stories.tsx
@@ -5,30 +5,31 @@ import { BadgeCounter } from '@utrecht/component-library-react/dist/css-module';
 import readme from './counter-badge.md?raw';
 
 const meta = {
-  title: 'CSS Component/Counter badge',
   id: 'css-utrecht-badge-counter',
-  component: BadgeCounter,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
     className: {
       name: 'Appearance',
       control: {
-        type: 'select',
         labels: {
-          'Light blue': 'utrecht-badge-counter--rods-light-yellow',
           Blue: 'utrecht-badge-counter--rods-blue',
           'Dark blue': 'utrecht-badge-counter--rods-dark-blue',
+          'Dark yellow': 'utrecht-badge-counter--rods-dark-yellow',
           'Green blue': 'utrecht-badge-counter--rods-green-blue',
+          'Light blue': 'utrecht-badge-counter--rods-light-yellow',
           Red: 'utrecht-badge-counter--rods-red',
-          'Dark yellow': 'utrecht-badge-counter--rods-dark-yellow',
         },
+        type: 'select',
       },
       options: [
         'utrecht-badge-counter--rods-light-yellow',
@@ -40,10 +41,7 @@ const meta = {
       ],
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: BadgeCounter,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fcounter-badge',
     design: {
@@ -56,6 +54,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Counter badge',
 } satisfies Meta<typeof BadgeCounter>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-data-badge.stories.tsx b/packages/storybook/src/css-utrecht-data-badge.stories.tsx
index bfd2dd9b..e429f62d 100644
--- a/packages/storybook/src/css-utrecht-data-badge.stories.tsx
+++ b/packages/storybook/src/css-utrecht-data-badge.stories.tsx
@@ -5,24 +5,22 @@ import { DataBadge, Link } from '@utrecht/component-library-react/dist/css-modul
 import readme from './data-badge.md?raw';
 
 const meta = {
-  title: 'CSS Component/Data badge',
   id: 'css-utrecht-data-badge',
-  component: DataBadge,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Data badge text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: DataBadge,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fdata-badge',
     design: {
@@ -35,6 +33,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Data badge',
 } satisfies Meta<typeof DataBadge>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-form-label.stories.tsx b/packages/storybook/src/css-utrecht-form-label.stories.tsx
index fabc0058..371f0db3 100644
--- a/packages/storybook/src/css-utrecht-form-label.stories.tsx
+++ b/packages/storybook/src/css-utrecht-form-label.stories.tsx
@@ -5,23 +5,21 @@ import { FormLabel } from '@utrecht/component-library-react/dist/css-module';
 import readme from './form-label.md?raw';
 
 const meta = {
-  title: 'CSS Component/Form label',
   id: 'css-utrecht-form-label',
-  component: FormLabel,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: FormLabel,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fform-label',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Form label',
 } satisfies Meta<typeof FormLabel>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-heading.stories.tsx b/packages/storybook/src/css-utrecht-heading.stories.tsx
index 24fae0df..3dc36406 100644
--- a/packages/storybook/src/css-utrecht-heading.stories.tsx
+++ b/packages/storybook/src/css-utrecht-heading.stories.tsx
@@ -5,23 +5,21 @@ import { Heading } from '@utrecht/component-library-react/dist/css-module';
 import readme from './heading.md?raw';
 
 const meta = {
-  title: 'CSS Component/Heading',
   id: 'css-utrecht-heading',
-  component: Heading,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Heading,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fheading',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Heading',
 } satisfies Meta<typeof Heading>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-link-list.stories.tsx b/packages/storybook/src/css-utrecht-link-list.stories.tsx
index 148b4767..0f3d518a 100644
--- a/packages/storybook/src/css-utrecht-link-list.stories.tsx
+++ b/packages/storybook/src/css-utrecht-link-list.stories.tsx
@@ -1,28 +1,26 @@
 /* @license CC0-1.0 */
 
-import { RodsIconArrowRight } from '@gemeente-rotterdam/web-components-react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { RodsIconArrowRight } from '@gemeente-rotterdam/web-components-react';
 import { LinkList } from '@utrecht/component-library-react/dist/css-module';
 import readme from './link-list.md?raw';
 
 const meta = {
-  title: 'CSS Component/Link list',
   id: 'css-utrecht-link-list',
-  component: LinkList,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: LinkList,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Flink-list',
     docs: {
@@ -31,6 +29,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Link list',
 } satisfies Meta<typeof LinkList>;
 
 export default meta;
@@ -43,10 +43,10 @@ export const Default: Story = {
     icon: () => <RodsIconArrowRight />,
     links: [
       {
-        href: '#',
         children: 'Direct regelen',
+        href: '#',
       },
-      { href: '#', children: 'Meer informatie op Rotterdam.nl' },
+      { children: 'Meer informatie op Rotterdam.nl', href: '#' },
     ],
   },
 };
diff --git a/packages/storybook/src/css-utrecht-link.stories.tsx b/packages/storybook/src/css-utrecht-link.stories.tsx
index 09fc5d2d..e9387e49 100644
--- a/packages/storybook/src/css-utrecht-link.stories.tsx
+++ b/packages/storybook/src/css-utrecht-link.stories.tsx
@@ -5,23 +5,21 @@ import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-modul
 import readme from './link.md?raw';
 
 const meta = {
-  title: 'CSS Component/Link',
   id: 'css-utrecht-link',
-  component: Link,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Link,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Flink',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Link',
 } satisfies Meta<typeof Link>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-nav-bar.stories.tsx b/packages/storybook/src/css-utrecht-nav-bar.stories.tsx
index c6968bac..1a2f6e9a 100644
--- a/packages/storybook/src/css-utrecht-nav-bar.stories.tsx
+++ b/packages/storybook/src/css-utrecht-nav-bar.stories.tsx
@@ -5,23 +5,21 @@ import { NavBar, NavList, NavListLink } from '@utrecht/component-library-react/d
 import readme from './badge-list.md?raw';
 
 const meta = {
-  title: 'CSS Component/Nav bar',
   id: 'css-utrecht-nav-bar',
-  component: NavBar,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: NavBar,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fnav-bar',
     docs: {
@@ -30,6 +28,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Nav bar',
 } satisfies Meta<typeof NavBar>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-ordered-list.stories.tsx b/packages/storybook/src/css-utrecht-ordered-list.stories.tsx
index 599cdaa7..fffe1a06 100644
--- a/packages/storybook/src/css-utrecht-ordered-list.stories.tsx
+++ b/packages/storybook/src/css-utrecht-ordered-list.stories.tsx
@@ -5,23 +5,21 @@ import { OrderedList, OrderedListItem } from '@utrecht/component-library-react/d
 import readme from './ordered-list.md?raw';
 
 const meta = {
-  title: 'CSS Component/Ordered list',
   id: 'css-utrecht-ordered-list',
-  component: OrderedList,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: OrderedList,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fordered-list',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Ordered list',
 } satisfies Meta<typeof OrderedList>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-paragraph.stories.tsx b/packages/storybook/src/css-utrecht-paragraph.stories.tsx
index 34a6205d..f5d7e4ab 100644
--- a/packages/storybook/src/css-utrecht-paragraph.stories.tsx
+++ b/packages/storybook/src/css-utrecht-paragraph.stories.tsx
@@ -5,23 +5,21 @@ import { Paragraph } from '@utrecht/component-library-react/dist/css-module';
 import readme from './paragraph.md?raw';
 
 const meta = {
-  title: 'CSS Component/Paragraph',
   id: 'css-utrecht-paragraph',
-  component: Paragraph,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Paragraph,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fparagraph',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Paragraph',
 } satisfies Meta<typeof Paragraph>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-status-badge.stories.tsx b/packages/storybook/src/css-utrecht-status-badge.stories.tsx
index fdda894a..7b63cdb5 100644
--- a/packages/storybook/src/css-utrecht-status-badge.stories.tsx
+++ b/packages/storybook/src/css-utrecht-status-badge.stories.tsx
@@ -5,30 +5,32 @@ import { StatusBadge } from '@utrecht/component-library-react/dist/css-module';
 import readme from './status-badge.md?raw';
 
 const meta = {
-  title: 'CSS Component/Status badge',
   id: 'css-utrecht-status-badge',
-  component: StatusBadge,
+  args: {
+    children: '',
+    status: 'fixme',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
     className: {
       name: 'Appearance',
       control: {
-        type: 'select',
         labels: {
-          'Light blue': 'utrecht-status-badge--rods-light-yellow',
           Blue: 'utrecht-status-badge--rods-blue',
           'Dark blue': 'utrecht-status-badge--rods-dark-blue',
+          'Dark yellow': 'utrecht-status-badge--rods-dark-yellow',
           'Green blue': 'utrecht-status-badge--rods-green-blue',
+          'Light blue': 'utrecht-status-badge--rods-light-yellow',
           Red: 'utrecht-status-badge--rods-red',
-          'Dark yellow': 'utrecht-status-badge--rods-dark-yellow',
         },
+        type: 'select',
       },
       options: [
         'utrecht-status-badge--rods-light-yellow',
@@ -40,11 +42,7 @@ const meta = {
       ],
     },
   },
-  args: {
-    children: '',
-    status: 'fixme',
-  },
-  tags: ['autodocs'],
+  component: StatusBadge,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Fstatus-badge',
     design: {
@@ -57,6 +55,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Status badge',
 } satisfies Meta<typeof StatusBadge>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-table.stories.tsx b/packages/storybook/src/css-utrecht-table.stories.tsx
index 82f77893..7a4fc04b 100644
--- a/packages/storybook/src/css-utrecht-table.stories.tsx
+++ b/packages/storybook/src/css-utrecht-table.stories.tsx
@@ -1,7 +1,7 @@
 /* @license CC0-1.0 */
 
-import { RodsIconEdit } from '@gemeente-rotterdam/web-components-react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { RodsIconEdit } from '@gemeente-rotterdam/web-components-react';
 import {
   ButtonLink,
   IBANData,
@@ -20,12 +20,10 @@ import readme from './table.md?raw';
 import '@gemeente-rotterdam/components-css/table/index.scss';
 
 const meta = {
-  title: 'CSS Component/Table',
   id: 'css-table',
-  component: Table,
-  argTypes: {},
   args: {},
-  tags: ['autodocs'],
+  argTypes: {},
+  component: Table,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Ftable',
     design: {
@@ -38,6 +36,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Table',
 } satisfies Meta<typeof Table>;
 
 export default meta;
@@ -93,7 +93,6 @@ export const Default: Story = {
 
 export const Hover: Story = {
   args: {
-    className: 'utrecht-table--row-hover',
     children: (
       <>
         <TableHeader>
@@ -130,6 +129,7 @@ export const Hover: Story = {
         </TableFooter>
       </>
     ),
+    className: 'utrecht-table--row-hover',
   },
   parameters: {
     design: {
@@ -140,8 +140,8 @@ export const Hover: Story = {
 };
 
 export const EditLink: Story = {
+  name: 'Rows with edit link',
   args: {
-    className: 'utrecht-table--row-hover',
     children: (
       <>
         <TableCaption>Lopende automatische incasso’s</TableCaption>,
@@ -198,8 +198,8 @@ export const EditLink: Story = {
         </TableBody>
       </>
     ),
+    className: 'utrecht-table--row-hover',
   },
-  name: 'Rows with edit link',
   parameters: {
     design: {
       type: 'figma',
@@ -209,6 +209,7 @@ export const EditLink: Story = {
 };
 
 export const Badges: Story = {
+  name: 'Rows with badges',
   args: {
     children: (
       <>
@@ -271,7 +272,6 @@ export const Badges: Story = {
       </>
     ),
   },
-  name: 'Rows with badges',
   parameters: {
     design: {
       type: 'figma',
diff --git a/packages/storybook/src/css-utrecht-textarea.stories.tsx b/packages/storybook/src/css-utrecht-textarea.stories.tsx
index d6b94bb7..5af2b71c 100644
--- a/packages/storybook/src/css-utrecht-textarea.stories.tsx
+++ b/packages/storybook/src/css-utrecht-textarea.stories.tsx
@@ -5,23 +5,21 @@ import { Textarea } from '@utrecht/component-library-react/dist/css-module';
 import readme from './textarea.md?raw';
 
 const meta = {
-  title: 'CSS Component/Textarea',
   id: 'css-utrecht-textarea',
-  component: Textarea,
+  args: {
+    defaultValue: '',
+  },
   argTypes: {
     defaultValue: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    defaultValue: '',
-  },
-  tags: ['autodocs'],
+  component: Textarea,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Ftextarea',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Textarea',
 } satisfies Meta<typeof Textarea>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-textbox.stories.tsx b/packages/storybook/src/css-utrecht-textbox.stories.tsx
index c2c9aca5..e202c603 100644
--- a/packages/storybook/src/css-utrecht-textbox.stories.tsx
+++ b/packages/storybook/src/css-utrecht-textbox.stories.tsx
@@ -5,23 +5,21 @@ import { Textbox } from '@utrecht/component-library-react/dist/css-module';
 import readme from './textbox.md?raw';
 
 const meta = {
-  title: 'CSS Component/Textbox',
   id: 'css-utrecht-textbox',
-  component: Textbox,
+  args: {
+    defaultValue: '',
+  },
   argTypes: {
     defaultValue: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    defaultValue: '',
-  },
-  tags: ['autodocs'],
+  component: Textbox,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Ftextbox',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Textbox',
 } satisfies Meta<typeof Textbox>;
 
 export default meta;
diff --git a/packages/storybook/src/css-utrecht-unordered-list.stories.tsx b/packages/storybook/src/css-utrecht-unordered-list.stories.tsx
index 29b51f0d..bc13f8e6 100644
--- a/packages/storybook/src/css-utrecht-unordered-list.stories.tsx
+++ b/packages/storybook/src/css-utrecht-unordered-list.stories.tsx
@@ -5,23 +5,21 @@ import { UnorderedList, UnorderedListItem } from '@utrecht/component-library-rea
 import readme from './unordered-list.md?raw';
 
 const meta = {
-  title: 'CSS Component/Unordered list',
   id: 'css-utrecht-unordered-list',
-  component: UnorderedList,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: UnorderedList,
   parameters: {
     bugs: 'https://github.com/nl-design-system/rotterdam/labels/component%2Funordered-list',
     design: {
@@ -34,6 +32,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'CSS Component/Unordered list',
 } satisfies Meta<typeof UnorderedList>;
 
 export default meta;
diff --git a/packages/storybook/src/icon/CustomIconGallery.tsx b/packages/storybook/src/icon/CustomIconGallery.tsx
index 689a1e84..5f8b7eec 100644
--- a/packages/storybook/src/icon/CustomIconGallery.tsx
+++ b/packages/storybook/src/icon/CustomIconGallery.tsx
@@ -1,12 +1,11 @@
 import { PropsWithChildren } from 'react';
-
 import './CustomIconGallery.css';
 
 export const CustomIconGallery = ({ children }: PropsWithChildren) => (
   <div className="utrecht-custom-icon-gallery">{children}</div>
 );
 
-export const CustomIconGalleryItem = ({ children, name }: PropsWithChildren<{ name?: string }>) => (
+export const CustomIconGalleryItem = ({ name, children }: PropsWithChildren<{ name?: string }>) => (
   <div className="utrecht-custom-icon-gallery-item">
     {children && <div className="utrecht-custom-icon-gallery-item__icon">{children}</div>}
     {name && <div className="utrecht-custom-icon-gallery-item__name">{name}</div>}
diff --git a/packages/storybook/src/mendix-badge.stories.tsx b/packages/storybook/src/mendix-badge.stories.tsx
index dc2a8073..dfcba5aa 100644
--- a/packages/storybook/src/mendix-badge.stories.tsx
+++ b/packages/storybook/src/mendix-badge.stories.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Badge',
   id: 'mendix-badge',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Badge',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx b/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
index 04f54c28..4106e113 100644
--- a/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
+++ b/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Breadcrumbs',
   id: 'mendix-breadcrumb-nav',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Breadcrumbs',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-button.stories.tsx b/packages/storybook/src/mendix-button.stories.tsx
index 3d1ecaa0..f2925abe 100644
--- a/packages/storybook/src/mendix-button.stories.tsx
+++ b/packages/storybook/src/mendix-button.stories.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Button',
   id: 'mendix-button',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Button',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx b/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
index 4592132d..9578c56c 100644
--- a/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
+++ b/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Form field radio group',
   id: 'mendix-form-field-radio-group',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Form field radio group',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-form-field-textarea.stories.tsx b/packages/storybook/src/mendix-form-field-textarea.stories.tsx
index 67582c02..0e0054f0 100644
--- a/packages/storybook/src/mendix-form-field-textarea.stories.tsx
+++ b/packages/storybook/src/mendix-form-field-textarea.stories.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Form field textarea',
   id: 'mendix-form-field-textarea',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Form field textarea',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-text-input.stories.tsx b/packages/storybook/src/mendix-text-input.stories.tsx
index 4004db3c..83c08c4e 100644
--- a/packages/storybook/src/mendix-text-input.stories.tsx
+++ b/packages/storybook/src/mendix-text-input.stories.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Form field text input',
   id: 'mendix-form-fieldtext-input',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Form field text input',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/mendix-text.stories.tsx b/packages/storybook/src/mendix-text.stories.tsx
index aaf68dce..27a90dae 100644
--- a/packages/storybook/src/mendix-text.stories.tsx
+++ b/packages/storybook/src/mendix-text.stories.tsx
@@ -5,25 +5,25 @@ import { Button } from '@utrecht/component-library-react/dist/css-module';
 import '@gemeente-rotterdam/mendix-css/dist/mendix-nl-design-system-rotterdam-theme.css';
 
 const meta = {
-  title: 'Mendix Component/Text',
   id: 'mendix-text',
-  component: Button,
+  args: {
+    children: '',
+  },
   argTypes: {
     children: {
       name: 'Content',
+      defaultValue: '',
       description: 'Button text',
       type: {
         name: 'string',
         required: true,
       },
-      defaultValue: '',
     },
   },
-  args: {
-    children: '',
-  },
-  tags: ['autodocs'],
+  component: Button,
   parameters: {},
+  tags: ['autodocs'],
+  title: 'Mendix Component/Text',
 } satisfies Meta<typeof Button>;
 
 export default meta;
diff --git a/packages/storybook/src/template/page-mijn-loket.stories.tsx b/packages/storybook/src/template/page-mijn-loket.stories.tsx
index 6a589b89..57d04644 100644
--- a/packages/storybook/src/template/page-mijn-loket.stories.tsx
+++ b/packages/storybook/src/template/page-mijn-loket.stories.tsx
@@ -44,8 +44,8 @@ import {
 } from '@utrecht/component-library-react/dist/css-module';
 
 const meta = {
-  title: 'Template/Mijn Loket',
   id: 'template-mijn-loket',
+  decorators: [(Story) => <div style={{ minInlineSize: '1280px' }}>{Story()}</div>],
   parameters: {
     design: {
       type: 'figma',
@@ -53,7 +53,7 @@ const meta = {
     },
     layout: 'fullscreen',
   },
-  decorators: [(Story) => <div style={{ minInlineSize: '1280px' }}>{Story()}</div>],
+  title: 'Template/Mijn Loket',
 } satisfies Meta;
 
 export default meta;
@@ -252,8 +252,8 @@ export const Default: Story = {
                 <LinkList
                   icon={() => <RodsIconArrowRight />}
                   links={[
-                    { href: '#', children: 'Direct regelen' },
-                    { href: '#', children: 'Meer informatie op Rotterdam.nl' },
+                    { children: 'Direct regelen', href: '#' },
+                    { children: 'Meer informatie op Rotterdam.nl', href: '#' },
                   ]}
                 />
               </div>
@@ -265,8 +265,8 @@ export const Default: Story = {
                 <LinkList
                   icon={() => <RodsIconArrowRight />}
                   links={[
-                    { href: '#', children: 'Direct regelen' },
-                    { href: '#', children: 'Meer informatie op Rotterdam.nl' },
+                    { children: 'Direct regelen', href: '#' },
+                    { children: 'Meer informatie op Rotterdam.nl', href: '#' },
                   ]}
                 />
               </div>
@@ -278,8 +278,8 @@ export const Default: Story = {
                 <LinkList
                   icon={() => <RodsIconArrowRight />}
                   links={[
-                    { href: '#', children: 'Direct regelen' },
-                    { href: '#', children: 'Meer informatie op Rotterdam.nl' },
+                    { children: 'Direct regelen', href: '#' },
+                    { children: 'Meer informatie op Rotterdam.nl', href: '#' },
                   ]}
                 />
               </div>
@@ -291,8 +291,8 @@ export const Default: Story = {
                 <LinkList
                   icon={() => <RodsIconArrowRight />}
                   links={[
-                    { href: '#', children: 'Direct regelen' },
-                    { href: '#', children: 'Meer informatie op Rotterdam.nl' },
+                    { children: 'Direct regelen', href: '#' },
+                    { children: 'Meer informatie op Rotterdam.nl', href: '#' },
                   ]}
                 />
               </div>
diff --git a/packages/storybook/src/web-component-rods-logo-image.stories.tsx b/packages/storybook/src/web-component-rods-logo-image.stories.tsx
index f2503222..94e1f36b 100644
--- a/packages/storybook/src/web-component-rods-logo-image.stories.tsx
+++ b/packages/storybook/src/web-component-rods-logo-image.stories.tsx
@@ -1,12 +1,12 @@
 /* @license CC0-1.0 */
 
+import type { Meta, StoryObj } from '@storybook/react';
 import {
   RodsLogoImage,
   RodsLogoImageAvatar,
   RodsLogoImageMark,
   RodsLogoImageSquare,
 } from '@gemeente-rotterdam/web-components-react';
-import type { Meta, StoryObj } from '@storybook/react';
 import logoImageAvatarDocs from './_logo-image-avatar.md?raw';
 import logoImageBaseDocs from './_logo-image-base.md?raw';
 import logoImageMarkDocs from './_logo-image-mark.md?raw';
@@ -14,12 +14,10 @@ import logoImageSquareDocs from './_logo-image-square.md?raw';
 import readme from './logo-image.md?raw';
 
 const meta = {
-  title: 'Web Component/Logo image',
   id: 'web-component-rods-logo-image',
-  component: RodsLogoImage,
-  argTypes: {},
   args: {},
-  tags: ['autodocs'],
+  argTypes: {},
+  component: RodsLogoImage,
   parameters: {
     docs: {
       description: {
@@ -27,6 +25,8 @@ const meta = {
       },
     },
   },
+  tags: ['autodocs'],
+  title: 'Web Component/Logo image',
 } satisfies Meta<typeof RodsLogoImage>;
 
 export default meta;
diff --git a/packages/web-components-stencil/src/button/stencil.tsx b/packages/web-components-stencil/src/button/stencil.tsx
index 4d534264..c3bda8ad 100644
--- a/packages/web-components-stencil/src/button/stencil.tsx
+++ b/packages/web-components-stencil/src/button/stencil.tsx
@@ -7,9 +7,9 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'example-button',
-  styleUrl: 'index.scss',
   shadow: true,
+  styleUrl: 'index.scss',
+  tag: 'example-button',
 })
 export class Button {
   render() {
diff --git a/packages/web-components-stencil/src/logo-image-avatar.tsx b/packages/web-components-stencil/src/logo-image-avatar.tsx
index 7bc758f2..63141bde 100644
--- a/packages/web-components-stencil/src/logo-image-avatar.tsx
+++ b/packages/web-components-stencil/src/logo-image-avatar.tsx
@@ -8,9 +8,9 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'rods-logo-image-avatar',
-  styleUrl: 'logo-image.scss',
   shadow: true,
+  styleUrl: 'logo-image.scss',
+  tag: 'rods-logo-image-avatar',
 })
 export class LogoImageAvatar {
   render() {
diff --git a/packages/web-components-stencil/src/logo-image-mark.tsx b/packages/web-components-stencil/src/logo-image-mark.tsx
index cee99a2d..aa32b6ec 100644
--- a/packages/web-components-stencil/src/logo-image-mark.tsx
+++ b/packages/web-components-stencil/src/logo-image-mark.tsx
@@ -8,9 +8,9 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'rods-logo-image-mark',
-  styleUrl: 'logo-image.scss',
   shadow: true,
+  styleUrl: 'logo-image.scss',
+  tag: 'rods-logo-image-mark',
 })
 export class LogoImageMark {
   render() {
diff --git a/packages/web-components-stencil/src/logo-image-square.tsx b/packages/web-components-stencil/src/logo-image-square.tsx
index 7ff0f101..fe5e74ed 100644
--- a/packages/web-components-stencil/src/logo-image-square.tsx
+++ b/packages/web-components-stencil/src/logo-image-square.tsx
@@ -8,9 +8,9 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'rods-logo-image-square',
-  styleUrl: 'logo-image.scss',
   shadow: true,
+  styleUrl: 'logo-image.scss',
+  tag: 'rods-logo-image-square',
 })
 export class LogoImageSquare {
   render() {
diff --git a/packages/web-components-stencil/src/logo-image.tsx b/packages/web-components-stencil/src/logo-image.tsx
index ef9f7fe3..206d7e1c 100644
--- a/packages/web-components-stencil/src/logo-image.tsx
+++ b/packages/web-components-stencil/src/logo-image.tsx
@@ -8,9 +8,9 @@
 import { Component, h } from '@stencil/core';
 
 @Component({
-  tag: 'rods-logo-image',
-  styleUrl: 'logo-image.scss',
   shadow: true,
+  styleUrl: 'logo-image.scss',
+  tag: 'rods-logo-image',
 })
 export class LogoImage {
   render() {
diff --git a/packages/web-components-stencil/stencil.config.ts b/packages/web-components-stencil/stencil.config.ts
index f77554e6..edf43e91 100644
--- a/packages/web-components-stencil/stencil.config.ts
+++ b/packages/web-components-stencil/stencil.config.ts
@@ -3,20 +3,20 @@ import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 
 export const config: Config = {
+  extras: { enableImportInjection: true },
   namespace: 'rods',
-  srcDir: './src/',
   outputTargets: [
     {
-      type: 'dist',
       esmLoaderPath: '../loader',
+      type: 'dist',
     },
     {
-      type: 'dist-custom-elements',
       customElementsExportBehavior: 'bundle',
+      type: 'dist-custom-elements',
     },
     {
-      type: 'www',
       serviceWorker: null, // disable service workers
+      type: 'www',
     },
     reactOutputTarget({
       componentCorePackage: '@gemeente-rotterdam/web-components-stencil',
@@ -24,5 +24,5 @@ export const config: Config = {
     }),
   ],
   plugins: [sass()],
-  extras: { enableImportInjection: true },
+  srcDir: './src/',
 };
diff --git a/proprietary/design-tokens/rollup.config.mjs b/proprietary/design-tokens/rollup.config.mjs
index 376b2d63..5b1af5ee 100644
--- a/proprietary/design-tokens/rollup.config.mjs
+++ b/proprietary/design-tokens/rollup.config.mjs
@@ -1,19 +1,19 @@
-import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
+import postcss from "rollup-plugin-postcss";
 
 export default {
   input: "src/index.scss",
   output: {
+    compact: true,
     dir: "./dist",
-    sourcemap: false,
     format: "esm",
-    compact: true,
+    sourcemap: false,
   },
   plugins: [
     postcss({
       extensions: [".css", ".scss"],
-      plugins: [discardDuplicates()],
       extract: true,
+      plugins: [discardDuplicates()],
     }),
   ],
 };