@transferwise/components 0.0.0-experimental-468b85f → 0.0.0-experimental-a9e2e05

package/src/button/Button.story.tsx

@@ -1,163 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
-
-import { ControlType, Priority } from '../common';
-import { storyConfig } from '../test-utils';
-
-import Button from './Button';
-
-export default {
-  component: Button,
-  title: 'Actions/Button',
-  args: {
-    children: 'Button text',
-    loading: false,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
-  argTypes: {
-    as: {
-      type: {
-        name: 'enum',
-        value: ['button', 'a'],
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
-
-export const Focused = storyConfig<Story>(
-  {
-    parameters: {
-      chromatic: {
-        delay: 1000,
-      },
-    },
-    play: async ({ canvasElement }) => {
-      const canvas = within(canvasElement);
-      await userEvent.click(canvas.getByRole('button'));
-    },
-  },
-  {
-    variants: ['dark'],
-  },
-);
-
-export const Variants = storyConfig<Story>(
-  {
-    render: (args) => {
-      return (
-        <>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Accent</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Positive</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Negative</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-            </div>
-          </div>
-          <div className="m-b-2">
-            <div className="title-4 m-b-1">Disabled</div>
-            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-              <Button {...args} priority={Priority.PRIMARY} disabled />
-              <Button {...args} priority={Priority.SECONDARY} disabled />
-              <Button {...args} priority={Priority.TERTIARY} disabled />
-            </div>
-          </div>
-        </>
-      );
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-/**
- * The purpose of the `loading` mode is to convey a message to the
- * user that some asynchronous process has been triggered, likely
- * in response to their previous action.
- *
- * Although it carries some similarities with the `disabled` mode
- * (users cannot activate a loading button), it's not hidden from
- * the keyboard and assistive tech users (users can focus on it,
- * and it's announced by screen readers), and is also much more
- * accessible to sighted users due to its default, high contrast.
- */
-export const Loading = storyConfig<Story>(
-  {
-    render: (args) => {
-      return (
-        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
-          <Button {...args} loading priority={Priority.PRIMARY} />
-          <Button {...args} loading priority={Priority.SECONDARY} />
-          <Button {...args} loading priority={Priority.TERTIARY} />
-          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-        </div>
-      );
-    },
-    args: {
-      loading: true,
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-export const SocialMedia = storyConfig<Story>(
-  {
-    render: () => {
-      return (
-        <>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-google">
-              Login with Google
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-facebook">
-              Login with Facebook
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-lg btn-facebook">
-              Large Button
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-block btn-facebook">
-              Block Button
-            </button>
-          </div>
-          <div className="m-b-2">
-            <button type="button" className="btn btn-lg btn-block btn-facebook">
-              Large Block Button
-            </button>
-          </div>
-        </>
-      );
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
-
-export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
-  variants: ['default', 'dark', 'rtl', 'mobile'],
-});

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -1,300 +0,0 @@
-import { Field } from '../field/Field';
-import {
-  mockMatchMedia,
-  mockResizeObserver,
-  render,
-  screen,
-  within,
-  userEvent,
-} from '../test-utils';
-
-import PhoneNumberInput, { PhoneNumberInputProps } from './PhoneNumberInput';
-import { useIntl } from 'react-intl';
-
-const formatMessage = (message: { id?: string }) => String(message.id);
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-jest.mock('react-intl', () => ({
-  ...jest.requireActual('react-intl'),
-  useIntl: jest.fn(() => ({ formatMessage, locale: 'en-GB' })),
-}));
-const mockUseIntl = useIntl as jest.Mock;
-
-mockMatchMedia();
-mockResizeObserver();
-
-describe('PhoneNumberInput', () => {
-  afterEach(jest.clearAllMocks);
-
-  const props = { onChange: jest.fn() };
-
-  const customRender = (overrides: Partial<PhoneNumberInputProps> = {}) =>
-    render(<PhoneNumberInput {...props} {...overrides} />);
-
-  const getPrefixEl = () => screen.getByRole('combobox');
-  const getInputEl = () => screen.getByRole('textbox');
-
-  describe('defaults', () => {
-    it('should set prefix control to default UK value', () => {
-      customRender();
-      expect(getPrefixEl()).toHaveTextContent('+44');
-    });
-
-    it('should set number control to empty', () => {
-      customRender();
-      expect(getInputEl()).toHaveValue('');
-    });
-
-    it('should not disable the select', () => {
-      customRender();
-      expect(getPrefixEl()).toBeEnabled();
-    });
-
-    it('should not disable the input', () => {
-      customRender();
-      expect(getInputEl()).toBeEnabled();
-    });
-  });
-
-  it('should propagate `initialValue`', () => {
-    const prefix = '+39';
-    const number = '123456789';
-    customRender({ initialValue: `${prefix}${number}` });
-    expect(getPrefixEl()).toHaveTextContent(prefix);
-    expect(getInputEl()).toHaveValue(number);
-  });
-
-  describe('id prop', () => {
-    it('should not render id by default', () => {
-      customRender();
-      expect(getPrefixEl()).not.toHaveAttribute('id');
-      expect(getInputEl()).not.toHaveAttribute('id');
-    });
-
-    it('should respect `id` for the input and ignore the select', () => {
-      const id = 'component-id';
-      customRender({ id });
-      expect(getPrefixEl()).not.toHaveAttribute('id');
-      expect(getInputEl()).toHaveAttribute('id', id);
-    });
-  });
-
-  describe('pasting', () => {
-    const initialPrefix = '+48';
-    const initialNumber = '987654321';
-
-    const renderAndPaste = async (value: string) => {
-      customRender({ initialValue: `${initialPrefix}${initialNumber}` });
-      await userEvent.tab();
-      await userEvent.tab();
-      await userEvent.paste(value);
-    };
-
-    [
-      { number: '+36303932551', countryCode: '+36', localNumber: '303932551' },
-      { number: '+39123456781', countryCode: '+39', localNumber: '123456781' },
-      { number: '+44 7700 900415', countryCode: '+44', localNumber: '7700900415' },
-      { number: '+2975557308515', countryCode: '+297', localNumber: '5557308515' },
-      { number: '+297-555-7217-360', countryCode: '+297', localNumber: '5557217360' },
-      { number: '+213-555-5160-67', countryCode: '+213', localNumber: '555516067' },
-      { number: '+246-387-5553', countryCode: '+246', localNumber: '3875553' },
-      { number: '+852-940-5558--6', countryCode: '+852', localNumber: '94055586' },
-      { number: '+228 253 5558     4', countryCode: '+228', localNumber: '25355584' },
-    ].forEach(({ number, countryCode, localNumber }) => {
-      it(`'${number}' number should update the value properly`, async () => {
-        await renderAndPaste(number);
-
-        expect(getPrefixEl()).toHaveTextContent(countryCode);
-        expect(getInputEl()).toHaveValue(localNumber);
-        expect(props.onChange).toHaveBeenCalledWith(number.replace(/[\s-]+/g, ''), countryCode);
-      });
-    });
-
-    it('should not paste invalid characters', async () => {
-      await renderAndPaste('+36asdasdasd');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
-      expect(props.onChange).not.toHaveBeenCalled();
-    });
-
-    it('should not paste countries which are not in the select', async () => {
-      await renderAndPaste('+9992342343423');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
-      expect(props.onChange).not.toHaveBeenCalled();
-    });
-
-    it("should not paste numbers which doesn't start with the country code", async () => {
-      await renderAndPaste('0+36303932551');
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(initialNumber);
-      expect(props.onChange).not.toHaveBeenCalled();
-    });
-
-    it("should allow pasting numbers which don't contain a country code", async () => {
-      const newNumber = '06303932551';
-      await renderAndPaste(newNumber);
-      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
-      expect(getInputEl()).toHaveValue(newNumber);
-      expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
-    });
-  });
-
-  describe('initialValue', () => {
-    describe('when a model is supplied that could match more than one prefix', () => {
-      const initialProps = { initialValue: '+1868123456789' };
-
-      it('should set the select to the longest matching prefix', () => {
-        customRender(initialProps);
-        expect(getPrefixEl()).toHaveTextContent('+1868');
-      });
-
-      it('should set the number input to the rest of the number', () => {
-        customRender(initialProps);
-        expect(getInputEl()).toHaveValue('123456789');
-      });
-    });
-
-    describe('when a model is supplied with no matching prefix', () => {
-      const initialProps = { initialValue: '+999123456789' };
-
-      it('should empty the select', () => {
-        customRender(initialProps);
-        expect(getPrefixEl()).toHaveTextContent('neptune.PhoneNumberInput.SelectInput.placeholder');
-      });
-
-      it('should put the whole value in the input without the plus', () => {
-        customRender(initialProps);
-        expect(getInputEl()).toHaveValue('999123456789');
-      });
-    });
-
-    describe('when an invalid model is supplied', () => {
-      it('should not re-explode model', () => {
-        customRender({ initialValue: '+123' });
-        expect(getPrefixEl()).toHaveTextContent('+44');
-        expect(getInputEl()).toHaveValue('');
-      });
-    });
-  });
-
-  describe('when disabled is true', () => {
-    it('should disable both controls', () => {
-      customRender({ disabled: true });
-      expect(getPrefixEl()).toBeDisabled();
-      expect(getInputEl()).toBeDisabled();
-    });
-  });
-
-  describe('placeholders', () => {
-    it('should use the provided placeholder', () => {
-      const placeholder = 'custom placeholder';
-      customRender({ placeholder });
-      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
-    });
-
-    it('should use the provided searchPlaceholder', async () => {
-      const searchPlaceholder = 'search placeholder';
-      customRender({ searchPlaceholder });
-      await userEvent.click(getPrefixEl());
-      expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
-    });
-  });
-
-  describe('when supplied with a locale', () => {
-    beforeEach(() => {
-      mockUseIntl.mockReturnValue({ locale: 'es-ES', formatMessage });
-    });
-
-    afterEach(() => {
-      mockUseIntl.mockReturnValue({ locale: 'en-GB', formatMessage });
-    });
-
-    describe('and a value', () => {
-      it('should use the prefix of the supplied value', () => {
-        customRender({ initialValue: '+12345678' });
-        expect(getPrefixEl()).toHaveTextContent('+1');
-      });
-    });
-
-    describe('and no value', () => {
-      describe('and no country code', () => {
-        it('should default the prefix to the local country', () => {
-          customRender();
-          expect(getPrefixEl()).toHaveTextContent('+34');
-        });
-      });
-
-      describe('and country code', () => {
-        it('should override locale prefix with country specific prefix', () => {
-          customRender({ countryCode: 'US' });
-          expect(getPrefixEl()).toHaveTextContent('+1');
-        });
-      });
-    });
-  });
-
-  describe('user input', () => {
-    describe('valid number', () => {
-      it('should trigger onChange handler', async () => {
-        customRender();
-        await userEvent.type(getInputEl(), '123');
-        expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
-      });
-    });
-
-    describe('invalid number', () => {
-      it('should trigger onChange with null value', async () => {
-        customRender({ initialValue: '+1234' });
-        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
-        expect(props.onChange).toHaveBeenCalledWith(null, '+1');
-      });
-    });
-
-    describe('when user insert invalid character', () => {
-      it('should strip them', async () => {
-        customRender({ initialValue: '+12345678' });
-        await userEvent.type(getInputEl(), '123--');
-        expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
-      });
-    });
-
-    describe('overlapping prefix and suffix numbers', () => {
-      it("shouldn't change the prefix number on matching suffix input", async () => {
-        customRender({ countryCode: 'eg' });
-        await userEvent.type(getInputEl(), '1111111');
-        expect(getInputEl()).toHaveValue('1111111');
-        expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
-      });
-    });
-  });
-
-  describe('when selectProps is supplied', () => {
-    it('renders Select component with expected props', () => {
-      customRender({ selectProps: { className: 'custom-class' } });
-      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
-    });
-  });
-
-  it('supports custom `aria-labelledby` attribute', () => {
-    render(
-      <>
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label id="prioritized-label">Prioritized label</label>
-        <PhoneNumberInput aria-labelledby="prioritized-label" onChange={() => {}} />
-      </>,
-    );
-
-    expect(
-      within(screen.getByLabelText('Prioritized label')).getByRole('textbox'),
-    ).toBeInTheDocument();
-  });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Phone number">
-        <PhoneNumberInput initialValue="+12345678" onChange={() => {}} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Phone number/);
-  });
-});