Add RadioGroupField, SelectField, SwitchField

src/Checkbox/index.js

@@ -1,2 +1,3 @@
 export { default as Checkbox } from './Checkbox';
+export { default as CheckboxField } from './CheckboxField';
 export { default } from './Checkbox';

src/Input/index.js

@@ -1,2 +1,3 @@
 export { default } from './Input';
 export { default as Input } from './Input';
+export { default as InputField } from './InputField';

src/Radio/RadioGroup.mdx

@@ -6,7 +6,7 @@ menu: Form
 
 import { Playground, PropsTable } from 'docz';
 import { Box } from '../primitives/index';
-import { RadioGroup } from './index';
+import { RadioGroup, RadioGroupField } from './index';
 import Component from '@reactions/component';
 
 # RadioGroup
@@ -72,11 +72,30 @@ Using an accessibility label (`a11yLabel`) will provide an accessible label for
   <RadioGroup a11yLabel="Weather" name="weather" options={[{ label: 'Sunny', value: 'sunny' }, { label: 'Windy', value: 'windy' }, { label: 'Overcast', value: 'overcast' }]} />
 </Playground>
 
-
-## Props
+## `<RadioGroup>` Props
 
 <PropsTable of={RadioGroup} />
 
+# RadioGroupField
+
+## Import
+
+`import { RadioGroupField } from 'fannypack'`
+
+## Basic Usage
+
+The `<RadioGroupField>` component contains of the [`<RadioGroup>` component](#radiogroup) wrapped by the [`<FieldWrapper>` component](/form/fieldwrapper).
+
+It accepts a combination of [`<RadioGroup>` props](/form/radiogroup#input-props) and [`<FieldWrapper>` props](/form/fieldwrapper#props).
+
+<Playground>
+  <RadioGroupField a11yId="weather" label="Weather" name="weather" options={[{ label: 'Sunny', value: 'sunny' }, { label: 'Windy', value: 'windy' }, { label: 'Overcast', value: 'overcast' }]} />
+</Playground>
+
+## `<RadioGroupField>` Props
+
+<PropsTable of={RadioGroupField} />
+
 ## Theming
 
 ### Schema

src/Radio/RadioGroupField.js

@@ -0,0 +1,81 @@
+// @flow
+import React, { type Element } from 'react';
+
+import RadioGroup from './RadioGroup';
+import FieldWrapper from '../FieldWrapper';
+
+type Props = {
+  /** An accessible ID for the radio group */
+  a11yId?: string,
+  /** An accessible label for the radio group */
+  a11yLabel?: string,
+  className?: string,
+  /** Default value of the radio group */
+  defaultValue?: string | boolean | Object,
+  description?: string | Element<any>,
+  /** Disables the radio group */
+  disabled?: boolean,
+  hint?: string | Element<any>,
+  isFullWidth?: boolean,
+  isOptional?: boolean,
+  isRequired?: boolean,
+  label?: string | Element<any>,
+  name: string,
+  /** Radio group options */
+  options: Array<{ disabled: boolean, label: string, value: string | boolean | Object }>,
+  /** State of the radio group. Can be any color in the palette. */
+  state?: string,
+  validationText?: string,
+  /** Controlled value of the radio group */
+  value?: string,
+  /** Function to invoke when radio group has changed */
+  onChange?: Function
+};
+
+const InputField = ({
+  a11yId,
+  description,
+  hint,
+  isFullWidth,
+  isOptional,
+  isRequired,
+  label,
+  state,
+  validationText,
+  ...props
+}: Props) => (
+  <FieldWrapper
+    a11yId={a11yId}
+    description={description}
+    hint={hint}
+    isFullWidth={isFullWidth}
+    isOptional={isOptional}
+    isRequired={isRequired}
+    label={label}
+    state={state}
+    validationText={validationText}
+  >
+    <RadioGroup {...props} />
+  </FieldWrapper>
+);
+
+InputField.defaultProps = {
+  a11yId: undefined,
+  a11yLabel: undefined,
+  className: undefined,
+  defaultValue: undefined,
+  description: undefined,
+  disabled: false,
+  hint: undefined,
+  isFullWidth: false,
+  isOptional: undefined,
+  isRequired: undefined,
+  label: undefined,
+  onChange: undefined,
+  name: undefined,
+  state: undefined,
+  value: undefined,
+  validationText: undefined
+};
+
+export default InputField;

src/Radio/__tests__/RadioGroupField.test.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import render from '../../_utils/tests/render';
+import RadioGroupField from '../RadioGroupField';
+import 'jest-styled-components';
+
+it('renders correctly for a basic RadioGroupField', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="weather"
+      label="Weather"
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a disabled RadioGroupField', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="weather"
+      label="Weather"
+      disabled
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a disabled RadioGroupField option', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="weather"
+      label="Weather"
+      name="weather"
+      options={[
+        { disabled: true, label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+describe('states', () => {
+  ['danger', 'success', 'warning', 'primary'].forEach(state => {
+    it(`renders correctly for an RadioGroupField with state ${state}`, () => {
+      const { container } = render(
+        <RadioGroupField
+          a11yId="weather"
+          label="Weather"
+          state={state}
+          name="weather"
+          options={[
+            { label: 'Sunny', value: 'sunny' },
+            { label: 'Windy', value: 'windy' },
+            { label: 'Overcast', value: 'overcast' }
+          ]}
+        />
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+});
+
+it('renders correctly for an input field with a description', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="username"
+      label="Username"
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+      description="Required for your fannypack"
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an input field with a hint', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="username"
+      label="Username"
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+      hint="Must be awesome"
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for an optional input field', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="username"
+      label="Username"
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+      isOptional
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+it('renders correctly for a required field', () => {
+  const { container } = render(
+    <RadioGroupField
+      a11yId="username"
+      label="Username"
+      name="weather"
+      options={[
+        { label: 'Sunny', value: 'sunny' },
+        { label: 'Windy', value: 'windy' },
+        { label: 'Overcast', value: 'overcast' }
+      ]}
+      isRequired
+    />
+  );
+  expect(container.firstChild).toMatchSnapshot();
+});