Web: components: RadioButtonGroup: added spaceBtwnElems prop

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

@@ -39,6 +39,7 @@ class RadioButtonGroup extends React.Component {
               onChange={this.handleOptionChange}
               disabled={option.disabled}
               label={option.label}
+              spaceBtwnElems={this.props.spaceBtwnElems}
             />
               )
             }
@@ -56,11 +57,13 @@ RadioButtonGroup.propTypes = {
                             label: PropTypes.string,
                             disabled: PropTypes.bool
                           })).isRequired,
-  selected: PropTypes.string.isRequired
+  selected: PropTypes.string.isRequired,
+  spaceBtwnElems: PropTypes.number
 }
 
 RadioButtonGroup.defaultProps = {
-  selected: undefined
+  selected: undefined,
+  spaceBtwnElems: '33'
 }
 
 export default RadioButtonGroup;

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

@@ -84,7 +84,7 @@ const StyledText = styled(TextBody)`
 
 const StyledSpan = styled.span`
   &:not(:first-child) {
-    margin-left: 33px;
+    margin-left: ${props => props.spaceBtwnElems}px;
   }
 `;
 
@@ -96,7 +96,7 @@ class RadioButton extends React.Component {
       (this.props.disabled ? ' disabled' : '');
 
     return (
-      <StyledSpan>
+      <StyledSpan spaceBtwnElems={this.props.spaceBtwnElems}>
         <Label>
           <span>
             <Input type='radio'

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

@@ -29,7 +29,8 @@ import { RadioButtonGroup } from 'asc-web-components';
 | ---------------------- | -------- | :------: | ---------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
 | `name`                 | `string` |    ✅     | -                            | -       | Used as HTML `name` property for `<input>` tag. Used for identification RadioButtonGroup                             
 | `selected`                | `string` |    ✅    | -                            | -       | Value of the selected radiobutton      
-| `options`                | `arrayOf` |    ✅    | -                            | -       | Radiobuttons data: it is array of objects, each of this can include next information: `value` (required), `label`, `disabled`
+| `options`                | `arrayOf` |    ✅    | -           | -       | Radiobuttons data: it is array of objects, each of this can include next information: `value` (required), `label`, `disabled`
+| `spaceBtwnElems`                | `number` |    -    | -           | 33       | Margin (in px) between radiobuttons
 
 #### Prop `options`
 

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

@@ -16,7 +16,8 @@ storiesOf('Components|Input', module)
         <>
         <div> First list</div>
           <RadioButtonGroup
-           selected='apple' 
+           selected='apple'
+           spaceBtwnElems='50' 
            name="test" 
            options={
                     [