completed radio button group

Author: prasanna1211

src/index.js

@@ -16,12 +16,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import RadioButtonGroup from './radioButtonGroup';
+import theme from './theme.scss';
 
 const options = [{ label: 'Alpha' }, { label: 'Beta' }, { label: 'Zheta' }]
 const RadioDisplay = () => (
   <div>
     <RadioButtonGroup
+      theme={theme}
       options={options}
+      inline
     />
   </div>
 );

src/radioButtonGroup/index.js

@@ -5,13 +5,13 @@ import Checkbox from '../checkbox';
 
 import styles from './theme.scss';
 
-class CheckboxGroup extends React.Component {
+class RadioButtonGroup extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       currentlyActive: '',
-    }
+    };
   }
 
   handleCheckListChange = (currentlyActive) => {
@@ -34,7 +34,7 @@ class CheckboxGroup extends React.Component {
         <div className={classNames}>
           <div className={cx(styles['each-check'], { inline })} onClick={() => { this.handleCheckListChange(option.label)}}>
             <label className={cx(styles['customized-radio'], theme['customized-radio'])}>
-              <label className={cx('inner', { active: (option.label === this.state.currentlyActive) ? 'active' : '' })}>
+              <label className={cx('inner', { checked: (option.label === this.state.currentlyActive) ? 'active' : '' })}>
                 <input type="radio" />
               </label>
             </label>
@@ -49,15 +49,15 @@ class CheckboxGroup extends React.Component {
   }
 }
 
-CheckboxGroup.propTypes = {
+RadioButtonGroup.propTypes = {
   options: PropTypes.array.isRequired,
   inline: PropTypes.bool,
   theme: PropTypes.string,
 };
 
-CheckboxGroup.defaultProps = {
+RadioButtonGroup.defaultProps = {
   inline: false,
   theme: '',
 };
 
-export default CheckboxGroup;
+export default RadioButtonGroup;

src/radioButtonGroup/theme.scss

@@ -29,7 +29,7 @@
   padding: 3px;
   .inner {
     border-radius: 50%;
-    &.active {
+    &.checked {
       background: $secondary-blue;
     }
   }

src/theme.scss

@@ -1,7 +0,0 @@
-$secondary-grey: #d2d2d2;
-$secondary-blue: blue;
-$original-white: #ffffff;
-
-
-@import './toggle/theme.scss';
-