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
|
||||
|
||||
| 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 |
|
||||
|
@ -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 = {
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user