@transferwise/components 46.37.0 → 46.39.0

package/src/main.css

@@ -5390,98 +5390,78 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
-.np-upload-button {
-  width: 100%;
-  border: 0 !important;
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-}
-.np-upload-button.np-upload-accent {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):focus-visible,
-label.np-upload-button:not(.disabled):active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal label.np-upload-button:not(.disabled):hover,
-.np-theme-personal label.np-upload-button:not(.disabled):focus-visible,
-.np-theme-personal label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
-}
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):hover,
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
-}
-.np-upload-button .np-upload-icon {
-  display: flex;
-  align-items: center;
-}
-.np-upload-button-container.droppable {
-  border: 0;
+.np-upload-button-container {
+  border-style: solid;
 }
 .np-upload-button-container .droppable-card-content {
   display: flex;
 }
-.np-theme-personal .np-upload-button-container .droppable-card-content {
-  border-radius: calc(10px - 1px);
-  border-radius: calc(var(--radius-small) - 1px);
+.np-upload-button-container.droppable-dropping {
+  border-color: #c9cbce !important;
+  border-color: var(--color-interactive-secondary) !important;
 }
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
   position: absolute;
 }
-.np-upload-button-container input[type="file"]:focus-visible + label {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+.np-upload-button-container .np-upload-button {
+  border: none;
 }
-.np-upload-input {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+.np-upload-button {
+  width: 100%;
+  padding: 16px;
+  padding: var(--padding-small);
+  border-radius: 0;
 }
-.np-upload-input:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
+label.np-upload-button:not(.disabled):hover,
+label.np-upload-button:not(.disabled):active {
+  background-color: var(--color-background-screen-hover);
+}
+.disabled label.np-upload-button:not(.disabled):hover,
+.disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
+}
+.np-upload-button .media {
+  align-items: flex-start;
 }
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
   padding: initial;
 }
-.np-theme-personal .np-upload-input {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+.np-upload-input > div:first-child,
+.np-upload-input > div:first-child .np-upload-item--single-file,
+.np-upload-input > div:first-child .np-upload-item--link {
+  border-top-left-radius: 10px;
+  border-top-left-radius: var(--radius-small);
+  border-top-right-radius: 10px;
+  border-top-right-radius: var(--radius-small);
+}
+.np-upload-input > div:last-child {
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
 }
 .np-theme-personal .np-upload-input.disabled .btn {
   cursor: inherit;
 }
-.np-theme-personal .np-upload-input .np-upload-button {
-  border-radius: calc(10px - 1px);
-  border-radius: calc(var(--radius-small) - 1px);
-  padding: 16px;
-  padding: var(--padding-small);
-}
-.np-theme-personal .np-upload-input .np-upload-input--square-top {
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-}
-.np-theme-personal .np-upload-input .np-upload-item__remove-button {
-  border-radius: 0;
-  border-radius: initial;
-}
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-upload-input .media-body {
+  padding-right: 32px;
+  padding-right: var(--size-32);
   color: var(--color-content-link);
   white-space: break-spaces;
 }
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input .media-body {
+    padding-right: 64px;
+    padding-right: var(--size-64);
+  }
+}
 .np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -5496,6 +5476,10 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);
@@ -5510,79 +5494,114 @@ label.np-upload-button:not(.disabled):active {
     height: var(--size-large);
   }
 }
-.np-upload-item:not(:last-child)::after {
+.np-upload-item {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+}
+.np-upload-item:first-child ~ div:before {
   display: block;
   position: relative;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
   content: " ";
   margin: 0 16px;
   margin: 0 var(--size-16);
 }
-.np-theme-personal .np-upload-item:first-child a:hover,
-.np-theme-personal .np-upload-item:first-child a:focus-visible,
-.np-theme-personal .np-upload-item:first-child a:active {
-  border-top-left-radius: calc(10px - 1px);
-  border-top-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item:first-child ~ div {
+  border-top: 0;
+}
+.np-upload-item:not(:last-child) {
+  border-bottom: 0;
+}
+.np-upload-item.np-upload-item__link:hover:before,
+.np-upload-button-container:hover:before {
+  margin: 0 !important;
+}
+.np-upload-item.np-upload-item__link:hover + div:before,
+.np-upload-button-container:hover + div:before {
+  margin: 0 !important;
+}
+.np-upload-button-container:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  border-color: transparent;
+  outline-offset: -3px;
 }
-.np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
-  border-top-right-radius: calc(10px - 1px);
-  border-top-right-radius: calc(var(--radius-small) - 1px);
+.np-upload-item--single-file:focus-visible,
+.np-upload-item--link:focus-visible,
+.np-upload-button-container:has(:focus-visible) {
+  outline-width: 3px;
 }
 .np-upload-item__link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  outline: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.np-theme-personal .np-upload-item__link a {
-  border-radius: 0;
-  border-radius: initial;
+  border-radius: inherit;
 }
-.np-upload-item__link a.np-upload-item--single-file {
-  border-bottom-left-radius: calc(10px - 1px);
-  border-bottom-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item__link a:focus-visible {
+  outline-offset: -2px;
 }
 .np-upload-item__link a:hover,
-.np-upload-item__link a:focus-visible,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
-.np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
-.np-upload-item__link a:active ~ .np-upload-item__remove-button {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
-  border-bottom-right-radius: calc(10px - 1px);
-  border-bottom-right-radius: calc(var(--radius-small) - 1px);
-}
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
+  border-radius: inherit;
 }
 .np-upload-item__remove-button {
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
-  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  position: absolute;
+  height: 24px;
+  height: var(--size-24);
+  min-height: 0;
+  width: 24px;
+  width: var(--size-24);
+  padding: 0;
+  border-radius: 50% !important;
+  outline-offset: 0 !important;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  right: 16px;
+  right: var(--size-16);
+  top: 16px;
+  top: var(--size-16);
+  transition: color, background-color 0.15s ease-in-out;
+}
+@media (max-width: 320px) {
+  .np-upload-item__remove-button {
+    top: 16px;
+    top: var(--size-16);
+    right: 16px;
+    right: var(--size-16);
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
+  }
+}
+.np-upload-item__remove-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
 }
