added radio group

Author: prasanna1211

src/checkboxGroup/index.js

@@ -57,10 +57,12 @@ class CheckboxGroup extends React.Component {
 CheckboxGroup.propTypes = {
   options: PropTypes.array.isRequired,
   inline: PropTypes.bool,
+  theme: PropTypes.string,
 };
 
 CheckboxGroup.defaultProps = {
   inline: false,
+  theme: '',
 };
 
 export default CheckboxGroup;

src/index.js

@@ -1,14 +1,29 @@
-import Button from './button';
-import Card from './card';
-import Checkbox from './checkbox';
-import CheckboxGroup from './checkboxGroup';
-import Toggle from './toggle';
-
-export default {
-  Button,
-  Card,
-  Checkbox,
-  CheckboxGroup,
-  Toggle,
-};
+// import Button from './button';
+// import Card from './card';
+// import Checkbox from './checkbox';
+// import CheckboxGroup from './checkboxGroup';
+// import Toggle from './toggle';
 
+// export default {
+//   Button,
+//   Card,
+//   Checkbox,
+//   CheckboxGroup,
+//   Toggle,
+// };
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import RadioButtonGroup from './radioButtonGroup';
+
+const options = [{ label: 'Alpha' }, { label: 'Beta' }, { label: 'Zheta' }]
+const RadioDisplay = () => (
+  <div>
+    <RadioButtonGroup
+      options={options}
+    />
+  </div>
+);
+
+ReactDOM.render(<RadioDisplay />, document.getElementById('index'));

src/radioButtonGroup/index.js

@@ -10,18 +10,14 @@ class CheckboxGroup extends React.Component {
     super(props);
 
     this.state = {
-      isChecked: props.options.reduce((accumulator, { label, value }) => { 
-          accumulator[label] = false;
-          return accumulator;
-        }, {}),
+      currentlyActive: '',
     }
   }
 
-  handleCheckListChange = (label) => {
-    const isChecked = this.state.isChecked;
-    isChecked[label] = !isChecked[label];
+  handleCheckListChange = (currentlyActive) => {
+    console.log(currentlyActive);
     this.setState({
-      isChecked,
+      currentlyActive,
     });
   }
 
@@ -36,8 +32,12 @@ class CheckboxGroup extends React.Component {
     return options.map(option => (
       <React.Fragment key={option.label}>
         <div className={classNames}>
-          <div className={cx(styles['each-check'], { inline })}>
-            <input type="radio" />
+          <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' : '' })}>
+                <input type="radio" />
+              </label>
+            </label>
             <label className={styles['each-label']}>
               {option.label}
             </label>
@@ -52,10 +52,12 @@ class CheckboxGroup extends React.Component {
 CheckboxGroup.propTypes = {
   options: PropTypes.array.isRequired,
   inline: PropTypes.bool,
+  theme: PropTypes.string,
 };
 
 CheckboxGroup.defaultProps = {
   inline: false,
+  theme: '',
 };
 
 export default CheckboxGroup;

src/radioButtonGroup/theme.scss

@@ -0,0 +1,36 @@
+@import '../globals/theme';
+
+:local(.radio-group) {
+  input {
+    position: relative;
+    opacity: 0;
+    cursor: pointer;
+  }
+  .clearfix {
+    clear: both;
+  }
+}
+
+:local(.each-check) {
+  &.inline {
+    float: left;
+    margin-right: 25px;
+  }
+  margin-bottom: 15px;
+}
+
+:local(.each-label) {
+  margin-left: 10px;
+}
+
+:local(.customized-radio) {
+  border: 1px solid $secondary-grey;
+  border-radius: 50%;
+  padding: 3px;
+  .inner {
+    border-radius: 50%;
+    &.active {
+      background: $secondary-blue;
+    }
+  }
+}