@transferwise/components 46.37.0 → 46.39.0

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -0,0 +1,212 @@
+import { action } from '@storybook/addon-actions';
+import { StoryFn, Meta } from '@storybook/react';
+
+import { Status } from '../common';
+
+import UploadInput, { UploadInputProps } from './UploadInput';
+import { UploadedFile, UploadResponse } from './types';
+
+const meta: Meta<typeof UploadInput> = {
+  title: 'Forms/UploadInput/Tests',
+  component: UploadInput,
+};
+
+export default meta;
+type Story = StoryFn<UploadInputProps>;
+
+const files = [
+  {
+    id: 1,
+    filename: 'purchase-receipt-0.pdf',
+    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
+  },
+  {
+    id: 2,
+    filename: 'purchase-receipt-1.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.FAILED,
+    error: 'Something went wrong',
+  },
+  {
+    id: 4,
+    filename: 'receipt failed With error object.png',
+    status: Status.FAILED,
+    error: { message: 'Something went wrong' },
+  },
+] satisfies UploadedFile[];
+
+const createDelayedPromise = async ({
+  successful = true,
+  delaySeconds = 3,
+  response = { id: Math.round(Math.random() * 10000), url: '#' },
+}: {
+  successful?: boolean;
+  delaySeconds?: number;
+  response?: UploadResponse;
+} = {}): Promise<UploadResponse> =>
+  new Promise((resolve, reject) => {
+    setTimeout(
+      () => (successful ? resolve(response) : reject(new Error('Unexpected error'))),
+      delaySeconds * 1000,
+    );
+  });
+
+const props = {
+  onUploadFile: async (formData: FormData) => {
+    return createDelayedPromise();
+  },
+  onDeleteFile: async (id: string | number) => {
+    return createDelayedPromise();
+  },
+};
+
+const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
+
+export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
+UploadInputWithDescriptionFromProps.args = {
+  ...props,
+  multiple: true,
+  description: 'Custom file description from prop',
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = { ...props, disabled: true };
+
+export const WithAnyFileType: Story = Template.bind({});
+WithAnyFileType.args = { ...props, fileTypes: '*' };
+
+export const WithSingleFileType: Story = Template.bind({});
+WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
+
+export const WithMultipleExistingFiles: Story = Template.bind({});
+WithMultipleExistingFiles.args = {
+  ...props,
+  files,
+  multiple: true,
+};
+
+export const WithFileErrors: Story = Template.bind({});
+WithFileErrors.args = {
+  ...props,
+  files: [
+    {
+      id: 1,
+      filename: 'Error with default message.png',
+      status: Status.FAILED,
+    },
+    {
+      id: 2,
+      filename: 'Error with `string` error.png',
+      status: Status.FAILED,
+      error: 'Single string error',
+    },
+    {
+      id: 3,
+      filename: 'Error with `obj` error ({ message : `string` }).png',
+      status: Status.FAILED,
+      error: { message: 'Single obj error' },
+    },
+    {
+      id: 4,
+      filename: 'Error with single error passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Single error in array'],
+    },
+    {
+      id: 5,
+      filename: 'Error with multiple `string` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: ['Error 1', 'Error 2', 'Error 3'],
+    },
+    {
+      id: 6,
+      filename: 'Error with multiple `obj` errors passed in `array`.png',
+      status: Status.FAILED,
+      errors: [{ message: 'Error 1' }, { message: 'Error 2' }, { message: 'Error 3' }],
+    },
+  ],
+  multiple: true,
+};
+
+export const WithoutDelete: Story = Template.bind({});
+WithoutDelete.args = {
+  ...props,
+  files,
+  onDeleteFile: undefined,
+  multiple: true,
+};
+
+export const WithUploadFailed: Story = Template.bind({});
+WithUploadFailed.args = {
+  ...props,
+  files: files.slice(0),
+  onUploadFile: async () => createDelayedPromise({ successful: false }),
+  multiple: true,
+};
+
+export const WithDeleteFailed: Story = Template.bind({});
+WithDeleteFailed.args = {
+  ...props,
+  files: files.slice(0),
+  onDeleteFile: async () => createDelayedPromise({ successful: false }),
+  multiple: true,
+};
+
+export const CustomConfirmMessage: Story = 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 = Template.bind({});
+WithManualDownloadHandler.args = {
+  ...props,
+  files,
+  onDownload: action('Manual download handler'),
+};
+
+export const WithFilesChangeHandler: Story = Template.bind({});
+WithFilesChangeHandler.args = {
+  ...props,
+  files,
+  onFilesChange: action('Files change handler'),
+};
+
+export const WithMaxFilesToUploadLimit: Story = 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 = Template.bind({});
+WithFileSizeErrorMessage.args = {
+  ...props,
+  sizeLimit: 1,
+  sizeLimitErrorMessage: 'The file is oversized',
+};
+
+export const WithCustomUploadButtonTitle: Story = Template.bind({});
+WithCustomUploadButtonTitle.args = {
+  ...props,
+  uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',
+};

