Merge pull request 'feature/radio-component' (#51) from feature/radio-component into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/51

src/components/Radio.tsx

@@ -0,0 +1,41 @@
+import classNames from "classnames";
+import React from "react";
+import { ReactComponent as Checkmark } from "assets/svg/check.svg";
+
+export type Props = {
+  /**
+   * An Element next to the Radio
+   */
+  children?: React.ReactNode;
+} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
+
+const Radio = ({ children, className, ...props }: Props) => {
+  return (
+    <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,
+};