[FEAT] Allow radio buttons to have children

Author: SMaxOwok

src/RadioButton/RadioButton.jsx

@@ -23,12 +23,19 @@ export default function RadioButton(props) {
       {props.label && (
         <span className="RadioButton__label">{props.label}</span>
       )}
+
+      {props.children && (
+        <div className="RadioButton__children">
+          {props.children}
+        </div>
+      )}
     </label>
   );
 }
 
 RadioButton.propTypes = {
   bordered: PropTypes.bool,
+  children: PropTypes.node,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
@@ -38,6 +45,7 @@ RadioButton.propTypes = {
 
 RadioButton.defaultProps = {
   bordered: false,
+  children: null,
   disabled: false,
   name: '',
   radioButtonProps: {},

src/RadioButton/RadioButton.scss

@@ -1,11 +1,12 @@
-@import '../../scss/theme';
-@import '../../scss/borders';
+@import 'scss/theme';
+@import 'scss/borders';
 
 .RadioButton {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   border: 1px solid transparent;
+  flex-wrap: wrap;
 
   &--bordered {
     border: 1px solid $ux-gray-400;
@@ -16,4 +17,9 @@
     flex-grow: 1;
     margin-left: 0.5rem;
   }
+
+  &__children {
+    margin-top: 0.5rem;
+    width: 100%;
+  }
 }

stories/RadioButton.stories.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 
-import RadioButton from '../src/RadioButton/RadioButton';
+import RadioButton from 'src/RadioButton/RadioButton';
 
-import { withPadding } from './decorators';
+import { withPadding } from 'stories/decorators';
+import { palette } from 'src/Styles';
 
 export default {
   title: 'Design System/Form Elements/Radio Button',
@@ -20,3 +21,13 @@ export const Default = () => (
     label={text('Label', 'label')}
   />
 );
+
+export const WithChildren = () => (
+  <RadioButton
+    label="Option with child"
+    bordered
+    id="default"
+  >
+    <span style={{ color: palette.uxGray500 }}>Some descriptive text for the option above</span>
+  </RadioButton>
+);