Merge pull request #32 from user-interviews/feature/bordered-radio

[FEAT] Add new props to radio button

Author: rsaris

.eslintrc

@@ -5,13 +5,13 @@
       "files": [
         "stories/*.{js,jsx}"
       ],
-      rules: {
-        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-      },
+      "rules": {
+        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+      }
     },
     {
       "files": [
-        "src/**/*.{js,jsx}",
+        "src/**/*.{js,jsx}"
       ],
       "env": {
         "browser": true
@@ -103,9 +103,16 @@
         "react-hooks/exhaustive-deps": "warn",
         "react-hooks/rules-of-hooks": "error",
         "semi": 0
-      },
+      }
     }
   ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["./"]
+      }
+    }
+  },
   "rules": {
     "class-methods-use-this": 0,
     "function-paren-newline": ["error", "consistent"],

.storybook/webpack.config.js

@@ -7,5 +7,10 @@ module.exports = function({ config }) {
     include: path.resolve(__dirname, '../')
   });
 
+  config.resolve.modules = [
+    ...(config.resolve.modules || []),
+    path.resolve('./'),
+  ];
+
   return config;
 };

src/RadioButton/RadioButton.jsx

@@ -1,27 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import './RadioButton.scss';
 
 export default function RadioButton(props) {
+  const classNames = classnames('RadioButton', {
+    'RadioButton--bordered': props.bordered,
+  });
+
   return (
-    <input
-      className="RadioButton"
-      disabled={props.disabled}
-      id={props.id}
-      name={props.name}
-      type="radio"
-      {...props.radioButtonProps}
-    />
+    <label className={classNames}>
+      <input
+        className="RadioButton__input"
+        disabled={props.disabled}
+        id={props.id}
+        name={props.name}
+        type="radio"
+        {...props.radioButtonProps}
+      />
+
+      {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,
   name: PropTypes.string,
   radioButtonProps: PropTypes.object,
 };
 
 RadioButton.defaultProps = {
+  bordered: false,
+  children: null,
   disabled: false,
   name: '',
   radioButtonProps: {},

src/RadioButton/RadioButton.scss

@@ -0,0 +1,25 @@
+@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;
+    border-radius: $ux-border-radius;
+  }
+
+  &__label {
+    flex-grow: 1;
+    margin-left: 0.5rem;
+  }
+
+  &__children {
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+}

stories/RadioButton.stories.jsx

@@ -1,25 +1,33 @@
 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/Buttons/Radio Button',
+  title: 'Design System/Form Elements/Radio Button',
   component: RadioButton,
-  decorators: [withA11y, withPadding],
+  decorators: [withA11y, withPadding, withKnobs],
 };
 
 export const Default = () => (
   <RadioButton
+    bordered={boolean('Border', false)}
+    disabled={boolean('Disabled', false)}
     id="default"
+    label={text('Label', 'label')}
   />
 );
 
-export const Disabled = () => (
+export const WithChildren = () => (
   <RadioButton
-    disabled
-    id="disabled"
-  />
+    label="Option with child"
+    bordered
+    id="default"
+  >
+    <span style={{ color: palette.uxGray500 }}>Some descriptive text for the option above</span>
+  </RadioButton>
 );