Added table stories

nl-design-system · May 15, 2024 · 70f163e · 70f163e
1 parent c4954c6
commit 70f163e
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 2 deletions.
diff --git 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 (
     <div className="tilburg-theme">
-      <Story />
+      <Document>
+        <Story />
+      </Document>
     </div>
   );
 };
diff --git a/packages/storybook/config/preview-head.html b/packages/storybook/config/preview-head.html
@@ -2,4 +2,4 @@
 <link rel="preconnect" href="https://fonts.bunny.net">
 
 <link href="https://cdn.fonts.net/kit/98d15e86-0ba4-4c49-97a9-a796340ef3f3/98d15e86-0ba4-4c49-97a9-a796340ef3f3.css" rel="stylesheet" />
-<link href="https://fonts.bunny.net/css?family=roboto:500,700" rel="stylesheet" />
+<link href="https://fonts.bunny.net/css?family=roboto:400,500,700" rel="stylesheet" />
diff --git a/packages/storybook/src/css-utrecht-table.stories.tsx 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<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell scope="col">Column A</TableHeaderCell>
+          <TableHeaderCell scope="col">Column B</TableHeaderCell>
+          <TableHeaderCell scope="col">Column C</TableHeaderCell>
+          <TableHeaderCell scope="col">Column d</TableHeaderCell>
+        </TableRow>
+      </TableHeader>,
+      <TableBody>
+        <TableRow>
+          <TableCell>Data</TableCell>
+          <TableCell>Data</TableCell>
+          <TableCell>Data</TableCell>
+          <TableCell>Data</TableCell>
+        </TableRow>
+      </TableBody>,
+      <TableFooter>
+        <TableRow>
+          <TableCell>Footer data</TableCell>
+          <TableCell>Footer data</TableCell>
+          <TableCell>Footer data</TableCell>
+          <TableCell>Footer data</TableCell>
+        </TableRow>
+      </TableFooter>,
+    ],
+  },
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
+        }
+      }
+    }
+  }
+}