@transferwise/components 46.37.0 → 46.39.0

package/src/carousel/Carousel.spec.tsx

@@ -69,7 +69,7 @@ describe('Carousel', () => {
     expect(screen.getByText('Get Quick Pay')).toBeInTheDocument();
   });
 
-  it('allows user to scroll carousel to the right when at start', () => {
+  it('allows user to scroll carousel to the right when at start', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -80,12 +80,12 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeDisabled();
     expect(scrollRightButton).toBeEnabled();
 
-    userEvent.click(scrollRightButton);
+    await userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left or right when in middle', () => {
+  it('allows user to scroll carousel to the left or right when in middle', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -99,16 +99,16 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeEnabled();
 
-    userEvent.click(scrollLeftButton);
+    await userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
 
-    userEvent.click(scrollRightButton);
+    await userEvent.click(scrollRightButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: 300, behavior: 'smooth' });
   });
 
-  it('allows user to scroll carousel to the left when at end', () => {
+  it('allows user to scroll carousel to the left when at end', async () => {
     mockPositions(948, 903);
 
     renderCarousel();
@@ -122,7 +122,7 @@ describe('Carousel', () => {
     expect(scrollLeftButton).toBeEnabled();
     expect(scrollRightButton).toBeDisabled();
 
-    userEvent.click(scrollLeftButton);
+    await userEvent.click(scrollLeftButton);
 
     expect(scrollBy).toHaveBeenCalledWith({ left: -300, behavior: 'smooth' });
   });
@@ -142,23 +142,23 @@ describe('Carousel', () => {
     expect(focusSpy).toHaveBeenCalledTimes(0);
     expect(firstCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(yourWebsiteIndicator);
+    await userEvent.click(yourWebsiteIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(1);
     expect(secondCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(shopOrStallIndicator);
+    await userEvent.click(shopOrStallIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(2);
     expect(thirdCard).toHaveClass('carousel__card--focused');
 
-    userEvent.click(yourInvoiceIndicator);
+    await userEvent.click(yourInvoiceIndicator);
 
     expect(focusSpy).toHaveBeenCalledTimes(3);
     expect(firstCard).toHaveClass('carousel__card--focused');
   });
 
-  it('is focused on the first element and lets user navigate through them', () => {
+  it('is focused on the first element and lets user navigate through them', async () => {
     renderCarousel();
 
     const firstCard = getFirstCard();
@@ -170,27 +170,27 @@ describe('Carousel', () => {
     firstCard.focus();
     expect(firstCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowright}');
+    await userEvent.keyboard('{arrowright}');
 
     expect(secondCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowright}');
+    await userEvent.keyboard('{arrowright}');
 
     expect(thirdCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowleft}');
+    await userEvent.keyboard('{arrowleft}');
 
     expect(secondCard).toHaveFocus();
 
-    userEvent.keyboard('{arrowleft}');
+    await userEvent.keyboard('{arrowleft}');
 
     expect(firstCard).toHaveFocus();
   });
 
-  it('calls onClick when a card is clicked', () => {
+  it('calls onClick when a card is clicked', async () => {
     renderCarousel();
 
-    userEvent.click(getFirstCard());
+    await userEvent.click(getFirstCard());
 
     expect(onClick).toHaveBeenCalledTimes(1);
     expect(yourInvoiceOnClick).toHaveBeenCalledTimes(1);

package/src/checkbox/{Checkbox.spec.js → Checkbox.spec.tsx}

@@ -1,11 +1,9 @@
-import '@testing-library/jest-dom';
-
 import { render, fireEvent, screen } from '@testing-library/react';
 
-import Checkbox from '.';
+import Checkbox, { CheckboxProps } from '.';
 
 describe('Checkbox', () => {
-  let props;
+  let props: CheckboxProps;
 
   beforeEach(() => {
     props = {
@@ -68,7 +66,7 @@ describe('Checkbox', () => {
 
   it('has disabled class when the disabled prop is true', () => {
     const { container } = render(<Checkbox {...props} disabled />);
-    expect(getCheckboxContainer(container).firstChild).toHaveClass('disabled');
+    expect(getCheckboxContainer(container)?.firstChild).toHaveClass('disabled');
   });
 
   it('passes required to checkbox button', () => {
@@ -117,7 +115,7 @@ describe('Checkbox', () => {
     expect(getCheckboxContainer(container)).toHaveClass('checkbox-lg');
   });
 
-  const getCheckboxContainer = (container) => container.querySelector('.np-checkbox');
-  const getLabel = () => screen.getByText('hello').parentElement;
+  const getCheckboxContainer = (container: HTMLElement) => container.querySelector('.np-checkbox');
+  const getLabel = () => screen.getByText('hello').parentElement!;
   const getCheckbox = () => screen.getByRole('checkbox');
 });

package/src/checkbox/{Checkbox.js → Checkbox.tsx}

@@ -1,12 +1,24 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body/Body';
 import CheckboxButton from '../checkboxButton';
 import { Typography } from '../common';
 
-const Checkbox = ({
+export interface CheckboxProps {
+  id?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  label: React.ReactNode;
+  secondary?: string;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onChange: (checked: boolean) => void;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  className?: string;
+}
+
+export default function Checkbox({
   id,
   checked,
   required,
@@ -18,15 +30,13 @@ const Checkbox = ({
   onChange,
   onFocus,
   onBlur,
-}) => {
-  const { isModern } = useTheme();
-
+}: CheckboxProps) {
   const classList = classNames(
     'np-checkbox',
     {
       checkbox: true,
       'checkbox-lg': secondary,
-      disabled: isModern && disabled,
+      disabled,
     },
     className,
   );
@@ -51,41 +61,9 @@ const Checkbox = ({
           type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}
         >
           <span className={required ? 'has-required' : undefined}>{label}</span>
-          {secondary && (
-            <Body as="span" className={classNames({ secondary: !isModern })}>
-              {secondary}
-            </Body>
-          )}
+          {secondary && <Body as="span">{secondary}</Body>}
         </Body>
       </label>
     </div>
   );
-};
-
-Checkbox.propTypes = {
-  id: PropTypes.string,
-  checked: PropTypes.bool,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  secondary: PropTypes.string,
-  onFocus: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func,
-  className: PropTypes.string,
-};
-
-Checkbox.defaultProps = {
-  id: null,
-  checked: false,
-  required: false,
-  disabled: false,
-  readOnly: false,
-  secondary: null,
-  onFocus: null,
-  onBlur: null,
-  className: undefined,
-};
-
-export default Checkbox;
+}

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

package/src/checkboxButton/CheckboxButton.spec.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxButton from '.';

package/src/checkboxOption/CheckboxOption.spec.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-import '@testing-library/jest-dom';
 import { render, fireEvent, screen } from '../test-utils';
 
 import CheckboxOption from '.';

package/src/chevron/Chevron.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { Size, Position } from '../common';
 import { render } from '../test-utils';
 

package/src/chips/Chips.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../test-utils';
 
 import Chips from '.';

package/src/chips/Chips.story.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { useState } from 'react';
 
 import Chips, { ChipsProps, ChipValue } from './Chips';
@@ -10,7 +10,9 @@ const meta: Meta<typeof Chips> = {
 };
 export default meta;
 
-const FilterTemplate: Story<ChipsProps> = (args: ChipsProps) => {
+type Story = StoryFn<ChipsProps>;
+
+const FilterTemplate: Story = (args: ChipsProps) => {
   const [selected, setSelected] = useState<readonly ChipValue[]>(
     args.selected == null || Array.isArray(args.selected) ? args.selected : [args.selected],
   );
@@ -31,7 +33,7 @@ const FilterTemplate: Story<ChipsProps> = (args: ChipsProps) => {
   );
 };
 
-const ChoiceTemplate: Story<ChipsProps> = (args: ChipsProps) => {
+const ChoiceTemplate: Story = (args: ChipsProps) => {
   const [selected, setSelected] = useState<ChipValue>(args.selected as ChipValue);
   return (
     <Chips

package/src/circularButton/CircularButton.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { Plus } from '@transferwise/icons';
 
 import { ControlType, Priority } from '../common';
@@ -54,17 +53,17 @@ describe('CircularButton', () => {
   });
 
   describe('onClick', () => {
-    it('calls onClick when clicked', () => {
+    it('calls onClick when clicked', async () => {
       const onClick = jest.fn();
       render(<CircularButton {...props} onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClick when clicked if disabled', () => {
+    it('does not call onClick when clicked if disabled', async () => {
       const onClick = jest.fn();
       render(<CircularButton {...props} disabled onClick={onClick} />);
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });

package/src/common/RadioButton/RadioButton.spec.tsx

@@ -21,7 +21,7 @@ describe('Radio button', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('responds to user input', () => {
+  it('responds to user input', async () => {
     const onChange = jest.fn();
     render(
       <label htmlFor="an-id">
@@ -29,7 +29,7 @@ describe('Radio button', () => {
       </label>,
     );
 
-    userEvent.click(screen.getByLabelText('A radio'));
+    await userEvent.click(screen.getByLabelText('A radio'));
 
     expect(onChange).toHaveBeenCalledWith('a-value');
   });

package/src/common/card/Card.story.tsx

@@ -23,5 +23,6 @@ export const Default: Story = {
         {lorem10}
       </>
     ),
+    onDismiss: () => {},
   },
 };

package/src/common/closeButton/CloseButton.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '../../test-utils';
 
 import { CloseButton } from '.';

package/src/common/flowHeader/FlowHeader.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
 
 import { Layout } from '../propsValues/layouts';

package/src/dateInput/DateInput.story.tsx

@@ -1,13 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
-import * as React from 'react';
 
 import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
-import { DateInputProps } from './DateInput';
-
-export default {
+const meta = {
   component: DateInput,
   title: 'Forms/DateInput',
   args: {
@@ -20,16 +17,24 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
-type Story = StoryObj<DateInputProps>;
+export default meta;
 
-export const Basic: StoryObj = {};
+type Story = StoryObj<typeof meta>;
 
-Basic.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
-};
+export const Basic = {
+  args: {
+    onChange: () => {},
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+} satisfies Story;
 
-export const WithLabel: Story = {
+export const WithLabel = {
+  args: {
+    onChange: () => {},
+  },
   render: (args) => {
     const id1 = 'date-input-group-label-1';
     const label = 'Date of Birth';
@@ -71,11 +76,11 @@ export const WithLabel: Story = {
       </>
     );
   },
-};
+} satisfies Story;
 
-export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
+export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
 
-export const InputError: Story = {
+export const InputError = {
   ...Basic,
   render: (args) => (
     <div className="form-group has-error">
@@ -83,6 +88,6 @@ export const InputError: Story = {
       <InlineAlert type="error">{lorem10}</InlineAlert>
     </div>
   ),
-};
+} satisfies Story;
 
-export const InputErrorMobile: Story = storyConfig(InputError, { variants: ['mobile'] });
+export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -4,6 +4,8 @@ import DateLookup, { DateLookupProps } from './DateLookup';
 
 import { act } from 'react';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
 mockMatchMedia();
 mockResizeObserver();
 
@@ -36,12 +38,12 @@ describe('DateLookup', () => {
     async (text) => {
       render(<DateLookup value={initialValue} onChange={() => {}} />);
 
-      userEvent.tab();
-      userEvent.keyboard(text);
+      await user.tab();
+      await user.keyboard(text);
 
       expect(screen.getByRole('button', { name: /next/iu })).toBeInTheDocument();
 
-      userEvent.keyboard('{Escape}');
+      await user.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -53,7 +55,7 @@ describe('DateLookup', () => {
   const setupAndOpenWithMouse = async (props: Partial<DateLookupProps> = {}) => {
     const view = render(<DateLookup value={initialValue} onChange={() => {}} {...props} />);
 
-    userEvent.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('button'));
     await act(async () => {
       await jest.runOnlyPendingTimersAsync();
     });
@@ -68,7 +70,7 @@ describe('DateLookup', () => {
 
     const dimmerElement = screen.getByRole('dialog').parentElement?.parentElement;
     if (dimmerElement != null) {
-      userEvent.click(dimmerElement);
+      await user.click(dimmerElement);
     }
     await act(async () => {
       await jest.runOnlyPendingTimersAsync();
@@ -89,13 +91,13 @@ describe('DateLookup', () => {
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      userEvent.keyboard(text);
+      await user.keyboard(text);
 
       const value = new Date(initialValue);
       value.setDate(initialValue.getDate() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      userEvent.keyboard('{Escape}');
+      await user.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -114,20 +116,20 @@ describe('DateLookup', () => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
-      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      userEvent.keyboard(text);
+      await user.keyboard(text);
 
       const value = new Date(initialValue);
       value.setFullYear(initialValue.getFullYear() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      userEvent.keyboard('{Escape}');
+      await user.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -146,24 +148,24 @@ describe('DateLookup', () => {
       const handleChange = jest.fn();
       await setupAndOpenWithMouse({ onChange: handleChange });
 
-      userEvent.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
-      userEvent.keyboard(' ');
+      await user.keyboard(' ');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
 
       expect(handleChange).not.toHaveBeenCalled();
 
-      userEvent.keyboard(text);
+      await user.keyboard(text);
 
       const value = new Date(initialValue);
       value.setMonth(initialValue.getMonth() + step);
       expect(handleChange).toHaveBeenCalledWith(value);
 
-      userEvent.keyboard('{Escape}');
+      await user.keyboard('{Escape}');
       await act(async () => {
         await jest.runOnlyPendingTimersAsync();
       });
@@ -178,7 +180,7 @@ describe('DateLookup', () => {
     const handleChange = jest.fn();
     await setupAndOpenWithMouse({ min, onChange: handleChange });
 
-    userEvent.keyboard('{ArrowLeft}{ArrowLeft}');
+    await user.keyboard('{ArrowLeft}{ArrowLeft}');
 
     expect(handleChange).toHaveBeenCalledWith(min);
   });
@@ -189,7 +191,7 @@ describe('DateLookup', () => {
     const handleChange = jest.fn();
     await setupAndOpenWithMouse({ max, onChange: handleChange });
 
-    userEvent.keyboard('{ArrowRight}{ArrowRight}');
+    await user.keyboard('{ArrowRight}{ArrowRight}');
 
     expect(handleChange).toHaveBeenCalledWith(max);
   });