feat: 🎸 Added SQFormRadioButtonGroup component

Added SQFormRadioButtonGroup component to allow for a radio button input
within the context of SQForm

✅ Closes: #64

src/components/SQForm/SQFormRadioButtonGroup.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import {SQFormRadioButtonGroupItem} from '../../../src';
+import {useForm} from './useForm';
+
+function SQFormRadioButtonGroup({
+  name,
+  onChange,
+  isRequired = false,
+  shouldDisplayInRow = false,
+  size = 'auto',
+  groupLabel,
+  children
+}) {
+  const {
+    formikField: {field},
+    fieldHelpers: {handleChange, HelperTextComponent}
+  } = useForm({
+    name,
+    isRequired,
+    onChange
+  });
+
+  const childrenToRadioGroupItems = () => {
+    return children.map(radioOption => {
+      const {label, value, isDisabled, inputProps} = radioOption;
+      return (
+        <SQFormRadioButtonGroupItem
+          label={label}
+          value={value}
+          isDisabled={isDisabled}
+          inputProps={inputProps}
+          key={`SQFormRadioButtonGroupItem_${value}`}
+        />
+      );
+    });
+  };
+
+  return (
+    <Grid item sm={size}>
+      <InputLabel id={groupLabel.toLowerCase()}>{groupLabel}</InputLabel>
+      <RadioGroup
+        value={field.value}
+        row={shouldDisplayInRow}
+        aria-label={`SQFormRadioButtonGroup_${name}`}
+        name={name}
+        onChange={handleChange}
+      >
+        {childrenToRadioGroupItems()}
+      </RadioGroup>
+      <FormHelperText required={isRequired}>
+        {HelperTextComponent}
+      </FormHelperText>
+    </Grid>
+  );
+}
+
+SQFormRadioButtonGroup.propTypes = {
+  /** Name of the radio group */
+  name: PropTypes.string.isRequired,
+  /** Function to call on value change */
+  onChange: PropTypes.func,
+  /** Whether this radio selection is required */
+  isRequired: PropTypes.bool,
+  /** Whether to display group in row */
+  shouldDisplayInRow: PropTypes.bool,
+  /** Size of the input given full-width is 12. */
+  size: PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+  /** Label to display above the group */
+  groupLabel: PropTypes.string.isRequired,
+  /** Children must be an array of objects with radio button label and value information */
+  children: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+      isDisabled: PropTypes.bool,
+      inputProps: PropTypes.object
+    }).isRequired
+  ).isRequired
+};
+
+export default SQFormRadioButtonGroup;

src/components/SQForm/SQFormRadioButtonGroupItem.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Radio from '@material-ui/core/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+function SQFormRadioButtonGroupItem({
+  value,
+  label,
+  isDisabled = false,
+  inputProps = {}
+}) {
+  return (
+    <FormControlLabel
+      value={value}
+      label={label}
+      control={<Radio disabled={isDisabled} {...inputProps} />}
+    />
+  );
+}
+
+SQFormRadioButtonGroupItem.propTypes = {
+  /** Value of the radio button */
+  value: PropTypes.any.isRequired,
+  /** Label for the radio button */
+  label: PropTypes.string.isRequired,
+  /** Whether this radio button is disabled */
+  isDisabled: PropTypes.bool,
+  /** Props for the radio input */
+  inputProps: PropTypes.object
+};
+
+export default SQFormRadioButtonGroupItem;

src/index.js

@@ -17,6 +17,8 @@ export {default as SQFormCheckboxGroupItem} from './components/SQForm/SQFormChec
 export {default as SQFormDatePicker} from './components/SQForm/SQFormDatePicker';
 export {default as SQFormDateTimePicker} from './components/SQForm/SQFormDateTimePicker';
 export {default as SQFormDatePickerWithCalendarInputOnly} from './components/SQForm/SQFormDatePickerWithCalendarInputOnly';
