@transferwise/components 46.37.0 → 46.39.0

package/src/tile/{Tile.js → Tile.tsx}

@@ -1,11 +1,26 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body';
 import { Size, Typography } from '../common';
 import Title from '../title';
 
-export const Tile = ({
+export interface TileProps {
+  /** Classes to apply to the Tile container */
+  className?: string;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  /** Accepts only Avatar and images */
+  media: React.ReactNode;
+  /** Function called onClick or onKeyDown */
+  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /** The size applied to Tile */
+  size?: `${Size.SMALL | Size.MEDIUM}`;
+  title: React.ReactNode;
+}
+
+export default function Tile({
   className,
   description,
   disabled,
@@ -13,10 +28,10 @@ export const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title,
-}) => {
-  const isSmall = size === Size.SMALL;
+}: TileProps) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
 
   return (
@@ -36,13 +51,13 @@ export const Tile = ({
       )}
       href={href}
       target={target}
-      onClick={disabled ? null : onClick}
+      onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled
-          ? null
+          ? undefined
           : ({ key }) => {
               if (key === 'Enter' || key === ' ') {
-                onClick();
+                onClick?.();
               }
             }
       }
@@ -58,30 +73,4 @@ export const Tile = ({
       ) : null}
     </Element>
   );
-};
-
-Tile.propTypes = {
-  /** Classes to apply to the Tile container */
-  className: PropTypes.string,
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  /** Accepts only Avatar and images */
-  media: PropTypes.node.isRequired,
-  /** Function called onClick or onKeyDown */
-  onClick: PropTypes.func,
-  /** The size applied to Tile */
-  size: PropTypes.oneOf(['sm', 'md']),
-  title: PropTypes.node.isRequired,
-};
-
-Tile.defaultProps = {
-  className: '',
-  description: null,
-  disabled: false,
-  size: Size.MEDIUM,
-  target: undefined,
-};
-
-export default Tile;
+}

package/src/tooltip/Tooltip.spec.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
+import { userEvent } from '@testing-library/user-event';
 
 import Tooltip from '.';
 
