chore: Bump package version to 1.1.6 and update Badge component to support click events

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {
@@ -171,4 +171,4 @@
     "react-router-dom": ">=7.2.0",
     "tailwindcss": ">=4.0.0"
   }
-}
+}

src/Components/AddSocialPlatform/index.tsx

@@ -23,21 +23,24 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
 
   return (
     <div
-      className={classNames("grid md:grid-cols-12 items-end gap-2", className)}
+      className={classNames(
+        "flex flex-col md:flex-row gap-2 items-end",
+        className
+      )}
     >
       <Select
         name='platform'
         label='Platform'
         onChange={form.set}
-        inputWrapperClassName='col-span-5'
+        inputWrapperClassName='w-full'
         value={form.state.platform.value}
         error={form.state.platform.error}
         options={platforms.map(({ name }) => ({
           label: name,
           value: name
         }))}
       />
-      <div className='col-span-5'>
+      <div className='w-full'>
         <Input
           name='url'
           label={getValueLabel(form.state.platform.value)}

src/Components/Badge/Badge.stories.tsx

@@ -39,3 +39,13 @@ export const Custom: Story = {
     className: "text-bg bg-red-500"
   }
 };
+
+export const Clickable: Story = {
+  args: {
+    title: "Badge",
+    variant: BadgeVariantEnum.FILLED,
+    onClick: () => {
+      alert("Badge clicked");
+    }
+  }
+};

src/Components/Badge/Badge.test.tsx

@@ -43,4 +43,17 @@ describe("Badge component", () => {
     const badgeElement = screen.getByText(testTitle);
     expect(badgeElement).toHaveClass("bg-transparent");
   });
+
+  test("applies clickable class name", () => {
+    render(
+      <Badge
+        title={testTitle}
+        variant={BadgeVariantEnum.FILLED}
+        onClick={() => alert("Badge clicked")}
+      />
+    );
+
+    const badgeElement = screen.getByText(testTitle);
+    expect(badgeElement).toHaveClass("cursor-pointer");
+  });
 });

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

@@ -3,7 +3,7 @@
 exports[`Badge component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <span
-    class="rounded px-2 py-1 text-sm font-medium bg-primary text-background border-2 border-background/80"
+    class="rounded px-2 py-1 text-sm font-medium bg-primary text-background border-2 border-background/80 cursor-default"
   >
     Test Badge
   </span>

src/Components/Badge/index.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 
 import { BadgeVariantEnum, IBadgeProps } from "./types";
 
-const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
+const Badge: FC<IBadgeProps> = ({ title, className, variant, onClick }) => {
   const variants = {
     [BadgeVariantEnum.FILLED]:
       "bg-primary text-background border-2 border-background/80",
@@ -15,8 +15,18 @@ const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
 
   const variantClassNames = variant ? variants[variant] : "";
 
+  const onClickCSSClass = onClick ? "cursor-pointer" : "cursor-default";
+
   return (
-    <span className={classNames(baseClassNames, variantClassNames, className)}>
+    <span
+      className={classNames(
+        baseClassNames,
+        variantClassNames,
+        className,
+        onClickCSSClass
+      )}
+      onClick={onClick}
+    >
       {title}
     </span>
   );

src/Components/Badge/types.ts

@@ -7,4 +7,5 @@ export interface IBadgeProps {
   title: string;
   className?: string;
   variant?: BadgeVariantEnum;
+  onClick?: () => void;
 }

src/Components/Card/Components/CardTags.tsx

@@ -24,13 +24,22 @@ const CardTags: FC<ICardTags> = ({
 }) => {
   if (!visibleTags.length) return null;
 
+  const handleTagClick = (tag: ITag) => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!onTagClick) {
+      return;
+    }
+
+    onTagClick(tag)(e);
+  };
+
   return (
     <div className='flex items-center gap-2 flex-wrap mt-4'>
       {visibleTags.map((tag, index) => (
         <NavLink
           key={`${tag.name}-${index}`}
           to={tag.url}
-          onClick={onTagClick ? onTagClick(tag) : undefined}
+          onClick={handleTagClick(tag)}
           className='hover:text-stroke text-primary hover:underline hover:opacity-80 active:opacity-50 transition-all'
         >
           #{tag.name}

src/Components/Inputs/Checkbox/index.tsx

@@ -27,7 +27,7 @@ const Checkbox: FC<ICheckboxProps> = (
             />
             {checked && (
               <svg
-                className='absolute left-1 top-1 h-4 w-4 text-primary pointer-events-none'
+                className='absolute left-1 top-1 h-4 w-4 text-background pointer-events-none'
                 fill='currentColor'
                 viewBox='0 0 20 20'
               >

src/Components/Inputs/Common/InputHeader/index.tsx

@@ -22,12 +22,12 @@ const InputHeader: FC<InputHeaderProps> = (
 
   return (
     <div className='mb-2 flex items-center justify-between'>
-      <div className='flex items-center gap-0.5'>
+      <div className='flex items-center gap-1'>
         {hint && name && (
-          <Tooltip text={hint} id={name} place='right'>
+          <Tooltip text={hint} id={name} place='top'>
             <Icon
               iconName='IconInfo'
-              className='w-4 text-text relative top-[1px] cursor-pointer'
+              className='w-4 text-text relative top-px cursor-pointer'
             />
           </Tooltip>
         )}