Created a UI component for Storybook - Badge (#41)

Co-authored-by: martinwenisch <[email protected]>

apps/design-system/stories/badge.stories.tsx

@@ -0,0 +1,40 @@
+import { Badge } from "../../../packages/design-system/src/badge";
+import { Meta, StoryObj } from "@storybook/react";
+
+export default {
+  title: "Components/Badge",
+  component: Badge,
+  argTypes: {
+    color: {
+      control: { type: "select", options: ["neutral", "secondary"] },
+    },
+    icon: { control: "boolean" },
+  },
+  tags: ["autodocs"],
+} as Meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Neutral: Story = {
+  args: {
+    icon: false,
+    color: "neutral",
+    children: "Label",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    icon: true,
+    color: "neutral",
+    children: "Label",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: false,
+    color: "secondary",
+    children: "Label",
+  },
+};

package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@repo/eslint-config": "*",
     "@repo/typescript-config": "*",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "turbo": "^2.0.6"
   },
@@ -21,5 +21,10 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "classnames": "^2.5.1",
+    "styled-components": "^6.1.12"
+  }
 }

packages/design-system/config/borderRadius.ts

@@ -4,7 +4,7 @@ const borderRadius: Pick<Partial<ThemeConfig>, "borderRadius"> = {
   // !!! We replace the default Tailwind CSS borderRadius scale with our own
   borderRadius: {
     none: "0px",
-    DEFAULT: "1rem",
+    DEFAULT: "0.375rem",
     md: "1.5rem",
     lg: "2rem",
     full: "9999px",

packages/design-system/config/colors.ts

@@ -84,7 +84,7 @@ const backgroundColorSecondary = {
 const textColorSecondary = {
   secondary: secondaryColors[50],
   "secondary-hover": secondaryColors[30],
-  "secondary-strong": secondaryColors[10],
+  "secondary-strong": secondaryColors[30],
 };
 
 const borderColorSecondary = {

packages/design-system/config/typography.ts

@@ -8,6 +8,10 @@ const typography: Pick<
   fontFamily: {
     sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
   },
+  fontSize: {
+    xs: "0.625rem",
+    sm: "0.812rem",
+  },
 };
 
 export default typography;

packages/design-system/package.json

@@ -14,6 +14,8 @@
     "build": "npm run fonts && npm run tailwind",
     "dev": "npm run fonts && npm run tailwind:watch",
     "fonts": "mkdir -p ./dist && cp -r ./src/fonts ./dist/fonts",
+    "format": "prettier . --check",
+    "format:fix": "prettier . --write",
     "generate:component": "turbo gen react-component",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",

packages/design-system/src/Badge/BadgeStarIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export function BadgeStarIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M9 12.953l4.635 2.797-1.23-5.273L16.5 6.93l-5.393-.457L9 1.5 6.893 6.473 1.5 6.93l4.095 3.547-1.23 5.273L9 12.953z"
+      ></path>
+    </svg>
+  );
+}