Added ordered list to tokens (#31)

Co-authored-by: Joost Wiechers <[email protected]>
nl-design-system · May 30, 2024 · b973181 · b973181
1 parent 1d176c7
commit b973181
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 2 deletions.
diff --git a/packages/storybook/src/css-utrecht-ordered-list.stories.tsx b/packages/storybook/src/css-utrecht-ordered-list.stories.tsx
@@ -0,0 +1,51 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { OrderedList, OrderedListItem } from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/ordered-list.md?raw';
+
+const meta = {
+  title: 'CSS Component/Ordered list',
+  id: 'css-utrecht-ordered-list',
+  component: OrderedList,
+  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=823-571&m=dev',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof OrderedList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: 'Ordered list',
+  args: {
+    children: [
+      <OrderedListItem>Gemeente Tilburg rekenkamer</OrderedListItem>,
+      <OrderedListItem>Gemeente Tilburg college</OrderedListItem>,
+      <OrderedListItem>Gemeente Tilburg contact</OrderedListItem>,
+    ],
+  },
+};
diff --git a/packages/storybook/src/documentation/ordered-list.md b/packages/storybook/src/documentation/ordered-list.md
@@ -0,0 +1,3 @@
+# Ordered list
+
+An ordered list element to sum up a list of items in a specific order.
diff --git a/proprietary/design-tokens/src/components/utrecht/button.tokens.json b/proprietary/design-tokens/src/components/utrecht/button.tokens.json
@@ -174,7 +174,7 @@
           "type": "sizing",
           "value": "{tilburg.icon.functional.size}"
         },
-        "margin-inline": {
+        "gap": {
           "value": "{tilburg.space.text.beetle}",
           "type": "spacing"
         }

diff --git a/proprietary/design-tokens/src/components/utrecht/ordered-list.tokens.json b/proprietary/design-tokens/src/components/utrecht/ordered-list.tokens.json
@@ -0,0 +1,40 @@
+{
+  "utrecht": {
+    "ordered-list": {
+      "padding-inline-start": {
+        "value": "{tilburg.space.inline.rabbit}",
+        "type": "spacing"
+      },
+      "color": {
+        "type": "color",
+        "value": "{tilburg.document.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"
+      },
+      "line-height": {
+        "value": "{tilburg.document.line-height}",
+        "type": "lineHeights"
+      },
+      "item": {
+        "margin-block-end": {
+          "value": "{tilburg.space.block.ant}",
+          "type": "spacing"
+        },
+        "margin-block-start": {
+          "value": "{tilburg.space.block.ant}",
+          "type": "spacing"
+        }
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/components/utrecht/unordered-list.tokens.json b/proprietary/design-tokens/src/components/utrecht/unordered-list.tokens.json
@@ -12,7 +12,7 @@
         },
         "color": {
           "type": "color",
-          "value": "{tilburg.document.color}"
+          "value": "{tilburg.color.blue.300}"
         }
       },
       "font-family": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Ordered list

		An ordered list element to sum up a list of items in a specific order.