Web: components: added RadioButton component

web/ASC.Web.Components/src/components/radio-button-group/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import RadioButton from './radio-button';
+import RadioButton from '../radio-button';
 import styled from 'styled-components';
 
 const StyledDiv = styled.div`
@@ -41,13 +41,13 @@ class RadioButtonGroup extends React.Component {
               key={option.value}
               name={this.props.name}
               value={option.value}
-              checked={this.state.selectedOption === option.value}
+              isChecked={this.state.selectedOption === option.value}
               onChange={(e) => {
                 this.handleOptionChange(e);
                 this.props.onClick && this.props.onClick(e);
               }}
 
-              disabled={this.props.isDisabled || option.disabled}
+              isDisabled={this.props.isDisabled || option.disabled}
               label={option.label}
               spacing={this.props.spacing}
             />

web/ASC.Web.Components/src/components/radio-button/index.js

@@ -75,11 +75,11 @@ const Input = styled.input`
   opacity: 0.0001;
 `;
 
-const TextBody = ({disabled, ...props}) => <Text.Body {...props} />;
+const TextBody = ({ isDisabled, ...props }) => <Text.Body {...props} />;
 
 const StyledText = styled(TextBody)`
   margin-left: 4px;
-  color: ${props => props.disabled ? disableColor : activeColor};
+  color: ${props => props.isDisabled ? disableColor : activeColor};
 `;
 
 const StyledSpan = styled.span`
@@ -90,10 +90,26 @@ const StyledSpan = styled.span`
 
 class RadioButton extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isChecked: this.props.isChecked
+
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isChecked !== prevProps.isChecked) {
+      this.setState({ isChecked: this.props.isChecked });
+    }
+  };
+
+
   render() {
     const rbtnClassName = 'radiobutton' +
-      (this.props.checked ? ' checked' : '') +
-      (this.props.disabled ? ' disabled' : '');
+      (this.state.isChecked ? ' checked' : '') +
+      (this.props.isDisabled ? ' disabled' : '');
 
     return (
       <StyledSpan spacing={this.props.spacing}>
@@ -102,12 +118,15 @@ class RadioButton extends React.Component {
             <Input type='radio'
               name={this.props.name}
               value={this.props.value}
-              checked={this.props.checked}
-              onChange={this.props.onChange}
-              disabled={this.props.disabled} />
+              checked={this.props.isChecked}
+              onChange={this.props.onChange ? this.props.onChange : () => {
+                this.setState({ isChecked: true })
+                this.props.onClick && this.props.onClick(true);
+              }}
+              disabled={this.props.isDisabled} />
 
             <span className={rbtnClassName} />
-            <StyledText tag='span' disabled={this.props.disabled}>{this.props.label || this.props.value}</StyledText>
+            <StyledText tag='span' isDisabled={this.props.isDisabled}>{this.props.label || this.props.value}</StyledText>
           </span>
         </Label>
       </StyledSpan>
@@ -116,16 +135,17 @@ class RadioButton extends React.Component {
 };
 
 RadioButton.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string.isRequired,
 }
 
 RadioButton.defaultProps = {
-  disabled: false
+  isChecked: false,
+  isDisabled: false,
 }
 
 export default RadioButton;

web/ASC.Web.Components/src/index.js

@@ -36,3 +36,4 @@ export { default as Paging } from './components/paging'
 export { default as FilterInput } from './components/filter-input'
 export { default as ToggleContent } from './components/toggle-content'
 export { default as RadioButtonGroup } from './components/radio-button-group'
+export { default as RadioButton } from './components/radio-button'

web/ASC.Web.Storybook/stories/input/radio-button/README.md

@@ -0,0 +1,29 @@
+# RadioButton
+
+#### Description
+
+RadioButton allow you to add radiobutton
+
+#### Usage
+
+```js
+import { RadioButton } from 'asc-web-components';
+
+<RadioButton 
+  name='fruits' 
+  value= 'apple'
+  label= 'Sweet apple'
+  />
+```
+
+#### Properties
+`<RadioButtonGroup />` props supersede RadioButton props
+
+| Props                  | Type     | Required | Values                       | Default | Description                                                                                            |
+| ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| `value`                 | `string` |    ✅     | -                            | -       | Used as HTML `value` property for `<input>` tag. Used for identification each radiobutton
+| `name`                 | `string` |    ✅     | -                            | -       | Used as HTML `name` property for `<input>` tag.
+| `label`                | `string` |    -    | -                            | -       | Name of the radiobutton. If missed, `value` will be used
+| `isChecked`                | `bool` |    -    | -           | `false`       |  Used as HTML `checked` property for each `<input>` tag
+| `isDisabled`                | `bool` |    -    | -           | `false`       |  Used as HTML `disabled` property for each `<input>` tag
+| `onChange`                | `func` |    -    | -           | -       | Allow you to handle changing events on component

web/ASC.Web.Storybook/stories/input/radio-button/radio-button.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+import { RadioButton } from 'asc-web-components';
+import Section from '../../../.storybook/decorators/section';
+import { withKnobs, text, boolean } from '@storybook/addon-knobs/react';
+import Readme from './README.md';
+
+
+storiesOf('Components|Input', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withReadme(Readme))
+  .add('radio button', () => {
+    return (
+      <Section>
+        <>
+          <RadioButton
+            value={text('value', 'value')}
+            name={text('name', 'name')}
+            label={text('label', 'Label')}
+            isDisabled={boolean('isDisabled', false)}
+            isChecked={boolean('isChecked', false)}
+            onClick={(checked) => {
+              window.__STORYBOOK_ADDONS.channel.emit('storybookjs/knobs/change', {
+                name: 'isChecked',
+                value: checked
+              });
+            }
+            }
+          />
+        </>
+      </Section>
+    );
+  });