Radio component with its stories

src/components/Radio.tsx

@@ -1,46 +1,41 @@
+import classNames from "classnames";
 import React from "react";
-/**
- * [*]This is a Radio component.
- *
- * [*]when you click on the label the radio will be selected
- *
- * [*] when you call this component pass the following:
- * [1]. label
- * [2]. id
- * [3]. name
- *
- * [*] A good example will be:
- * <Radio label=" Will Smith" id="one" name="radio" />
- */
-type RadioProps = {
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+
+export type Props = {
   /**
-   * the text that will be shown besie the radio
+   * An Element next to the Radio
    */
-  label: string;
-  /**
-   * please provide a unique id
-   */
-  id: string;
-  /**
-   * The name of radio element
-   */
-  name: string;
+  children?: React.ReactNode;
 } & Omit<React.HTMLProps<HTMLInputElement>, "type">;
 
-const Radio = ({ label, id, name, ...props }: RadioProps) => {
+const Radio = ({ children, className, ...props }: Props) => {
   return (
-    <div>
-      <input
-        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 "
-        type="Radio"
-        name={name}
-        value={label}
-        id={id}
-        {...props}
-      />
-      <label htmlFor={id}>{label}</label>
-    </div>
+    <label
+      className={classNames(
+        " group inline-flex gap-x-4 text-base select-none",
+        className
+      )}
+      htmlFor={props.id}
+    >
+      <input className="hidden peer" type="radio" {...props} />
+      <div
+        className=" w-6 h-6 rounded-full box-border p-0.5 border-2 border-gray-300
+                    peer-checked:border-blue-500
+                    group-hover:border-blue-500
+                    
+                    transition-all
+                    
+                    after:content-[''] after:w-full after:h-full after:block after:bg-blue-500 
+                    after:rounded-full after:scale-0 after:peer-checked:scale-100 duration-200
+
+                    peer-disabled:border-gray-300 peer-disabled:bg-gray-75/5
+                    after:peer-disabled:bg-[#8C8C8C]
+
+                    hover:border-blue-500"
+      ></div>
+      {children}
+    </label>
   );
 };
-
 export default Radio;

src/stories/Radio.stories.tsx

@@ -0,0 +1,46 @@
+import Radio from "../components/Radio";
+import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
+import React, { useState } from "react";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+import { boolean } from "yup/lib/locale";
+
+export default {
+  title: "Radio",
+  component: Radio,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    checked: {
+      type: "boolean",
+    },
+    children: {
+      type: "string",
+      defaultValue: "Use light theme",
+    },
+    className: {
+      type: "string",
+      defaultValue: "mt-4 ml-4",
+    },
+    disabled: {
+      type: "boolean",
+      defaultValue: "false",
+    },
+  },
+} as ComponentMeta<typeof Radio>;
+
+const Template: ComponentStory<typeof Radio> = (args) => <Radio {...args} />;
+
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+  children: "This is a custom Radio",
+};
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+  checked: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};