feat: implement MultiSelect component

src/components/MultiSelect/__test__/multiSelect.spec.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import MultiSelect from '..';
+import Option from '../../Option';
+import HelpText from '../../Input/styled/helpText';
+import ErrorText from '../../Input/styled/errorText';
+import Label from '../../Input/label/labelText';
+import { StyledChip, StyledPlaceholder, StyledInput } from '../styled';
+
+describe('<MultiSelect />', () => {
+    it('should render Label when label prop is passed', () => {
+        const component = mount(<MultiSelect label="Label" />);
+        expect(component.find(Label).exists()).toBe(true);
+    });
+
+    it('should render a HelpText when bottomHelpText prop is passed', () => {
+        const component = mount(<MultiSelect bottomHelpText="Help text" />);
+        expect(component.find(HelpText).exists()).toBe(true);
+    });
+
+    it('should render a ErrorText when error prop is passed', () => {
+        const component = mount(<MultiSelect error="Error text" />);
+        expect(component.find(ErrorText).exists()).toBe(true);
+    });
+
+    it('should render the placeholder when there is no selected items', () => {
+        const component = mount(<MultiSelect placeholder="Placeholder text" />);
+        expect(component.find(StyledPlaceholder).exists()).toBe(true);
+    });
+
+    it('should render the correct amount of chips', () => {
+        const value = [
+            {
+                label: 'First',
+                name: 'first',
+            },
+            {
+                label: 'Second',
+                name: 'second',
+            },
+        ];
+        const component = mount(
+            <MultiSelect value={value}>
+                <Option name="first" label="First" />
+                <Option name="second" label="Second" />
+            </MultiSelect>,
+        );
+        expect(component.find(StyledChip).length).toBe(2);
+    });
+
+    it('should fire change event when an item is removed', () => {
+        const value = [
+            {
+                label: 'First',
+                name: 'first',
+            },
+        ];
+        const mockOnChange = jest.fn();
+        const component = mount(
+            <MultiSelect value={value} onChange={mockOnChange}>
+                <Option name="first" label="First" />
+                <Option name="second" label="Second" />
+            </MultiSelect>,
+        );
+        const button = component.find(StyledChip).find('button');
+        button.simulate('click');
+        expect(mockOnChange).toHaveBeenCalledWith([]);
+    });
+
+    it('should fire focus event', () => {
+        const mockOnFocus = jest.fn();
+        const component = mount(<MultiSelect onFocus={mockOnFocus} />);
+        component.find(StyledInput).simulate('focus');
+        expect(mockOnFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('should fire blur event', () => {
+        const mockOnBlur = jest.fn();
+        const component = mount(<MultiSelect onBlur={mockOnBlur} />);
+        component.find(StyledInput).simulate('blur');
+        expect(mockOnBlur).toHaveBeenCalledTimes(1);
+    });
+});

src/components/MultiSelect/helpers/__test__/getChips.spec.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import getChips from '../getChips';
+import { StyledChip } from '../../styled';
+
+describe('getChips', () => {
+    test('should return null when value is falsey', () => {
+        [null, undefined, false].forEach(value => {
+            expect(getChips(value)).toBe(null);
+        });
+    });
+
+    test('should return the correct amount of chips', () => {
+        const value = [
+            {
+                label: 'First',
+                name: 'first',
+            },
+            {
+                label: 'Second',
+                name: 'second',
+            },
+        ];
+        const chips = getChips(value);
+        const wrapper = mount(<div>{chips}</div>);
+        expect(wrapper.find(StyledChip).length).toBe(2);
+    });
+
+    test('should return only one chip', () => {
+        const value = {
+            label: 'First',
+            name: 'first',
+        };
+        const chip = getChips(value);
+        const wrapper = mount(<div>{chip}</div>);
+        expect(wrapper.find(StyledChip).length).toBe(1);
+    });
+});

src/components/MultiSelect/helpers/__test__/positionResolver.spec.js

@@ -0,0 +1,41 @@
+import positionResolver from '../positionResolver';
+
+const DEFAULT_MARGIN = 5;
+
+describe('positionResolver', () => {
+    test('should return the correct position', () => {
+        const param = {
+            trigger: {
+                leftUpAnchor: {
+                    x: 209,
+                    y: 175,
+                },
+                leftBottomAnchor: {
+                    x: 209,
+                    y: 215,
+                },
+                rightUpAnchor: {
+                    x: 249,
+                    y: 175,
+                },
+                rightBottomAnchor: {
+                    x: 249,
+                    y: 215,
+                },
+            },
+            viewport: {
+                width: 1100,
+                height: 761,
+            },
+            content: {
+                height: 220,
+                width: 220,
+            },
+        };
+        const expected = {
+            top: param.trigger.leftBottomAnchor.y + DEFAULT_MARGIN,
+            left: param.trigger.rightBottomAnchor.x - param.content.width,
+        };
+        expect(positionResolver(param)).toEqual(expected);
+    });
+});

src/components/MultiSelect/helpers/getChips.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyledChip } from '../styled';
+
+export default function getChips(value, variant, deleteCallback) {
+    if (!value) {
+        return null;
+    }
+    if (Array.isArray(value)) {
+        return value.map(val => (
+            <StyledChip
+                key={val.name}
+                label={val.label}
+                variant={variant}
+                onDelete={() => deleteCallback(val)}
+            />
+        ));
+    }
+    return (
+        <StyledChip label={value.label} variant={variant} onDelete={() => deleteCallback(value)} />
+    );
+}

src/components/MultiSelect/helpers/index.js

@@ -0,0 +1,4 @@
+import positionResolver from './positionResolver';
+import getChips from './getChips';
+
+export { positionResolver, getChips };

src/components/MultiSelect/helpers/positionResolver.js

@@ -0,0 +1,15 @@
+import InternalOverlay from '../../InternalOverlay';
+
+export default function positionResolver(opts) {
+    const { trigger, viewport, content } = opts;
+    const newOpts = {
+        trigger,
+        viewport,
+        content: {
+            ...content,
+        },
+    };
+    const pos = InternalOverlay.defaultPositionResolver(newOpts);
+    pos.left = trigger.rightBottomAnchor.x - content.width;
+    return pos;
+}

src/components/MultiSelect/icons/plus.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PlusIcon = props => {
+    const { className, style } = props;
+
+    return (
+        <svg className={className} style={style} width="14" height="14" viewBox="0 0 14 14">
+            <path
+                fill="#01B6F5"
+                d="M12.181 5.964H8.036V1.819C8.036 1.247 7.573.783 7 .783s-1.036.464-1.036 1.036v4.145H1.819C1.246 5.964.783 6.428.783 7c0 .572.463 1.036 1.036 1.036h4.145v4.145c0 .572.463 1.036 1.036 1.036s1.036-.464 1.036-1.036V8.036h4.145c.573 0 1.036-.464 1.036-1.036 0-.572-.463-1.036-1.036-1.036z"
+            />
+        </svg>
+    );
+};
+
+PlusIcon.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+PlusIcon.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default PlusIcon;