Add Radio Component and its stories

src/Radio.js

@@ -0,0 +1,39 @@
+import React, {forwardRef} from "react";
+import styled, { css } from "styled-components";
+import { space, layout, compose } from "styled-system";
+import PropTypes from "prop-types";
+
+const systemProps = compose(layout, space);
+
+const radioTheme = css`
+  appearance: radio;
+  cursor: pointer;
+  border-radius: 50%;
+  margin: 3px 3px 0px 5px;
+  padding: initial;
+  border: initial;
+
+  ${systemProps}
+`;
+
+const RadioElement = styled.input`
+  ${radioTheme}
+`;
+
+const Radio = forwardRef((props, ref) => {
+   return <RadioElement {...props} ref={ref} />;
+});
+
+Radio.defaultProps = {
+    as: "input",
+    type: "radio",
+    onChange: () => {},
+};
+
+Radio.propTypes = {
+    onChange: PropTypes.func,
+}
+
+Radio.displayName = "Radio";
+
+export default Radio;

stories/Radio.stories.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Radio from "../src/Radio";
+import Label from "../src/Label";
+
+export default { title: "Radio"};
+
+export const defaultRadio = () => (
+    <div>
+        <Radio id={"default"} />
+        <Label htmlFor={"default"} >Default Radio Btn</Label>
+    </div>
+);
+defaultRadio.story = {
+    name: "Default Radio Btn"
+};
+
+export const customRadio = () => (
+    <div>
+        <Radio id={"custom1"} />
+        <Label htmlFor={"custom1"} color={"textAccent"} fontSize={"xl"}>Custom1 Radio Btn</Label>
+    </div>
+);
+customRadio.story = {
+    name: "Custom Radio Btn"
+};
+
+export const disabledRadio = () => (
+    <div>
+        <Radio id={"disabled1"} disabled/>
+        <Label htmlFor={"disabled1"}
+               opacity={"0.5"}
+               cursor={"not-allowed"}
+        >Disabled Radio Btn</Label>
+    </div>
+);
+disabledRadio.story = {
+    name: "Disabled Radio Btn"
+};