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 ToggleContent component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 16:50:14 +03:00
parent 965312beb3
commit 1050634116
3 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/ASC.Web.Components/src/components/toggle-content/README.md
View File

@ -16,7 +16,10 @@ import { ToggleContent } from "asc-web-components";
#### Properties
| Props | Type | Required | Values | Default | Description |
| -------- | :----: | :------: | :----: | :----------: | ----------------------- |
| `label` | `text` | ✅ | - | `Some label` | Define label for header |
| `isOpen` | `bool` | - | - | `false` | State of component |
| Props | Type | Required | Values | Default | Description |
| ----------- | :------------: | :------: | :----: | :----------: | ----------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `id` | `string` | - | - | - | Accepts id |
| `isOpen` | `bool` | - | - | `false` | State of component |
| `label` | `text` | ✅ | - | `Some label` | Define label for header |
| `style` | `obj`, `array` | - | - | - | Accepts css style |

14
web/ASC.Web.Components/src/components/toggle-content/index.js
View File

@ -11,7 +11,8 @@ display: ${props => props.isOpen ? 'block' : 'none'};
padding-top: 9px;
`;
const IconArrow= ({ isOpen, ...props }) => <Icons.ArrowContentIcon {...props} />;
// eslint-disable-next-line react/prop-types, no-unused-vars
const IconArrow = ({ isOpen, ...props }) => <Icons.ArrowContentIcon {...props} />;
const Arrow = styled(IconArrow)`
@ -56,7 +57,11 @@ class ToggleContent extends React.Component {
render() {
//console.log("ToggleContent render");
return (
<div className={this.props.className}>
<div
className={this.props.className}
id={this.props.id}
style={this.props.style}
>
<StyledSpan onClick={() => {
this.toggleContent(!this.state.isOpen);
this.props.onChange && this.props.onChange(!this.state.isOpen);
@ -74,7 +79,10 @@ ToggleContent.propTypes = {
label: PropTypes.string.isRequired,
isOpen: PropTypes.bool,
onChange: PropTypes.func,
className: PropTypes.string
className: PropTypes.string,
children: PropTypes.any,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
ToggleContent.defaultProps = {

24
web/ASC.Web.Components/src/components/toggle-content/toggle-content.test.js
View File

@ -12,4 +12,28 @@ describe('<ToggleContent />', () => {
expect(wrapper).toExist();
});
it('accepts id', () => {
const wrapper = mount(
<ToggleContent id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<ToggleContent className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<ToggleContent style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});