@@ -26,7 +25,7 @@ describe('Tooltip Component', () => {
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should render the tooltip label when closed', () => {
+  it('should render the tooltip label when closed', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -36,11 +35,11 @@ describe('Tooltip Component', () => {
     const tooltip = screen.getByRole('tooltip', { hidden: true });
     expect(tooltip).toHaveAttribute('aria-hidden', 'true');
 
-    userEvent.hover(triggerElement);
+    await userEvent.hover(triggerElement);
     expect(tooltip).toHaveAttribute('aria-hidden', 'false');
   });
 
-  it('should display the tooltip on mouse hover', () => {
+  it('should display the tooltip on mouse hover', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover over me!</span>
@@ -48,13 +47,13 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover over me!');
 
-    userEvent.hover(triggerElement);
+    await userEvent.hover(triggerElement);
 
     const tooltipElement = screen.queryByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on mouse out', () => {
+  it('should hide the tooltip on mouse out', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Hover me</span>
@@ -62,16 +61,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Hover me');
 
-    userEvent.hover(triggerElement);
+    await userEvent.hover(triggerElement);
     let tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
 
-    userEvent.unhover(triggerElement);
+    await userEvent.unhover(triggerElement);
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip on focus', () => {
+  it('should display the tooltip on focus', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -79,12 +78,12 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    userEvent.tab();
+    await userEvent.tab();
     const tooltipElement = screen.getByText('Test Tooltip');
     expect(tooltipElement).toBeVisible();
   });
 
-  it('should hide the tooltip on blur', () => {
+  it('should hide the tooltip on blur', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <span>Focus me</span>
@@ -92,16 +91,16 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Focus me');
 
-    userEvent.tab();
+    await userEvent.tab();
     let tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
 
-    userEvent.tab({ shift: true }); // Blur the element
+    await userEvent.tab({ shift: true }); // Blur the element
     tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toHaveAttribute('aria-hidden', 'true');
   });
 
-  it('should display the tooltip when the "children" prop is a React element', () => {
+  it('should display the tooltip when the "children" prop is a React element', async () => {
     render(
       <Tooltip label="Test Tooltip">
         <button type="button">Click me</button>
@@ -109,7 +108,7 @@ describe('Tooltip Component', () => {
     );
     const triggerElement = screen.getByText('Click me');
 
-    userEvent.hover(triggerElement);
+    await userEvent.hover(triggerElement);
     const tooltipElement = screen.getByRole('tooltip', { hidden: true });
     expect(tooltipElement).toBeVisible();
   });

package/src/uploadInput/UploadInput.css

@@ -1,46 +1,40 @@
-.np-upload-input {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-}
-.np-upload-input:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .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;
@@ -55,6 +49,10 @@
 .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);

package/src/uploadInput/UploadInput.less

@@ -3,49 +3,45 @@
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: var(--radius-small);
-
-  &:has(:focus-visible) {
-    .ring();
-  }
-
   &.form-control {
     height: auto;
     padding: initial;
   }
+
+  & > div {
+    &:first-child,
+    &:first-child .np-upload-item--single-file,
+    &:first-child .np-upload-item--link {
+      border-top-left-radius: var(--radius-small);
+      border-top-right-radius: var(--radius-small);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--radius-small);
+      border-bottom-right-radius: var(--radius-small);
+    }
+  }
 }
 
 .np-theme-personal {
   .np-upload-input {
-    border-radius: var(--radius-small);
-
     &.disabled .btn {
       cursor: inherit;
     }
 
-    .np-upload-button {
-      border-radius: @small-border-minus-one;
-      padding: var(--padding-small);
-    }
-
-    .np-upload-input--square-top {
-      border-top-right-radius: 0px;
-      border-top-left-radius: 0px;
-    }
-
-    .np-upload-item__remove-button {
-      border-radius: unset;
-    }
-
     .np-upload-icon {
       color: var(--color-interactive-primary);
     }
 
     .media-body {
+      padding-right: var(--size-32);
       color: var(--color-content-link);
       white-space: break-spaces;
 
+      @media (--screen-400-zoom) {
+        padding-right: var(--size-64);
+      }
+
       .np-text-body-large-bold {
         text-decoration: underline;
         .link-underline();
@@ -62,6 +58,11 @@
       }
     }
 
+    &-errors {
+      padding-left: 0;
+      list-style-position: inside;
+    }
+
     .status-circle {
       width: var(--size-x-small);
       height: var(--size-x-small);

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,5 +1,5 @@
 import { within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@testing-library/user-event';
 
 import { Status } from '../common';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
@@ -9,6 +9,8 @@ import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton'
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
 import { act } from 'react';
 
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
 mockMatchMedia();
 
 describe('UploadInput', () => {
@@ -58,10 +60,7 @@ describe('UploadInput', () => {
       renderComponent({ ...props, onFilesChange });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
-      await act(async () => {
-        await jest.runOnlyPendingTimersAsync();
-      });
+      await user.upload(input, [pngFile, jpgFile]);
 
       expect(props.onUploadFile).toHaveBeenCalledTimes(1);
       expect(onFilesChange).toHaveBeenCalledTimes(2);
@@ -116,7 +115,7 @@ describe('UploadInput', () => {
       expect(screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput)).toHaveAttribute('multiple');
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       await waitFor(() => {
         expect(props.onUploadFile).toHaveBeenCalledTimes(2);
@@ -244,11 +243,11 @@ describe('UploadInput', () => {
       });
 
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await user.upload(input, [pngFile, jpgFile]);
 
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
       const jpgFile2 = new File(['foo2'], 'foo2.jpg', { type: 'image/jpeg' });
-      userEvent.upload(input, [pngFile2, jpgFile2]);
+      await user.upload(input, [pngFile2, jpgFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(maxFilesReachedMessage)).toBeInTheDocument();
@@ -274,7 +273,7 @@ describe('UploadInput', () => {
       const input = screen.getByTestId(UPLOAD_BUTTON_TEST_IDS.uploadInput);
       const pngFile2 = new File(['foo2'], 'foo2.png', { type: 'image/png' });
 
-      userEvent.upload(input, [pngFile, jpgFile, pngFile2]);
+      await user.upload(input, [pngFile, jpgFile, pngFile2]);
 
       await waitFor(() => {
         expect(screen.getByText(defaultMaxFilesReachedMessage)).toBeInTheDocument();
@@ -305,7 +304,7 @@ describe('UploadInput', () => {
       const overSizedFile = new File([''], 'testFile.png', { type: 'image/png' });
       Object.defineProperty(overSizedFile, 'size', { value: twoKbInBytes });
 
-      userEvent.upload(input, [overSizedFile]);
+      await user.upload(input, overSizedFile);
       await waitFor(() => {
         expect(screen.getByText(sizeLimitErrorMessage)).toBeInTheDocument();
       });

package/src/uploadInput/UploadInput.story.tsx

@@ -1,7 +1,4 @@
-import { action } from '@storybook/addon-actions';
-import { Story, Meta } from '@storybook/react';
-
-import { Status } from '../common';
+import { StoryFn, Meta } from '@storybook/react';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadResponse } from './types';
@@ -13,31 +10,9 @@ const meta: Meta<typeof UploadInput> = {
 };
 
 export default meta;
+type Story = StoryFn<UploadInputProps>;
 
-const files = [
-  {
-    id: 1,
-    filename: 'purchase-receipt.pdf',
-    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
-  },
-  {
-    id: 2,
-    filename: 'receipt failed.png',
-    status: Status.FAILED,
-  },
-  {
-    id: 3,
-    filename: 'receipt failed with error string.png',
-    status: Status.SUCCEEDED,
-  },
-  {
-    id: 4,
-    filename: 'receipt failed with error object.png',
-    status: Status.SUCCEEDED,
-  },
-];
-
-const createDelayedPromise = ({
+const createDelayedPromise = async ({
   successful = true,
   delaySeconds = 3,
   response = { id: Math.round(Math.random() * 10000), url: '#' },
@@ -54,115 +29,18 @@ const createDelayedPromise = ({
   });
 
 const props = {
-  onUploadFile: (formData: FormData) => {
+  onUploadFile: async () => {
     return createDelayedPromise();
   },
-  onDeleteFile: (id: string | number) => {
+  onDeleteFile: async () => {
     return createDelayedPromise();
   },
 };
 
-const Template: Story<UploadInputProps> = (args: UploadInputProps) => <UploadInput {...args} />;
+const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
 
-export const SingleFile: Story<UploadInputProps> = Template.bind({});
+export const SingleFile: Story = Template.bind({});
 SingleFile.args = { ...props };
 
-export const MultipleFiles: Story<UploadInputProps> = Template.bind({});
+export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
-
-export const UploadInputWithDescriptionFromProps: Story<UploadInputProps> = Template.bind({});
-UploadInputWithDescriptionFromProps.args = {
-  ...props,
-  multiple: true,
-  description: 'Custom file description from prop',
-};
-
-export const Disabled: Story<UploadInputProps> = Template.bind({});
-Disabled.args = { ...props, disabled: true };
-
-export const WithAnyFileType: Story<UploadInputProps> = Template.bind({});
-WithAnyFileType.args = { ...props, fileTypes: '*' };
-
-export const WithSingleFileType: Story<UploadInputProps> = Template.bind({});
-WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
-
-export const WithMultipleExistingFiles: Story<UploadInputProps> = Template.bind({});
-WithMultipleExistingFiles.args = {
-  ...props,
-  files,
-  multiple: true,
-};
-
-export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
-WithoutDelete.args = {
-  ...props,
-  files,
-  onDeleteFile: undefined,
-  multiple: true,
-};
-
-export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
-WithUploadFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onUploadFile: () => createDelayedPromise({ successful: false }),
-  multiple: true,
-};
-
-export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
-WithDeleteFailed.args = {
-  ...props,
-  files: files.slice(0),
-  onDeleteFile: () => createDelayedPromise({ successful: false }),
-  multiple: true,
-};
-
-export const CustomConfirmMessage: Story<UploadInputProps> = Template.bind({});
-CustomConfirmMessage.args = {
-  ...props,
-  files: files.slice(0),
-  deleteConfirm: {
-    title: 'Sure you want to remove this invoice?',
-    body: (
-      <img
-        alt="brand logo"
-        src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
-      />
-    ),
-  },
-};
-
-export const withManualDownloadHandler: Story<UploadInputProps> = Template.bind({});
-withManualDownloadHandler.args = {
-  ...props,
-  files,
-  onDownload: action('Manual download handler'),
-};
-
-export const withFilesChangeHandler: Story<UploadInputProps> = Template.bind({});
-withFilesChangeHandler.args = {
-  ...props,
-  files,
-  onFilesChange: action('Files change handler'),
-};
-
-export const withMaxFilesToUploadLimit: Story<UploadInputProps> = Template.bind({});
-withMaxFilesToUploadLimit.args = {
-  ...props,
-  multiple: true,
-  maxFiles: 5,
-  maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
-};
-
-export const withFileSizeErrorMessage: Story<UploadInputProps> = Template.bind({});
-withFileSizeErrorMessage.args = {
-  ...props,
-  sizeLimit: 1,
-  sizeLimitErrorMessage: 'The file is oversized',
-};
-
-export const withCustomUploadButtonTitle: Story<UploadInputProps> = Template.bind({});
-withCustomUploadButtonTitle.args = {
-  ...props,
-  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
-};