[FEAT] Add new props to radio button

Author: SMaxOwok

src/RadioButton/RadioButton.jsx

@@ -1,27 +1,43 @@
 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>
+      )}
+    </label>
   );
 }
 
 RadioButton.propTypes = {
+  bordered: PropTypes.bool,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
   name: PropTypes.string,
   radioButtonProps: PropTypes.object,
 };
 
 RadioButton.defaultProps = {
+  bordered: false,
   disabled: false,
   name: '',
   radioButtonProps: {},

src/RadioButton/RadioButton.scss

@@ -0,0 +1,19 @@
+@import '../../scss/theme';
+@import '../../scss/borders';
+
+.RadioButton {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid transparent;
+
+  &--bordered {
+    border: 1px solid $ux-gray-400;
+    border-radius: $ux-border-radius;
+  }
+
+  &__label {
+    flex-grow: 1;
+    margin-left: 0.5rem;
+  }
+}

stories/RadioButton.stories.jsx

@@ -1,25 +1,22 @@
 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 { withPadding } from './decorators';
 
 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"
-  />
-);
-
-export const Disabled = () => (
-  <RadioButton
-    disabled
-    id="disabled"
+    label={text('Label', 'label')}
   />
 );