feat: add Radio and RadioGroup & update stories

src/Radio.js

@@ -0,0 +1,41 @@
+import { useField } from 'react-final-form'
+import { Radio as RadioOrig } from '@dhis2/ui-core'
+import React, { Fragment } from 'react'
+import propTypes from 'prop-types'
+
+import { styles } from './Radio/styles.js'
+
+const Radio = ({ name, label, value, validate, defaultValue }) => {
+    const { input, meta } = useField(name, {
+        type: 'radio',
+        value,
+        validate,
+        defaultValue,
+    })
+
+    return (
+        <Fragment>
+            <RadioOrig
+                {...input}
+                key={value}
+                label={label}
+                valid={!!input.value && !meta.error}
+                error={meta.touched && !!meta.error}
+                className="radio"
+            />
+
+            <style jsx>{styles}</style>
+        </Fragment>
+    )
+}
+
+Radio.propTypes = {
+    name: propTypes.string.isRequired,
+    label: propTypes.string.isRequired,
+    value: propTypes.string.isRequired,
+
+    validate: propTypes.func,
+    defaultValue: propTypes.string,
+}
+
+export { Radio }

src/Radio/styles.js

@@ -0,0 +1,7 @@
+import css from 'styled-jsx/css'
+
+export const styles = css`
+    .radio {
+        margin-right: 15px;
+    }
+`

src/RadioGroup.js

@@ -0,0 +1,51 @@
+import { Radio as RadioOrig } from '@dhis2/ui-core'
+import { useField } from 'react-final-form'
+import React from 'react'
+import propTypes from 'prop-types'
+
+import { Radio } from './Radio.js'
+import { conditional } from './helper/conditional.js'
+import { styles } from './RadioGroup/styles.js'
+
+const RadioGroup = ({ label, name, options, validate, defaultValue }) => {
+    return (
+        <div className="container">
+            <span className="label">{label}</span>
+
+            <div className="inputs">
+                {options.map(option => (
+                    <div className="input-container">
+                        <Radio
+                            name={name}
+                            key={option.value}
+                            value={option.value}
+                            label={option.label}
+                            validate={validate}
+                            defaultValue={defaultValue}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            <style jsx>{styles}</style>
+        </div>
+    )
+}
+
+RadioGroup.propTypes = {
+    label: propTypes.string.isRequired,
+    name: propTypes.string.isRequired,
+    options: propTypes.arrayOf(
+        propTypes.shape({
+            value: propTypes.string.isRequired,
+            label: propTypes.string.isRequired,
+        })
+    ).isRequired,
+
+    validate: propTypes.func,
+    defaultValue: propTypes.string,
+}
+
+const ConditionalRadioGroup = conditional(RadioGroup)
+
+export { RadioGroup, ConditionalRadioGroup }

src/RadioGroup/styles.js

@@ -0,0 +1,24 @@
+import css from 'styled-jsx/css'
+
+export const styles = css`
+    .container {
+        margin-bottom: 15px;
+    }
+
+    .label {
+        display: block;
+        color: #000;
+        font-size: 13px;
+        font-weight: 600;
+        text-transform: uppercase;
+        margin: 0 0 10px;
+    }
+
+    .inputs {
+        display: flex;
+    }
+
+    .input-container {
+        margin-right: 15px;
+    }
+`

stories/Conditional.stories.js

@@ -1,21 +1,21 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 
 import { storiesOf } from '@storybook/react'
 
-import { File, Form, required } from '../src'
+import { ManagedForm, File, ConditionalFile, required } from '../src'
 
 storiesOf('Conditional fields', module).add('Default', () => (
-    <Form onSubmit={v => console.log(JSON.stringify(v, null, 2))}>
-        {({ handleSubmit, values }) => (
-            <form data-test onSubmit={handleSubmit}>
+    <ManagedForm onSubmit={v => console.log(JSON.stringify(v, null, 2))}>
+        {({ values }) => (
+            <Fragment>
                 <File name="file1" label="File one" />
 
-                <File
+                <ConditionalFile
                     name="file2"
                     label="File two"
                     condition={!!values.file1}
                 />
-            </form>
+            </Fragment>
         )}
-    </Form>
+    </ManagedForm>
 ))

stories/RadioGroup.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { Form, RadioGroup, required } from '../src'
+
+const options = [
+    { label: 'Foo', value: 'foo' },
+    { label: 'Bar', value: 'bar' },
+    { label: 'Baz', value: 'baz' },
+]
+
+storiesOf('RadioGroup', module)
+    .addDecorator(fn => <Form onSubmit={console.log}>{() => fn()}</Form>)
+    .add('Default', () => (
+        <RadioGroup name="fooBarBaz" label="FooBarBaz" options={options} />
+    ))
+    .add('Required', () => (
+        <RadioGroup
+            name="fooBarBaz"
+            label="FooBarBaz *"
+            options={options}
+            validate={required}
+        />
+    ))