From 5ea6490a0867ac90bfa017d0955b9aab38d86f44 Mon Sep 17 00:00:00 2001
From: iamdarshshah <imdarshshah@gmail.com>
Date: Mon, 4 May 2020 21:25:10 +0530
Subject: [PATCH 1/2] added: Radio Component

---
 packages/react-ui/index.js                    |  1 +
 .../react-ui/src/components/radio/index.js    | 37 +++++++++++++++++++
 .../src/components/radio/radio.styles.js      |  3 ++
 packages/react-ui/src/themes/base.js          |  3 ++
 packages/react-ui/src/themes/dark.js          |  3 ++
 packages/react-ui/src/themes/light.js         |  4 +-
 6 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-ui/src/components/radio/index.js
 create mode 100644 packages/react-ui/src/components/radio/radio.styles.js

diff --git a/packages/react-ui/index.js b/packages/react-ui/index.js
index 01052ff..8a5a99b 100644
--- a/packages/react-ui/index.js
+++ b/packages/react-ui/index.js
@@ -7,6 +7,7 @@ export * from './src/components/heading'
 export * from './src/components/image'
 export * from './src/components/input'
 export * from './src/components/link'
+export * from './src/components/radio'
 export * from './src/components/select'
 export * from './src/components/spinner'
 export * from './src/components/switch'
diff --git a/packages/react-ui/src/components/radio/index.js b/packages/react-ui/src/components/radio/index.js
new file mode 100644
index 0000000..ec5e11d
--- /dev/null
+++ b/packages/react-ui/src/components/radio/index.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useId } from '@reach/auto-id'
+import { Text } from '../text'
+import { Stack } from '../stack'
+import { Element } from '../../primitives'
+import { merge } from '../../utils'
+
+export const Radio = ({ id, label, disabled, checked, value, ...props }) => {
+  const inputId = useId(id)
+  return (
+    <Stack align="center" gap={2}>
+      <Element
+        as="input"
+        type="radio"
+        component="Radio"
+        id={inputId}
+        value
+        disabled={disabled ? disabled : null}
+        checked={checked ? checked : null}
+        {...props}
+      />
+      <Text as="label" htmlFor={inputId}>
+        {label}
+      </Text>
+    </Stack>
+  )
+}
+
+Radio.propTypes = {
+  label: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  value: PropTypes.string.isRequired
+}
+
+Radio.defaultProps = {}
diff --git a/packages/react-ui/src/components/radio/radio.styles.js b/packages/react-ui/src/components/radio/radio.styles.js
new file mode 100644
index 0000000..4a604d6
--- /dev/null
+++ b/packages/react-ui/src/components/radio/radio.styles.js
@@ -0,0 +1,3 @@
+export const styles = {
+  Radio: {}
+}
diff --git a/packages/react-ui/src/themes/base.js b/packages/react-ui/src/themes/base.js
index 07942b8..3ec5e30 100644
--- a/packages/react-ui/src/themes/base.js
+++ b/packages/react-ui/src/themes/base.js
@@ -167,6 +167,9 @@ const components = {
       }
     }
   },
+  Radio: {
+    border: '1px solid'
+  },
   Select: {
     // recommended: match styles of input
     sizes: { small: 6, medium: 8, large: 10 },
diff --git a/packages/react-ui/src/themes/dark.js b/packages/react-ui/src/themes/dark.js
index afa418b..6796c54 100644
--- a/packages/react-ui/src/themes/dark.js
+++ b/packages/react-ui/src/themes/dark.js
@@ -355,6 +355,9 @@ const components = {
       }
     }
   },
+  Radio: {
+    border: '1px solid'
+  },
 
   Select: {
     // recommended: match styles of input
diff --git a/packages/react-ui/src/themes/light.js b/packages/react-ui/src/themes/light.js
index 7ad42e3..00fa254 100644
--- a/packages/react-ui/src/themes/light.js
+++ b/packages/react-ui/src/themes/light.js
@@ -339,7 +339,9 @@ const components = {
       }
     }
   },
