From 4eda22d0da0da0efbed6f05a667590bb90482ab7 Mon Sep 17 00:00:00 2001
From: joostacato <97508866+joostacato@users.noreply.github.com>
Date: Tue, 14 May 2024 16:47:52 +0200
Subject: [PATCH] Feature/utrecht paragraph (#13)

Co-authored-by: Joost Wiechers <joostert@gmail.com>
---
 .../src/css-utrecht-paragraph.stories.tsx     | 63 +++++++++++++++++
 .../storybook/src/documentation/paragraph.md  |  3 +
 .../components/utrecht/paragraph.tokens.json  | 70 +++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 packages/storybook/src/css-utrecht-paragraph.stories.tsx
 create mode 100644 packages/storybook/src/documentation/paragraph.md
 create mode 100644 proprietary/design-tokens/src/components/utrecht/paragraph.tokens.json

diff --git a/packages/storybook/src/css-utrecht-paragraph.stories.tsx b/packages/storybook/src/css-utrecht-paragraph.stories.tsx
new file mode 100644
index 00000000..cec98342
--- /dev/null
+++ b/packages/storybook/src/css-utrecht-paragraph.stories.tsx
@@ -0,0 +1,63 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Paragraph } from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/paragraph.md?raw';
+
+const meta = {
+  title: 'CSS Component/Paragraph',
+  id: 'css-utrecht-paragraph',
+  component: Paragraph,
+  argTypes: {
+    children: {
+      name: 'Content',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: '',
+    },
+  },
+  args: {
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=150-734&t=nrvRAztL0ecku9kp-0',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Paragraph>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Paragraph',
+  args: {
+    children:
+      '"Tilburg, gelegen in het zuiden van Nederland, is een levendige stad met een rijke geschiedenis en een bruisende cultuur. Bekend om zijn textielindustrie in het verleden, heeft Tilburg zich ontwikkeld tot een moderne stad vol met kunst, muziek, en culinaire hoogstandjes. Wandel door de sfeervolle straten van de binnenstad en ontdek de vele boetiekjes, gezellige cafés en restaurants. Breng een bezoek aan de indrukwekkende musea, zoals het Textielmuseum of het De Pont Museum voor hedendaagse kunst, waar je kunt genieten van inspirerende tentoonstellingen. Verken het groene landschap rondom Tilburg, met prachtige parken en natuurgebieden zoals de Oude Warande en de Loonse en Drunense Duinen. Of geniet van een avondje uit in een van de vele theaters of concertzalen die de stad te bieden heeft. Met zijn diverse aanbod aan activiteiten en bezienswaardigheden is Tilburg een stad die voor ieder wat wils biedt',
+  },
+};
+export const LeadParagraph: Story = {
+  name: 'Lead paragraph',
+  args: {
+    ...Default.args,
+    lead: true,
+  },
+};
+
+export const SmallPrintParagraph: Story = {
+  name: 'Small print',
+  args: {
+    ...Default.args,
+    small: true,
+  },
+};
diff --git a/packages/storybook/src/documentation/paragraph.md b/packages/storybook/src/documentation/paragraph.md
new file mode 100644
index 00000000..6c84ee3e
--- /dev/null
+++ b/packages/storybook/src/documentation/paragraph.md
@@ -0,0 +1,3 @@
+# Paragraph
+
+This is a paragraph.
diff --git a/proprietary/design-tokens/src/components/utrecht/paragraph.tokens.json b/proprietary/design-tokens/src/components/utrecht/paragraph.tokens.json
new file mode 100644
index 00000000..ca1ddc57
--- /dev/null
+++ b/proprietary/design-tokens/src/components/utrecht/paragraph.tokens.json
@@ -0,0 +1,70 @@
+{
+  "utrecht": {
+    "paragraph": {
+      "color": {
+        "type": "color",
+        "value": "{tilburg.document.color}"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{tilburg.document.font-size}",
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.font-weight}",
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      }
+    },
+    "paragraph-lead": {
+      "color": {
+        "type": "color",
+        "value": "{tilburg.document.color}"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{tilburg.typography.font-size.lg}",
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.font-weight}",
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      }
+    },
+    "paragraph-small": {
+      "color": {
+        "type": "color",
+        "value": "{tilburg.document.color}"
+      },
+      "font-family": {
+        "value": "{tilburg.document.font-family}",
+        "type": "fontFamilies"
+      },
+      "font-size": {
+        "value": "{tilburg.typography.font-size.sm}",
+        "type": "fontSizes"
+      },
+      "font-weight": {
+        "value": "{tilburg.document.font-weight}",
+        "type": "fontWeights"
+      },
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      }
+    }
+  }
+}