Merge pull request #285 from uktrade/field-radios-inline

feat: Add inline prop to FieldRadios
uktrade · Mar 23, 2020 · 1bedb8b · 1bedb8b
2 parents e755452 + a8a7746
commit 1bedb8b
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 21 deletions.
diff --git a/src/forms/elements/FieldRadios.jsx b/src/forms/elements/FieldRadios.jsx
@@ -9,6 +9,16 @@ import FieldWrapper from './FieldWrapper'
 
 const StyledChildField = styled('div')`
   margin-left: 55px;
+  clear: both;
+`
+
+const StyledRadio = styled(Radio)`
+  ${(props) =>
+    props.inline &&
+    `
+      float: left;
+      clear: none;
+    `}
 `
 
 const FieldRadios = ({
@@ -18,6 +28,7 @@ const FieldRadios = ({
   label,
   legend,
   hint,
+  inline,
   options,
 }) => {
   const { value, error, touched, onChange, onBlur } = useField({
@@ -36,9 +47,9 @@ const FieldRadios = ({
             children: optionChildren,
             ...optionProps
           }) => (
-            <div key={optionValue}>
-              <Radio
-                key={optionValue}
+            <React.Fragment key={optionValue}>
+              <StyledRadio
+                inline={inline}
                 value={optionValue}
                 checked={value === optionValue}
                 onChange={onChange}
@@ -47,12 +58,12 @@ const FieldRadios = ({
                 {...optionProps}
               >
                 {optionLabel}
-              </Radio>
+              </StyledRadio>
 
-              {value === optionValue && (
+              {value === optionValue && optionChildren && (
                 <StyledChildField>{optionChildren}</StyledChildField>
               )}
-            </div>
+            </React.Fragment>
           )
         )}
       </MultiChoice>
@@ -70,10 +81,12 @@ FieldRadios.propTypes = {
   label: PropTypes.node,
   legend: PropTypes.node,
   hint: PropTypes.node,
+  inline: PropTypes.bool,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string.isRequired,
       value: PropTypes.string.isRequired,
+      hint: PropTypes.node,
       children: PropTypes.node,
     })
   ),
@@ -85,6 +98,7 @@ FieldRadios.defaultProps = {
   label: null,
   legend: null,
   hint: null,
+  inline: false,
   options: [],
 }
 

diff --git a/src/forms/elements/FieldWrapper.jsx b/src/forms/elements/FieldWrapper.jsx
@@ -107,7 +107,7 @@ const FieldWrapper = ({
 )
 
 FieldInner.propTypes = {
-  legend: PropTypes.string,
+  legend: PropTypes.node,
   error: PropTypes.string,
   showBorder: PropTypes.bool,
   children: PropTypes.node,

diff --git a/src/forms/elements/__stories__/FieldRadios.stories.jsx b/src/forms/elements/__stories__/FieldRadios.stories.jsx
@@ -44,6 +44,15 @@ storiesOf('Forms', module).add('FieldRadios', () => (
           options={options}
         />
 
+        <FieldRadios
+          inline={true}
+          name="inline"
+          label="Inline radios"
+          hint="Some hint"
+          required="Specify where the company is based"
+          options={options.map((o) => ({ ...o, hint: null }))}
+        />
+
         <FieldRadios
           name="companyLocation2"
           legend={<H1>Using H1 as legend</H1>}

diff --git a/src/forms/elements/__tests__/FieldRadios.test.jsx b/src/forms/elements/__tests__/FieldRadios.test.jsx
@@ -7,6 +7,18 @@ import HintText from '@govuk-react/hint-text'
 import FormStateful from '../FormStateful'
 import FieldRadios from '../FieldRadios'
 
+const options = [
+  {
+    label: 'testOptionLabel1',
+    value: 'testOptionValue1',
+    children: 'testChildren',
+  },
+  {
+    label: 'testOptionLabel2',
+    value: 'testOptionValue2',
+  },
+]
+
 describe('FieldRadios', () => {
   let wrapper
 
@@ -72,13 +84,7 @@ describe('FieldRadios', () => {
     beforeAll(() => {
       wrapper = mount(
         <FormStateful>
-          <FieldRadios
-            name="testField"
-            options={[
-              { label: 'testOptionLabel1', value: 'testOptionValue1' },
-              { label: 'testOptionLabel2', value: 'testOptionValue2' },
-            ]}
-          />
+          <FieldRadios name="testField" options={options} />
         </FormStateful>
       )
       radios = wrapper.find(Radio)
@@ -130,13 +136,7 @@ describe('FieldRadios', () => {
         <FormStateful>
           {(form) => (
             <>
-              <FieldRadios
-                name="testField"
-                options={[
-                  { label: 'testOptionLabel1', value: 'testOptionValue1' },
-                  { label: 'testOptionLabel2', value: 'testOptionValue2' },
-                ]}
-              />
+              <FieldRadios name="testField" options={options} />
               <div id="values">{form.values.testField}</div>
             </>
           )}
@@ -166,5 +166,37 @@ describe('FieldRadios', () => {
           .prop('checked')
       ).toBeTruthy()
     })
+
+    test('should render children', () => {
+      expect(wrapper.text()).toContain('testChildren')
+    })
+  })
+
+  describe('when the field pass inline prop as TRUE', () => {
+    beforeAll(() => {
+      wrapper = mount(
+        <FormStateful>
+          <FieldRadios name="testField" inline={true} options={options} />
+        </FormStateful>
+      )
+    })
+
+    test('should render the radios inline', () => {
+      expect(wrapper.find(Radio)).toHaveStyleRule('float', 'left')
+    })
+  })
+
+  describe('when the field pass inline prop as FALSE', () => {
+    beforeAll(() => {
+      wrapper = mount(
+        <FormStateful>
+          <FieldRadios name="testField" options={options} />
+        </FormStateful>
+      )
+    })
+
+    test('should render the radios NOT inline', () => {
+      expect(wrapper.find(Radio)).not.toHaveStyleRule('float', 'left')
+    })
   })
 })