-
+  Radio: {
+    border: '1px solid'
+  },
   Select: {
     // recommended: match styles of input
     sizes: { small: 6, medium: 8, large: 10 },

From 44c98f002181eb09fffe6288caa96d858aa9b1ba Mon Sep 17 00:00:00 2001
From: iamdarshshah <imdarshshah@gmail.com>
Date: Mon, 4 May 2020 21:29:45 +0530
Subject: [PATCH 2/2] added: Radio Component

---
 packages/docs/src/App.js                    |  3 +-
 packages/docs/src/pages/components/index.js |  6 ++
 packages/docs/src/pages/components/radio.js | 73 +++++++++++++++++++++
 packages/docs/src/pages/index.js            |  1 +
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/src/pages/components/radio.js

diff --git a/packages/docs/src/App.js b/packages/docs/src/App.js
index 81be688..31b5c80 100644
--- a/packages/docs/src/App.js
+++ b/packages/docs/src/App.js
@@ -205,12 +205,13 @@ const ComponentNav = () => {
       <NavSection
         items={[
           { title: 'Avatar', path: 'Avatar' },
-          { title: 'Checkbox', path: 'Checkbox' },
           { title: 'Button', path: 'Button' },
+          { title: 'Checkbox', path: 'Checkbox' },
           { title: 'Heading', path: 'Heading' },
           { title: 'Image', path: 'Image' },
           { title: 'Input', path: 'Input' },
           { title: 'Link', path: 'Link' },
+          { title: 'Radio', path: 'Radio' },
           { title: 'Select', path: 'Select' },
           { title: 'Spinner', path: 'Spinner' },
           { title: 'Switch', path: 'Switch' },
diff --git a/packages/docs/src/pages/components/index.js b/packages/docs/src/pages/components/index.js
index 1ce7f53..26f29e5 100644
--- a/packages/docs/src/pages/components/index.js
+++ b/packages/docs/src/pages/components/index.js
@@ -7,6 +7,7 @@ import {
   Heading,
   Input,
   Link,
+  Radio,
   Select,
   Spinner,
   Switch,
@@ -148,6 +149,11 @@ const Documentation = () => {
             Open GitHub repository
           </Link>
         </ComponentCard>
+        <ComponentCard name="Radio" gap={4}>
+          <Radio label="Normal" />
+          <Radio disabled label="Disabled" />
+          <Radio checked label="Default Select" />
+        </ComponentCard>
         <ComponentCard name="Select">
           <Stack direction="vertical" gap={2} css={{ width: '280px' }}>
             <Select>
diff --git a/packages/docs/src/pages/components/radio.js b/packages/docs/src/pages/components/radio.js
new file mode 100644
index 0000000..b34686c
--- /dev/null
+++ b/packages/docs/src/pages/components/radio.js
@@ -0,0 +1,73 @@
+import React from 'react'
+import { Radio } from 'react-ui'
+import { Table, Page, Section, Props, Badge, Example } from '../../components'
+
+const Documentation = () => {
+  return (
+    <Page
+      title="Radio"
+      tagline="A radio component."
+      badges={[<Badge key={0}>accessible</Badge>]}
+    >
+      <Example>
+        <Example.Preview>
+          <Radio label="Normal" value="Normal" />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Normal" value="Normal" />
+            `}
+        </Example.Code>
+        <Example.Preview>
+          <Radio label="Disabled" value="Disabled" disabled />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Disabled" value="Disabled" disabled />
+            `}
+        </Example.Code>
+        <Example.Preview>
+          <Radio label="Default Checked" value="Default" checked />
+        </Example.Preview>
+        <Example.Code>
+          {`
+              <Radio label="Default Checked" value="Default" checked />
+            `}
+        </Example.Code>
+      </Example>
+
+      <Section title="Props">
+        <Props
+          props={[
+            {
+              name: 'label',
+              type: 'Text',
+              description: 'label to be displayed',
+              default: '<empty>'
+            },
+            {
+              name: 'value',
+              type: 'Text',
+              description: 'value associated to the radio button',
+              default: '<empty>'
+            },
+            {
+              name: 'disabled',
+              type: 'Boolean',
+              description: 'Radio button disabled: true or false',
+              default: '<empty>'
+            },
+            {
+              name: 'checked',
+              type: 'Boolean',
+              description: 'Default behaviour checked or not',
+              default: '<empty>'
+            }
+          ]}
+        />
+      </Section>
+    </Page>
+  )
+}
+
+export default Documentation
diff --git a/packages/docs/src/pages/index.js b/packages/docs/src/pages/index.js
index 2e0d826..55f2856 100644
--- a/packages/docs/src/pages/index.js
+++ b/packages/docs/src/pages/index.js
@@ -6,6 +6,7 @@ export { default as Heading } from './components/heading'
 export { default as Image } from './components/image'
 export { default as Input } from './components/input'
 export { default as Link } from './components/link'
+export { default as Radio } from './components/radio'
 export { default as Select } from './components/select'
 export { default as Spinner } from './components/spinner'
 export { default as Switch } from './components/switch'