diff --git a/packages/storybook/config/ParametersArgsDecorator.tsx b/packages/storybook/config/ParametersArgsDecorator.tsx
index 6b07f59e..28be9e7d 100644
--- a/packages/storybook/config/ParametersArgsDecorator.tsx
+++ b/packages/storybook/config/ParametersArgsDecorator.tsx
@@ -1,11 +1,14 @@
import type { Decorator } from '@storybook/react';
+import { Document } from '@utrecht/component-library-react';
export const ParametersArgsDecorator: Decorator = (Story, context) => {
context.parameters['args'] = context.args;
return (
-
+
+
+
);
};
diff --git a/packages/storybook/config/preview-head.html b/packages/storybook/config/preview-head.html
index 5bf433de..29cac84d 100644
--- a/packages/storybook/config/preview-head.html
+++ b/packages/storybook/config/preview-head.html
@@ -2,4 +2,4 @@
-
+
diff --git a/packages/storybook/src/css-utrecht-table.stories.tsx b/packages/storybook/src/css-utrecht-table.stories.tsx
new file mode 100644
index 00000000..3e676310
--- /dev/null
+++ b/packages/storybook/src/css-utrecht-table.stories.tsx
@@ -0,0 +1,74 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableFooter,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+} from '@utrecht/component-library-react';
+import readme from './documentation/table.md?raw';
+
+const meta = {
+ title: 'CSS Component/Table',
+ id: 'css-table',
+ component: Table,
+ argTypes: {},
+ args: {},
+ tags: ['autodocs'],
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1561-6448&t=31Z0WojGdXpyWRau-0',
+ },
+ docs: {
+ description: {
+ component: readme,
+ },
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: [
+
+
+ Column A
+ Column B
+ Column C
+ Column d
+
+ ,
+
+
+ Data
+ Data
+ Data
+ Data
+
+ ,
+
+
+ Footer data
+ Footer data
+ Footer data
+ Footer data
+
+ ,
+ ],
+ },
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1561-6448&t=31Z0WojGdXpyWRau-0',
+ },
+ },
+};
diff --git a/packages/storybook/src/documentation/table.md b/packages/storybook/src/documentation/table.md
new file mode 100644
index 00000000..53cc831f
--- /dev/null
+++ b/packages/storybook/src/documentation/table.md
@@ -0,0 +1,3 @@
+# Table
+
+The table component.
diff --git a/proprietary/design-tokens/src/common/tilburg/box-shadow.tokens.json b/proprietary/design-tokens/src/common/tilburg/box-shadow.tokens.json
new file mode 100644
index 00000000..05f5ff95
--- /dev/null
+++ b/proprietary/design-tokens/src/common/tilburg/box-shadow.tokens.json
@@ -0,0 +1,39 @@
+{
+ "tilburg": {
+ "box-shadow": {
+ "sm": {
+ "value": {
+ "x": "0",
+ "y": "2",
+ "blur": "6",
+ "spread": "0",
+ "color": "#0000000d",
+ "type": "dropShadow"
+ },
+ "type": "boxShadow"
+ },
+ "md": {
+ "value": {
+ "x": "0",
+ "y": "8",
+ "blur": "16",
+ "spread": "0",
+ "color": "#0000000d",
+ "type": "dropShadow"
+ },
+ "type": "boxShadow"
+ },
+ "lg": {
+ "value": {
+ "x": "0",
+ "y": "16",
+ "blur": "48",
+ "spread": "0",
+ "color": "#0000000d",
+ "type": "dropShadow"
+ },
+ "type": "boxShadow"
+ }
+ }
+ }
+}
diff --git a/proprietary/design-tokens/src/common/tilburg/feedback.tokens.json b/proprietary/design-tokens/src/common/tilburg/feedback.tokens.json
new file mode 100644
index 00000000..731472ff
--- /dev/null
+++ b/proprietary/design-tokens/src/common/tilburg/feedback.tokens.json
@@ -0,0 +1,62 @@
+{
+ "tilburg": {
+ "feedback": {
+ "informative": {
+ "background-color": {
+ "value": "{tilburg.color.blue.100}",
+ "type": "color"
+ },
+ "border-color": {
+ "value": "{tilburg.color.blue.400}",
+ "type": "color"
+ },
+ "color": {
+ "value": "{tilburg.color.blue.400}",
+ "type": "color"
+ }
+ },
+ "negative": {
+ "background-color": {
+ "value": "{tilburg.color.red.100}",
+ "type": "color"
+ },
+ "border-color": {
+ "value": "{tilburg.color.red.300}",
+ "type": "color"
+ },
+ "color": {
+ "value": "{tilburg.color.red.300}",
+ "type": "color"
+ }
+ },
+ "positive": {
+ "background-color": {
+ "value": "{tilburg.color.green.100}",
+ "type": "color"
+ },
+ "border-color": {
+ "value": "{tilburg.color.green.300}",
+ "type": "color"
+ },
+ "color": {
+ "value": "{tilburg.color.green.300}",
+ "type": "color"
+ }
+ },
+ "warning": {
+ "background-color": {
+ "value": "{tilburg.color.orange.100}",
+ "type": "color"
+ },
+ "border-color": {
+ "value": "{tilburg.color.orange.300}",
+ "type": "color"
+ },
+ "color": {
+ "value": "{tilburg.color.orange.300}",
+ "type": "color"
+ }
+ }
+ }
+ }
+}
diff --git a/proprietary/design-tokens/src/common/tilburg/line.tokens.json b/proprietary/design-tokens/src/common/tilburg/line.tokens.json
new file mode 100644
index 00000000..6667d3b4
--- /dev/null
+++ b/proprietary/design-tokens/src/common/tilburg/line.tokens.json
@@ -0,0 +1,14 @@
+{
+ "tilburg": {
+ "line": {
+ "border-color": {
+ "value": "{tilburg.color.gray.200}",
+ "type": "color"
+ },
+ "border-width": {
+ "value": "{tilburg.border-width.sm}",
+ "type": "borderWidth"
+ }
+ }
+ }
+}
diff --git a/proprietary/design-tokens/src/components/utrecht/table.tokens.json b/proprietary/design-tokens/src/components/utrecht/table.tokens.json
new file mode 100644
index 00000000..ee8539a4
--- /dev/null
+++ b/proprietary/design-tokens/src/components/utrecht/table.tokens.json
@@ -0,0 +1,148 @@
+{
+ "utrecht": {
+ "table": {
+ "header-cell": {
+ "color": {
+ "value": "{tilburg.document.color}",
+ "type": "color"
+ },
+ "font-family": {
+ "value": "{tilburg.document.font-family}",
+ "type": "fontFamilies"
+ },
+ "font-weight": {
+ "value": "{tilburg.document.strong.font-weight}",
+ "type": "fontWeights"
+ },
+ "font-size": {
+ "value": "{tilburg.document.font-size}",
+ "type": "fontSizes"
+ }
+ },
+ "caption": {
+ "margin-block-end": {
+ "value": "{tilburg.space.block.rabbit}",
+ "type": "spacing"
+ },
+ "color": {
+ "value": "{tilburg.heading.color}",
+ "type": "color"
+ },
+ "font-family": {
+ "value": "{tilburg.heading.font-family}",
+ "type": "fontFamilies"
+ },
+ "font-weight": {
+ "value": "{tilburg.heading.font-weight}",
+ "type": "fontWeights"
+ },
+ "font-size": {
+ "value": "{tilburg.typography.font-size.xl}",
+ "type": "fontSizes"
+ }
+ },
+ "cell": {
+ "padding-block-start": {
+ "value": "{tilburg.space.block.snail}",
+ "type": "spacing"
+ },
+ "padding-inline-end": {
+ "value": "{tilburg.space.block.snail}",
+ "type": "spacing"
+ },
+ "padding-inline-start": {
+ "value": "{tilburg.space.block.snail}",
+ "type": "spacing"
+ }
+ },
+ "data-cell": {
+ "color": {
+ "value": "{tilburg.document.color}",
+ "type": "color"
+ },
+ "font-family": {
+ "value": "{tilburg.document.font-family}",
+ "type": "fontFamilies"
+ },
+ "font-weight": {
+ "value": "{tilburg.document.font-weight}",
+ "type": "fontWeights"
+ },
+ "font-size": {
+ "value": "{tilburg.document.font-size}",
+ "type": "fontSizes"
+ }
+ },
+ "header": {
+ "border-block-end-width": {
+ "value": "{tilburg.border-width.md}",
+ "type": "borderWidth"
+ },
+ "border-block-end-color": {
+ "value": "{tilburg.line.border-color}",
+ "type": "color"
+ },
+ "background-color": {
+ "value": "transparent",
+ "type": "color"
+ }
+ },
+ "footer": {
+ "border-block-end-width": {
+ "value": "{tilburg.border-width.sm}",
+ "type": "borderWidth"
+ },
+ "border-block-end-color": {
+ "value": "{tilburg.line.border-color}",
+ "type": "color"
+ },
+ "background-color": {
+ "value": "transparent",
+ "type": "color"
+ }
+ },
+ "row": {
+ "border-block-end-width": {
+ "value": "{tilburg.border-width.sm}",
+ "type": "borderWidth"
+ },
+ "border-block-end-color": {
+ "value": "{tilburg.line.border-color}",
+ "type": "color"
+ },
+ "background-color": {
+ "value": "transparent",
+ "type": "color"
+ }
+ },
+ "footer-cell": {
+ "font-weight": {
+ "value": "{tilburg.document.strong.font-weight}",
+ "type": "fontWeights"
+ },
+ "font-size": {
+ "value": "{tilburg.document.font-size}",
+ "type": "fontSizes"
+ },
+ "color": {
+ "value": "{tilburg.document.color}",
+ "type": "color"
+ },
+ "font-family": {
+ "value": "{tilburg.document.font-family}",
+ "type": "fontFamilies"
+ }
+ },
+ "container": {
+ "box-inline-end-shadow": {
+ "value": "{tilburg.box-shadow.lg}",
+ "type": "boxShadow"
+ },
+ "box-inline-start-shadow": {
+ "value": "{tilburg.box-shadow.lg}",
+ "type": "boxShadow"
+ }
+ }
+ }
+ }
+}