@woosmap/ui 2.40.0 → 2.44.0

package/src/components/Dropdown/Dropdown.js

@@ -45,11 +45,11 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, ...rest } = this.props;
+        const { direction, children, closeCb, testId, ...rest } = this.props;
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
 
         return (
-            <ul role="menu" className={cl('dropdown__menu', direction)} {...rest}>
+            <ul role="menu" className={cl('dropdown__menu', direction)} data-testid={testId} {...rest}>
                 {childrenWithProps}
             </ul>
         );
@@ -59,25 +59,36 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    testId: 'dropdown-menu',
 };
 
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
 };
 
 class DropdownSeparator extends Component {
     render() {
-        return <li className={cl('dropdown__separator')} />;
+        const { testId } = this.props;
+        return <li className={cl('dropdown__separator')} data-testid={testId} />;
     }
 }
 
+DropdownSeparator.defaultProps = {
+    testId: 'dropdown-separator',
+};
+
+DropdownSeparator.propTypes = {
+    testId: PropTypes.string,
+};
+
 class DropdownItem extends Component {
     render() {
-        const { children, closeCb, ...rest } = this.props;
+        const { children, closeCb, testId, ...rest } = this.props;
         return (
-            <li className={cl('dropdown__item')} {...rest}>
+            <li className={cl('dropdown__item')} data-testid={testId} {...rest}>
                 {children}
             </li>
         );
@@ -86,11 +97,13 @@ class DropdownItem extends Component {
 
 DropdownItem.defaultProps = {
     closeCb: null,
+    testId: 'dropdown-item',
 };
 
 DropdownItem.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
 };
 
 class DropdownButtonItem extends Component {
@@ -125,6 +138,7 @@ DropdownButtonItem.defaultProps = {
     onClick: null,
     btnIcon: null,
     btnLabel: '',
+    testId: 'dropdown-button-item',
     isImportant: false,
     closeCb: null,
 };
@@ -133,6 +147,7 @@ DropdownButtonItem.propTypes = {
     onClick: PropTypes.func,
     btnIcon: PropTypes.string,
     btnLabel: PropTypes.string,
+    testId: PropTypes.string,
     isImportant: PropTypes.bool,
     closeCb: PropTypes.func,
 };
@@ -183,6 +198,7 @@ class DropdownConfirmButtonItem extends Component {
 }
 
 DropdownConfirmButtonItem.defaultProps = {
+    testId: 'dropdown-confirm-button-item',
     onConfirm: null,
     btnIcon: null,
     closeCb: null,
@@ -195,6 +211,7 @@ DropdownConfirmButtonItem.defaultProps = {
 DropdownConfirmButtonItem.propTypes = {
     onConfirm: PropTypes.func,
     btnIcon: PropTypes.string,
+    testId: PropTypes.string,
     confirmLabel: PropTypes.string,
     btnLabel: PropTypes.string,
     closeCb: PropTypes.func,
@@ -246,6 +263,7 @@ class Dropdown extends Component {
         const {
             children,
             size,
+            disabled,
             className,
             label,
             btnFace,
@@ -254,6 +272,7 @@ class Dropdown extends Component {
             btnFaceIconSize,
             closeCb,
             disableCloseOutside,
+            testId,
             ...rest
         } = this.props;
         const { open } = this.state;
@@ -266,6 +285,7 @@ class Dropdown extends Component {
                 {...rest}
             >
                 <Button
+                    disabled={disabled}
                     type={btnFace}
                     onClick={this.onClick}
                     onDoubleClick={this.onDoubleClick}
@@ -273,6 +293,7 @@ class Dropdown extends Component {
                     size={btnSize}
                     iconSize={btnFaceIconSize}
                     label={label}
+                    testId={testId}
                 />
                 {childrenWithProps}
             </div>
@@ -284,6 +305,7 @@ Dropdown.defaultProps = {
     size: 'normal',
     btnSize: null,
     onClick: null,
+    disabled: false,
     disableCloseOutside: false,
     onDoubleClick: null,
     label: null,
@@ -292,14 +314,17 @@ Dropdown.defaultProps = {
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
+    testId: 'dropdown',
 };
 
 Dropdown.propTypes = {
     onClick: PropTypes.func,
     closeCb: PropTypes.func,
     onDoubleClick: PropTypes.func,
+    disabled: PropTypes.bool,
     disableCloseOutside: PropTypes.bool,
     label: PropTypes.string,
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     btnFace: PropTypes.oneOf(['link-flex', 'primary', 'secondary', 'important', 'transparent', 'link']),

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

@@ -7,14 +7,14 @@ import 'resize-observer-polyfill/dist/ResizeObserver.global';
 import Dropdown from './Dropdown';
 
 it('renders a Dropdown component ', () => {
-    const { container } = render(
+    const { getByTestId } = render(
         <Dropdown label="My dropdown">
             <Dropdown.Menu>
                 <Dropdown.Item>Item 1</Dropdown.Item>
             </Dropdown.Menu>
         </Dropdown>
     );
-    expect(container.firstChild).toHaveClass('dropdown');
+    expect(getByTestId('dropdown').parentElement).toHaveClass('dropdown');
     const menu = screen.getByRole('menu');
     expect(menu).toHaveClass('dropdown__menu');
 });

package/src/components/DynamicTag/DynamicTag.js

@@ -50,7 +50,7 @@ export default class DynamicTag extends Component {
 
     renderInput = () => {
         const { inputValue, error } = this.state;
-        const { placeholder } = this.props;
+        const { placeholder, testId } = this.props;
 
         return (
             <>
@@ -61,17 +61,18 @@ export default class DynamicTag extends Component {
                     onBlur={this.handleInputConfirm}
                     onPressEnter={this.handleInputConfirm}
                     error={error}
+                    testId={`${testId}-input`}
                 />
-                <Button label={tr('Add')} onClick={this.handleInputConfirm} />
+                <Button label={tr('Add')} onClick={this.handleInputConfirm} testId={`${testId}-button`} />
             </>
         );
     };
 
     render() {
         const { tags } = this.state;
-        const { color } = this.props;
+        const { color, testId } = this.props;
         return (
-            <div className={cl('dynamic-tag')}>
+            <div className={cl('dynamic-tag')} data-testid={testId}>
                 <div className={cl('dynamic-tag__input')}>{this.renderInput()}</div>
                 <div className={cl('dynamic-tag__tags')}>
                     {tags.map((item) => (
@@ -83,6 +84,7 @@ export default class DynamicTag extends Component {
                             closeCb={() => {
                                 this.handleTagRemove(item);
                             }}
+                            testId={`${testId}-label`}
                         />
                     ))}
                 </div>
@@ -95,10 +97,12 @@ DynamicTag.defaultProps = {
     defaultTags: [],
     placeholder: '',
     color: '',
+    testId: 'dynamic-tag',
 };
 
 DynamicTag.propTypes = {
     defaultTags: PropTypes.array,
     placeholder: PropTypes.string,
     color: PropTypes.string,
+    testId: PropTypes.string,
 };

package/src/components/Flash/Flash.js

@@ -5,7 +5,7 @@ import Icon from '../Icon/Icon';
 
 export default class Flash extends Component {
     render() {
-        const { children, icon, inverse, fill, type, shadowed, ...rest } = this.props;
+        const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
         const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
         return (
             <div
@@ -17,6 +17,7 @@ export default class Flash extends Component {
                     { 'flash--fill': fill },
                     { 'flash--shadowed': shadowed && !inverse }
                 )}
+                data-testid={testId}
                 {...rest}
             >
                 {iconComponent}
@@ -32,6 +33,7 @@ Flash.defaultProps = {
     inverse: false,
     fill: false,
     shadowed: false,
+    testId: 'flash',
 };
 
 Flash.propTypes = {
@@ -41,4 +43,5 @@ Flash.propTypes = {
     inverse: PropTypes.bool,
     fill: PropTypes.bool,
     shadowed: PropTypes.bool,
+    testId: PropTypes.string,
 };

package/src/components/Icon/Icon.js

@@ -19,10 +19,12 @@ import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
 import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
 import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
+import { ReactComponent as Autocomplete } from '../../icons/autocomplete.svg';
 import { ReactComponent as Bank } from '../../icons/bank.svg';
 import { ReactComponent as Beaker } from '../../icons/beaker.svg';
 import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
+import { ReactComponent as Buildings } from '../../icons/buildings.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
@@ -54,6 +56,7 @@ import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
+import { ReactComponent as Github } from '../../icons/github.svg';
 import { ReactComponent as Globe } from '../../icons/globe.svg';
 import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
@@ -75,17 +78,25 @@ import { ReactComponent as Organization } from '../../icons/organization.svg';
 import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
 import { ReactComponent as Platform } from '../../icons/platform.svg';
+import { ReactComponent as Position } from '../../icons/position.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
 import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
+import { ReactComponent as Quote } from '../../icons/quote.svg';
 import { ReactComponent as Receipt } from '../../icons/receipt.svg';
+import { ReactComponent as SaveMoney } from '../../icons/save-money.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
 import { ReactComponent as Shield } from '../../icons/shield.svg';
+import { ReactComponent as Star } from '../../icons/star.svg';
+import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
+import { ReactComponent as Stores } from '../../icons/stores.svg';
+import { ReactComponent as Support } from '../../icons/support.svg';
+import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
 import { ReactComponent as Time } from '../../icons/time.svg';
 import { ReactComponent as Tool } from '../../icons/tool.svg';
@@ -95,18 +106,14 @@ import { ReactComponent as ViewList } from '../../icons/view-list.svg';
 import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
-import { ReactComponent as Localities } from '../../icons/localities.svg';
-import { ReactComponent as Traffic } from '../../icons/traffic.svg';
-import { ReactComponent as Map } from '../../icons/map.svg';
+import { ReactComponent as World } from '../../icons/world.svg';
+import { ReactComponent as Address } from '../../icons/address.svg';
 import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
-import { ReactComponent as Address } from '../../icons/address.svg';
-import { ReactComponent as Star } from '../../icons/star.svg';
-import { ReactComponent as StarFilled } from '../../icons/star-filled.svg';
-import { ReactComponent as Stores } from '../../icons/stores.svg';
-import { ReactComponent as Support } from '../../icons/support.svg';
-import { ReactComponent as Switch } from '../../icons/switch.svg';
+import { ReactComponent as Localities } from '../../icons/localities.svg';
+import { ReactComponent as Map } from '../../icons/map.svg';
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
+import { ReactComponent as Traffic } from '../../icons/traffic.svg';
 
 const Icons = {
     access: Access,
@@ -127,10 +134,12 @@ const Icons = {
     asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,
+    autocomplete: Autocomplete,
     bank: Bank,
     beaker: Beaker,
     bell: Bell,
     bookmark: Bookmark,
+    buildings: Buildings,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
@@ -163,6 +172,7 @@ const Icons = {
     export: Export,
     flag: Flag,
     globe: Globe,
+    github: Github,
     home: Home,
     'home-user': HomeUser,
     import: Import,
@@ -183,17 +193,25 @@ const Icons = {
     organizations: Organizations,
     phone: Phone,
     platform: Platform,
+    position: Position,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
     puzzle: Puzzle,
-    receipt: Receipt,
     question: Question,
+    quote: Quote,
+    receipt: Receipt,
+    'save-money': SaveMoney,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
     shield: Shield,
+    star: Star,
+    'star-filled': StarFilled,
+    stores: Stores,
+    support: Support,
+    switch: Switch,
     team: Team,
     time: Time,
     tool: Tool,
@@ -203,25 +221,29 @@ const Icons = {
     'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
-    localities: Localities,
-    traffic: Traffic,
-    maps: Map,
+    world: World,
+    address: Address,
     distance: Distance,
     geolocation: Geolocation,
-    address: Address,
-    star: Star,
-    'star-filled': StarFilled,
-    stores: Stores,
-    support: Support,
-    switch: Switch,
+    localities: Localities,
+    maps: Map,
     merchant: Merchant,
+    traffic: Traffic,
 };
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, title } = this.props;
+        const { icon, size, className, title, testId } = this.props;
         const IconComponent = Icons[icon];
-        return <IconComponent className={cl('icon', className)} width={size} height={size} title={title} />;
+        return (
+            <IconComponent
+                className={cl('icon', className)}
+                data-testid={testId}
+                width={size}
+                height={size}
+                title={title}
+            />
+        );
     }
 }
 
@@ -229,6 +251,7 @@ Icon.defaultProps = {
     size: 24,
     className: null,
     title: null,
+    testId: 'icon',
 };
 
 Icon.propTypes = {
@@ -236,6 +259,7 @@ Icon.propTypes = {
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
     title: PropTypes.string,
+    testId: PropTypes.string,
 };
 export default Object.assign(Icon, {
     Icons,

package/src/components/Icon/Icon.test.js

@@ -5,10 +5,10 @@ import '@testing-library/jest-dom/extend-expect';
 import Icon from './Icon';
 
 it('renders an icon component', () => {
-    const { container } = render(<Icon icon="home" size={64} />);
-    expect(container.firstChild).toHaveClass('icon');
-    expect(container.firstChild).toHaveAttribute('width', '64');
-    expect(container.firstChild).toHaveTextContent('home');
+    const { getByTestId } = render(<Icon icon="home" size={64} />);
+    expect(getByTestId('icon')).toHaveClass('icon');
+    expect(getByTestId('icon')).toHaveAttribute('width', '64');
+    expect(getByTestId('icon')).toHaveTextContent('home');
 });
 /*
 it('renders all icon components', () => {

package/src/components/InfoMessage/InfoMessage.js

@@ -10,7 +10,7 @@ export default class InfoMessage extends Component {
     }
 
     render() {
-        const { modalProps, actionLabel, children, ...rest } = this.props;
+        const { modalProps, actionLabel, children, testId, ...rest } = this.props;
         return (
             <>
                 <Button
@@ -19,8 +19,9 @@ export default class InfoMessage extends Component {
                     type="link-flex-info"
                     {...rest}
                     onClick={() => this.modalRef.current.open()}
+                    testId={`${testId}-button`}
                 />
-                <Modal ref={this.modalRef} footer={false} {...modalProps}>
+                <Modal ref={this.modalRef} footer={false} testId={`${testId}-modal`} {...modalProps}>
                     {children}
                 </Modal>
             </>
@@ -30,8 +31,10 @@ export default class InfoMessage extends Component {
 InfoMessage.defaultProps = {
     actionLabel: '',
     modalProps: {},
+    testId: 'info-message',
 };
 InfoMessage.propTypes = {
+    testId: PropTypes.string,
     children: PropTypes.node.isRequired,
     actionLabel: PropTypes.string,
     modalProps: PropTypes.object,

package/src/components/InfoMessage/InfoMessage.test.js

@@ -14,12 +14,12 @@ it('renders a InfoMessage component ', () => {
 it('opens a modal with the content when clicking the button ', () => {
     const { container } = render(<InfoMessage actionLabel="action">Content</InfoMessage>);
     try {
-        screen.getByTestId('modal');
+        screen.getByTestId('info-message-modal');
         expect('Modal displayed').toBeFalsy();
     } catch (e) {
         // nothink
     }
     userEvent.click(container.firstChild);
-    const modal = screen.getByTestId('modal');
+    const modal = screen.getByTestId('info-message-modal');
     expect(modal).toHaveClass('modal');
 });

package/src/components/Input/Input.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Input from './Input';
+
+it('renders an input component ', () => {
+    const { container } = render(<Input>input</Input>);
+    expect(container.firstChild).toHaveClass('input');
+});
+
+it('should call func if Enter key is pressed', () => {
+    const fakeFunc = jest.fn();
+    const { container } = render(<Input onPressEnter={fakeFunc}>input</Input>);
+    const [input] = container.querySelectorAll('input');
+    fireEvent.keyDown(input, { keyCode: 13 });
+    expect(fakeFunc).toHaveBeenCalled();
+});
+
+it('should not accept input if disabled', () => {
+    const { container } = render(<Input disabled>input</Input>);
+    expect(container.firstChild).toHaveClass('input--disabled');
+    const [input] = container.querySelectorAll('input');
+    fireEvent.click(input);
+    expect(input).not.toHaveFocus();
+});

package/src/components/Label/Label.js

@@ -18,6 +18,7 @@ export default class Label extends Component {
             isPill,
             noWrap,
             plan,
+            testId,
             ...rest
         } = this.props;
         const classes = cl(
@@ -33,9 +34,21 @@ export default class Label extends Component {
             className
         );
         return (
-            <span className={classes} {...rest}>
-                {label && <span className="label__name">{label}</span>}
-                {closable && <Button type="link-flex" iconSize={12} icon="close-thick" onClick={closeCb} />}
+            <span className={classes} data-testid={testId} {...rest}>
+                {label && (
+                    <span className="label__name" data-testid={`${testId}-label`}>
+                        {label}
+                    </span>
+                )}
+                {closable && (
+                    <Button
+                        type="link-flex"
+                        iconSize={12}
+                        icon="close-thick"
+                        onClick={closeCb}
+                        testId={`${testId}-button`}
+                    />
+                )}
             </span>
         );
     }
@@ -54,10 +67,12 @@ Label.defaultProps = {
     isPill: null,
     noWrap: null,
     plan: undefined,
+    testId: 'label',
 };
 
 Label.propTypes = {
     label: PropTypes.string,
+    testId: PropTypes.string,
     color: PropTypes.oneOf(['bleu', 'mauve', 'green', 'grey', 'orange', 'red', 'white', undefined, '']),
     className: PropTypes.string,
     product: PropTypes.oneOf([

package/src/components/Label/Label.styl

@@ -77,7 +77,7 @@
 	&--merchants
 		background-color $merchant
 	&--TRAFFIC
-	&--merchant
+	&--traffic
 		background-color $traffic
 	&--free
 		background-color $free

package/src/components/Map/drawOnMap.js

@@ -84,6 +84,46 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
     );
 };
 
+export const createWoosmapMap = (node) =>
+    new window.woosmap.map.Map(node, {
+        styles: [
+            {
+                featureType: 'administrative',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
+            },
+            {
+                featureType: 'road',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
+            },
+            {
+                featureType: 'water',
+                elementType: 'all',
+                stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
+            },
+            {
+                featureType: 'landscape.man_made',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
+            },
+            {
+                featureType: 'landscape.natural',
+                elementType: 'all',
+                stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'poi',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+            {
+                featureType: 'transit',
+                elementType: 'all',
+                stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
+            },
+        ],
+    });
 export class WoosmapMapBoundingBox {
     constructor(bounds, padding) {
         this.overlayView = new window.woosmap.map.OverlayView();

package/src/components/Modal/ConfirmationModal.js

@@ -24,7 +24,7 @@ export default class ConfirmationModal extends Component {
     };
 
     render() {
-        const { text, title, defaultIsOpen } = this.props;
+        const { text, title, defaultIsOpen, testId } = this.props;
         return (
             <Modal
                 ref={this.modalRef}
@@ -32,6 +32,7 @@ export default class ConfirmationModal extends Component {
                 title={title || tr('Beware...')}
                 validateBtnProps={{ type: 'important' }}
                 validateCb={this.confirm}
+                testId={testId}
             >
                 <div>{text}</div>
             </Modal>
@@ -42,6 +43,7 @@ export default class ConfirmationModal extends Component {
 ConfirmationModal.defaultProps = {
     title: '',
     defaultIsOpen: false,
+    testId: 'confirmation-modal',
 };
 
 ConfirmationModal.propTypes = {
@@ -49,4 +51,5 @@ ConfirmationModal.propTypes = {
     text: PropTypes.string.isRequired,
     title: PropTypes.string,
     confirmCb: PropTypes.func.isRequired,
+    testId: PropTypes.string,
 };