iterating

src/primitives/StatusBadge/StatusBadge.mdx

@@ -0,0 +1,23 @@
+import { Meta, Title, Primary, Stories, Controls, Story } from "@storybook/blocks";
+import * as StatusBadgeStories from "./StatusBadge.stories";
+import { StatusBadge } from "./StatusBadge";
+
+# StatusBadge
+
+<Meta of={StatusBadgeStories} />
+
+The StatusBadge component renders a Status in a Badge.
+
+# Example
+
+## Default
+
+<Story of={StatusBadgeStories.Default} />
+
+# Controls
+
+<Controls />
+
+# Other variations
+
+<Stories />

src/primitives/StatusBadge/StatusBadge.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "@storybook/test";
+
+import { Status, StatusBadge } from "./StatusBadge";
+
+const meta: Meta<typeof StatusBadge> = {
+  title: "Primitives/StatusBadge",
+  args: {
+    status: Status.INPROGRESS,
+  },
+  argTypes: {
+    status: {
+      control: "select",
+      options: Object.values(Status),
+    },
+  },
+
+  component: StatusBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof StatusBadge>;
+
+export const Default: Story = {};
+
+export const Ended: Story = {
+  args: {
+    status: Status.ENDED,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    status: Status.HIDDEN,
+  },
+};
+
+// export const AsString: Story = {
+//   args: {
+//     status: "Active"
+//   },
+// };

src/primitives/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { match, P } from "ts-pattern";
+
+export enum Status {
+  INPROGRESS = "Active",
+  ENDED = "Ended",
+  HIDDEN = "Hidden",
+}
+
+interface StatusBadgeProps {
+  status: `${Status}`;
+}
+
+const statusMap = {
+  [Status.INPROGRESS]: {
+    variant: "InProgress" as const,
+    display: "In Progress",
+  },
+  [Status.ENDED]: {
+    variant: "Ended" as const,
+    display: "Ended",
+  },
+  [Status.HIDDEN]: {
+    variant: "Hidden" as const,
+    display: "",
+  },
+};
+
+const badgeVariants = cva(
+  "ui-inline-flex ui-items-center ui-rounded-full ui-border ui-font-sans ui-text-xs ui-font-semibold ",
+  {
+    variants: {
+      variant: {
+        InProgress: "ui-bg-blue-100 ui-px-2.5  ui-py-0.5",
+        Ended: "ui-bg-orange-100 ui-px-2.5  ui-py-0.5",
+        Hidden: "ui-hidden",
+      },
+    },
+  },
+);
+
+export const StatusBadge = ({ status }: StatusBadgeProps) => {
+  const key: Status = match({ status })
+    .with({ status: "Active" }, () => Status.INPROGRESS)
+    .with({ status: "In Progress" }, () => Status.INPROGRESS)
+    .with({ status: "Ended" }, () => Status.ENDED)
+    .otherwise(() => Status.HIDDEN);
+
+  const { variant, display } = statusMap[key];
+
+  return <Badge variant={variant}>{display} </Badge>;
+};
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

src/tokens/colors.ts

@@ -1,11 +1,17 @@
 import { Colors } from "./types";
 
 export const colors: Colors = {
-  grey: {
+  "ui-grey": {
     "50": "#f7f7f7",
     "400": "#555555",
     "500": "#000000",
   },
-  white: "#ffffff",
-  black: "#000000",
+  "ui-blue": {
+    "100": "#D3EDFE",
+  },
+  "ui-orange": {
+    "100": "#FFD9CD",
+  },
+  "ui-white": "#ffffff",
+  "ui-black": "#000000",
 };