feat: add react stories of imported utrecht components

packages/storybook/src/react-stories/heading1.stories.tsx

@@ -0,0 +1,41 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading1 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+
+const meta = {
+  title: 'React Component/Heading1',
+  id: 'react-heading1',
+  component: Heading1,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading1 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading1>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading1',
+};

packages/storybook/src/react-stories/heading2.stories.tsx

@@ -0,0 +1,43 @@
+/* @license CC0-1.0 */
+
+// import readme from '@frameless/components-css/heading1/README.md?raw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading2 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+// import '@frameless/components-css/heading1/index.scss';
+
+const meta = {
+  title: 'React Component/Heading2',
+  id: 'react-heading2',
+  component: Heading2,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading2 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading2>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading2',
+};

packages/storybook/src/react-stories/heading3.stories.tsx

@@ -0,0 +1,43 @@
+/* @license CC0-1.0 */
+
+// import readme from '@frameless/components-css/heading1/README.md?raw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading3 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+// import '@frameless/components-css/heading1/index.scss';
+
+const meta = {
+  title: 'React Component/Heading3',
+  id: 'react-heading3',
+  component: Heading3,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading3 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading3>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading3',
+};

packages/storybook/src/react-stories/heading4.stories.tsx

@@ -0,0 +1,43 @@
+/* @license CC0-1.0 */
+
+// import readme from '@frameless/components-css/heading1/README.md?raw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading4 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+// import '@frameless/components-css/heading1/index.scss';
+
+const meta = {
+  title: 'React Component/Heading4',
+  id: 'react-heading4',
+  component: Heading4,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading4 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading4>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading4',
+};

packages/storybook/src/react-stories/heading5.stories.tsx

@@ -0,0 +1,43 @@
+/* @license CC0-1.0 */
+
+// import readme from '@frameless/components-css/heading1/README.md?raw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading5 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+// import '@frameless/components-css/heading1/index.scss';
+
+const meta = {
+  title: 'React Component/Heading5',
+  id: 'react-heading5',
+  component: Heading5,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading5 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading5>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading5',
+};

packages/storybook/src/react-stories/heading6.stories.tsx

@@ -0,0 +1,43 @@
+/* @license CC0-1.0 */
+
+// import readme from '@frameless/components-css/heading1/README.md?raw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading6 } from '@utrecht/component-library-react/dist/css-module';
+// import { Heading1 } from '@frameless/components-react'; // TODO: use frameless package instead
+// import '@frameless/components-css/heading1/index.scss';
+
+const meta = {
+  title: 'React Component/Heading6',
+  id: 'react-heading6',
+  component: Heading6,
+  argTypes: {
+    children: {
+      name: 'Content',
+      description: 'Heading6 text',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: 'Opslaan en verder',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        // component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Heading6>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Frameless heading6',
+};

packages/storybook/src/react-stories/link.stories.tsx

@@ -0,0 +1,89 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+
+const meta = {
+  title: 'React Component/Link',
+  id: 'react-utrecht-link',
+  component: Link,
+  argTypes: {
+    children: {
+      name: 'Content',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {},
+    },
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Link',
+  args: {
+    children: 'Frameless',
+    href: '#',
+  },
+};
+
+export const LinkInParagraph: Story = {
+  name: 'Link in body text',
+  args: {
+    children: 'Op de website van Frameless',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph>
+        Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten
+        gewerkt. {Story()} kun je een aantal van deze projecten zien.
+      </Paragraph>
+    ),
+  ],
+};
+
+export const LinkInLeadParagraph: Story = {
+  name: 'Link in lead paragraph',
+  args: {
+    children: 'Op de website van Frameless',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph lead>
+        Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten
+        gewerkt. {Story()} kun je een aantal van deze projecten zien.
+      </Paragraph>
+    ),
+  ],
+};
+
+export const LinkInSmallPrint: Story = {
+  name: 'Link in small print',
+  args: {
+    children: 'Op de website van Frameless',
+    href: '#',
+  },
+  decorators: [
+    (Story) => (
+      <Paragraph small>
+        Afgelopen tijd hebben Robbert, Yolijn, Ali, Savi, Rowan, Tessa, Marwa, Angela en Bryan aan veel leuke projecten
+        gewerkt. {Story()} kun je een aantal van deze projecten zien.
+      </Paragraph>
+    ),
+  ],
+};