+export {default as SQFormRadioButtonGroupItem} from './components/SQForm/SQFormRadioButtonGroupItem';
+export {default as SQFormRadioButtonGroup} from './components/SQForm/SQFormRadioButtonGroup';
 export {
   SQFormDialogStepper,
   SQFormDialogStep

stories/SQForm.stories.js

@@ -25,7 +25,8 @@ import {
   SQFormResetButtonWithConfirmation,
   SQFormCheckboxGroup,
   SQFormCheckboxGroupItem,
-  SQFormMultiSelect
+  SQFormMultiSelect,
+  SQFormRadioButtonGroup
 } from '../src';
 
 export default {
@@ -55,7 +56,8 @@ const MOCK_FORM_ENTITY = {
   age: '',
   state: '',
   tenThousandOptions: '',
-  note: ''
+  note: '',
+  preferredPet: ''
 };
 
 const MOCK_ACTIONS_FORM_ENTITY = {
@@ -109,6 +111,12 @@ const MOCK_FRIENDS_OPTIONS = [
   {label: 'Jessica', value: random(10 + Math.ceil(Math.random() * 20))}
 ];
 
+const RADIO_GROUP_OPTIONS = [
+  {label: 'Cat', value: 'cat'},
+  {label: 'Dog', value: 'dog'},
+  {label: 'Both', value: 'both', isDisabled: true}
+];
+
 const handleSubmit = (values, actions) => {
   window.alert(JSON.stringify(values, null, 2));
   actions.setSubmitting(false);
@@ -142,6 +150,13 @@ export const basicForm = () => {
         </SQFormDropdown>
         <SQFormCheckbox name="cool" label="Cool" />
         <SQFormCheckbox name="lame" label="Lame" isDisabled={true} />
+        <SQFormRadioButtonGroup
+          name="preferredPet"
+          groupLabel="Cat or Dog?"
+          shouldDisplayInRow={true}
+        >
+          {RADIO_GROUP_OPTIONS}
+        </SQFormRadioButtonGroup>
         <Grid item sm={12}>
           <Grid container justify="space-between">
             <SQFormResetButtonWithConfirmation
@@ -169,6 +184,7 @@ export const formWithValidation = () => {
       .required('Required'),
     state: Yup.string().required('Required'),
     tenThousandOptions: Yup.string().required('Required'),
+    preferredPet: Yup.string().required('Required'),
     note: Yup.string().required('Required')
   };
 
@@ -217,6 +233,14 @@ export const formWithValidation = () => {
           isRequired={true}
         />
         <SQFormTextarea name="note" label="Note" size={5} isRequired={true} />
+        <SQFormRadioButtonGroup
+          name="preferredPet"
+          groupLabel="Cat or Dog?"
+          shouldDisplayInRow={true}
+          isRequired={true}
+        >
+          {RADIO_GROUP_OPTIONS}
+        </SQFormRadioButtonGroup>
         <Grid item sm={12}>
           <Grid container justify="space-between">
             <SQFormButton title="Reset" type="reset">

stories/SQFormRadioGroup.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import {SQForm} from 'scplus-shared-components';
+import * as Yup from 'yup';
+import Card from '@material-ui/core/Card';
+import Grid from '@material-ui/core/Grid';
+import {SQFormButton, SQFormRadioButtonGroup} from '../src';
+
+export default {
+  title: 'SQFormRadioGroup'
+};
+
+export const radioGroup = () => {
+  const initialValues = {
+    testGroup: 'test1'
+  };
+
+  const validationSchema = {
+    testGroup: Yup.string().required('Required')
+  };
+
+  const onSubmit = formValues => {
+    const selectedRadioValue = formValues.testGroup;
+    window.alert(`Selected Radio Value: ${selectedRadioValue}`);
+  };
+
+  const radioOptions = [
+    {label: 'Test1', value: 'test1'},
+    {label: 'Test2', value: 'test2', isDisabled: true},
+    {label: 'Test3', value: 'test3'}
+  ];
+
+  return (
+    <Card raised style={{padding: 16}}>
+      <SQForm
+        initialValues={initialValues}
+        onSubmit={onSubmit}
+        validationSchema={validationSchema}
+      >
+        <SQFormRadioButtonGroup
+          name="testGroup"
+          groupLabel="Radio Group"
+          isRequired
+        >
+          {radioOptions}
+        </SQFormRadioButtonGroup>
+        <Grid item sm={12}>
+          <SQFormButton>Submit</SQFormButton>
+        </Grid>
+      </SQForm>
+    </Card>
+  );
+};