@transferwise/components 46.39.0 → 46.41.0

package/src/dateInput/DateInput.spec.js

@@ -1,477 +0,0 @@
-import { shallow, mount } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import { DateInput } from '..';
-import { mockMatchMedia, mockResizeObserver } from '../test-utils';
-
-const LOCALES = {
-  jp: 'ja-JP',
-  us: 'en-US',
-};
-const DEFAULT_LOCALE = 'en-GB';
-const FEBRUARY_INDEX = 1;
-const AUGUST_INDEX = 7;
-
-const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
-const MONTH_SELECTOR = 'SelectInput';
-const YEAR_SELECTOR = 'ForwardRef(Input)[name="year"]';
-
-jest.mock('./DateInput.messages', () => ({
-  monthLabel: {
-    id: 'neptune.DateInput.month.label',
-    defaultMessage: 'Month',
-  },
-  dayLabel: {
-    id: 'neptune.DateInput.day.label',
-    defaultMessage: 'Day',
-  },
-  yearLabel: {
-    id: 'neptune.DateInput.year.label',
-    defaultMessage: 'Year',
-  },
-  dayPlaceholder: {
-    id: 'neptune.DateInput.day.placeholder',
-    defaultMessage: 'DD',
-    description: 'Placeholder for 2-digit day values within an input.',
-  },
-  yearPlaceholder: {
-    id: 'neptune.DateInput.year.placeholder',
-    defaultMessage: 'YYYY',
-    description: 'Placeholder for 4-digit year values within an input.',
-  },
-}));
-
-jest.mock('react-intl');
-
-describe('Date Input Component', () => {
-  let selectMonth;
-  let inputDay;
-  let inputYear;
-  let component;
-  const props = { onChange: jest.fn() };
-
-  beforeEach(() => {
-    mockMatchMedia();
-    mockResizeObserver();
-    useIntl.mockReturnValue({
-      locale: DEFAULT_LOCALE,
-      formatMessage: (message) => message.defaultMessage,
-    });
-    component = shallow(<DateInput {...props} />);
-
-    selectMonth = component.find(MONTH_SELECTOR);
-    inputDay = component.find(DAY_SELECTOR);
-    inputYear = component.find(YEAR_SELECTOR);
-  });
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  describe('when initialised without a model', () => {
-    it('sets day field to empty', () => {
-      expect(inputDay.prop('value')).toBe('');
-    });
-
-    it('sets month field to 0', () => {
-      expect(selectMonth.props().value).toBeNull();
-    });
-
-    it('sets year field to empty', () => {
-      expect(inputYear.prop('value')).toBe('');
-    });
-
-    it('allows 0 prefixed day values', () => {
-      inputDay.simulate('change', { target: { value: '0' } });
-      setTimeout(() => {
-        expect(inputDay.prop('value')).toBe('0');
-      });
-    });
-
-    it('does not allow 00 as a day value', () => {
-      inputDay.simulate('change', { target: { value: '00' } });
-      setTimeout(() => {
-        expect(inputDay.prop('value')).toBe('1');
-      });
-    });
-  });
-
-  describe('when initialised with a model', () => {
-    describe('as a valid Date instance', () => {
-      it(`sets values correctly`, () => {
-        component = shallow(<DateInput {...props} value="1971-02-01" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
-        expect(inputYear.prop('value')).toBe(1971);
-      });
-    });
-
-    describe('as a valid short ISO8601 string', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-08-22" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('as a valid short ISO8601 string with year and month only', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-08" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('as a valid long ISO8601 string', () => {
-      it('sets values correctly', () => {
-        component = shallow(<DateInput {...props} value="1990-02-28T00:00:00.000Z" />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
-        expect(inputYear.prop('value')).toBe(1990);
-      });
-    });
-
-    describe('when disabled is set to true', () => {
-      it('sets values to disabled', () => {
-        component = shallow(<DateInput {...props} disabled />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('disabled')).toBe(true);
-        expect(selectMonth.prop('disabled')).toBe(true);
-        expect(inputYear.prop('disabled')).toBe(true);
-      });
-    });
-
-    describe('when disabled is set to false', () => {
-      it("doesn't sets values to disabled", () => {
-        component = shallow(<DateInput {...props} />);
-
-        selectMonth = component.find(MONTH_SELECTOR);
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        expect(inputDay.prop('disabled')).toBe(false);
-        expect(selectMonth.prop('disabled')).toBe(false);
-        expect(inputYear.prop('disabled')).toBe(false);
-      });
-    });
-  });
-
-  describe('when locale is provided', () => {
-    it('shows day before month if locale is GB', () => {
-      useIntl.mockReturnValue({
-        locale: DEFAULT_LOCALE,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Day');
-      expect(component.find('span').at(1).text()).toBe('Month');
-      expect(component.find('span').at(2).text()).toBe('Year');
-    });
-
-    it('shows month before day if locale is US', () => {
-      useIntl.mockReturnValue({
-        locale: LOCALES.us,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Month');
-      expect(component.find('span').at(1).text()).toBe('Day');
-      expect(component.find('span').at(2).text()).toBe('Year');
-    });
-
-    it('shows year, month, day if locale is JP', () => {
-      useIntl.mockReturnValue({
-        locale: LOCALES.jp,
-        formatMessage: (message) => message.defaultMessage,
-      });
-
-      component = shallow(<DateInput {...props} />);
-
-      expect(component.find('span').at(0).text()).toBe('Year');
-      expect(component.find('span').at(1).text()).toBe('Month');
-      expect(component.find('span').at(2).text()).toBe('Day');
-    });
-  });
-
-  describe('when initialised', () => {
-    describe('without an initial value', () => {
-      it(`doesn't call the onChange callback`, () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(props.onChange).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('with an initial value', () => {
-      it(`doesn't call the onChange callback`, () => {
-        component = mount(<DateInput {...props} value="1990-08" />);
-
-        expect(props.onChange).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('with placeholders set', () => {
-      it(`doesn't override placeholders`, () => {
-        const placeholders = {
-          day: 'DayPlaceholder',
-          month: 'MonthPlaceholder',
-          year: 'YearPlaceholder',
-        };
-        component = mount(<DateInput {...props} placeholders={placeholders} />);
-
-        expect(component.find(DAY_SELECTOR).props().placeholder).toStrictEqual('DayPlaceholder');
-        expect(component.find(MONTH_SELECTOR).props().placeholder).toStrictEqual(
-          'MonthPlaceholder',
-        );
-        expect(component.find(YEAR_SELECTOR).props().placeholder).toStrictEqual('YearPlaceholder');
-      });
-    });
-
-    describe('with placeholders not set', () => {
-      it('uses localized defaults', () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(component.find(DAY_SELECTOR).props().placeholder).toStrictEqual('DD');
-        expect(component.find(MONTH_SELECTOR).props().placeholder).toStrictEqual('Month');
-        expect(component.find(YEAR_SELECTOR).props().placeholder).toStrictEqual('YYYY');
-      });
-    });
-
-    describe('with labels set', () => {
-      it(`doesn't override placeholders`, () => {
-        component = mount(
-          <DateInput
-            {...props}
-            dayLabel="dayLabel"
-            monthLabel="monthLabel"
-            yearLabel="yearLabel"
-          />,
-        );
-
-        expect(component.find({ children: 'dayLabel', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'monthLabel', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'yearLabel', type: 'span' })).toBeTruthy();
-      });
-    });
-
-    describe('with labels not set', () => {
-      it('uses localized defaults', () => {
-        component = mount(<DateInput {...props} />);
-
-        expect(component.find({ children: 'Day', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'Month', type: 'span' })).toBeTruthy();
-        expect(component.find({ children: 'Year', type: 'span' })).toBeTruthy();
-      });
-    });
-  });
-
-  describe('when user interacts', () => {
-    describe('with an empty date input', () => {
-      it('calls onChange with null if month is not selected', () => {
-        component = mount(<DateInput {...props} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
-
-    describe('with day input', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-02-11" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '12' } });
-
-        expect(props.onChange).toHaveBeenCalledWith('2001-02-12');
-      });
-
-      it('returns null for invalid input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: 'aa' } });
-
-        expect(props.onChange).toHaveBeenCalledWith(null);
-      });
-
-      it('returns null when day input is cleared', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-
-        inputDay = component.find(DAY_SELECTOR);
-
-        inputDay.simulate('change', { target: { value: '' } });
-
-        expect(props.onChange).toHaveBeenLastCalledWith(null);
-      });
-    });
-
-    describe('with year input', () => {
-      it('returns correct value for correct input', () => {
-        component = mount(<DateInput {...props} value="2001-01-01" />);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputYear.simulate('change', { target: { value: '1990' } });
-
-        expect(props.onChange).toHaveBeenCalledWith('1990-01-01');
-      });
-    });
-  });
-
-  describe('with day input and year input', () => {
-    describe('when switching from day input to year input', () => {
-      it('does not call onBlur nor onFocus', () => {
-        const onFocus = jest.fn();
-        const onBlur = jest.fn();
-
-        component = mount(<DateInput {...props} onFocus={onFocus} onBlur={onBlur} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputDay.simulate('focus');
-
-        inputDay.simulate('blur', { relatedTarget: inputYear.getDOMNode() });
-        inputYear.simulate('focus', { relatedTarget: inputDay.getDOMNode() });
-        inputYear.simulate('blur');
-
-        expect(onFocus).toHaveBeenCalledTimes(1);
-        expect(onBlur).toHaveBeenCalledTimes(1);
-
-        jest.useRealTimers();
-      });
-
-      it('does not call onBlur on IE11 either', () => {
-        const onBlur = jest.fn();
-
-        component = mount(<DateInput {...props} onBlur={onBlur} />);
-
-        inputDay = component.find(DAY_SELECTOR);
-        inputYear = component.find(YEAR_SELECTOR);
-
-        inputDay.simulate('focus');
-
-        Object.defineProperty(document, 'activeElement', {
-          value: inputYear.getDOMNode(),
-        });
-
-        inputDay.simulate('blur', { relatedTarget: null });
-        inputYear.simulate('focus', { relatedTarget: inputDay.getDOMNode() });
-
-        expect(onBlur).not.toHaveBeenCalled();
-
-        jest.useRealTimers();
-      });
-    });
-  });
-
-  describe('when user selects invalid dates', () => {
-    it('corrects days in lap years February', () => {
-      component = mount(<DateInput {...props} value="2000-02-29" />);
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(29);
-
-      inputYear = component.find(YEAR_SELECTOR);
-      inputYear.simulate('change', { target: { value: 1999 } });
-
-      expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
-    });
-
-    it('lowers days if value entered too high', () => {
-      const comp = shallow(<DateInput {...props} />);
-
-      inputDay = comp.find(DAY_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: 32 } });
-
-      expect(comp.find(DAY_SELECTOR).prop('value')).toBe(31);
-    });
-
-    it('highers days if value entered too low', () => {
-      const comp = shallow(<DateInput {...props} />);
-
-      inputDay = comp.find(DAY_SELECTOR);
-
-      inputDay.simulate('change', { target: { value: -1 } });
-
-      expect(comp.find(DAY_SELECTOR).prop('value')).toBe(1);
-    });
-  });
-
-  describe('when in mode month and year only', () => {
-    beforeEach(() => {
-      const extraProps = {
-        mode: 'month-year',
-        value: '2001-01-01',
-      };
-      component = mount(<DateInput {...{ ...props, ...extraProps }} />);
-    });
-
-    it('should only display month and year inputs', () => {
-      expect(component.exists(YEAR_SELECTOR)).toBe(true);
-      expect(component.exists(MONTH_SELECTOR)).toBe(true);
-      expect(component.exists(DAY_SELECTOR)).toBe(false);
-    });
-  });
-
-  describe('when selectProps is provided', () => {
-    beforeEach(() => {
-      component = shallow(
-        <DateInput
-          selectProps={{
-            buttonProps: {
-              'aria-label': 'mock-button-label',
-            },
-          }}
-          {...props}
-        />,
-      );
-    });
-
-    it('renders Select component with expected props', () => {
-      const select = component.find(MONTH_SELECTOR);
-
-      expect(select.prop('buttonProps')).toStrictEqual({
-        'aria-label': 'mock-button-label',
-      });
-    });
-  });
-});

package/src/upload/Upload.story.js

@@ -1,36 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, number, select, text } from '@storybook/addon-knobs';
-
-import Upload from '.';
-
-export default {
-  component: Upload,
-  title: 'Forms/Upload',
-};
-
-export const Basic = () => {
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const maxSize = number('max file size', 4000000);
-  const usAccept = text('accepted format', '*');
-  const usDisabled = boolean('disabled', false);
-  const psButtonDisabled = boolean('psButtonDisabled', false);
-
-  return (
-    <Upload
-      maxSize={maxSize}
-      size={size}
-      usAccept={usAccept}
-      usLabel="Front of your ID document"
-      usDisabled={usDisabled}
-      psButtonDisabled={psButtonDisabled}
-      httpOptions={{
-        url: 'https://httpbin.org/post',
-        method: 'POST',
-      }}
-      onStart={(file) => action('onStart', file)}
-      onSuccess={(httpResponse, fileName) => action('onSuccess', httpResponse, fileName)}
-      onFailure={(httpResponse) => action('onFailure', httpResponse)}
-      onCancel={() => action('onCancel')}
-    />
-  );
-};

package/src/upload/index.js

@@ -1,2 +0,0 @@
-export { UploadStep } from './uploadSteps';
-export { default } from './Upload';

package/src/upload/steps/completeStep/completeStep.js

@@ -1,98 +0,0 @@
-import { AlertCircle as AlertCircleIcon, Document as DocumentIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Priority, Typography } from '../../..';
-import Body from '../../../body';
-import Button from '../../../button';
-import { Sentiment, Size } from '../../../common';
-import StatusIcon from '../../../statusIcon';
-import Title from '../../../title';
-
-const CompleteStep = (props) => {
-  const { isModern } = useTheme();
-  const {
-    csButtonText,
-    csFailureText,
-    csSuccessText,
-    fileName,
-    isComplete,
-    isError,
-    isImage,
-    onClear,
-    uploadedImage,
-  } = props;
-  return (
-    <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
-      <div className="droppable-card-content">
-        <div
-          className="droppable-card-content d-flex flex-column align-items-center"
-          aria-live="polite"
-        >
-          {isError ? (
-            <>
-              {isModern ? (
-                <StatusIcon size={Size.LARGE} sentiment={Sentiment.NEGATIVE} />
-              ) : (
-                <AlertCircleIcon size={24} className="text-negative" />
-              )}
-              {csFailureText && (
-                <p className={classNames('m-t-2', { 'm-b-0': isModern })}>{csFailureText}</p>
-              )}
-            </>
-          ) : (
-            <>
-              {isImage && uploadedImage ? (
-                <img src={uploadedImage} alt="OK" className="thumbnail " />
-              ) : (
-                <DocumentIcon />
-              )}
-
-              {fileName && (
-                <Body as="p" className="m-b-0">
-                  {fileName}
-                </Body>
-              )}
-              {csSuccessText && (
-                <Title className="caption m-t-1" type={Typography.TITLE_BODY}>
-                  {csSuccessText}
-                </Title>
-              )}
-            </>
-          )}
-        </div>
-        {csButtonText && (
-          <Button
-            priority={isModern ? Priority.PRIMARY : Priority.SECONDARY}
-            className={classNames({
-              'm-t-1': isModern && !isError,
-              'm-t-2': isModern && isError,
-              'm-t-3': !isModern,
-            })}
-            onClick={(event) => onClear(event)}
-          >
-            {csButtonText}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-CompleteStep.propTypes = {
-  csButtonText: PropTypes.string.isRequired,
-  csSuccessText: PropTypes.string.isRequired,
-  csFailureText: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  isError: PropTypes.bool.isRequired,
-  isImage: PropTypes.bool.isRequired,
-  onClear: PropTypes.func.isRequired,
-  uploadedImage: PropTypes.string,
-};
-CompleteStep.defaultProps = {
-  uploadedImage: null,
-};
-
-export default CompleteStep;

package/src/upload/steps/completeStep/index.js

@@ -1 +0,0 @@
-export { default } from './completeStep';

package/src/upload/steps/mediaUploadStep/index.js

@@ -1 +0,0 @@
-export { default } from './mediaUploadStep';

package/src/upload/steps/mediaUploadStep/mediaUploadStep.js

@@ -1,80 +0,0 @@
-import { Upload as UploadIcon } from '@transferwise/icons';
-import PropTypes from 'prop-types';
-
-import Body from '../../../body';
-import Button from '../../../button/Button';
-import { Typography } from '../../../common';
-import Title from '../../../title';
-import { getSupportedSpotMimeTypes, requestMedia } from '../../utils';
-
-const MediaUploadStep = ({
-  isComplete,
-  usAccept,
-  usButtonText,
-  usDisabled,
-  usHelpImage,
-  usLabel,
-  usPlaceholder,
-  fileDropped,
-}) => {
-  const getMediaFile = () => {
-    const allowedMimeTypes = getSupportedSpotMimeTypes(usAccept);
-
-    if (allowedMimeTypes.length === 0) {
-      throw new Error('provided mimeTypes not supported');
-    }
-
-    const mediaRequest = { allowedMimeTypes };
-    requestMedia(mediaRequest).then((file) => fileDropped(file));
-  };
-
-  const getImage = () => {
-    if (!usHelpImage) {
-      return (
-        <div className="circle circle-sm circle-inverse p-t-1">
-          <UploadIcon size={24} />
-        </div>
-      );
-    }
-
-    if (typeof usHelpImage === 'string') {
-      return <img src={usHelpImage} alt={usLabel} className="thumbnail text-xs-center" />;
-    }
-
-    return usHelpImage;
-  };
-
-  return (
-    <div>
-      <div className="droppable-default-card" aria-hidden={isComplete}>
-        <div className="droppable-card-content">
-          <div className="m-b-3">{getImage()}</div>
-          {usLabel && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
-              {usLabel}
-            </Title>
-          )}
-          {usPlaceholder && (
-            <Body as="p" type={Typography.BODY_LARGE} className="m-b-3">{`${usPlaceholder}`}</Body>
-          )}
-          <Button disabled={usDisabled} onClick={getMediaFile}>
-            {usButtonText || <UploadIcon size={24} className="m-r-0" />}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-MediaUploadStep.propTypes = {
-  fileDropped: PropTypes.func.isRequired,
-  isComplete: PropTypes.bool.isRequired,
-  usAccept: PropTypes.string.isRequired,
-  usButtonText: PropTypes.string.isRequired,
-  usDisabled: PropTypes.bool.isRequired,
-  usHelpImage: PropTypes.node.isRequired,
-  usLabel: PropTypes.string.isRequired,
-  usPlaceholder: PropTypes.string.isRequired,
-};
-
-export default MediaUploadStep;