Status badge (#24)

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

Hide file tree

Showing 5 changed files with 422 additions and 0 deletions.
diff --git a/packages/storybook/src/css-utrecht-status-badge.stories.tsx b/packages/storybook/src/css-utrecht-status-badge.stories.tsx
@@ -0,0 +1,73 @@
+/* @license CC0-1.0 */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatusBadge } from '@utrecht/component-library-react/dist/css-module';
+import readme from './documentation/status-badge.md?raw';
+
+const meta = {
+  title: 'CSS Component/Status badge',
+  id: 'css-utrecht-status-badge',
+  component: StatusBadge,
+  argTypes: {
+    children: {
+      description: 'Text content',
+      control: 'text',
+    },
+    status: {
+      control: { type: 'select' },
+      description: 'Status',
+      options: ['danger', 'success', 'warning'],
+    },
+  },
+  args: {
+    status: 'neutral',
+    children: '',
+  },
+  tags: ['autodocs'],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ck81CE8SNzePi30jCEu7MK/NLDS---Gemeente-Tilburg---Bibliotheek?node-id=1354-6672&t=iKkbTeLsUISfA7KG-0',
+    },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    status: 'neutral',
+    children: 'normaal',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    status: 'success',
+    children: 'success',
+  },
+  name: 'Success',
+};
+
+export const Warning: Story = {
+  args: {
+    status: 'warning',
+    children: 'warning',
+  },
+  name: 'Warning',
+};
+
+export const Error: Story = {
+  args: {
+    status: 'error',
+    children: 'error',
+  },
+  name: 'Error',
+};
diff --git a/packages/storybook/src/documentation/status-badge.md b/packages/storybook/src/documentation/status-badge.md
@@ -0,0 +1,3 @@
+# Status badge
+
+The status badge component.
diff --git a/proprietary/design-tokens/src/common/utrecht/feedback.tokens.json b/proprietary/design-tokens/src/common/utrecht/feedback.tokens.json
@@ -0,0 +1,70 @@
+{
+  "utrecht": {
+    "feedback": {
+      "neutral": {
+        "fill": {
+          "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"
+          }
+        }
+      },
+      "danger": {
+        "fill": {
+          "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"
+          }
+        }
+      },
+      "success": {
+        "fill": {
+          "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": {
+        "fill": {
+          "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/components/utrecht/alert.tokens.json b/proprietary/design-tokens/src/components/utrecht/alert.tokens.json
@@ -0,0 +1,170 @@
+{
+  "utrecht": {
+    "alert": {
+      "heading": {
+        "font-family": {
+          "value": "{tilburg.heading.font-family}",
+          "type": "fontFamilies"
+        },
+        "font-weight": {
+          "value": "{tilburg.heading.font-weight}",
+          "type": "fontWeights"
+        },
+        "line-height": {
+          "value": "{tilburg.typography.line-height.sm}",
+          "type": "lineHeights"
+        },
+        "font-size": {
+          "value": "{tilburg.typography.font-size.xl}",
+          "type": "fontSizes"
+        }
+      },
+      "column-gap": {
+        "value": "{tilburg.space.column.snail}",
+        "type": "spacing"
+      },
+      "border-width": {
+        "value": "{tilburg.border-width.md}",
+        "type": "borderWidth"
+      },
+      "padding-block-end": {
+        "value": "{tilburg.space.block.snail}",
+        "type": "spacing"
+      },
+      "padding-block-start": {
+        "value": "{tilburg.space.block.snail}",
+        "type": "spacing"
+      },
+      "padding-inline-end": {
+        "value": "{tilburg.space.inline.mouse}",
+        "type": "spacing"
+      },
+      "padding-inline-start": {
+        "value": "{tilburg.space.inline.mouse}",
+        "type": "spacing"
+      },
+      "informative": {
+        "background-color": {
+          "value": "{tilburg.feedback.informative.background-color}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{tilburg.feedback.informative.border-color}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{tilburg.document.color}",
+          "type": "color"
+        }
+      },
+      "icon": {
+        "informative": {
+          "color": {
+            "value": "{tilburg.feedback.informative.color}",
+            "type": "color"
+          }
+        },
+        "padding-block-end": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-inline-end": {
+          "value": "0px",
+          "type": "spacing"
+        },
+        "padding-inline-start": {
+          "value": "0px",
+          "type": "spacing"
+        },
+        "positive": {
+          "color": {
+            "value": "{tilburg.feedback.positive.color}",
+            "type": "color"
+          }
+        },
+        "negative": {
+          "color": {
+            "value": "{tilburg.feedback.negative.color}",
+            "type": "color"
+          }
+        },
+        "warning": {
+          "color": {
+            "value": "{tilburg.feedback.warning.color}",
+            "type": "color"
+          }
+        },
+        "size": {
+          "type": "sizing",
+          "value": "{tilburg.icon.functional.size}"
+        }
+      },
+      "negative": {
+        "background-color": {
+          "value": "{tilburg.feedback.negative.background-color}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{tilburg.feedback.negative.border-color}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{tilburg.document.color}",
+          "type": "color"
+        }
+      },
+      "positive": {
+        "background-color": {
+          "value": "{tilburg.feedback.positive.background-color}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{tilburg.feedback.positive.border-color}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{tilburg.document.color}",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "background-color": {
+          "value": "{tilburg.feedback.warning.background-color}",
+          "type": "color"
+        },
+        "border-color": {
+          "value": "{tilburg.feedback.warning.border-color}",
+          "type": "color"
+        },
+        "color": {
+          "value": "{tilburg.document.color}",
+          "type": "color"
+        }
+      },
+      "message": {
+        "row-gap": {
+          "value": "{tilburg.space.row.snail}",
+          "type": "spacing"
+        },
+        "padding-block-end": {
+          "value": "{tilburg.space.block.snail}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{tilburg.space.block.beetle}",
+          "type": "spacing"
+        }
+      },
+      "content": {
+        "row-gap": {
+          "value": "{tilburg.space.row.snail}",
+          "type": "spacing"
+        }
+      }
+    }
+  }
+}