IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Added id, className and style property for RadioButton component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 15:39:07 +03:00
parent f08a44a5b2
commit f79e785173
3 changed files with 62 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/ASC.Web.Components/src/components/radio-button/README.md
View File

@ -16,11 +16,14 @@ import { RadioButton } from "asc-web-components";
`<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 |
| `onClick` | `func` | - | - | - | Allow you to handle clicking events on component |
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :----: | :-----: | ----------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isChecked` | `bool` | - | - | `false` | Used as HTML `checked` property for each `<input>` tag |
| `isDisabled` | `bool` | - | - | `false` | Used as HTML `disabled` property for each `<input>` tag |
| `label` | `string` | - | - | - | Name of the radiobutton. If missed, `value` will be used |
| `name` | `string` | ✅ | - | - | Used as HTML `name` property for `<input>` 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 `<input>` tag. Used for identification each radiobutton |

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

@ -9,6 +9,7 @@ const hoverColor = disableColor;
const internalCircleDisabledColor = '#D0D5DA';
const externalCircleDisabledColor = '#eceef1';
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearLabel = ({ spacing, isDisabled, ...props }) => <label {...props} />
const Label = styled(ClearLabel)`
display: flex;
@ -56,6 +57,7 @@ const Input = styled.input`
opacity: 0.0001;
`;
// eslint-disable-next-line react/prop-types
const RadiobuttonIcon = ({ isChecked, isDisabled }) => {
const iconName = isChecked
? "RadiobuttonCheckedIcon"
@ -93,12 +95,15 @@ class RadioButton extends React.Component {
render() {
const colorProps = this.props.isDisabled ? {color: disableColor} : {};
const colorProps = this.props.isDisabled ? { color: disableColor } : {};
return (
<Label
spacing={this.props.spacing}
isDisabled={this.props.isDisabled}>
isDisabled={this.props.isDisabled}
id={this.props.id}
className={this.props.className}
style={this.props.style}>
<Input type='radio'
name={this.props.name}
value={this.props.value}
@ -128,6 +133,10 @@ RadioButton.propTypes = {
onChange: PropTypes.func,
onClick: PropTypes.func,
value: PropTypes.string.isRequired,
spacing: PropTypes.number,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
RadioButton.defaultProps = {

44
web/ASC.Web.Components/src/components/radio-button/radio-button.test.js
View File

@ -2,16 +2,50 @@ import React from 'react';
import { mount } from 'enzyme';
import RadioButton from '.';
const baseProps = {
name: 'fruits',
value: 'apple',
label: 'Sweet apple'
};
describe('<RadioButton />', () => {
it('renders without error', () => {
const wrapper = mount(
<RadioButton
name='fruits'
value= 'apple'
label= 'Sweet apple'
/>
<RadioButton {...baseProps} />
);
expect(wrapper).toExist();
});
it('accepts id', () => {
const wrapper = mount(
<RadioButton {...baseProps} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<RadioButton {...baseProps} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<RadioButton {...baseProps} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
it('accepts isDisabled prop', () => {
const wrapper = mount(
<RadioButton {...baseProps} isDisabled />
);
expect(wrapper.prop('isDisabled')).toEqual(true);
});
});