migrate tags

Author: pettinarip

src/components/ui/__stories__/Tag.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { Center, HStack, VStack } from "../flex"
+import { Tag } from "../tag"
+
+const meta = {
+  title: "Molecules / Display Content / New Tags",
+  component: Tag,
+} satisfies Meta<typeof Tag>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+// "normal" is default status
+const statusArray = ["normal", "tag", "success", "error", "warning"] as const
+
+// "subtle" is default variant
+const variantArray = ["subtle", "solid", "outline"] as const
+
+const StyleVariantList = () => (
+  <HStack>
+    {statusArray.map((status) => (
+      <VStack key={status}>
+        {variantArray.map((variant) => (
+          <Tag key={variant} status={status} variant={variant}>
+            Tag Name
+          </Tag>
+        ))}
+      </VStack>
+    ))}
+  </HStack>
+)
+
+export const StyleVariantsBasic: Story = {
+  render: (args) => (
+    <VStack className="gap-8">
+      <Center>
+        Click anywhere in the whitespace and then tab to see the button styling
+        on `:focus-visible`
+      </Center>
+      <StyleVariantList {...args} />
+    </VStack>
+  ),
+}

src/components/ui/tag.tsx

@@ -0,0 +1,69 @@
+import { cva, VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils/cn"
+
+const tagVariants = cva(
+  "inline-flex items-center rounded-full border px-2 py-0.5 min-h-8 text-xs uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      status: {
+        normal: "bg-background-highlight text-body-medium border-body-medium",
+        tag: "bg-primary-low-contrast text-primary border-primary",
+        success: "bg-success-light text-success border-success",
+        error: "bg-error-light text-error border-error",
+        warning: "bg-warning-light text-warning border-warning",
+      },
+      variant: {
+        subtle: "border-transparent",
+        solid: "border-transparent text-body-inverse",
+        outline: "bg-transparent",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "solid",
+        status: "normal",
+        className: "bg-body-medium",
+      },
+      {
+        variant: "solid",
+        status: "tag",
+        className: "bg-primary",
+      },
+      {
+        variant: "solid",
+        status: "success",
+        className: "bg-success",
+      },
+      {
+        variant: "solid",
+        status: "error",
+        className: "bg-error",
+      },
+      {
+        variant: "solid",
+        status: "warning",
+        className: "bg-warning",
+      },
+    ],
+    defaultVariants: {
+      variant: "subtle",
+      status: "normal",
+    },
+  }
+)
+
+export interface TagProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof tagVariants> {}
+
+function Tag({ className, variant, status, ...props }: TagProps) {
+  return (
+    <div
+      className={cn(tagVariants({ variant, status }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Tag }