docs: packages en stories voor form field label beschikbaar (#1035)

Onderdeel van #989

---------

Co-authored-by: Charlotte Gieltjes <charlotte.gieltjes@rebels.io>

Author: eslook

.changeset/solid-taxes-see.md

@@ -0,0 +1,2 @@
+---
+---

packages/storybook-non-conforming/stories/form-field-label.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/react-vite';
+import componentMarkdown from '../../docs/form-field-label-docs/docs/component.md?raw';
+import '../../components-css/form-field-label-css/src/form-field-label.scss';
+import packageJSON from '../../components-react/form-field-label-react/package.json';
+import { FormFieldLabel } from '../../components-react/form-field-label-react/src/form-field-label';
+
+const meta = {
+  argTypes: {
+    // Vul aan door developer
+  },
+  component: FormFieldLabel,
+  parameters: {
+    docs: {
+      description: {
+        component: componentMarkdown,
+      },
+    },
+    externalLinks: [
+      {
+        name: 'Open op NL Design System',
+        url: 'https://nldesignsystem.nl/form-field-label',
+      },
+      {
+        name: 'Open op GitHub',
+        url: packageJSON.homepage,
+      },
+    ],
+  },
+  title: 'Componenten/Form Field Label',
+} satisfies Meta<typeof FormFieldLabel>;
+
+export default meta;

packages/storybook-test/stories/form-field-label.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta } from '@storybook/react-vite';
+import '../../components-css/form-field-label-css/src/form-field-label.scss';
+import packageJSON from '../../components-react/form-field-label-react/package.json';
+import { FormFieldLabel } from '../../components-react/form-field-label-react/src/form-field-label';
+import componentMarkdown from '../../docs/form-field-label-docs/docs/component.md?raw';
+import tokens from '../../tokens/form-field-label-tokens/tokens.json';
+// import { } from '../src/WcagTests'; // Vul aan door toegankelijkheidsexpert
+
+const meta = {
+  argTypes: {
+    // Vul aan door developer
+  },
+  component: FormFieldLabel,
+  parameters: {
+    docs: {
+      description: {
+        component: componentMarkdown,
+      },
+    },
+    externalLinks: [
+      {
+        name: 'Open op NL Design System',
+        url: 'https://nldesignsystem.nl/form-field-label',
+      },
+      {
+        name: 'Open op GitHub',
+        url: packageJSON.homepage,
+      },
+    ],
+    testResult: {
+      notApplicable: [
+        // Vul aan door toegankelijkheidsexpert
+      ],
+      notTested: [
+        // Vul aan door toegankelijkheidsexpert
+      ],
+      pass: [],
+    },
+    tokens,
+  },
+  title: 'Componenten/Form Field Label',
+} satisfies Meta<typeof FormFieldLabel>;
+
+export default meta;

packages/storybook/package.json

@@ -32,6 +32,8 @@
     "@nl-design-system-candidate/color-sample-react": "workspace:*",
     "@nl-design-system-candidate/data-badge-docs": "workspace:*",
     "@nl-design-system-candidate/data-badge-react": "workspace:*",
+    "@nl-design-system-candidate/form-field-label-docs": "workspace:*",
+    "@nl-design-system-candidate/form-field-label-react": "workspace:*",
     "@nl-design-system-candidate/heading-docs": "workspace:*",
     "@nl-design-system-candidate/heading-react": "workspace:*",
     "@nl-design-system-candidate/icon-docs": "workspace:*",

packages/storybook/stories/form-field-label.css.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/react-vite';
+import packageJSON from '../../components-css/form-field-label-css/package.json';
+import { FormFieldLabel as FormFieldLabelComponent } from '@nl-design-system-candidate/form-field-label-react';
+import formFieldLabelMeta from '@nl-design-system-candidate/form-field-label-docs/stories/form-field-label.css.meta';
+// import * as Stories from '@nl-design-system-candidate/form-field-label-docs/stories/form-field-label.stories';
+import { mergeCssMeta } from '../src/helpers/merge-css-meta.js';
+import { getExternalLinks } from '../src/helpers/external-links.js';
+
+const externalLinks = getExternalLinks('https://nldesignsystem.nl/form-field-label', packageJSON.homepage);
+
+const meta = {
+  ...mergeCssMeta(formFieldLabelMeta, externalLinks),
+  title: 'CSS Componenten/Form Field Label',
+  id: 'css-form-field-label',
+} satisfies Meta<typeof FormFieldLabelComponent>;
+
+export default meta;
+
+// export const SomeStory = Stories.SomeStory;

packages/storybook/stories/form-field-label.react.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/react-vite';
+import packageJSON from '../../components-react/form-field-label-react/package.json';
+import { FormFieldLabel as FormFieldLabelComponent } from '@nl-design-system-candidate/form-field-label-react';
+import formFieldLabelMeta from '@nl-design-system-candidate/form-field-label-docs/stories/form-field-label.react.meta';
+// import * as Stories from '@nl-design-system-candidate/form-field-label-docs/stories/form-field-label.stories';
+import { getExternalLinks } from '../src/helpers/external-links.js';
+
+const externalLinks = getExternalLinks('https://nldesignsystem.nl/form-field-label', packageJSON.homepage);
+
+const meta = {
+  ...formFieldLabelMeta,
+  ...externalLinks,
+  title: 'React Componenten/Form Field Label',
+  id: 'form-field-label',
+} satisfies Meta<typeof FormFieldLabelComponent>;
+
+export default meta;
+
+// export const SomeStory = Stories.SomeStory;