feat(core-radio): add description text functionality

packages/Radio/Radio.jsx

@@ -9,7 +9,7 @@ import styles from './Radio.modules.scss'
  * @version ./package.json
  */
 const Radio = props => (
-  <Choice {...props} type="radio" inputTypeStyles={styles}>
+  <Choice {...props} type="radio" inputTypeStyles={styles} description={props.description}>
     {(checked, disabled) => {
       return (
         checked && (
@@ -37,9 +37,13 @@ Radio.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
   /**
-   * The checked state
+   * The checked state.
    */
   checked: PropTypes.bool,
+  /**
+   * Description text below the radio.
+   */
+  description: PropTypes.string,
   /**
    * A feedback state.
    */
@@ -66,6 +70,7 @@ Radio.propTypes = {
 
 Radio.defaultProps = {
   checked: false,
+  description: undefined,
   feedback: undefined,
   onChange: undefined,
   onFocus: undefined,

packages/Radio/Radio.md

@@ -31,13 +31,15 @@ const setChoice = event => {
     label="e.Bill"
     name="monthly-bill"
     value="e.bill"
+    description="View your bill offline."
     checked={state.choice === 'e.bill'}
     onChange={setChoice}
   />
   <Radio
     label="Paper bill"
     name="monthly-bill"
     value="paper bill"
+    description="Receive your bill in the mail on a monthly basis."
     checked={state.choice === 'paper bill'}
     onChange={setChoice}
   />

packages/Radio/__tests__/Radio.spec.jsx

@@ -21,6 +21,7 @@ describe('Radio', () => {
     return {
       radio,
       label: radio.find('label'),
+      description: () => radio.find('[data-testid="description"]'),
       findRadioElement,
       findFakeRadio: () => radio.find('[data-testid="fake-input"]'),
       findFakeInnerRadio: () => radio.find('[data-testid="fake-inner-radio"]'),
@@ -50,6 +51,12 @@ describe('Radio', () => {
     expect(label).toContainReact(<Text size="medium">Some label</Text>)
   })
 
+  it('will display a description if defined', () => {
+    const { description } = doMount({ description: 'This is a description.' })
+
+    expect(description()).toContainReact(<Text size="small">This is a description.</Text>)
+  })
+
   it('must have a name and a value', () => {
     const { findRadioElement } = doMount({ name: 'some-radio-group', value: 'some-value' })