chore: Bump package version to 1.0.221 and enhance Badge component

- Update package version in package.json to 1.0.221
- Introduce BadgeVariantEnum for variant management in Badge component
- Refactor Badge component to apply styles based on variant
- Add new stories for different badge variants in Badge.stories.tsx
- Update tests to reflect changes in Badge component and its variants

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.220",
+  "version": "1.0.221",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Badge/Badge.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Badge from ".";
+import { BadgeVariantEnum } from "./types";
 
 const meta = {
   title: "Core/Badge",
@@ -15,9 +16,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Empty: Story = {
+  args: {
+    title: "Badge",
+    variant: BadgeVariantEnum.PRIMARY
+  }
+};
+
 export const Filled: Story = {
   args: {
     title: "Badge",
-    className: "yl:bg-primary-500"
+    variant: BadgeVariantEnum.PRIMARY
+  }
+};
+
+export const Beta: Story = {
+  args: {
+    title: "Beta",
+    variant: BadgeVariantEnum.BETA
+  }
+};
+
+export const New: Story = {
+  args: {
+    title: "New",
+    variant: BadgeVariantEnum.NEW
   }
 };

src/Components/Badge/Badge.test.tsx

@@ -1,24 +1,33 @@
 import { render, screen } from "@testing-library/react";
 
 import Badge from "./";
+import { BadgeVariantEnum } from "./types";
 
 describe("Badge component", () => {
   const testTitle = "Test Badge";
 
   test("renders correctly - snapshot test", () => {
-    const { asFragment } = render(<Badge title={testTitle} />);
+    const { asFragment } = render(
+      <Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test("renders the title correctly", () => {
-    render(<Badge title={testTitle} />);
+    render(<Badge title={testTitle} variant={BadgeVariantEnum.PRIMARY} />);
     const badgeElement = screen.getByText(testTitle);
     expect(badgeElement).toBeInTheDocument();
   });
 
   test("applies custom class name", () => {
     const customClass = "custom-class";
-    render(<Badge title={testTitle} className={customClass} />);
+    render(
+      <Badge
+        title={testTitle}
+        variant={BadgeVariantEnum.PRIMARY}
+        className={customClass}
+      />
+    );
     const badgeElement = screen.getByText(testTitle);
     expect(badgeElement).toHaveClass(customClass);
   });

src/Components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Badge component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <span
-    class="yl:rounded yl:border yl:border-border yl:px-1 yl:pb-[2px] yl:pt-[1px] yl:text-[10px] yl:text-text"
+    class="yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px] yl:bg-primary"
   >
     Test Badge
   </span>

src/Components/Badge/index.tsx

@@ -1,13 +1,29 @@
 import classNames from "classnames";
 import { FC } from "react";
 
-import { IBadgeProps } from "./types";
+import { BadgeVariantEnum, IBadgeProps } from "./types";
+
+const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
+  const variants = {
+    [BadgeVariantEnum.PRIMARY]: "yl:bg-primary",
+    [BadgeVariantEnum.SECONDARY]: "yl:bg-secondary",
+    [BadgeVariantEnum.SUCCESS]: "yl:bg-success",
+    [BadgeVariantEnum.WARNING]: "yl:bg-warning",
+    [BadgeVariantEnum.ERROR]: "yl:bg-error",
+    [BadgeVariantEnum.BETA]: "yl:bg-violet-500",
+    [BadgeVariantEnum.NEW]: "yl:bg-blue-500"
+  };
+
+  const baseClassNames =
+    "yl:rounded yl:border yl:border-border yl:px-2 yl:py-1 yl:text-[10px]";
 
-const Badge: FC<IBadgeProps> = ({ title, className }) => {
   return (
     <span
       className={classNames(
-        "yl:rounded yl:border yl:border-border yl:px-1 yl:pb-[2px] yl:pt-[1px] yl:text-[10px] yl:text-text",
+        baseClassNames,
+        {
+          [variants[variant]]: variant
+        },
         className
       )}
     >

src/Components/Badge/types.ts

@@ -1,4 +1,15 @@
+export enum BadgeVariantEnum {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  SUCCESS = "success",
+  WARNING = "warning",
+  ERROR = "error",
+  BETA = "beta",
+  NEW = "new"
+}
+
 export interface IBadgeProps {
   title: string;
   className?: string;
+  variant: BadgeVariantEnum;
 }