Checkbox component with its stories

src/components/Checkbox.tsx

@@ -1,71 +1,48 @@
+import classNames from "classnames";
 import React from "react";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
 
+export type Props = {
   /**
- * [*] A Checkbox Component
- * 
- * [*] when the label is clicked => The checkbox will be checked
- * 
- * [*] for each item(row) you have to put the following in App.tsx:
- *    const [isCheckedA, setIsCheckedA] = useState(true);
-      const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setIsCheckedA(e.target.checked);
-      }; 
- * 
- * [*] to create this component, you have to provide the following:
- * [1] label
- * [2] if the item is checked or not.
- * 
- * [*] A good example will be:
-const App: React.FC = () => 
-{
-    const [isCheckedA, setIsCheckedA] = useState(true);
-    const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsCheckedA(e.target.checked);
-    };
-
-    const [isCheckedB, setIsCheckedB] = useState(true);
-    const handleChangeB = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsCheckedB(e.target.checked);
-    };
-
-    return (
-      <div className="App">
-        
-        <Checkbox
-          handleChange={handleChangeA}
-          isChecked={isCheckedA}
-          label=" Leo Tolstoy "
-        />
-
-        <Checkbox
-          handleChange={handleChangeB}
-          isChecked={isCheckedB}
-          label=" Fyodor Dostoevsky "
-        />
-
-      </div>
-    );
-};
-
+   * Control the state of checkbox
    */
-
-interface Props {
   isChecked: boolean;
-  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  label: string;
-}
+  /**
+   * An Element next to the checkbox
+   */
+  children?: React.ReactNode;
+} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
 
-const Checkbox = (props: Props) => {
+const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
   return (
-    <div>
+    <label
+      className={classNames(
+        "flex gap-x-4 flex-nowrap text-base text-black select-none",
+        className
+      )}
+      htmlFor={props.id}
+    >
+      <div className="w-6 h-6 relative">
         <input
+          className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6 
+                      rounded checked:bg-blue-500 checked:border-blue-500 
+                      nextOnChecked:opacity-100 hover:border-blue-500 
+                      focus:outline focus:outline-4 focus:outline-blue-300/40 focus:outline-offset-1 
+                      disabled:bg-gray-75 disabled:border-gray-300 "
           type="checkbox"
-        id={props.label}
-        checked={props.isChecked}
-        onChange={props.handleChange}
+          checked={isChecked}
+          {...props}
         />
-      <label htmlFor={props.label}>{props.label}</label>
+        <div //
+          className=" w-4 h-3 leading-[0] absolute top-1.5 left-1 opacity-0 
+                      pointer-events-none focus:pointer-events-auto flex items-center justify-center 
+                      fill-white peer-disabled:fill-gray-500 "
+        >
+          <Checkmark className="fill-inherit" />
         </div>
+      </div>
+      {children}
+    </label>
   );
 };
 export default Checkbox;

src/stories/Checkbox.stories.tsx

@@ -20,14 +20,6 @@ export default {
       type: "boolean",
       defaultValue: "false",
     },
-    id: {
-      type: "string",
-      defaultValue: "uniqueID",
-    },
-    name: {
-      type: "string",
-      defaultValue: "checkbox name",
-    },
   },
 } as ComponentMeta<typeof Checkbox>;
 
@@ -50,9 +42,3 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
 };
-
-export const Hovered = bindTemplate({});
-Hovered.args = {
-  className: "hover:true",
-  isChecked: false,
-};