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" + } + } + } + } +}