From 2b323720a1b39a41d4a4398cfd4db2f308b58c71 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 19 Aug 2021 23:17:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`Radio`=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inputs/Radio.stories.jsx | 42 +++++++++++++++++++++++++
 src/components/inputs/Radio.tsx         | 41 ++++++++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/components/inputs/Radio.stories.jsx
 create mode 100644 src/components/inputs/Radio.tsx

diff --git a/src/components/inputs/Radio.stories.jsx b/src/components/inputs/Radio.stories.jsx
new file mode 100644
index 0000000..23816a7
--- /dev/null
+++ b/src/components/inputs/Radio.stories.jsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Radio } from "./Radio"
+import { Box } from "../panels/Box"
+import { BaseElement } from "../BaseElement"
+
+
+export default {
+    component: Radio,
+    title: "Inputs/Radio",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Radio value={"zero"} {...props}/>
+)
+
+
+
+export const ThreeRadios = props => (
+    <BaseElement kind={"div"}>
+        <BaseElement kind={"div"} bluelibClassNames={"color-blue"}>
+            <Radio value={"articuno"} {...props}/> Articuno
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-yellow"}>
+            <Radio value={"zapdos"} {...props}/> Zapdos
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-red"}>
+            <Radio value={"moltres"} {...props}/> Moltres
+        </BaseElement>
+    </BaseElement>
+)
+ThreeRadios.args = {
+    name: "example"
+}
diff --git a/src/components/inputs/Radio.tsx b/src/components/inputs/Radio.tsx
new file mode 100644
index 0000000..d31cfca
--- /dev/null
+++ b/src/components/inputs/Radio.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface RadioProps {
+    disabled?: boolean,
+
+    onChange?: (checked: string) => boolean,
+
+    name: string,
+    value: string,
+
+    [props: string]: any,
+}
+
+
+export function Radio({onChange, ...props}: RadioProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-radio")
+
+    const onChangeWrapper = React.useCallback(
+
+        (event: React.ChangeEvent<HTMLInputElement>): boolean => {
+            const checked = event.target.value
+
+            if(onChange) {
+                return onChange(checked)
+            }
+
+            return false
+        },
+
+        [onChange]
+    )
+
+    return (
+        <BaseElement kind={"input"} type={"radio"} onChange={onChangeWrapper} {...props}/>
+    )
+}