feat: implement MultiSelect component

integration/specs/MultiSelect/multiSelect-1.spec.js

@@ -0,0 +1,26 @@
+const PageMultiSelect = require('../../../src/components/MultiSelect/pageObject');
+
+const MULTI_SELECT = '#multiselect-component-1';
+
+describe('MultiSelect base', () => {
+    beforeAll(() => {
+        browser.url('/#!/MultiSelect/1');
+    });
+    beforeEach(() => {
+        browser.refresh();
+        const component = $(MULTI_SELECT);
+        component.waitForExist();
+    });
+
+    it('should put the input element focused when clicked', () => {
+        const input = new PageMultiSelect(MULTI_SELECT);
+        input.click();
+        expect(input.hasFocus()).toBe(true);
+    });
+
+    it('should put the input element focused when the label element is clicked', () => {
+        const input = new PageMultiSelect(MULTI_SELECT);
+        input.clickLabel();
+        expect(input.hasFocus()).toBe(true);
+    });
+});

src/components/InternalDropdown/index.js

@@ -73,6 +73,7 @@ const InternalDropdown = forwardRef((props, reference) => {
             }
             return containerRef.current.focus();
         },
+        contains: element => containerRef.current.contains(element),
     }));
 
     const updateScrollingArrows = () => {

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Chips from '../chips';
+import { StyledChip } from '../styled';
+
+describe('<Chips />', () => {
+    it('should not render any chip', () => {
+        const component = mount(<Chips />);
+        expect(component.find(StyledChip).length).toBe(0);
+    });
+
+    it('should render only one chip', () => {
+        const value = { label: 'Test', name: 'test' };
+        const component = mount(<Chips value={value} />);
+        expect(component.find(StyledChip).length).toBe(1);
+    });
+
+    it('should render the right amount of chips', () => {
+        const value = [
+            {
+                label: 'Option 1',
+                name: 'option-1',
+            },
+            {
+                label: 'Option 2',
+                name: 'option-2',
+            },
+            {
+                label: 'Option 3',
+                name: 'option-3',
+            },
+        ];
+        const component = mount(<Chips value={value} />);
+        expect(component.find(StyledChip).length).toBe(3);
+    });
+});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { axe } from 'jest-axe';
+import MultiSelect from '..';
+import Option from '../../Option';
+
+describe('<MultiSelect/>', () => {
+    it('should be accessible', async () => {
+        expect.assertions(1);
+        const value = [
+            {
+                label: 'First',
+                name: 'first',
+            },
+            {
+                label: 'Second',
+                name: 'second',
+            },
+        ];
+        const component = mount(
+            <MultiSelect value={value} label="Label">
+                <Option name="first" label="First" />
+                <Option name="second" label="Second" />
+            </MultiSelect>,
+        );
+        const html = component.html();
+        const results = await axe(html);
+        expect(results).toHaveNoViolations();
+    });
+});

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/chips.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledChip } from './styled';
+
+function Chips(props) {
+    const { value, variant, onDelete } = props;
+    if (!value) {
+        return null;
+    }
+    if (Array.isArray(value)) {
+        return value.map(val => (
+            <StyledChip
+                key={val.name}
+                label={val.label}
+                variant={variant}
+                onDelete={() => onDelete(val)}
+            />
+        ));
+    }
+    return <StyledChip label={value.label} variant={variant} onDelete={() => onDelete(value)} />;
+}
+
+Chips.propTypes = {
+    value: PropTypes.oneOfType([
+        PropTypes.shape({
+            name: PropTypes.string,
+            label: PropTypes.string,
+        }),
+        PropTypes.arrayOf(
+            PropTypes.shape({
+                name: PropTypes.string,
+                label: PropTypes.string,
+            }),
+        ),
+    ]),
+    variant: PropTypes.oneOf(['base', 'neutral', 'outline-brand', 'brand']),
+    onDelete: PropTypes.func,
+};
+
+Chips.defaultProps = {
+    value: undefined,
+    variant: 'base',
+    onDelete: () => {},
+};
+
+export default Chips;

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

@@ -0,0 +1,17 @@
+import hasChips from '../hasChips';
+
+describe('hasChips', () => {
+    it('should return true', () => {
+        const values = [{ label: 'Label', name: 'Name' }, [{ label: 'Label', name: 'Name' }]];
+        values.forEach(val => {
+            expect(hasChips(val)).toBe(true);
+        });
+    });
+
+    it('should return false', () => {
+        const values = [undefined, null, 0, false, true, []];
+        values.forEach((val, index) => {
+            expect(hasChips(val)).toBe(false);
+        });
+    });
+});

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

@@ -0,0 +1,21 @@
+import normalizeValue from '../normalizeValue';
+
+describe('normalizeValue', () => {
+    it('should return an empty array', () => {
+        const values = [undefined, null, 0, true, []];
+        values.forEach(val => {
+            expect(normalizeValue(val)).toEqual([]);
+        });
+    });
+
+    it('should return the right values', () => {
+        const values = [
+            { label: 'Label', name: 'Name', value: 'Value', icon: 'Icon' },
+            [{ label: 'Label', name: 'Name', value: 'Value', icon: 'Icon' }],
+        ];
+        const expected = [{ label: 'Label', name: 'Name', value: 'Value' }];
+        values.forEach(val => {
+            expect(normalizeValue(val)).toEqual(expected);
+        });
+    });
+});

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

@@ -0,0 +1,41 @@
+import positionResolver from '../positionResolver';
+
+const DEFAULT_MARGIN = 5;
+
+describe('positionResolver', () => {
+    it('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/hasChips.js

@@ -0,0 +1,9 @@
+export default function hasChips(value) {
+    if (!value) {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    return typeof value === 'object';
+}

src/components/MultiSelect/helpers/index.js

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

src/components/MultiSelect/helpers/normalizeValue.js

@@ -0,0 +1,26 @@
+export default function normalizeValue(value) {
+    if (!value || typeof value !== 'object') {
+        return [];
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return [];
+        }
+        return value.map(item => {
+            const { label, name, value: itemValue } = item;
+            return {
+                label,
+                name,
+                value: itemValue,
+            };
+        });
+    }
+    const { label, name, value: itemValue } = value;
+    return [
+        {
+            label,
+            name,
+            value: itemValue,
+        },
+    ];
+}

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;
+}