@transferwise/components 46.37.0 → 46.39.0

package/src/dateLookup/DateLookup.testingLibrary.spec.js

@@ -1,5 +1,4 @@
-import '@testing-library/jest-dom';
-import user from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 import { act } from 'react';
 
 import { render, screen, mockMatchMedia } from '../test-utils';
@@ -55,103 +54,103 @@ describe('DateLookup (events)', () => {
 
     it('switches to years', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
+      await openDateLookup(view);
+      await clickDateButton(view);
 
       expect(getActiveYearButton(view)).toHaveFocus();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('has aria-label for 20 years', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
+      await openDateLookup(view);
+      await clickDateButton(view);
 
       expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('switches to months', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
+      await openDateLookup(view);
+      await clickDateButton(view);
+      await userEvent.click(getActiveYearButton(view));
 
       expect(getActiveMonthButton(view)).toHaveFocus();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('has aria label for year', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
+      await openDateLookup(view);
+      await clickDateButton(view);
+      await userEvent.click(getActiveYearButton(view));
 
       expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('switches to days', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
-      user.click(getActiveMonthButton(view));
+      await openDateLookup(view);
+      await clickDateButton(view);
+      await userEvent.click(getActiveYearButton(view));
+      await userEvent.click(getActiveMonthButton(view));
 
       expect(getActiveDayButton(view)).toHaveFocus();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('has aria label for month', async () => {
       const view = await setup();
-      openDateLookup(view);
-      clickDateButton(view);
-      user.click(getActiveYearButton(view));
-      user.click(getActiveMonthButton(view));
+      await openDateLookup(view);
+      await clickDateButton(view);
+      await userEvent.click(getActiveYearButton(view));
+      await userEvent.click(getActiveMonthButton(view));
 
       expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
       expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('updates selected date and closes', async () => {
       const view = await setup();
-      openDateLookup(view);
+      await openDateLookup(view);
       const d = new Date(2018, 11, 28);
       const newDay = screen.getByText(d.getDate().toString());
-      user.click(newDay);
+      await userEvent.click(newDay);
 
       expect(handleChange).toHaveBeenCalledWith(d);
       expect(getOpenButton(view)).toHaveFocus();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('has aria label on selected date', async () => {
       const view = await setup();
-      openDateLookup(view);
+      await openDateLookup(view);
       const d = new Date(2018, 11, 28);
       const newDay = screen.getByText(d.getDate().toString());
-      user.click(newDay);
-      openDateLookup(view);
+      await userEvent.click(newDay);
+      await openDateLookup(view);
       expect(screen.getByRole('button', { name: /selected day/i })).toBeInTheDocument();
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
 
     it('supports custom `aria-labelledby` attribute', async () => {
       const view = await setup();
       expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
 
-      closeDateLookup(view);
+      await closeDateLookup(view);
     });
   });
 
@@ -183,29 +182,33 @@ describe('DateLookup (events)', () => {
 
     it('when user clicks on clear the focus returns to btn', async () => {
       const view = await setup();
-      clickClearButton(view);
+      await clickClearButton(view);
       expect(getOpenButton(view)).toHaveFocus();
     });
 
     it('onChange gets called with null when reset button is clicked', async () => {
       const view = await setup();
-      clickClearButton(view);
+      await clickClearButton(view);
       expect(props.onChange).toHaveBeenCalledWith(null);
     });
   });
 
-  const openDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getOpenButton(view));
+  const openDateLookup = async (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => userEvent.click(getOpenButton(view));
 
-  const clickDateButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getDateButton(view));
+  const clickDateButton = async (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => userEvent.click(getDateButton(view));
 
   // Close dateLookup and removes events attached to documents.
-  const closeDateLookup = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(view.container);
+  const closeDateLookup = async (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => userEvent.click(view.container);
 
-  const clickClearButton = (/** @type {import('@testing-library/react').RenderResult} */ view) =>
-    user.click(getClearButton(view));
+  const clickClearButton = async (
+    /** @type {import('@testing-library/react').RenderResult} */ view,
+  ) => userEvent.click(getClearButton(view));
 
   const getActiveYearButton = (
     /** @type {import('@testing-library/react').RenderResult} */ view,

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
@@ -9,7 +9,9 @@ export default {
   title: 'Forms/DateLookup/Tests',
 };
 
-const Template: Story<typeof DateLookup> = () => {
+type Story = StoryFn<typeof DateLookup>;
+
+const Template: Story = () => {
   const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
 
   return (

package/src/decision/Decision.spec.js

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom';
-
 import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia } from '../mocks';

package/src/decision/Decision.tsx

@@ -14,7 +14,7 @@ interface DecisionOption {
     block: React.ReactNode;
     list: React.ReactNode;
   };
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
   title: React.ReactNode;
 }
 

package/src/definitionList/{DefinitionList.story.js → DefinitionList.story.tsx}

@@ -30,14 +30,34 @@ const definitions = [
 
 export const Basic = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
 };
 
 export const WithActionButtons = () => {
   const muted = boolean('muted', false);
-  const layout = select('layout', Object.values(Layout), Layout.HORIZONTAL_LEFT_ALIGNED);
+  const layout = select(
+    'layout',
+    [
+      Layout.VERTICAL_TWO_COLUMN,
+      Layout.VERTICAL_ONE_COLUMN,
+      Layout.HORIZONTAL_JUSTIFIED,
+      Layout.HORIZONTAL_LEFT_ALIGNED,
+      Layout.HORIZONTAL_RIGHT_ALIGNED,
+    ],
+    Layout.HORIZONTAL_LEFT_ALIGNED,
+  );
 
   return (
     <DefinitionList

package/src/definitionList/DefinitionList.tsx

@@ -0,0 +1,95 @@
+import classNames from 'classnames';
+
+import ActionButton from '../actionButton';
+import { Layout } from '../common';
+
+interface Definition {
+  action?: {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  };
+  title: React.ReactNode;
+  value: React.ReactNode;
+  key: string;
+}
+
+type DefinitionListLayout =
+  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
+
+export interface DefinitionListProps {
+  definitions?: Definition[];
+  layout?: DefinitionListLayout;
+  muted?: boolean;
+}
+
+const isLayoutHorizontal = (layout: DefinitionListLayout) =>
+  layout === Layout.HORIZONTAL_LEFT_ALIGNED ||
+  layout === Layout.HORIZONTAL_RIGHT_ALIGNED ||
+  layout === Layout.HORIZONTAL_JUSTIFIED;
+
+const getAlignmentClasses = (layout: DefinitionListLayout, action: Definition['action']) => {
+  const classes = ['d-flex'];
+
+  if (action) {
+    if (isLayoutHorizontal(layout)) {
+      classes.push('align-items-center');
+    } else {
+      classes.push('align-items-start');
+    }
+  }
+
+  if (layout === Layout.HORIZONTAL_RIGHT_ALIGNED) {
+    classes.push('text-sm-right tw-definition-list--right-aligned-desktop');
+  } else {
+    classes.push('justify-content-between');
+  }
+
+  if (layout === Layout.HORIZONTAL_JUSTIFIED) {
+    classes.push('text-sm-justify');
+  }
+
+  return classes;
+};
+
+const defaultDefinitions = [] satisfies DefinitionListProps['definitions'];
+
+export default function DefinitionList({
+  definitions = defaultDefinitions,
+  layout = 'VERTICAL_TWO_COLUMN',
+  muted,
+}: DefinitionListProps) {
+  return (
+    <dl
+      className={classNames('tw-definition-list d-flex ', {
+        'text-muted': muted,
+        'flex-column': layout === Layout.VERTICAL_ONE_COLUMN,
+        'tw-definition-list--columns flex-column flex-row--sm':
+          layout === Layout.VERTICAL_TWO_COLUMN,
+        'tw-definition-list--horizontal flex-column': isLayoutHorizontal(layout),
+      })}
+    >
+      {definitions
+        .filter((definition) => definition)
+        .map(({ action, title, value, key }) => (
+          <div key={key} className="tw-definition-list__item">
+            <dt>{title}</dt>
+            <dd className={classNames(...getAlignmentClasses(layout, action))}>
+              <div>{value}</div>
+              {action ? (
+                <div
+                  className={classNames(
+                    isLayoutHorizontal(layout) ? 'p-l-2' : 'p-x-2',
+                    'tw-definition-list__action',
+                  )}
+                >
+                  <ActionButton className="tw-definition-list__button" onClick={action.onClick}>
+                    {action.label}
+                  </ActionButton>
+                </div>
+              ) : null}
+            </dd>
+          </div>
+        ))}
+    </dl>
+  );
+}

package/src/definitionList/index.ts

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

package/src/dimmer/Dimmer.rtl.spec.js

@@ -25,42 +25,42 @@ describe('Dimmer', () => {
   });
 
   describe('closing behaviour', () => {
-    it('calls onClose if the dimmer is clicked', () => {
+    it('calls onClose if the dimmer is clicked', async () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} onClose={onClose} />);
-      userEvent.click(screen.getByRole('presentation'));
+      await userEvent.click(screen.getByRole('presentation'));
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClose if the dimmer content is clicked', () => {
+    it('does not call onClose if the dimmer content is clicked', async () => {
       const onClose = jest.fn();
       render(
         <Dimmer {...props} onClose={onClose}>
           <Button onClick={() => {}}>McClicky</Button>
         </Dimmer>,
       );
-      userEvent.click(screen.getByRole('button'));
+      await userEvent.click(screen.getByRole('button'));
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
-    it('does not call onClose when clicked if disableClickToClose is true', () => {
+    it('does not call onClose when clicked if disableClickToClose is true', async () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
-      userEvent.click(screen.getByRole('presentation'));
+      await userEvent.click(screen.getByRole('presentation'));
       expect(onClose).toHaveBeenCalledTimes(0);
     });
 
-    it('calls onClose if the escape key is pressed', () => {
+    it('calls onClose if the escape key is pressed', async () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} onClose={onClose} />);
-      userEvent.keyboard('{esc}');
+      await userEvent.keyboard('{Escape}');
       expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call onClose if the escape key is pressed when disableClickToClose is true', () => {
+    it('does not call onClose if the escape key is pressed when disableClickToClose is true', async () => {
       const onClose = jest.fn();
       render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
-      userEvent.keyboard('{esc}');
+      await userEvent.keyboard('{Escape}');
       expect(onClose).toHaveBeenCalledTimes(1);
     });
   });

package/src/drawer/{Drawer.rtl.spec.js → Drawer.rtl.spec.tsx}

@@ -1,3 +1,5 @@
+import { DimmerProps } from '../dimmer';
+import { SlidingPanelProps } from '../slidingPanel';
 import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
 
 import Drawer from './Drawer';
@@ -7,7 +9,7 @@ mockMatchMedia();
 jest.mock(
   '../dimmer',
   () =>
-    function ({ open, children }) {
+    function Dimmer({ open, children }: DimmerProps) {
       return open ? <div className="dimmer">{children}</div> : null;
     },
 );
@@ -15,7 +17,7 @@ jest.mock(
 jest.mock(
   '../slidingPanel',
   () =>
-    function ({ open, children }) {
+    function SlidingPanel({ open, children }: SlidingPanelProps) {
       return open ? <div className="sliding-panel">{children}</div> : null;
     },
 );
@@ -46,10 +48,10 @@ describe('Drawer', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('calls onClose when user clicks close button', () => {
+  it('calls onClose when user clicks close button', async () => {
     render(<Drawer {...props}>content</Drawer>);
     expect(props.onClose).not.toHaveBeenCalled();
-    userEvent.click(getCloseButton());
+    await userEvent.click(getCloseButton());
     expect(props.onClose).toHaveBeenCalledTimes(1);
   });
 

package/src/drawer/{Drawer.story.js → Drawer.story.tsx}

@@ -3,7 +3,6 @@ import { useState } from 'react';
 
 import { Section, Button, Input, Modal } from '..';
 import { Position, Priority } from '../common';
-import { storyConfig } from '../test-utils';
 
 import Drawer from './Drawer';
 
@@ -17,18 +16,6 @@ export const Basic = () => {
   const [openModal, setOpenModal] = useState(false);
   const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);
 
-  const handleDrawerClose = (event) => {
-    console.log('drawer close');
-    event.stopPropagation();
-    setOpenDrawer(false);
-  };
-
-  const handleModalClose = (event) => {
-    console.log('modal close');
-    event.stopPropagation();
-    setOpenModal(false);
-  };
-
   return (
     <>
       <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
@@ -48,7 +35,11 @@ export const Basic = () => {
             </Button>
           </>
         }
-        onClose={handleDrawerClose}
+        onClose={(event) => {
+          console.log('drawer close');
+          event.stopPropagation();
+          setOpenDrawer(false);
+        }}
       >
         <p>
           I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
@@ -62,23 +53,24 @@ export const Basic = () => {
           <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
           <Modal
             body={
-              <>
-                <p className="m-t-4">
-                  I am baby actually poke kickstarter, street art jean shorts bespoke chambray
-                  activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
-                  cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
-                  disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
-                  kickstarter, street art jean shorts bespoke chambray activated charcoal ramps
-                  marfa shoreditch tumeric, I am baby actually poke kickstarter, street art jean
-                  shorts bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr.
-                  Mixtape cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts.
-                  Scenester readymade selvage disrupt pok pok.
-                </p>
-              </>
+              <p className="m-t-4">
+                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
+                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
+                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
+                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
+                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
+                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
+                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
+                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
+                readymade selvage disrupt pok pok.
+              </p>
             }
             open={openModal}
             title="Title"
-            onClose={handleModalClose}
+            onClose={() => {
+              console.log('modal close');
+              setOpenModal(false);
+            }}
           />
         </Section>
         <p>

package/src/drawer/{Drawer.js → Drawer.tsx}

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useId } from 'react';
 
 import { Position, Typography } from '../common';
@@ -10,7 +9,31 @@ import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
 
-const Drawer = ({ children, className, footerContent, headerTitle, onClose, open, position }) => {
+export interface DrawerProps {
+  /** The content to appear in the drawer body. */
+  children?: React.ReactNode;
+  className?: string;
+  /** The content to appear in the drawer footer. */
+  footerContent?: React.ReactNode;
+  /** The content to appear in the drawer header. */
+  headerTitle?: React.ReactNode;
+  /** The status of Drawer either open or not. */
+  open?: boolean;
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
+  /** The action to perform on close click. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+}
+
+export default function Drawer({
+  children,
+  className,
+  footerContent,
+  headerTitle,
+  onClose,
+  open = false,
+  position = 'right',
+}: DrawerProps) {
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
     !onClose,
@@ -46,32 +69,4 @@ const Drawer = ({ children, className, footerContent, headerTitle, onClose, open
       </SlidingPanel>
     </Dimmer>
   );
-};
-
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
-};
-
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: Position.RIGHT,
-};
-
-export default Drawer;
+}

package/src/drawer/index.ts

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

package/src/emphasis/Emphasis.spec.tsx

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

package/src/field/Field.spec.tsx

@@ -73,7 +73,7 @@ describe('Field', () => {
     button.addEventListener('click', handleClick);
 
     const label = screen.getByText('Phone number');
-    userEvent.click(label);
+    await userEvent.click(label);
 
     expect(handleClick).not.toHaveBeenCalled();
   });
@@ -90,6 +90,6 @@ describe('Field', () => {
     expect(screen.getByRole('textbox')).not.toHaveAttribute('id');
 
     const label = screen.getByText('Phone number');
-    userEvent.click(label);
+    await userEvent.click(label);
   });
 });

package/src/flowNavigation/FlowNavigation.spec.js

@@ -1,5 +1,3 @@
-import '@testing-library/jest-dom';
-
 import Avatar, { AvatarType } from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

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