@transferwise/components 46.37.0 → 46.39.0

package/src/flowNavigation/backButton/BackButton.tsx

@@ -0,0 +1,29 @@
+import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
+import classNames from 'classnames';
+
+import Avatar, { AvatarType } from '../../avatar';
+
+export interface BackButtonProps {
+  'aria-label': string;
+  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function BackButton({
+  className,
+  onClick,
+  'aria-label': ariaLabel,
+}: BackButtonProps) {
+  return (
+    <Avatar type={AvatarType.ICON} size={40}>
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        className={classNames('np-back-button', 'btn-unstyled', className)}
+        onClick={onClick}
+      >
+        <ArrowLeftIcon size={24} />
+      </button>
+    </Avatar>
+  );
+}

package/src/flowNavigation/backButton/index.ts

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

package/src/header/Header.spec.tsx

@@ -9,7 +9,7 @@ describe('Header', () => {
     expect(screen.getByText('Header title')).toBeInTheDocument();
   });
 
-  it('can trigger header action', () => {
+  it('can trigger header action', async () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -22,12 +22,12 @@ describe('Header', () => {
       />,
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
 
-  it('can set aria-label property for header action', () => {
+  it('can set aria-label property for header action', async () => {
     const onHeaderActionClick = jest.fn();
 
     render(
@@ -41,7 +41,7 @@ describe('Header', () => {
       />,
     );
 
-    userEvent.click(screen.getByRole('button', { name: 'Magic' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Magic' }));
 
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
@@ -75,7 +75,7 @@ describe('Header', () => {
     expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
   });
 
-  it('runs onClick if specified even when it got href prop', () => {
+  it('runs onClick if specified even when it got href prop', async () => {
     const callback = jest.fn();
     render(
       <Header
@@ -88,7 +88,7 @@ describe('Header', () => {
     const button = screen.getByRole('link', { name: 'Click me' });
     expect(button).toBeInTheDocument();
 
-    userEvent.click(button);
+    await userEvent.click(button);
 
     expect(callback).toHaveBeenCalledTimes(1);
   });

package/src/image/Image.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
 import { render, fireEvent, screen } from '../test-utils';
 

package/src/index.ts

@@ -6,7 +6,9 @@ export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
+export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
+export type { CheckboxProps } from './checkbox';
 export type { CircularButtonProps } from './circularButton';
 export type {
   BodyTypes,
@@ -20,7 +22,9 @@ export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
+export type { DefinitionListProps } from './definitionList';
 export type { DimmerProps } from './dimmer';
+export type { DrawerProps } from './drawer';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -51,6 +55,7 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
+export type { OverlayHeaderProps } from './overlayHeader';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
 export type { PopoverProps } from './popover';
 export type { ProcessIndicatorProps } from './processIndicator';

package/src/info/Info.story.tsx

@@ -5,7 +5,7 @@ import { lorem10, storyConfig } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
 
-export default {
+const meta = {
   component: Info,
   title: 'Dialogs/Info',
   args: {
@@ -20,16 +20,18 @@ export default {
   ),
 } satisfies Meta<typeof Info>;
 
-type Story = StoryObj<typeof Info>;
+export default meta;
 
-export const Basic: Story = storyConfig(
+type Story = StoryObj<typeof meta>;
+
+export const Basic = storyConfig<typeof meta>(
   {},
   {
     variants: ['default', 'dark', 'rtl'],
   },
 );
 
-export const OpenedPopover: Story = {
+export const OpenedPopover = {
   parameters: {
     chromatic: {
       delay: 1000,
@@ -39,15 +41,19 @@ export const OpenedPopover: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
   },
-};
+} satisfies Story;
 
-export const OpenedPopoverMobile: Story = storyConfig(OpenedPopover, { variants: ['mobile'] });
+export const OpenedPopoverMobile = storyConfig(OpenedPopover, {
+  variants: ['mobile'],
+});
 
-export const OpenedModal: Story = {
+export const OpenedModal = {
   ...OpenedPopover,
   args: {
     presentation: InfoPresentation.MODAL,
   },
-};
+} satisfies Story;
 
-export const OpenedModalMobile: Story = storyConfig(OpenedModal, { variants: ['mobile'] });
+export const OpenedModalMobile = storyConfig(OpenedModal, {
+  variants: ['mobile'],
+});

package/src/info/Info.tsx

@@ -10,7 +10,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
 
-export interface Props {
+export interface InfoProps {
   'aria-label'?: string;
   /**
    * Extra classes applied to Info
@@ -48,7 +48,7 @@ const Info = ({
   title = undefined,
   'aria-label': ariaLabel,
   preferredPlacement = Position.BOTTOM,
-}: Props) => {
+}: InfoProps) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);

package/src/info/index.ts

@@ -1,3 +1,3 @@
 export { InfoPresentation } from './infoPresentations';
 export { default } from './Info';
-export type { Props as InfoProps } from './Info';
+export type { InfoProps } from './Info';

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import '@testing-library/jest-dom';
 import { Sentiment } from '../common';
 import { render, screen } from '../test-utils';
 

package/src/inputs/SelectInput.spec.tsx

@@ -1,5 +1,5 @@
-import { act, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { screen, waitFor, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
@@ -42,25 +42,22 @@ describe('SelectInput', () => {
       />,
     );
 
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     const footer = screen.getByText('All items shown');
     expect(footer).toBeInTheDocument();
 
-    userEvent.keyboard('u');
+    await userEvent.keyboard('u');
     expect(footer).toHaveTextContent(/‘u’$/);
 
-    userEvent.keyboard('r');
+    await userEvent.keyboard('r');
     expect(footer).toHaveTextContent(/‘ur’$/);
 
-    userEvent.keyboard('x');
+    await userEvent.keyboard('x');
     expect(footer).toHaveTextContent(/‘urx’$/);
 
-    userEvent.keyboard('{Backspace}');
+    await userEvent.keyboard('{Backspace}');
     expect(footer).toHaveTextContent(/‘ur’$/);
   });
 
@@ -80,16 +77,13 @@ describe('SelectInput', () => {
     expect(screen.queryByText('EUR')).not.toBeInTheDocument();
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     const option = within(listbox).getByRole('option', { name: 'EUR' });
-    userEvent.click(option);
+    await userEvent.click(option);
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -117,34 +111,28 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     expect(handleClose).not.toHaveBeenCalled();
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(3);
 
-    userEvent.keyboard('u');
+    await userEvent.keyboard('u');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
 
-    userEvent.keyboard('r');
+    await userEvent.keyboard('r');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
-    userEvent.keyboard('x');
+    await userEvent.keyboard('x');
     expect(within(listbox).queryByRole('option')).not.toBeInTheDocument();
 
-    userEvent.keyboard('{Backspace}');
+    await userEvent.keyboard('{Backspace}');
     expect(within(listbox).getByRole('option')).toBeInTheDocument();
 
     const option = within(listbox).getAllByRole('option')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(option);
-    });
+    await userEvent.click(option);
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(trigger).toHaveTextContent('EUR');
@@ -165,21 +153,18 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.tab();
-      userEvent.keyboard(' ');
-    });
+    await userEvent.tab();
+    await userEvent.keyboard(' ');
 
     expect(handleFilterChange).not.toHaveBeenCalled();
 
-    userEvent.keyboard(' x');
+    await userEvent.keyboard(' x');
     expect(handleFilterChange).toHaveBeenLastCalledWith({
       query: ' x',
       queryNormalized: 'x',
     });
 
-    userEvent.keyboard('{Escape}');
+    await userEvent.keyboard('{Escape}');
     await waitFor(() => {
       expect(handleFilterChange).toHaveBeenLastCalledWith({
         query: '',
@@ -187,10 +172,7 @@ describe('SelectInput', () => {
       });
     });
 
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     const listbox = screen.getByRole('listbox');
     expect(within(listbox).getAllByRole('option')).toHaveLength(2);
@@ -208,16 +190,13 @@ describe('SelectInput', () => {
     );
 
     const trigger = screen.getAllByRole('button')[0];
-    // eslint-disable-next-line @typescript-eslint/require-await
-    await act(async () => {
-      userEvent.click(trigger);
-    });
+    await userEvent.click(trigger);
 
     const listbox = screen.getByRole('listbox');
     const options = within(listbox).getAllByRole('option');
-    options.forEach((option) => {
-      userEvent.click(option);
-    });
+    for (const option of options) {
+      await userEvent.click(option);
+    }
 
     expect(trigger).toHaveTextContent('USD, EUR');
   });

package/src/link/Link.spec.tsx

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

package/src/listItem/ListItem.spec.tsx

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

package/src/logo/Logo.story.tsx

@@ -1,14 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Logo, { LogoType } from '.';
+import Logo from '.';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: (args) => {
-    const type = args.type as LogoType;
-    const inverse = args.inverse as boolean;
-
+  render: ({ inverse, type }) => {
     return (
       <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
         <Logo type={type} inverse={inverse} />
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof Logo>;
 
 export const Basic: Story = {
   args: {
-    type: LogoType.WISE,
+    type: 'WISE',
     inverse: false,
   },
 };

package/src/logo/{Logo.js → Logo.tsx}

@@ -1,7 +1,5 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-import { LogoType } from './logoTypes';
 import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
 import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
 import { ReactComponent as LogoFlagPlatform } from './svg/flag-platform.svg';
@@ -24,44 +22,36 @@ const svgPaths = {
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
 };
 
-const Logo = ({ className, inverse, type }) => {
+export enum LogoType {
+  WISE = 'WISE',
+  WISE_BUSINESS = 'WISE_BUSINESS',
+  WISE_PLATFORM = 'WISE_PLATFORM',
+}
+
+export interface LogoProps {
+  /** Extra classes applied to Logo */
+  className?: string;
+  /** If true, will use dark colours for dark on light theme */
+  inverse?: boolean;
+  /** What type of logo to display */
+  type?: `${LogoType}`;
+}
+
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform',
+} satisfies Record<`${LogoType}`, string>;
+
+export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
-    svgPaths[
-      `WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`
-    ];
+    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
   return (
-    <span
-      aria-label={
-        type === LogoType.WISE
-          ? 'Wise'
-          : 'Wise Business' | (type === LogoType.WISE_PLATFORM)
-            ? 'Wise Platform'
-            : 'Wise Business'
-      }
-      role="img"
-      className={classNames(className, 'np-logo')}
-    >
+    <span aria-label={labelByType[type]} role="img" className={classNames(className, 'np-logo')}>
       <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
       <LogoMd className="np-logo-svg np-logo-svg--size-md" />
     </span>
   );
-};
-
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes.bool,
-  /** What type of logo to display */
-  type: PropTypes.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM']),
-};
-
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: LogoType.WISE,
-};
-
-export default Logo;
+}

package/src/logo/index.ts

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