web: Components: Added id, className and style property for ToggleContent component. Added tests.
This commit is contained in:
parent
965312beb3
commit
1050634116
@ -16,7 +16,10 @@ import { ToggleContent } from "asc-web-components";
|
|||||||
|
|
||||||
#### Properties
|
#### Properties
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
| Props | Type | Required | Values | Default | Description |
|
||||||
| -------- | :----: | :------: | :----: | :----------: | ----------------------- |
|
| ----------- | :------------: | :------: | :----: | :----------: | ----------------------- |
|
||||||
| `label` | `text` | ✅ | - | `Some label` | Define label for header |
|
| `className` | `string` | - | - | - | Accepts class |
|
||||||
| `isOpen` | `bool` | - | - | `false` | State of component |
|
| `id` | `string` | - | - | - | Accepts id |
|
||||||
|
| `isOpen` | `bool` | - | - | `false` | State of component |
|
||||||
|
| `label` | `text` | ✅ | - | `Some label` | Define label for header |
|
||||||
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||||
|
@ -11,7 +11,8 @@ display: ${props => props.isOpen ? 'block' : 'none'};
|
|||||||
padding-top: 9px;
|
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)`
|
const Arrow = styled(IconArrow)`
|
||||||
|
|
||||||
@ -56,7 +57,11 @@ class ToggleContent extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
//console.log("ToggleContent render");
|
//console.log("ToggleContent render");
|
||||||
return (
|
return (
|
||||||
<div className={this.props.className}>
|
<div
|
||||||
|
className={this.props.className}
|
||||||
|
id={this.props.id}
|
||||||
|
style={this.props.style}
|
||||||
|
>
|
||||||
<StyledSpan onClick={() => {
|
<StyledSpan onClick={() => {
|
||||||
this.toggleContent(!this.state.isOpen);
|
this.toggleContent(!this.state.isOpen);
|
||||||
this.props.onChange && this.props.onChange(!this.state.isOpen);
|
this.props.onChange && this.props.onChange(!this.state.isOpen);
|
||||||
@ -74,7 +79,10 @@ ToggleContent.propTypes = {
|
|||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
isOpen: PropTypes.bool,
|
isOpen: PropTypes.bool,
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
className: PropTypes.string
|
className: PropTypes.string,
|
||||||
|
children: PropTypes.any,
|
||||||
|
id: PropTypes.string,
|
||||||
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||||
}
|
}
|
||||||
|
|
||||||
ToggleContent.defaultProps = {
|
ToggleContent.defaultProps = {
|
||||||
|
@ -12,4 +12,28 @@ describe('<ToggleContent />', () => {
|
|||||||
|
|
||||||
expect(wrapper).toExist();
|
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');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user