@woosmap/ui 4.10.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Dropdown/Dropdown.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import Button from '../Button/Button';
 import ConfirmationPopover from '../Popover/ConfirmationPopover';
 import withClickOutside from '../withClickOutside/withClickOutside';
+import Tooltip from '../Tooltip/Tooltip';
 
 function mapChildrenWithProps(children, childrenRefs, props) {
     if (children) {
@@ -347,6 +348,18 @@ class Dropdown extends Component {
         }
     };
 
+    renderButton = (node) => {
+        const { btnTooltipText, btnTooltipDirection } = this.props;
+        const { open } = this.state;
+        const tooltipArgs = {
+            text: btnTooltipText,
+        };
+
+        if (btnTooltipDirection) tooltipArgs.direction = btnTooltipDirection;
+
+        return btnTooltipText && !open ? <Tooltip {...tooltipArgs}>{node}</Tooltip> : node;
+    };
+
     render() {
         const {
             children,
@@ -362,6 +375,8 @@ class Dropdown extends Component {
             disableCloseOutside,
             testId,
             openOnMouseEnter,
+            btnTooltipText,
+            btnTooltipDirection,
             ...rest
         } = this.props;
         const { open } = this.state;
@@ -377,19 +392,21 @@ class Dropdown extends Component {
                 className={cl('dropdown', { open }, `dropdown--${size}`, className)}
                 {...rest}
             >
-                <Button
-                    disabled={disabled}
-                    type={btnFace}
-                    onClick={this.onClick}
-                    onDoubleClick={this.onDoubleClick}
-                    icon={btnFaceIcon}
-                    size={btnSize}
-                    iconSize={btnFaceIconSize}
-                    label={label}
-                    testId={testId}
-                    onMouseEnter={this.onMouseEnter}
-                    onMouseLeave={this.onMouseLeave}
-                />
+                {this.renderButton(
+                    <Button
+                        disabled={disabled}
+                        type={btnFace}
+                        onClick={this.onClick}
+                        onDoubleClick={this.onDoubleClick}
+                        icon={btnFaceIcon}
+                        size={btnSize}
+                        iconSize={btnFaceIconSize}
+                        label={label}
+                        testId={testId}
+                        onMouseEnter={this.onMouseEnter}
+                        onMouseLeave={this.onMouseLeave}
+                    />
+                )}
                 {open && childrenWithProps}
             </div>
         );
@@ -410,6 +427,8 @@ Dropdown.defaultProps = {
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
+    btnTooltipText: null,
+    btnTooltipDirection: null,
     testId: 'dropdown',
 };
 
@@ -426,6 +445,8 @@ Dropdown.propTypes = {
     className: PropTypes.string,
     btnFace: PropTypes.oneOf(['link-flex', 'primary', 'secondary', 'important', 'transparent', 'link', 'sidebar-link']),
     btnFaceIcon: PropTypes.string,
+    btnTooltipText: PropTypes.string,
+    btnTooltipDirection: PropTypes.oneOf(['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw']),
     size: PropTypes.oneOf(['normal', 'small', 'mini']),
     btnSize: PropTypes.oneOf(['large', 'normal', 'small', 'mini']),
     btnFaceIconSize: PropTypes.number,

package/src/components/Dropdown/Dropdown.stories.js

@@ -42,7 +42,13 @@ const Template = () => (
         <Dropdown btnFace="link" btnFaceIcon="clock" label="My dropdown">
             {dropdownContent}
         </Dropdown>
-        <Dropdown btnFace="primary" btnFaceIcon="clock" label="My dropdown">
+        <Dropdown
+            btnFace="primary"
+            btnFaceIcon="clock"
+            label="My dropdown"
+            btnTooltipText="My dropdown"
+            btnTooltipDirection="s"
+        >
             {dropdownContent}
         </Dropdown>
         <Dropdown btnFace="link" btnFaceIcon="clock">

package/src/components/Dropdown/Dropdown.test.js

@@ -17,7 +17,7 @@ it('renders a Dropdown component ', () => {
     expect(getByTestId('dropdown').parentElement).toHaveClass('dropdown');
     act(() => {
         fireEvent.click(getByTestId('dropdown'));
-    })
+    });
     const menu = screen.getByRole('menu');
     expect(menu).toHaveClass('dropdown__menu');
 });
@@ -49,3 +49,21 @@ it('should close dropdown if a ConfirmButtonItem is confirmed', () => {
     fireEvent.click(screen.getByText('Confirm'));
     expect(container.firstChild).not.toHaveClass('open');
 });
+
+it('should render dropdown with tooltip if btnTooltipText is passed in props', () => {
+    const { getByTestId } = render(
+        <Dropdown label="My dropdown" btnTooltipText="Fake dropdown" btnTooltipDirection="nw">
+            <Dropdown.Menu>
+                <Dropdown.Item>Item 1</Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown>
+    );
+    expect(screen.getByLabelText('Fake dropdown')).toBeInTheDocument();
+    expect(getByTestId('tooltip')).toHaveClass('tooltipped-nw');
+    expect(getByTestId('dropdown').parentElement.parentElement).toHaveClass('dropdown');
+    act(() => {
+        fireEvent.click(getByTestId('dropdown'));
+    });
+    const menu = screen.getByRole('menu');
+    expect(menu).toHaveClass('dropdown__menu');
+});