@transferwise/components 46.40.0 → 46.41.0

package/src/inlineAlert/InlineAlert.tsx

@@ -1,8 +1,8 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
-import { Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,15 +17,22 @@ export default function InlineAlert({
   className,
   children,
 }: InlineAlertProps) {
-  const danger = type === 'negative' || type === 'error';
   return (
     <div
       role="alert"
       id={id}
-      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+      className={classNames(
+        'alert alert-detach',
+        `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`,
+        className,
+      )}
     >
-      {danger && <AlertCircleIcon />}
-      <div>{children}</div>
+      <div className="d-inline-flex">
+        {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
+          <StatusIcon sentiment={type} size={Size.SMALL} />
+        )}
+        <div className="np-text-body-default">{children}</div>
+      </div>
     </div>
   );
 }

package/src/main.css

@@ -4208,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/src/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.less

@@ -60,7 +60,8 @@
   }
 }
 
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 
@@ -68,6 +69,7 @@
   background-color: var(--color-content-secondary);
 }
 
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.tsx

@@ -26,7 +26,7 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
   return (
     <span
       data-testid="status-icon"
-      className={classNames('status-circle', 'status-circle-' + size, sentiment)}
+      className={classNames('status-circle', `status-circle-${size}`, sentiment)}
     >
       <Icon className={classNames('status-icon', iconColor)} />
     </span>

package/src/dateInput/DateInput.rtl.spec.tsx

@@ -1,17 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, mockResizeObserver, render, screen } from '../test-utils';
-import DateInput from './DateInput';
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('DateInput', () => {
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Date of birth">
-        <DateInput onChange={() => {}} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
-  });
-});

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',
-      });
-    });
-  });
-});