-.np-upload-item__remove-button:hover,
-.np-upload-item__remove-button:focus {
-  color: #d03238 !important;
-  color: var(--color-interactive-negative-hover) !important;
+.np-upload-item__remove-button:before {
+  display: block;
+  width: 44px;
+  height: 44px;
+  content: '';
+  border-radius: 50%;
+  position: absolute;
 }
 .np-progress {
   border-radius: 10px;

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -62,11 +62,11 @@ describe('MoneyInput', () => {
     ['1±!@#$^*,_+?><2', '1,2'],
     ['12,3', '12,3'],
     ['12.3', '12.3'],
-  ])("ignores the letters when typed '%s' and shows '%s'", (testValue, expectedValue) => {
+  ])("ignores the letters when typed '%s' and shows '%s'", async (testValue, expectedValue) => {
     render(<MoneyInput {...props} amount={null} />);
 
     const input = screen.getByRole('textbox');
-    userEvent.type(input, testValue);
+    await userEvent.type(input, testValue);
     expect(input).toHaveValue(expectedValue);
   });
 

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,9 +1,7 @@
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import { addons, useGlobals } from '@storybook/manager-api';
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within, userEvent } from '@storybook/test';
 import { Lock } from '@transferwise/icons';
-import React, { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import MoneyInput, { CurrencyOptionItem } from '.';
 import Provider from '../provider/Provider';
@@ -107,7 +105,6 @@ export const SingleCurrency: Story = {
   args: {
     currencies: [],
     selectedCurrency: exampleCurrency.eur,
-    onCurrencyChange: undefined,
   },
 };
 

package/src/overlayHeader/{OverlayHeader.spec.js → OverlayHeader.spec.tsx}

@@ -24,7 +24,7 @@ describe('OverlayHeader', () => {
   });
 
   it("doesn't render separator if avatar or onClose are not provided", () => {
-    const { container, rerender } = render(<OverlayHeader {...props} onClose={null} />);
+    const { container, rerender } = render(<OverlayHeader {...props} onClose={undefined} />);
     expect(container.querySelector('.separator')).not.toBeInTheDocument();
     rerender(<OverlayHeader {...props} avatar={null} />);
     expect(container.querySelector('.separator')).not.toBeInTheDocument();

package/src/overlayHeader/{OverlayHeader.story.js → OverlayHeader.story.tsx}

@@ -21,7 +21,11 @@ const avatarProfiles = {
 };
 
 export const Basic = () => {
-  const showAvatar = select('avatar', Object.keys(avatarProfiles), 'Profile');
+  const showAvatar = select(
+    'avatar',
+    Object.keys(avatarProfiles) as (keyof typeof avatarProfiles)[],
+    'Profile',
+  );
   return (
     <OverlayHeader
       logo={<Logo />}
@@ -40,7 +44,11 @@ export const WithAvatarWrapper = () => {
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
   );
-  const profileType = select('profileType', Object.keys(ProfileType));
+  const profileType = select(
+    'profileType',
+    Object.keys(ProfileType) as `${ProfileType}`[],
+    undefined,
+  );
   return (
     <OverlayHeader
       logo={<Logo />}

package/src/overlayHeader/{OverlayHeader.js → OverlayHeader.tsx}

@@ -1,12 +1,21 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader';
 import Logo from '../logo';
 
-const OverlayHeader = ({ avatar, onClose, logo }) => {
+export interface OverlayHeaderProps {
+  /** An Avatar */
+  avatar?: React.ReactNode;
+  logo?: React.ReactNode;
+  /** Function called when the close is clicked */
+  onClose?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const defaultLogo = <Logo />;
+
+export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {
   const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;
   return (
     <div className="np-overlay-header d-flex justify-content-center">
@@ -23,20 +32,4 @@ const OverlayHeader = ({ avatar, onClose, logo }) => {
       />
     </div>
   );
-};
-
-OverlayHeader.defaultProps = {
-  avatar: null,
-  logo: <Logo />,
-  onClose: null,
-};
-
-OverlayHeader.propTypes = {
-  /** An Avatar */
-  avatar: PropTypes.element,
-  logo: PropTypes.node,
-  /** Function called when the close is clicked */
-  onClose: PropTypes.func,
-};
-
-export default OverlayHeader;
+}

package/src/overlayHeader/index.ts

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

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -19,5 +19,6 @@ export const Basic = {
     selectProps: {
       className: 'custom-class',
     },
+    onChange: () => {},
   },
 } satisfies Story;

package/src/popover/Popover.spec.tsx

@@ -29,7 +29,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       await waitForPanel();
       expect(getPanel()).toMatchSnapshot();
@@ -42,7 +42,7 @@ describe('Popover', () => {
         </Popover>,
       ));
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getTitle()).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('Popover', () => {
         </Popover>,
       );
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(getTitle()).not.toBeInTheDocument();
     });
@@ -67,7 +67,7 @@ describe('Popover', () => {
 
       expect(getPanel()).not.toBeInTheDocument();
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
       await waitForPanel();
 
       expect(getPanel()).toBeInTheDocument();
@@ -79,19 +79,19 @@ describe('Popover', () => {
       global.innerWidth = Breakpoint.SMALL - 1;
     });
 
-    it('renders when is open', () => {
+    it('renders when is open', async () => {
       ({ container } = render(
         <Popover {...props}>
           <button type="button">Open</button>
         </Popover>,
       ));
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(container).toMatchSnapshot();
     });
 
-    it('renders BottomSheet onClick', () => {
+    it('renders BottomSheet onClick', async () => {
       render(
         <Popover {...props}>
           <button type="button">Open</button>
@@ -100,7 +100,7 @@ describe('Popover', () => {
 
       expect(getBottomSheet()).not.toBeInTheDocument();
 
-      userEvent.click(screen.getByText('Open'));
+      await userEvent.click(screen.getByText('Open'));
 
       expect(getBottomSheet()).toBeInTheDocument();
     });
@@ -115,11 +115,11 @@ describe('Popover', () => {
     );
 
     expect(handleOnClose).not.toHaveBeenCalled();
-    userEvent.click(screen.getByText('Open'));
+    await userEvent.click(screen.getByText('Open'));
     await waitForPanel();
     const dimmer = getDimmer();
     if (dimmer != null) {
-      userEvent.click(dimmer);
+      await userEvent.click(dimmer);
     }
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });

package/src/progress/Progress.spec.tsx

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

package/src/progressBar/ProgressBar.spec.tsx

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

package/src/section/Section.story.tsx

@@ -83,7 +83,6 @@ export const WithCards = () => {
   return (
     <Section>
       <Header title="Section with cards" />
-      {/* @ts-expect-error TODO: remove once Card is migrated to TypeScript */}
       <Card
         title="What's in the box?!"
         details="Click me to reveal."
@@ -93,7 +92,6 @@ export const WithCards = () => {
       >
         <div>Hello there!</div>
       </Card>
-      {/* @ts-expect-error TODO: remove once Card is migrated to TypeScript */}
       <Card
         title="What's in the box?!"
         details="Click me to reveal."

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 
 import { render, screen, userEvent, waitFor } from '../test-utils';
@@ -60,30 +59,30 @@ describe('SegmentedControl', () => {
     expect(accountingTab).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('lets the user pick through the segments when it is set to input', () => {
+  it('lets the user pick through the segments when it is set to input', async () => {
     renderSegmentedControl();
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('radio', { name: 'Reporting' });
-    userEvent.click(reporting);
+    await userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
 
-  it('lets the user pick through the segments when it is set to view', () => {
+  it('lets the user pick through the segments when it is set to view', async () => {
     renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
 
     const payroll = screen.getByRole('tab', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
     const reporting = screen.getByRole('tab', { name: 'Reporting' });
-    userEvent.click(reporting);
+    await userEvent.click(reporting);
 
     expect(onChange).toHaveBeenCalledWith('reporting');
   });
@@ -134,11 +133,11 @@ describe('SegmentedControl', () => {
     });
   });
 
-  it('updates the selected segment when the selectedValue prop changes', () => {
+  it('updates the selected segment when the selectedValue prop changes', async () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const payroll = screen.getByRole('radio', { name: 'Payroll' });
-    userEvent.click(payroll);
+    await userEvent.click(payroll);
 
     expect(onChange).toHaveBeenCalledWith('payroll');
 
@@ -148,7 +147,7 @@ describe('SegmentedControl', () => {
     expect(reporting).toBeChecked();
   });
 
-  it('updates the options when the segments prop changes', () => {
+  it('updates the options when the segments prop changes', async () => {
     const { rerender } = render(<SegmentedControl {...defaultProps} />);
 
     const newSegments = [
@@ -167,7 +166,7 @@ describe('SegmentedControl', () => {
     rerender(<SegmentedControl {...defaultProps} segments={newSegments} />);
 
     const anotherOne = screen.getByRole('radio', { name: 'Another One' });
-    userEvent.click(anotherOne);
+    await userEvent.click(anotherOne);
 
     expect(onChange).toHaveBeenCalledWith('anotherOne');
   });