From 2029236846cd126526e3c88ef390548fe573dcad Mon Sep 17 00:00:00 2001
From: Conor Hawes <conor@launchpadlab.com>
Date: Wed, 9 Oct 2019 15:49:54 -0500
Subject: [PATCH 1/2] Default label component to a legend for checkbox group

---
 src/forms/inputs/checkbox-group.js       | 13 +++++++++-
 test/forms/inputs/checkbox-group.test.js | 33 +++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/forms/inputs/checkbox-group.js b/src/forms/inputs/checkbox-group.js
index ab04878f..f4965ae8 100644
--- a/src/forms/inputs/checkbox-group.js
+++ b/src/forms/inputs/checkbox-group.js
@@ -8,6 +8,7 @@ import {
 } from '../helpers'
 import { LabeledField } from '../labels'
 import { addToArray, removeFromArray, serializeOptions, compose } from '../../utils'
+import { convertNameToLabel } from '../helpers'
 
 /**
  *
@@ -59,6 +60,12 @@ const defaultProps = {
   options: []
 }
 
+function CheckboxGroupLegend ({ name, label }) {
+  return (
+    <legend>{ label || convertNameToLabel(name) }</legend>
+  )
+}
+
 function CheckboxGroup (props) {
   const {
     input: { value, onChange, name },
@@ -76,7 +83,11 @@ function CheckboxGroup (props) {
     }
   }
   return (
-    <LabeledField className="CheckboxGroup" { ...props }>
+    <LabeledField
+      className="CheckboxGroup"
+      labelComponent={ CheckboxGroupLegend }
+      { ...props }
+    >
       {
         optionObjects.map((option, i) => {
           return (
diff --git a/test/forms/inputs/checkbox-group.test.js b/test/forms/inputs/checkbox-group.test.js
index 074f5723..9d99481e 100644
--- a/test/forms/inputs/checkbox-group.test.js
+++ b/test/forms/inputs/checkbox-group.test.js
@@ -36,4 +36,35 @@ test('CheckboxGroup removes value to array when selected option clicked', () =>
   wrapper.find('input').simulate('change')
   const newValue = onChange.mock.calls[0][0]
   expect(newValue).toEqual([])
-})
\ No newline at end of file
+})
+
+test('CheckboxGroup has a legend with the group\'s name by default', () => {
+  const props = { 
+    input: {
+      name: 'testGroup',
+      value: '',
+    }, 
+    meta: {},
+    options: ['TOGGLED_OPTION']
+  }
+  const wrapper = mount(<CheckboxGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Test Group')
+})
+
+test('CheckboxGroup has a legend with the group\'s label (when provided)', () => {
+  const props = { 
+    input: {
+      name: 'testGroup',
+      value: '',
+    },
+    label: 'Checkbox Group',
+    meta: {},
+    options: ['TOGGLED_OPTION']
+  }
+  const wrapper = mount(<CheckboxGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Checkbox Group')
+})

From 020514286b2a0e4e0fff1bc4a7306959381c866b Mon Sep 17 00:00:00 2001
From: Conor Hawes <conor@launchpadlab.com>
Date: Wed, 9 Oct 2019 15:50:17 -0500
Subject: [PATCH 2/2] Default label component to a legend for radio group

---
 src/forms/inputs/radio-group.js       | 13 ++++++++++-
 test/forms/inputs/radio-group.test.js | 33 +++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/forms/inputs/radio-group.js b/src/forms/inputs/radio-group.js
index b0a11efb..8ee0a564 100644
--- a/src/forms/inputs/radio-group.js
+++ b/src/forms/inputs/radio-group.js
@@ -2,6 +2,7 @@ import React from 'react'
 // import PropTypes from 'prop-types'
 import Input from './input'
 import {
+  convertNameToLabel,
   fieldPropTypes,
   fieldOptionsType,
   omitLabelProps,
@@ -58,6 +59,12 @@ const defaultProps = {
   options: []
 }
 
+function RadioGroupLegend ({ label, name }) {
+  return (
+    <legend>{ label || convertNameToLabel(name) }</legend>
+  )
+}
+
 function RadioGroup (props) {
   const {
     input: { value, onChange, name },
@@ -67,7 +74,11 @@ function RadioGroup (props) {
   } = omitLabelProps(props)
   const optionObjects = serializeOptions(options)
   return (
-    <LabeledField className="RadioGroup" { ...props }>
+    <LabeledField
+      className="RadioGroup"
+      labelComponent={ RadioGroupLegend }
+      { ...props }
+    >
       {
         optionObjects.map((option, i) => {
           return (
diff --git a/test/forms/inputs/radio-group.test.js b/test/forms/inputs/radio-group.test.js
index 52caa88a..25c94b41 100644
--- a/test/forms/inputs/radio-group.test.js
+++ b/test/forms/inputs/radio-group.test.js
@@ -34,3 +34,36 @@ test('A RadioGroup\'s inputs all have the same name', () => {
   expect(wrapper.find('input').first().prop('name')).toEqual(name)
   expect(wrapper.find('input').last().prop('name')).toEqual(name)
 })
+
+test('A RadioGroup has a legend with the group\'s name by default', () => {
+  const name = "sameName"
+  const props = { 
+    input: {
+      name,
+      value: '',
+    }, 
+    meta: {},
+    options: ['Option 1', 'Option 2']
+  }
+  const wrapper = mount(<RadioGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Same Name')
+})
+
+test('A RadioGroup has a legend with the group\'s label (when provided)', () => {
+  const name = "sameName"
+  const props = { 
+    input: {
+      name,
+      value: '',
+    }, 
+    meta: {},
+    label: "Different Name",
+    options: ['Option 1', 'Option 2']
+  }
+  const wrapper = mount(<RadioGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Different Name')
+})