From b0b1b4512771c5158fccdde0257287104f6b436f Mon Sep 17 00:00:00 2001 From: Daniil Senkiv Date: Tue, 10 Dec 2019 09:28:45 +0300 Subject: [PATCH] Web.components: RadioButtonGroup: added new props: width, orientation, changed proptype spacing from number to string, applied changes to other components --- .../Section/Body/FormFields/PasswordField.js | 1 + .../Section/Body/FormFields/RadioField.js | 1 + .../security/sub-components/modules.js | 11 ++------ .../components/filter-input/sort-combobox.js | 11 +++----- .../components/radio-button-group/README.md | 24 +++++++++-------- .../components/radio-button-group/index.js | 27 ++++++++++++++----- .../radio-button-group.stories.js | 15 ++++++----- .../src/components/radio-button/README.md | 25 +++++++++-------- .../src/components/radio-button/index.js | 16 ++++++++--- 9 files changed, 76 insertions(+), 55 deletions(-) diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js index 7436f6eae1..a99b7924ab 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/PasswordField.js @@ -52,6 +52,7 @@ class PasswordField extends React.Component { isDisabled={radioIsDisabled} onClick={radioOnChange} className="radio-group" + spacing='33px' /> ); diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js index 2cf1f16688..b22ede9f8e 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/modules.js @@ -11,14 +11,6 @@ const ProjectsContainer = styled.div` align-items: flex-start; flex-direction: row; flex-wrap: wrap; - - .display-block { - display: block; - } - - div label:not(:first-child) { - margin: 0; - } `; const RadioButtonContainer = styled.div` @@ -104,7 +96,8 @@ class PureModulesSettings extends Component { }) } ]} - className="display-block" + orientation='vertical' + spacing='10px' /> diff --git a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js b/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js index 1acd7cab17..4fd5150d42 100644 --- a/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js +++ b/web/ASC.Web.Components/src/components/filter-input/sort-combobox.js @@ -16,9 +16,6 @@ const StyledComboBox = styled(ComboBox)` float: left; width: 20%; margin-left: 8px; - .display-block{ - display: block; - } @media ${mobile} { width: 50px; @@ -90,11 +87,11 @@ class SortComboBox extends React.Component { <> @@ -102,11 +99,11 @@ class SortComboBox extends React.Component { diff --git a/web/ASC.Web.Components/src/components/radio-button-group/README.md b/web/ASC.Web.Components/src/components/radio-button-group/README.md index 361df23e2a..4f09b295d9 100644 --- a/web/ASC.Web.Components/src/components/radio-button-group/README.md +++ b/web/ASC.Web.Components/src/components/radio-button-group/README.md @@ -22,14 +22,16 @@ import { RadioButtonGroup } from "asc-web-components"; ### Properties -| Props | Type | Required | Values | Default | Description | -| ------------ | :------------: | :------: | :----: | :-----: | ---------------------------------------------------------------------------------------- | -| `className` | `string` | - | - | - | Accepts class | -| `id` | `string` | - | - | - | Accepts id | -| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group | -| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `` tag. Used for identification RadioButtonGroup | -| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `` component | -| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `` component | -| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton | -| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton | -| `style` | `obj`, `array` | - | - | - | Accepts css style | +| Props | Type | Required | Values | Default | Description | +| ------------- | :------------: | :------: | :----------------------: | :----------: | ---------------------------------------------------------------------------------------- | +| `className` | `string` | - | - | - | Accepts class | +| `id` | `string` | - | - | - | Accepts id | +| `isDisabled` | `bool` | - | - | `false` | Disabling all radiobutton in group | +| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `` tag. Used for identification RadioButtonGroup | +| `onClick` | `func` | - | - | - | Allow you to handle clicking events on `` component | +| `options` | `arrayOf` | ✅ | - | - | Array of objects, contains props for each `` component | +| `selected` | `string` | ✅ | - | - | Value of the selected radiobutton | +| `style` | `obj`, `array` | - | - | - | Accepts css style | +| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons | +| `spacing` | `string` | - | - | `15px` | Margin between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) | +| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container | diff --git a/web/ASC.Web.Components/src/components/radio-button-group/index.js b/web/ASC.Web.Components/src/components/radio-button-group/index.js index 17694a55da..fcbe0ca394 100644 --- a/web/ASC.Web.Components/src/components/radio-button-group/index.js +++ b/web/ASC.Web.Components/src/components/radio-button-group/index.js @@ -1,11 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import RadioButton from '../radio-button'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; -const StyledDiv = styled.div` - display: flex; -`; +// eslint-disable-next-line react/prop-types, no-unused-vars +const ClearDiv = ({ orientation, width, ...props }) =>
+const StyledDiv = styled(ClearDiv)` + ${props => + (props.orientation === 'horizontal' && css`display: flex;`) || + (props.orientation === 'vertical' && css`display: block;`)}; + + width: ${props => props.width}; + `; class RadioButtonGroup extends React.Component { @@ -38,6 +44,8 @@ class RadioButtonGroup extends React.Component { id={this.props.id} className={this.props.className} style={this.props.style} + orientation={this.props.orientation} + width={this.props.width} > {options.map(option => { return ( @@ -54,6 +62,7 @@ class RadioButtonGroup extends React.Component { isDisabled={this.props.isDisabled || option.disabled} label={option.label} spacing={this.props.spacing} + orientation={this.props.orientation} /> ) } @@ -74,16 +83,20 @@ RadioButtonGroup.propTypes = { disabled: PropTypes.bool })).isRequired, selected: PropTypes.string.isRequired, - spacing: PropTypes.number, + spacing: PropTypes.string, className: PropTypes.string, id: PropTypes.string, - style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + orientation: PropTypes.oneOf(['horizontal', 'vertical']), + width: PropTypes.string, } RadioButtonGroup.defaultProps = { isDisabled: false, selected: undefined, - spacing: 33 + spacing: '15px', + orientation: 'horizontal', + width: '100%' } export default RadioButtonGroup; diff --git a/web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.stories.js b/web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.stories.js index 663c97b398..bf46e3df87 100644 --- a/web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.stories.js +++ b/web/ASC.Web.Components/src/components/radio-button-group/radio-button-group.stories.js @@ -3,17 +3,18 @@ import { storiesOf } from '@storybook/react'; import withReadme from 'storybook-readme/with-readme'; import RadioButtonGroup from '.'; import Section from '../../../.storybook/decorators/section'; -import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react'; +import { withKnobs, text, boolean, select } from '@storybook/addon-knobs/react'; import Readme from './README.md'; import { action } from '@storybook/addon-actions'; import { optionsKnob as options } from '@storybook/addon-knobs'; storiesOf('Components|Input', module) - .addDecorator(withKnobs) - .addDecorator(withReadme(Readme)) - .add('radio button group', () => { - +.addDecorator(withKnobs) +.addDecorator(withReadme(Readme)) +.add('radio button group', () => { + + const orientation = ['horizontal', 'vertical']; const values = ['first', 'second', 'third']; const valuesMultiSelect = { radio1: 'radio1', @@ -50,9 +51,11 @@ storiesOf('Components|Input', module) action('onChange')(e); console.log('Value of selected radiobutton: ', e.target.value); }} + orientation={select('orientation', orientation, 'horizontal')} + width={text('width', '100%')} isDisabled={boolean('isDisabled', false)} selected={values[0]} - spacing={number('spacing', 33)} + spacing={text('spacing', '15px')} name={text('name', 'group')} options={children} /> diff --git a/web/ASC.Web.Components/src/components/radio-button/README.md b/web/ASC.Web.Components/src/components/radio-button/README.md index e2cc18b367..a263f736f9 100644 --- a/web/ASC.Web.Components/src/components/radio-button/README.md +++ b/web/ASC.Web.Components/src/components/radio-button/README.md @@ -16,14 +16,17 @@ import { RadioButton } from "asc-web-components"; `` props supersede RadioButton props -| Props | Type | Required | Values | Default | Description | -| ------------ | :------------: | :------: | :----: | :-----: | ----------------------------------------------------------------------------------------- | -| `className` | `string` | - | - | - | Accepts class | -| `id` | `string` | - | - | - | Accepts id | -| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `` tag | -| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `` tag | -| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used | -| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `` tag. | -| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component | -| `style` | `obj`, `array` | - | - | - | Accepts css style | -| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `` tag. Used for identification each radiobutton | +| Props | Type | Required | Values | Default | Description | +| ------------- | :------------: | :------: | :----------------------: | :----------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `className` | `string` | - | - | - | Accepts class | +| `id` | `string` | - | - | - | Accepts id | +| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `` tag | +| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `` tag | +| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used | +| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `` tag. | +| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component | +| `style` | `obj`, `array` | - | - | - | Accepts css style | +| `value` | `string` | ✅ | - | - | Used as HTML `value` property for `` tag. Used for identification each radiobutton | +| `orientation` | `oneOf` | - | `vertical`, `horizontal` | `horizontal` | Position of radiobuttons | +| `spacing` | `number` | - | - | `33` | Margin (in px) between radiobutton. If orientation `horizontal`, it is `margin-left`(apply for all radiobuttons, except first), if orientation `vertical`, it is `margin-bottom`(apply for all radiobuttons, except last) | +| `width` | `string` | - | - | `100%` | Width of RadioButtonGroup container | diff --git a/web/ASC.Web.Components/src/components/radio-button/index.js b/web/ASC.Web.Components/src/components/radio-button/index.js index f06bc5e6dd..64b678891a 100644 --- a/web/ASC.Web.Components/src/components/radio-button/index.js +++ b/web/ASC.Web.Components/src/components/radio-button/index.js @@ -10,7 +10,7 @@ const internalCircleDisabledColor = '#D0D5DA'; const externalCircleDisabledColor = '#eceef1'; // eslint-disable-next-line react/prop-types, no-unused-vars -const ClearLabel = ({ spacing, isDisabled, ...props }) =>