@transferwise/components 45.12.0 → 45.14.0

package/src/typeahead/Typeahead.less

@@ -0,0 +1,229 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/legacy-variables.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+
+@animation-timing-function: ease-in-out;
+@animation-duration: 0.03s;
+
+.typeahead {
+  &.open {
+    .input-group {
+      z-index: @zindex-popover;
+    }
+  }
+
+  .dropdown.btn-block {
+    display: block;
+  }
+
+  .dropdown-menu {
+    max-width: 100%;
+    width: 100%;
+    .np-theme-personal--forest-green &,
+    .np-theme-personal--bright-green &,
+    .np-theme-personal--dark & {
+      background-color: var(--color-background-elevated);
+    }
+  }
+
+  &--multiple {
+    .np-chip {
+      margin-bottom: auto;
+      animation-name: slide;
+      animation-duration: @animation-duration;
+      animation-timing-function: @animation-timing-function;
+
+      &:first-child {
+        animation-name: slideFirst;
+      }
+
+      &-remove {
+        animation-name: fadeIn;
+        animation-duration: @animation-duration;
+        animation-timing-function: @animation-timing-function;
+      }
+    }
+
+    .form-control {
+      height: auto;
+      min-height: auto;
+      padding-top: 0;
+      padding-bottom: 0;
+      overflow: auto;
+    }
+
+    .typeahead__input {
+      border: none;
+      outline: none;
+      float: none;
+      align-self: stretch;
+      padding: 0;
+    }
+
+    .typeahead__input-aligner {
+      height: 40px;
+      display: inline-block;
+      width: 0;
+    }
+
+    .typeahead__input-container {
+      cursor: text;
+      display: flex;
+    }
+
+    .sizer {
+      white-space: pre;
+      position: absolute;
+      visibility: hidden;
+      width: auto;
+    }
+
+    &.typeahead--has-value {
+      .typeahead__input-container {
+        .padding(left, var(--size-8));
+      }
+
+      .input-group-addon + .typeahead__input-container {
+        padding-left: 0;
+      }
+
+      .typeahead__input {
+        margin-bottom: calc(-1 * var(--size-8) + 1px);
+        .margin(left, var(--size-4));
+      }
+
+      .typeahead__input-wrapper {
+        &::after {
+          content: "";
+          height: calc(var(--size-8) - 1);
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &__input-wrapper {
+    width: 100%;
+    margin-top: -1px;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    align-items: center;
+    .np-theme-personal & {
+      margin-top: 0;
+    }
+  }
+
+  &--empty {
+    &.typeahead--multiple {
+      .typeahead__input-wrapper {
+        padding: 0;
+        margin: 0;
+      }
+    }
+  }
+
+  // SIZES
+  &-sm {
+    &.typeahead--multiple {
+      .typeahead__input-container {
+        min-height: @input-height-small;
+      }
+
+      .typeahead__input {
+        padding-top: 0;
+      }
+    }
+  }
+
+  &-md {
+    &.typeahead--multiple {
+      .typeahead__input-container {
+        min-height: @input-height-base;
+        .np-theme-personal & {
+          // TODO: Remove this value later or use variable fo it, right now it equals to Money Input min-height.
+          min-height: 53px;
+        }
+      }
+    }
+  }
+
+  &-lg {
+    &.typeahead--multiple {
+      .typeahead__input-container {
+        min-height: @input-height-large;
+      }
+
+      .typeahead__input {
+        padding-top: calc(var(--size-8) - 1);
+      }
+
+      .typeahead__input-wrapper {
+        padding-bottom: var(--size-8);
+        margin: 0;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      .np-chip {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  @keyframes slide {
+    from {
+      transform: translateX(-12px);
+    }
+
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes slideFirst {
+    from {
+      transform: translateX(-4px);
+    }
+
+    to {
+      transform: none;
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 0.6;
+    }
+  }
+
+  @media (--screen-xs-max) {
+    .dropdown.open .dropdown-menu {
+      position: absolute;
+      bottom: auto;
+      overflow: scroll;
+    }
+  }
+
+  .np-theme-personal & {
+    .input-group:not(.disabled,:disabled,.input-group--has-error):focus-within .tw-icon-search {
+      color: var(--color-interactive-primary);
+    }
+    .tw-icon-search {
+      color: var(--color-interactive-secondary);
+    }
+    .np-chip {
+      margin-top: 9px !important;
+    }
+    .np-chip--removable {
+      .np-text-body-default-bold {
+        padding-right: var(--size-16);
+      }
+    }
+  }
+}

package/src/typeahead/Typeahead.spec.js

@@ -0,0 +1,379 @@
+import { mount } from 'enzyme';
+import doTimes from 'lodash.times';
+
+import { InlineAlert } from '..';
+import { Sentiment } from '../common';
+import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
+import KeyCodes from '../common/keyCodes';
+
+import Typeahead from './Typeahead';
+
+const defaultLocale = 'en-GB';
+
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ locale: defaultLocale }} />;
+    },
+  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => `${id}` }),
+  defineMessages: (translations) => translations,
+}));
+
+describe('Typeahead', () => {
+  let component;
+  let props;
+  const closeButton = () => component.find('.input-group-addon button');
+  const formGroup = () => component.find('.form-group');
+  const input = () => component.find('input');
+  const chip = () => component.find('.np-chip');
+  const option = () => component.find('.dropdown-item');
+  const menu = () => component.find('.dropdown');
+
+  beforeEach(() => {
+    props = {
+      id: 'test',
+      onChange: () => {},
+      name: 'test',
+      options: [
+        {
+          label: 'Test',
+        },
+        {
+          label: 'Test1',
+        },
+        {
+          label: 'Test2',
+        },
+        {
+          label: 'Test3',
+        },
+      ],
+    };
+
+    component = mount(<Typeahead {...props} />);
+  });
+
+  it('renders addon', () => {
+    expect(component.find('#test-addon')).toHaveLength(0);
+    component.setProps({ addon: <div id="test-addon" /> });
+    expect(component.find('#test-addon')).toHaveLength(1);
+  });
+
+  it('renders clear button', () => {
+    component.setProps({
+      clearable: true,
+    });
+    input().simulate('change', { target: { value: 'test' } });
+
+    expect(closeButton()).toHaveLength(1);
+  });
+
+  it('splits pasted value correctly', () => {
+    const chips = ['test', 'test2', 'test3'];
+    const event = {
+      preventDefault: jest.fn(),
+      clipboardData: {
+        getData: () => chips.join(', '),
+      },
+    };
+
+    component.setProps({
+      allowNew: true,
+      multiple: true,
+      chipSeparators: [',', ' '],
+    });
+
+    input().simulate('paste', event);
+    const renderedChips = chip().map((chipNode) => chipNode.text());
+
+    expect(renderedChips.every((label, idx) => chips[idx] === label)).toBe(true);
+    expect(renderedChips).toHaveLength(chips.length);
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('removes last selected value when backspace clicked on empty input', () => {
+    const event = {
+      key: 'Backspace',
+      keyCode: KeyCodes.BACKSPACE,
+    };
+
+    component.setProps({
+      multiple: true,
+    });
+
+    expect(chip()).toHaveLength(0);
+
+    input().simulate('change', { target: { value: 'test' } });
+    option().at(0).simulate('click', fakeEvent());
+
+    expect(chip()).toHaveLength(1);
+
+    input().simulate('keyDown', event);
+
+    expect(chip()).toHaveLength(0);
+  });
+
+  it('does not remove last selected value when backspace clicked on non-empty input', () => {
+    const event = {
+      key: 'Backspace',
+      keyCode: KeyCodes.BACKSPACE,
+    };
+
+    component.setProps({
+      multiple: true,
+    });
+
+    expect(chip()).toHaveLength(0);
+
+    input().simulate('change', { target: { value: 'test' } });
+    option().at(0).simulate('click', fakeEvent());
+
+    expect(chip()).toHaveLength(1);
+
+    input().simulate('change', { target: { value: 'test' } });
+    input().simulate('keyDown', event);
+
+    expect(chip()).toHaveLength(1);
+  });
+
+  it('adds new value as selected and clears the input when separator is entered', () => {
+    const event = {
+      key: ',',
+      preventDefault: jest.fn(),
+    };
+    const text = 'test';
+
+    component.setProps({
+      multiple: true,
+      allowNew: true,
+      showSuggestions: false,
+      chipSeparators: [','],
+    });
+
+    input().simulate('change', { target: { value: text } });
+    input().simulate('keyDown', event);
+
+    expect(chip().text()).toStrictEqual(text);
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('adds new value as selected and clears the input when Enter is pressed', () => {
+    const event = {
+      key: 'Enter',
+      preventDefault: jest.fn(),
+    };
+    const text = 'test';
+
+    component.setProps({
+      multiple: true,
+      allowNew: true,
+      showSuggestions: false,
+      chipSeparators: [','],
+    });
+
+    input().simulate('change', { target: { value: text } });
+    input().simulate('keyDown', event);
+
+    expect(chip().text()).toStrictEqual(text);
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('adds new value as selected and clears the input when Tab is pressed', () => {
+    const event = {
+      key: 'Tab',
+      preventDefault: jest.fn(),
+    };
+    const text = 'test';
+
+    component.setProps({
+      multiple: true,
+      allowNew: true,
+      showSuggestions: false,
+      chipSeparators: [','],
+    });
+
+    input().simulate('change', { target: { value: text } });
+    input().simulate('keyDown', event);
+
+    expect(chip().text()).toStrictEqual(text);
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears typeahead when clear button is clicked', () => {
+    const event = {
+      key: ',',
+      preventDefault: jest.fn(),
+    };
+
+    const query = 'test';
+
+    component.setProps({
+      multiple: true,
+      allowNew: true,
+      showSuggestions: false,
+      chipSeparators: [','],
+      clearable: true,
+    });
+
+    input().simulate('change', { target: { value: query } });
+    input().simulate('keyDown', event);
+    input().simulate('change', { target: { value: query } });
+
+    expect(chip()).toHaveLength(1);
+    expect(input().getDOMNode().value).toBe(query);
+
+    closeButton().simulate('click', fakeEvent());
+    expect(chip()).toHaveLength(0);
+    expect(input().getDOMNode().value).toBe('');
+  });
+
+  it('moves selected items when down and up keys pressed', () => {
+    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.DOWN)));
+
+    expect(option().at(2).parent().is('.tw-dropdown-item--focused')).toBe(true);
+
+    input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.UP));
+    expect(option().at(1).parent().is('.tw-dropdown-item--focused')).toBe(true);
+
+    doTimes(5, () => input().simulate('keyDown', fakeKeyDownEventForKey(KeyCodes.DOWN)));
+    expect(option().last().parent().is('.tw-dropdown-item--focused')).toBe(true);
+  });
+
+  it('adds new value as selected and clears the input when no option is highlighted and enter is pressed', () => {
+    const event = {
+      key: 'Enter',
+      keyCode: KeyCodes.ENTER,
+      preventDefault: jest.fn(),
+    };
+    const text = 'test';
+
+    component.setProps({
+      multiple: true,
+      allowNew: true,
+      chipSeparators: [','],
+    });
+
+    input().simulate('change', { target: { value: text } });
+    input().simulate('keyDown', event);
+
+    expect(chip().text()).toStrictEqual(text);
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays alert when alert is provided and chips are valid or alert type is error', () => {
+    const event = {
+      key: 'Enter',
+      keyCode: KeyCodes.ENTER,
+      preventDefault: jest.fn(),
+    };
+    const text = 'test';
+
+    expect(component.find(InlineAlert)).toHaveLength(0);
+    expect(formGroup().hasClass('has-error')).toBe(false);
+    component.setProps({
+      validateChip: () => {
+        return false;
+      },
+      allowNew: true,
+      alert: {
+        message: 'test',
+        type: Sentiment.ERROR,
+      },
+    });
+
+    expect(formGroup().hasClass('has-error')).toBe(true);
+    expect(component.find(InlineAlert)).toHaveLength(1);
+
+    input().simulate('change', { target: { value: text } });
+    input().simulate('keyDown', event);
+
+    expect(formGroup().hasClass('has-error')).toBe(true);
+    expect(component.find(InlineAlert)).toHaveLength(1);
+    component.setProps({
+      alert: {
+        message: 'test',
+        type: Sentiment.WARNING,
+      },
+    });
+
+    expect(formGroup().hasClass('has-error')).toBe(true);
+    expect(component.find(InlineAlert)).toHaveLength(0);
+
+    closeButton().simulate('click', fakeEvent());
+
+    expect(formGroup().hasClass('has-error')).toBe(false);
+    expect(formGroup().hasClass('has-warning')).toBe(true);
+    expect(component.find(InlineAlert)).toHaveLength(1);
+  });
+
+  it('allows supplying options with arbitrary data that will be included with the onChange callback', () => {
+    const text = 'test';
+    const options = [
+      {
+        label: 'label 1',
+        note: 'note-1',
+        secondary: 'secondary-1',
+        value: { id: 123, name: 'Neptune' },
+      },
+    ];
+    let selectedOption;
+
+    component.setProps({
+      onChange: (selections) => (selectedOption = selections[0]),
+      options: options,
+    });
+
+    input().simulate('change', { target: { value: text } });
+    option().at(0).simulate('click', fakeEvent());
+    expect(selectedOption).toStrictEqual({
+      label: 'label 1',
+      note: 'note-1',
+      secondary: 'secondary-1',
+      value: { id: 123, name: 'Neptune' },
+    });
+  });
+
+  describe('menu', () => {
+    it('should render footer', () => {
+      component.setProps({
+        footer: <div id="footer">footer</div>,
+      });
+
+      expect(component.find('#footer')).toHaveLength(1);
+    });
+
+    it('renders all options', () => {
+      const options = option().map((optNode) => optNode.text());
+      expect(options).toHaveLength(props.options.length);
+      expect(options.every((label, i) => label === props.options[i].label));
+    });
+
+    it('does not render new option if showNewEntry is false', () => {
+      component.setProps({
+        allowNew: true,
+        showNewEntry: false,
+      });
+      input().simulate('change', { target: { value: 'check' } });
+
+      const options = option().map((optNode) => optNode.text());
+      expect(options).toHaveLength(props.options.length);
+    });
+
+    it('renders new option if showNewEntry is true', () => {
+      component.setProps({
+        allowNew: true,
+        showNewEntry: true,
+      });
+      input().simulate('change', { target: { value: 'check' } });
+
+      const options = option().map((optNode) => optNode.text());
+      expect(options).toHaveLength(props.options.length + 1);
+    });
+
+    it('does not show options if query is too short', () => {
+      expect(menu().is('.open')).toBe(false);
+      input().simulate('change', { target: { value: 'test' } });
+      expect(menu().is('.open')).toBe(true);
+    });
+  });
+});

package/src/typeahead/Typeahead.story.js

@@ -0,0 +1,116 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import { Search as SearchIcon } from '@transferwise/icons';
+import { useState } from 'react';
+
+import { Sentiment } from '../common';
+import { within, userEvent } from '../test-utils';
+
+import Typeahead from './Typeahead';
+
+export default {
+  component: Typeahead,
+  title: 'Forms/Typeahead',
+};
+
+const validateChip = (option) => {
+  // eslint-disable-next-line unicorn/no-unsafe-regex
+  return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    option.label,
+  );
+};
+
+export const createable = () => {
+  return (
+    <Typeahead
+      id="typeahead"
+      name="typeahead-input-name"
+      size="md"
+      maxHeight={100}
+      footer={<div>Want a footer? Style it!</div>}
+      multiple
+      clearable
+      allowNew
+      showSuggestions={false}
+      showNewEntry={false}
+      placeholder="placeholder"
+      chipSeparators={[',', ' ']}
+      validateChip={validateChip}
+      addon={<SearchIcon size={24} />}
+      options={[]}
+      onChange={() => {}}
+      onBlur={() => {}}
+    />
+  );
+};
+
+createable.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  userEvent.type(canvas.getByRole('combobox'), 'chip{enter}chip2{enter}');
+};
+
+export const Basic = () => {
+  const [options, setOptions] = useState([
+    {
+      label: 'A thing',
+      note: 'with a note',
+    },
+    {
+      label: 'Another thing',
+      secondary: 'with secondary text this time',
+    },
+    {
+      label: 'Profile',
+    },
+    {
+      label: 'Globe',
+    },
+    {
+      label: 'British pound',
+    },
+    {
+      label: 'Euro',
+    },
+    {
+      label: 'Something else',
+    },
+  ]);
+
+  const validateChipWhenMultiple = () => {
+    return multiple && allowNew ? (option) => validateChip(option) : undefined;
+  };
+
+  const multiple = boolean('multiple', false);
+  const clearable = boolean('clearable', false);
+  const allowNew = boolean('allowNew', false);
+  const showSuggestions = boolean('showSuggestions', true);
+  const showNewEntry = boolean('showNewEntry', true);
+  const showAlert = boolean('alert', false);
+  const alertType = select('alert type', [Sentiment.ERROR, Sentiment.WARNING], Sentiment.ERROR);
+
+  return (
+    <Typeahead
+      id="typeahead"
+      name="typeahead-input-name"
+      size="md"
+      maxHeight={100}
+      footer={<div>Want a footer? Style it!</div>}
+      multiple={multiple}
+      clearable={clearable}
+      allowNew={allowNew}
+      showSuggestions={showSuggestions}
+      showNewEntry={showNewEntry}
+      placeholder="placeholder"
+      chipSeparators={[',', ' ']}
+      validateChip={validateChipWhenMultiple}
+      alert={showAlert && { message: `Couldn't add item`, type: alertType }}
+      addon={<SearchIcon size={24} />}
+      options={options}
+      inputAutoComplete="off"
+      onSearch={() => {
+        setTimeout(() => setOptions(options), 1500);
+      }}
+      onChange={() => {}}
+      onBlur={() => {}}
+    />
+  );
+};