New: Badge component

.storybook/preview.tsx

@@ -5,15 +5,15 @@ import React from "react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 
 const preview: Preview = {
-  // parameters: {
-  //   actions: { argTypesRegex: "^on[A-Z].*" },
-  //   controls: {
-  //     matchers: {
-  //       color: /(background|color)$/i,
-  //       date: /Date$/,
-  //     },
-  //   },
-  // },
+  parameters: {
+    // actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <ZeniProvider>

lib/components/badge/badge.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Badge } from "./badge";
+
+const meta = {
+  title: "DATA DISPLAY/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "Low",
+    size: "md",
+  },
+};

lib/components/badge/badge.tsx

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { twMerge } from "tailwind-merge";
+import { useComponentStyle } from "../../customization/styles/theme.context";
+import { IBadge } from "./badge.types";
+
+export const Badge = (props: IBadge) => {
+  const theme = useComponentStyle("Badge");
+  const {
+    children,
+    style,
+    className = "",
+    variant = "solid",
+    size = "md",
+    color = "",
+    ...restProps
+  } = props;
+
+  const classes = useMemo(() => {
+    return twMerge(
+      theme.base({
+        variant,
+        size,
+      }),
+      className
+    );
+  }, [className, theme, variant, size]);
+
+  return (
+    <div
+      className={classes}
+      style={{
+        ...(variant === "solid" && {
+          backgroundColor: color,
+          borderColor: color,
+        }),
+        ...(variant === "outline" && {
+          borderColor: color,
+          color: color,
+        }),
+        ...(variant === "subtle" && {
+          backgroundColor: `${color}15`,
+          color: color,
+        }),
+        ...style,
+      }}
+      {...restProps}
+    >
+      <span>{children}</span>
+    </div>
+  );
+};

lib/components/badge/badge.types.ts

@@ -0,0 +1,10 @@
+import { DetailedHTMLProps } from "react";
+import { HTMLAttributes } from "react";
+
+export interface IBadge
+  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children?: React.ReactNode;
+  variant?: "outline" | "solid" | "subtle";
+  size?: "sm" | "md" | "lg";
+  color?: string;
+}

lib/components/tag/tag.tsx

@@ -37,6 +37,10 @@ export const Tag = (props: ITag) => {
           borderColor: color,
           color: color,
         }),
+        ...(variant === "subtle" && {
+          backgroundColor: `${color}15`,
+          color: color,
+        }),
         ...style,
       }}
       {...restProps}

lib/components/tag/tag.types.ts

@@ -4,7 +4,7 @@ import { HTMLAttributes } from "react";
 export interface ITag
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   children?: React.ReactNode;
-  variant?: "outline" | "solid";
+  variant?: "outline" | "solid" | "subtle";
   size?: "sm" | "md" | "lg";
   color?: string;
 }

lib/customization/styles/components/badge.styles.ts

@@ -0,0 +1,39 @@
+import { cva } from "class-variance-authority";
+
+const base = cva(
+  [
+    "zn-rounded-sm",
+    "zn-w-fit",
+    "zn-border",
+    "zn-border-primary-500",
+    "zn-font-bold",
+    "zn-uppercase",
+  ],
+  {
+    variants: {
+      variant: {
+        solid: ["zn-bg-primary-500", "zn-text-white"],
+        outline: ["zn-bg-transparent", "zn-text-primary-500"],
+        subtle: [
+          "zn-bg-primary-100",
+          "zn-border-transparent",
+          "zn-text-primary-500",
+
+          "dark:zn-bg-primary-800",
+          "dark:zn-text-primary-300",
+        ],
+      },
+      size: {
+        sm: ["zn-px-1.5", "zn-py-0.5", "zn-text-xs"],
+        md: ["zn-px-2", "zn-py-0.5", "zn-text-sm"],
+        lg: ["zn-px-3", "zn-py-1", "zn-text-base"],
+      },
+    },
+  }
+);
+
+const badgeStyles = {
+  base,
+};
+
+export { badgeStyles };

lib/customization/styles/components/code.styles.ts

@@ -2,11 +2,12 @@ import { cva } from "class-variance-authority";
 
 const base = cva([
   "!zn-font-mono",
-  "zn-bg-gray-100",
+  "zn-bg-gray-200",
   "dark:zn-bg-gray-800",
   "zn-w-fit",
   "zn-px-2",
   "zn-py-0.5",
+  "zn-text-sm",
 ]);
 
 const codeStyles = {

lib/customization/styles/components/index.ts

@@ -29,3 +29,4 @@ export * from "./carousel.styles";
 export * from "./card.styles";
 export * from "./tag.styles";
 export * from "./code.styles";
+export * from "./badge.styles";

lib/customization/styles/components/tag.styles.ts

@@ -1,23 +1,25 @@
 import { cva } from "class-variance-authority";
 
 const base = cva(
-  [
-    "zn-rounded-base",
-    "zn-w-fit",
-    "zn-border",
-    "zn-border-primary-500",
-    "zn-font-medium",
-  ],
+  ["zn-rounded-base", "zn-w-fit", "zn-border", "zn-border-primary-500"],
   {
     variants: {
       variant: {
         solid: ["zn-bg-primary-500", "zn-text-white"],
         outline: ["zn-bg-transparent", "zn-text-primary-500"],
+        subtle: [
+          "zn-bg-primary-100",
+          "zn-border-transparent",
+          "zn-text-primary-500",
+
+          "dark:zn-bg-primary-800",
+          "dark:zn-text-primary-300",
+        ],
       },
       size: {
-        sm: ["zn-px-1.5", "zn-py-0.5", "zn-text-xs"],
-        md: ["zn-px-2", "zn-py-0.5", "zn-text-sm"],
-        lg: ["zn-px-3", "zn-py-1", "zn-text-base"],
+        sm: ["zn-px-1.5", "zn-py-0.5", "zn-text-xs", "zn-font-medium"],
+        md: ["zn-px-2", "zn-py-1", "zn-text-sm", "zn-font-medium"],
+        lg: ["zn-px-2.5", "zn-py-1", "zn-text-lg", "zn-font-semibold"],
       },
     },
   }

lib/customization/styles/theme.context.tsx

@@ -37,6 +37,7 @@ interface StyleComponents {
   Card: typeof styles.cardStyles;
   Tag: typeof styles.tagStyles;
   Code: typeof styles.codeStyles;
+  Badge: typeof styles.badgeStyles;
 }
 
 const defaultStyle: Style = {
@@ -72,6 +73,7 @@ const defaultStyle: Style = {
     Card: styles.cardStyles,
     Tag: styles.tagStyles,
     Code: styles.codeStyles,
+    Badge: styles.badgeStyles,
   },
 };