@woosmap/ui 2.42.0 → 2.46.0

package/src/components/Dropdown/Dropdown.js

@@ -45,11 +45,22 @@ class DropdownMenu extends Component {
     };
 
     render() {
-        const { direction, children, closeCb, ...rest } = this.props;
+        const { direction, children, closeCb, testId, isSection, ...rest } = this.props;
         const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
-
+        if (isSection) {
+            return (
+                <div
+                    role="menu"
+                    className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
+                    data-testid={testId}
+                    {...rest}
+                >
+                    {childrenWithProps}
+                </div>
+            );
+        }
         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 +70,71 @@ class DropdownMenu extends Component {
 DropdownMenu.defaultProps = {
     direction: 'sw',
     closeCb: null,
+    testId: 'dropdown-menu',
+    isSection: false,
 };
 
 DropdownMenu.propTypes = {
     children: PropTypes.node.isRequired,
     closeCb: PropTypes.func,
+    testId: PropTypes.string,
+    isSection: PropTypes.bool,
     direction: PropTypes.oneOf(['ne', 'e', 'se', 's', 'sw', 'w']),
 };
 
+class DropdownMenuSection extends Component {
+    constructor(props) {
+        super(props);
+        this.childrenRefs = {};
+    }
+
+    close = () => {
+        closeChildren(this.childrenRefs);
+    };
+
+    render() {
+        const { title, children, closeCb, ...rest } = this.props;
+        const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
+        return (
+            <div className="dropdown__menu__section">
+                {title && <div className="dropdown__menu__section__title">{title}</div>}
+                <ul {...rest}>{childrenWithProps}</ul>
+            </div>
+        );
+    }
+}
+
+DropdownMenuSection.defaultProps = {
+    title: null,
+    closeCb: null,
+};
+
+DropdownMenuSection.propTypes = {
+    children: PropTypes.node.isRequired,
+    title: PropTypes.string,
+    closeCb: PropTypes.func,
+};
+
 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 +143,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 +184,7 @@ DropdownButtonItem.defaultProps = {
     onClick: null,
     btnIcon: null,
     btnLabel: '',
+    testId: 'dropdown-button-item',
     isImportant: false,
     closeCb: null,
 };
@@ -133,6 +193,7 @@ DropdownButtonItem.propTypes = {
     onClick: PropTypes.func,
     btnIcon: PropTypes.string,
     btnLabel: PropTypes.string,
+    testId: PropTypes.string,
     isImportant: PropTypes.bool,
     closeCb: PropTypes.func,
 };
@@ -183,6 +244,7 @@ class DropdownConfirmButtonItem extends Component {
 }
 
 DropdownConfirmButtonItem.defaultProps = {
+    testId: 'dropdown-confirm-button-item',
     onConfirm: null,
     btnIcon: null,
     closeCb: null,
@@ -195,6 +257,7 @@ DropdownConfirmButtonItem.defaultProps = {
 DropdownConfirmButtonItem.propTypes = {
     onConfirm: PropTypes.func,
     btnIcon: PropTypes.string,
+    testId: PropTypes.string,
     confirmLabel: PropTypes.string,
     btnLabel: PropTypes.string,
     closeCb: PropTypes.func,
@@ -255,6 +318,7 @@ class Dropdown extends Component {
             btnFaceIconSize,
             closeCb,
             disableCloseOutside,
+            testId,
             ...rest
         } = this.props;
         const { open } = this.state;
@@ -275,6 +339,7 @@ class Dropdown extends Component {
                     size={btnSize}
                     iconSize={btnFaceIconSize}
                     label={label}
+                    testId={testId}
                 />
                 {childrenWithProps}
             </div>
@@ -295,6 +360,7 @@ Dropdown.defaultProps = {
     btnFace: 'link-flex',
     btnFaceIcon: 'caret-bottom',
     btnFaceIconSize: 24,
+    testId: 'dropdown',
 };
 
 Dropdown.propTypes = {
@@ -304,6 +370,7 @@ Dropdown.propTypes = {
     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']),
@@ -315,6 +382,7 @@ Dropdown.propTypes = {
 
 export default Object.assign(withClickOutside(Dropdown, '.popover__content'), {
     Menu: DropdownMenu,
+    MenuSection: DropdownMenuSection,
     Item: DropdownItem,
     ButtonItem: DropdownButtonItem,
     ConfirmButtonItem: DropdownConfirmButtonItem,

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

@@ -52,3 +52,32 @@ const Template = () => (
 );
 export const Default = Template.bind({});
 Default.args = {};
+
+const MultiMenuTemplate = () => (
+    <div className="mbi" id="menuid">
+        <Dropdown btnFace="link" btnFaceIcon="clock" label="My dropdown">
+            <Dropdown.Menu isSection direction="se">
+                <Dropdown.MenuSection title="Section title">
+                    <Dropdown.ButtonItem btnIcon="delete" isImportant btnLabel="Delete" />
+                    <Dropdown.ConfirmButtonItem
+                        btnIcon="delete"
+                        isImportant
+                        btnLabel="Delete confirm"
+                        onConfirm={() => null}
+                    />
+                </Dropdown.MenuSection>
+                <Dropdown.MenuSection title="Section title 2">
+                    <Dropdown.ButtonItem btnIcon="delete" isImportant btnLabel="Delete" />
+                    <Dropdown.ConfirmButtonItem
+                        btnIcon="delete"
+                        isImportant
+                        btnLabel="Delete confirm"
+                        onConfirm={() => null}
+                    />
+                </Dropdown.MenuSection>
+            </Dropdown.Menu>
+        </Dropdown>
+    </div>
+);
+export const MultiMenuTemplateDropdown = MultiMenuTemplate.bind({});
+MultiMenuTemplateDropdown.args = {};

package/src/components/Dropdown/Dropdown.styl

@@ -50,9 +50,12 @@
 			right 0
 			left auto
 
+
 	&.open
 		.dropdown__menu
 			display block
+			&--section
+				display flex
 
 	&__item
 		flexMiddle()

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,17 @@ 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';
+import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
+import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
+import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
 const Icons = {
     access: Access,
@@ -127,10 +137,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 +175,7 @@ const Icons = {
     export: Export,
     flag: Flag,
     globe: Globe,
+    github: Github,
     home: Home,
     'home-user': HomeUser,
     import: Import,
@@ -183,17 +196,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 +224,32 @@ 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,
+    'social-facebook': SocialFacebook,
+    'social-linkedin': SocialLinkedin,
+    'social-twitter': SocialTwitter,
 };
 
 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 +257,7 @@ Icon.defaultProps = {
     size: 24,
     className: null,
     title: null,
+    testId: 'icon',
 };
 
 Icon.propTypes = {
@@ -236,6 +265,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([