@woosmap/ui 4.9.0 → 4.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/encodings.xml +6 -0
- package/.idea/inspectionProfiles/Project_Default.xml +18 -0
- package/.idea/inspectionProfiles/profiles_settings.xml +6 -0
- package/.idea/misc.xml +4 -0
- package/.idea/modules.xml +8 -0
- package/.idea/prettier.xml +6 -0
- package/.idea/ui.iml +15 -0
- package/.idea/vcs.xml +6 -0
- package/package.json +1 -1
- package/src/components/Dropdown/Dropdown.js +34 -13
- package/src/components/Dropdown/Dropdown.stories.js +7 -1
- package/src/components/Dropdown/Dropdown.test.js +19 -1
- package/src/components/UseCase/UseCase.styl +1 -2
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<component name="InspectionProjectProfileManager">
|
|
2
|
+
<profile version="1.0">
|
|
3
|
+
<option name="myName" value="Project Default" />
|
|
4
|
+
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
|
5
|
+
<inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
|
|
6
|
+
<option name="ignoredPackages">
|
|
7
|
+
<value>
|
|
8
|
+
<list size="4">
|
|
9
|
+
<item index="0" class="java.lang.String" itemvalue="Fabric" />
|
|
10
|
+
<item index="1" class="java.lang.String" itemvalue="PyYAML" />
|
|
11
|
+
<item index="2" class="java.lang.String" itemvalue="Jinja2" />
|
|
12
|
+
<item index="3" class="java.lang.String" itemvalue="github3.py" />
|
|
13
|
+
</list>
|
|
14
|
+
</value>
|
|
15
|
+
</option>
|
|
16
|
+
</inspection_tool>
|
|
17
|
+
</profile>
|
|
18
|
+
</component>
|
package/.idea/misc.xml
ADDED
package/.idea/ui.iml
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<module type="PYTHON_MODULE" version="4">
|
|
3
|
+
<component name="NewModuleRootManager">
|
|
4
|
+
<content url="file://$MODULE_DIR$" />
|
|
5
|
+
<orderEntry type="inheritedJdk" />
|
|
6
|
+
<orderEntry type="sourceFolder" forTests="false" />
|
|
7
|
+
</component>
|
|
8
|
+
<component name="TemplatesService">
|
|
9
|
+
<option name="TEMPLATE_FOLDERS">
|
|
10
|
+
<list>
|
|
11
|
+
<option value="$MODULE_DIR$/node_modules/@storybook/core/dist/server/templates" />
|
|
12
|
+
</list>
|
|
13
|
+
</option>
|
|
14
|
+
</component>
|
|
15
|
+
</module>
|
package/.idea/vcs.xml
ADDED
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import Button from '../Button/Button';
|
|
6
6
|
import ConfirmationPopover from '../Popover/ConfirmationPopover';
|
|
7
7
|
import withClickOutside from '../withClickOutside/withClickOutside';
|
|
8
|
+
import Tooltip from '../Tooltip/Tooltip';
|
|
8
9
|
|
|
9
10
|
function mapChildrenWithProps(children, childrenRefs, props) {
|
|
10
11
|
if (children) {
|
|
@@ -347,6 +348,18 @@ class Dropdown extends Component {
|
|
|
347
348
|
}
|
|
348
349
|
};
|
|
349
350
|
|
|
351
|
+
renderButton = (node) => {
|
|
352
|
+
const { btnTooltipText, btnTooltipDirection } = this.props;
|
|
353
|
+
const { open } = this.state;
|
|
354
|
+
const tooltipArgs = {
|
|
355
|
+
text: btnTooltipText,
|
|
356
|
+
};
|
|
357
|
+
|
|
358
|
+
if (btnTooltipDirection) tooltipArgs.direction = btnTooltipDirection;
|
|
359
|
+
|
|
360
|
+
return btnTooltipText && !open ? <Tooltip {...tooltipArgs}>{node}</Tooltip> : node;
|
|
361
|
+
};
|
|
362
|
+
|
|
350
363
|
render() {
|
|
351
364
|
const {
|
|
352
365
|
children,
|
|
@@ -362,6 +375,8 @@ class Dropdown extends Component {
|
|
|
362
375
|
disableCloseOutside,
|
|
363
376
|
testId,
|
|
364
377
|
openOnMouseEnter,
|
|
378
|
+
btnTooltipText,
|
|
379
|
+
btnTooltipDirection,
|
|
365
380
|
...rest
|
|
366
381
|
} = this.props;
|
|
367
382
|
const { open } = this.state;
|
|
@@ -377,19 +392,21 @@ class Dropdown extends Component {
|
|
|
377
392
|
className={cl('dropdown', { open }, `dropdown--${size}`, className)}
|
|
378
393
|
{...rest}
|
|
379
394
|
>
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
395
|
+
{this.renderButton(
|
|
396
|
+
<Button
|
|
397
|
+
disabled={disabled}
|
|
398
|
+
type={btnFace}
|
|
399
|
+
onClick={this.onClick}
|
|
400
|
+
onDoubleClick={this.onDoubleClick}
|
|
401
|
+
icon={btnFaceIcon}
|
|
402
|
+
size={btnSize}
|
|
403
|
+
iconSize={btnFaceIconSize}
|
|
404
|
+
label={label}
|
|
405
|
+
testId={testId}
|
|
406
|
+
onMouseEnter={this.onMouseEnter}
|
|
407
|
+
onMouseLeave={this.onMouseLeave}
|
|
408
|
+
/>
|
|
409
|
+
)}
|
|
393
410
|
{open && childrenWithProps}
|
|
394
411
|
</div>
|
|
395
412
|
);
|
|
@@ -410,6 +427,8 @@ Dropdown.defaultProps = {
|
|
|
410
427
|
btnFace: 'link-flex',
|
|
411
428
|
btnFaceIcon: 'caret-bottom',
|
|
412
429
|
btnFaceIconSize: 24,
|
|
430
|
+
btnTooltipText: null,
|
|
431
|
+
btnTooltipDirection: null,
|
|
413
432
|
testId: 'dropdown',
|
|
414
433
|
};
|
|
415
434
|
|
|
@@ -426,6 +445,8 @@ Dropdown.propTypes = {
|
|
|
426
445
|
className: PropTypes.string,
|
|
427
446
|
btnFace: PropTypes.oneOf(['link-flex', 'primary', 'secondary', 'important', 'transparent', 'link', 'sidebar-link']),
|
|
428
447
|
btnFaceIcon: PropTypes.string,
|
|
448
|
+
btnTooltipText: PropTypes.string,
|
|
449
|
+
btnTooltipDirection: PropTypes.oneOf(['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']),
|
|
429
450
|
size: PropTypes.oneOf(['normal', 'small', 'mini']),
|
|
430
451
|
btnSize: PropTypes.oneOf(['large', 'normal', 'small', 'mini']),
|
|
431
452
|
btnFaceIconSize: PropTypes.number,
|
|
@@ -42,7 +42,13 @@ const Template = () => (
|
|
|
42
42
|
<Dropdown btnFace="link" btnFaceIcon="clock" label="My dropdown">
|
|
43
43
|
{dropdownContent}
|
|
44
44
|
</Dropdown>
|
|
45
|
-
<Dropdown
|
|
45
|
+
<Dropdown
|
|
46
|
+
btnFace="primary"
|
|
47
|
+
btnFaceIcon="clock"
|
|
48
|
+
label="My dropdown"
|
|
49
|
+
btnTooltipText="My dropdown"
|
|
50
|
+
btnTooltipDirection="s"
|
|
51
|
+
>
|
|
46
52
|
{dropdownContent}
|
|
47
53
|
</Dropdown>
|
|
48
54
|
<Dropdown btnFace="link" btnFaceIcon="clock">
|
|
@@ -17,7 +17,7 @@ it('renders a Dropdown component ', () => {
|
|
|
17
17
|
expect(getByTestId('dropdown').parentElement).toHaveClass('dropdown');
|
|
18
18
|
act(() => {
|
|
19
19
|
fireEvent.click(getByTestId('dropdown'));
|
|
20
|
-
})
|
|
20
|
+
});
|
|
21
21
|
const menu = screen.getByRole('menu');
|
|
22
22
|
expect(menu).toHaveClass('dropdown__menu');
|
|
23
23
|
});
|
|
@@ -49,3 +49,21 @@ it('should close dropdown if a ConfirmButtonItem is confirmed', () => {
|
|
|
49
49
|
fireEvent.click(screen.getByText('Confirm'));
|
|
50
50
|
expect(container.firstChild).not.toHaveClass('open');
|
|
51
51
|
});
|
|
52
|
+
|
|
53
|
+
it('should render dropdown with tooltip if btnTooltipText is passed in props', () => {
|
|
54
|
+
const { getByTestId } = render(
|
|
55
|
+
<Dropdown label="My dropdown" btnTooltipText="Fake dropdown" btnTooltipDirection="nw">
|
|
56
|
+
<Dropdown.Menu>
|
|
57
|
+
<Dropdown.Item>Item 1</Dropdown.Item>
|
|
58
|
+
</Dropdown.Menu>
|
|
59
|
+
</Dropdown>
|
|
60
|
+
);
|
|
61
|
+
expect(screen.getByLabelText('Fake dropdown')).toBeInTheDocument();
|
|
62
|
+
expect(getByTestId('tooltip')).toHaveClass('tooltipped-nw');
|
|
63
|
+
expect(getByTestId('dropdown').parentElement.parentElement).toHaveClass('dropdown');
|
|
64
|
+
act(() => {
|
|
65
|
+
fireEvent.click(getByTestId('dropdown'));
|
|
66
|
+
});
|
|
67
|
+
const menu = screen.getByRole('menu');
|
|
68
|
+
expect(menu).toHaveClass('dropdown__menu');
|
|
69
|
+
});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
.use-case
|
|
2
|
-
br()
|
|
3
2
|
box()
|
|
4
3
|
width 30rem
|
|
5
4
|
transition .2s all
|
|
@@ -23,9 +22,9 @@
|
|
|
23
22
|
margin-bottom 2rem
|
|
24
23
|
&__body
|
|
25
24
|
position inherit
|
|
26
|
-
height 100%
|
|
27
25
|
margin-bottom 2rem
|
|
28
26
|
&__footer
|
|
27
|
+
flex-grow 1
|
|
29
28
|
position relative
|
|
30
29
|
&__product-item
|
|
31
30
|
mbi()
|