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,77 @@
+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,
+  size = 'auto',
+  groupLabel,
+  children
+}) {
+  const {
+    formikField: {field},
+    fieldHelpers: {handleChange, HelperTextComponent}
+  } = useForm({
+    name,
+    isRequired,
+    onChange
+  });
+
+  const childrenToRadioOptionComponents = () => {
+    return children.map(radioOption => {
+      return (
+        <SQFormRadioButtonGroupItem
+          label={radioOption.label}
+          value={radioOption.value}
+          key={`SQFormRadioButtonGroupItem_${radioOption.value}`}
+        />
+      );
+    });
+  };
+
+  return (
+    <Grid item sm={size}>
+      <InputLabel id={groupLabel.toLowerCase()}>{groupLabel}</InputLabel>
+      <RadioGroup
+        value={field.value}
+        aria-label={`SQFormRadioButtonGroup_${name}`}
+        name={name}
+        onChange={handleChange}
+      >
+        {childrenToRadioOptionComponents()}
+      </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,
+  /** 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
+    }).isRequired
+  ).isRequired
+};
+
+export default SQFormRadioButtonGroup;

src/components/SQForm/SQFormRadioButtonGroupItem.js

@@ -0,0 +1,17 @@
+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}) {
+  return <FormControlLabel value={value} label={label} control={<Radio />} />;
+}
+
+SQFormRadioButtonGroupItem.propTypes = {
+  /** Value of the radio button */
+  value: PropTypes.any.isRequired,
+  /** Label for the radio button */
+  label: PropTypes.string.isRequired
+};
+
+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/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: ''
+  };
+
+  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'},
+    {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>
+  );
+};