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

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

Browse Source
This commit is contained in:
Ilya Oleshko 2019-11-28 13:54:14 +03:00
parent 6e0007f183
commit 95a364cdd4
3 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/ASC.Web.Components/src/components/help-button/README.md
View File

@ -49,7 +49,10 @@ import { HelpButton } from "asc-web-components";
| Props | Type | Required | Values | Default | Description |
| ------------------------- | :---------------: | :------: | :------------------------------: | :-----: | ------------------------------------------------ |
| `tooltipContent` | `object`,`string` | ✅ | - | - | Tooltip content |
| `place` | `string` | - | `top`, `right`, `bottom`, `left` | `top` | Tooltip placement |
| `className` | `string` | - | - | - | Accepts class |
| `displayType` | `oneOf` | - | `dropdown`, `aside`, `auto` | `auto` | Tooltip display type |
| `helpButtonHeaderContent` | `string` | - | - | - | Tooltip header content (tooltip opened in aside) |
| `id` | `string` | - | - | - | Accepts id |
| `place` | `string` | - | `top`, `right`, `bottom`, `left` | `top` | Tooltip placement |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tooltipContent` | `object`,`string` | ✅ | - | - | Tooltip content |

24
web/ASC.Web.Components/src/components/help-button/help-button.test.js
View File

@ -30,4 +30,28 @@ describe("<HelpButton />", () => {
wrapper.afterHide();
expect(wrapper.state.isOpen).toEqual(false);
});
it('accepts id', () => {
const wrapper = mount(
<HelpButton tooltipContent={tooltipContent} id="testId" />
);
expect(wrapper.prop('id')).toEqual('testId');
});
it('accepts className', () => {
const wrapper = mount(
<HelpButton tooltipContent={tooltipContent} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
it('accepts style', () => {
const wrapper = mount(
<HelpButton tooltipContent={tooltipContent} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
});

18
web/ASC.Web.Components/src/components/help-button/index.js
View File

@ -42,7 +42,7 @@ class HelpButton extends React.Component {
this.state = { isOpen: false, displayType: this.getTypeByWidth() };
this.ref = React.createRef();
this.refTooltip = React.createRef();
this.id = uniqueId();
this.id = this.props.id || uniqueId();
this.throttledResize = throttle(this.resize, 300);
}
@ -125,14 +125,16 @@ class HelpButton extends React.Component {
offsetRight,
offsetLeft,
zIndex,
helpButtonHeaderContent
helpButtonHeaderContent,
className,
style
} = this.props;
return (
<div ref={this.ref}>
<div ref={this.ref} style={style}>
<IconButton
id={this.id}
className="icon-button"
className={className}
isClickable={true}
iconName="QuestionIcon"
size={13}
@ -189,7 +191,10 @@ HelpButton.propTypes = {
offsetLeft: PropTypes.number,
zIndex: PropTypes.number,
displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
helpButtonHeaderContent: PropTypes.string
helpButtonHeaderContent: PropTypes.string,
className: PropTypes.string,
id: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
HelpButton.defaultProps = {
@ -197,7 +202,8 @@ HelpButton.defaultProps = {
offsetRight: 120,
offsetLeft: 0,
zIndex: 310,
displayType: "auto"
displayType: "auto",
className: "icon-button"
};
export default HelpButton;