Merge branch 'radio-group' into 'master'

Radio group

See merge request code.brahma/react-lite-ui!4

Author: prasanna1211

docs/client/components/common/DefaultCode/RadioButtonGroup/index.js

@@ -0,0 +1,28 @@
+export const defaultCode =   `
+class Demo extends React.Component {
+  render() {
+    const options = [
+      { label: 'Alpha' }, 
+      { label: 'Beta'}, 
+      { label: 'Zheta' }
+    ];
+    return (
+      <div>
+        {/* Preview Block 1 */}
+        <PreviewBlock header="Default RadioButton group">
+          <RadioButtonGroup
+            options={options}
+          />
+        </PreviewBlock>
+        {/* Preview Block 2 */}
+        <PreviewBlock header="Inline RadioButton group">
+          <RadioButtonGroup
+            inline
+            options={options}
+          />
+        </PreviewBlock>
+      </div>
+    )
+  }
+}
+`;

docs/client/components/common/DefaultCode/index.js

@@ -2,4 +2,5 @@ export { defaultCode as CardDefaultCode } from './Card';
 export { defaultCode as ButtonDefaultCode } from './Button';
 export { defaultCode as CheckboxDefaultCode } from './Checkbox';
 export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
-export { defaultCode as ToggleDefaultCode } from './Toggle';
+export { defaultCode as ToggleDefaultCode } from './Toggle';
+export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';

docs/client/components/common/componentList.js

@@ -8,13 +8,15 @@ import CheckboxGroup from '../../../../src/checkbox';
 import CheckboxGroupReadme from '../../../../src/checkbox/readMe.md';
 import Toggle from '../../../../src/toggle';
 import ToggleReadme from '../../../../src/toggle/readMe.md';
+import RadioButtonGroup from '../../../../src/radioButtonGroup';
 
 import {
   CardDefaultCode,
   ButtonDefaultCode,
   CheckboxDefaultCode,
   CheckboxGroupDefaultCode,
   ToggleDefaultCode,
+  RadioButtonGroupDefaultCode
 } from './DefaultCode';
 
 export const componentList = [
@@ -48,4 +50,10 @@ export const componentList = [
     component: Toggle,
     defaultCode: ToggleDefaultCode,
   },
+  {
+    name: 'RadioButtonGroup',
+    docs: CheckboxGroupReadme,
+    component: RadioButtonGroup,
+    defaultCode: RadioButtonGroupDefaultCode,
+  },
 ];

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

@@ -3,12 +3,32 @@ import Card from './card';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkboxGroup';
 import Toggle from './toggle';
+import RadioButtonGroup from './radioButtonGroup';
 
 export default {
   Button,
   Card,
   Checkbox,
   CheckboxGroup,
+  RadioButtonGroup,
   Toggle,
 };
 
+// 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>
+// );
+
+// ReactDOM.render(<RadioDisplay />, document.getElementById('index'));

src/radioButtonGroup/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Checkbox from '../checkbox';
+
+import styles from './theme.scss';
+
+class RadioButtonGroup extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentlyActive: '',
+    };
+  }
+
+  handleCheckListChange = (currentlyActive) => {
+    console.log(currentlyActive);
+    this.setState({
+      currentlyActive,
+    });
+  }
+
+  render() {
+    const {
+      options,
+      inline,
+      theme,
+    } = this.props;
+
+    const classNames = cx(styles['radio-group']);
+    return options.map(option => (
+      <React.Fragment key={option.label}>
+        <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', { checked: (option.label === this.state.currentlyActive) ? 'active' : '' })}>
+                <input type="radio" />
+              </label>
+            </label>
+            <label className={styles['each-label']}>
+              {option.label}
+            </label>
+          </div>
+        </div>
+        <div className="clearfix" />
+      </React.Fragment>
+    ));
+  }
+}
+
+RadioButtonGroup.propTypes = {
+  options: PropTypes.array.isRequired,
+  inline: PropTypes.bool,
+  theme: PropTypes.string,
+};
+
+RadioButtonGroup.defaultProps = {
+  inline: false,
+  theme: '',
+};
+
+export default RadioButtonGroup;

src/radioButtonGroup/readMe.md

@@ -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%;
+    &.checked {
+      background: $secondary-blue;
+    }
+  }
+}

src/radioButtonGroup/theme.scss

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