package/src/uploadInput/UploadInput.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -128,7 +127,6 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle,
 }: UploadInputProps) => {
-  const { isModern } = useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
@@ -301,7 +299,7 @@ const UploadInput = ({
 
   return (
     <>
-      <div className={classNames('np-upload-input', className, { disabled: isModern && disabled })}>
+      <div className={classNames('np-upload-input', className, { disabled })}>
         {uploadedFiles.map((file) => (
           <UploadItem
             key={file.id}
@@ -329,7 +327,6 @@ const UploadInput = ({
             sizeLimit={sizeLimit}
             description={description}
             maxFiles={maxFiles}
-            multipleFileInputWithFilesAdded={multiple && uploadedFiles.length > 0}
             onChange={addFiles}
           />
         )}

package/src/uploadInput/types.ts

@@ -19,9 +19,14 @@ export type UploadResponse = {
   url?: string;
 
   /**
-   * Optionally set a translated error message when file was rejected
+   * Optionally sets translated error message when a file gets rejected
    */
   error?: UploadError;
+
+  /**
+   * Optionally sets translated error messages when a file gets rejected
+   */
+  errors?: UploadError[];
   [key: string]: any;
 };
 
@@ -46,6 +51,11 @@ export type UploadedFile = {
    */
   error?: UploadError;
 
+  /**
+   * Any API errors array. The messages should be localized.
+   */
+  errors?: UploadError[];
+
   /**
    * Optional. An external URL where the file can be opened from.
    */

package/src/uploadInput/uploadButton/UploadButton.css

@@ -1,49 +1,35 @@
-.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-button {
+  width: 100%;
+  padding: 16px;
+  padding: var(--padding-small);
+  border-radius: 0;
+}
+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;
 }

package/src/uploadInput/uploadButton/UploadButton.less

@@ -1,57 +1,44 @@
-@import (reference) '../uploadItem/UploadItem.less';
+.np-upload-button-container {
+  border-style: solid;
 
-.np-upload-button {
-  width: 100%;
-  border: 0 !important; // Remove from btn
-  padding: var(--size-12) var(--size-16);
+  .droppable-card-content {
+    display: flex;
+  }
 
-  &.np-upload-accent {
-    color: var(--color-interactive-accent);
+  &.droppable-dropping {
+    border-color: var(--color-interactive-secondary) !important;
   }
 
+  input[type="file"] {
+    opacity: 0;
+    z-index: -1;
+    position: absolute;
+  }
+
+  .np-upload-button {
+    border: none;
+  }
+}
+
+.np-upload-button {
+  width: 100%;
+  padding: var(--padding-small);
+  border-radius: 0;
+
   label& {
     &:not(.disabled) {
       &:hover,
-      &:focus-visible,
       &:active {
-        background-color: var(--color-background-neutral);
-
-        .np-theme-personal & {
-          background-color: var(--color-background-screen-hover);
-        }
+        background-color: var(--color-background-screen-hover);
 
-        .np-theme-personal .disabled & {
+        .disabled & {
           background-color: transparent;
         }
       }
     }
   }
 
-  .np-upload-icon {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.np-upload-button-container {
-  &.droppable {
-    border: 0;
-  }
-
-  .droppable-card-content {
-    display: flex;
-    .np-theme-personal & {
-      border-radius: @small-border-minus-one;
-    }
-  }
-
-  input[type="file"] {
-    opacity: 0;
-    z-index: -1;
-    position: absolute;
-
-    &:focus-visible + label {
-      background-color: var(--color-background-neutral); // Tab focus style
-    }
+  .media {
+    align-items: flex-start;
   }
 }

package/src/uploadInput/uploadButton/UploadButton.spec.tsx

@@ -9,7 +9,6 @@ describe('UploadButton', () => {
 
   const props: UploadButtonProps = {
     onChange: jest.fn(),
-    multipleFileInputWithFilesAdded: true,
   };
 
   const renderComponent = (customProps = props) => render(<UploadButton {...customProps} />);
@@ -36,9 +35,9 @@ describe('UploadButton', () => {
       );
     });
 
-    it('trigger onChange callback with a FileList', () => {
+    it('trigger onChange callback with a FileList', async () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await userEvent.upload(input, [pngFile, jpgFile]);
 
       expect(props.onChange).toHaveBeenCalledTimes(1);
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
@@ -56,9 +55,9 @@ describe('UploadButton', () => {
       expect(screen.getByTestId(TEST_IDS.uploadInput)).toHaveAttribute('multiple');
     });
 
-    it('trigger onChange callback with a FileList', () => {
+    it('trigger onChange callback with a FileList', async () => {
       const input = screen.getByTestId(TEST_IDS.uploadInput);
-      userEvent.upload(input, [pngFile, jpgFile]);
+      await userEvent.upload(input, [pngFile, jpgFile]);
 
       expect(props.onChange).toHaveBeenCalledTimes(1);
       // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -1,12 +1,10 @@
 import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import { ChangeEvent, DragEvent, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
 import { FileType, Typography } from '../../common';
-import { useDirection } from '../../common/hooks';
 
 import MESSAGES from './UploadButton.messages';
 import { DEFAULT_SIZE_LIMIT, imageFileTypes } from './defaults';
@@ -60,11 +58,6 @@ export type UploadButtonProps = {
    * Title for the upload button
    */
   uploadButtonTitle?: string;
-
-  /**
-   * Are there any uploaded items on a multiple-file upload? Used for calculating border radiuses
-   */
-  multipleFileInputWithFilesAdded: boolean;
 };
 
 export enum TEST_IDS {
@@ -87,10 +80,7 @@ const UploadButton = ({
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
   uploadButtonTitle,
-  multipleFileInputWithFilesAdded,
 }: UploadButtonProps) => {
-  const { isModern } = useTheme();
-  const { isRTL } = useDirection();
   const { formatMessage } = useIntl();
   const inputReference = useRef<HTMLInputElement>(null);
 
@@ -167,7 +157,7 @@ const UploadButton = ({
     const areAllFilesAllowed = getFileTypesDescription() === '*';
 
     if (areAllFilesAllowed) {
-      return {}; //file input by default allows all files
+      return {}; // file input by default allows all files
     }
 
     if (Array.isArray(fileTypes)) {
@@ -179,23 +169,15 @@ const UploadButton = ({
 
   function renderDescription() {
     return (
-      <>
-        <Body
-          className={classNames({
-            'text-primary': !disabled,
-            small: !isModern,
-            'font-weight-normal': !isModern,
-          })}
-        >
-          {getDescription()}
-          {maxFiles && (
-            <>
-              <br />
-              {`Maximum ${maxFiles} files.`}
-            </>
-          )}
-        </Body>
-      </>
+      <Body className={classNames({ 'text-primary': !disabled })}>
+        {getDescription()}
+        {maxFiles && (
+          <>
+            <br />
+            {`Maximum ${maxFiles} files.`}
+          </>
+        )}
+      </Body>
     );
   }
 
@@ -226,15 +208,9 @@ const UploadButton = ({
         onChange={filesSelected}
       />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label
-        htmlFor={id}
-        className={classNames('btn', 'np-upload-accent', 'np-upload-button', {
-          disabled,
-          'np-upload-input--square-top': multipleFileInputWithFilesAdded,
-        })}
-      >
+      <label htmlFor={id} className={classNames('btn', 'np-upload-button')}>
         <div className="media">
-          <div className="np-upload-icon media-left">
+          <div className="np-upload-icon media-middle media-left">
             <UploadIcon size={24} className="text-link" />
           </div>
           <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
@@ -253,7 +229,6 @@ const UploadButton = ({
             'droppable-card',
             'droppable-dropping-card',
             'droppable-card-content',
-            { 'np-upload-input--square-top': multipleFileInputWithFilesAdded },
           )}
         >
           <PlusIcon className="m-x-1" size={24} />