@transferwise/components 0.0.0-experimental-693e956 → 0.0.0-experimental-d729abf

package/src/uploadInput/UploadInput.story.tsx

@@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react';
 import { Status } from '../common';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
-import { UploadedFile, UploadResponse } from './types';
+import { UploadResponse } from './types';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput',
@@ -35,9 +35,9 @@ const files = [
     filename: 'receipt failed with error object.png',
     status: Status.SUCCEEDED,
   },
-] satisfies UploadedFile[];
+];
 
-const createDelayedPromise = async ({
+const createDelayedPromise = ({
   successful = true,
   delaySeconds = 3,
   response = { id: Math.round(Math.random() * 10000), url: '#' },
@@ -54,10 +54,10 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async (formData: FormData) => {
+  onUploadFile: (formData: FormData) => {
     return createDelayedPromise();
   },
-  onDeleteFile: async (id: string | number) => {
+  onDeleteFile: (id: string | number) => {
     return createDelayedPromise();
   },
 };
@@ -93,49 +93,6 @@ WithMultipleExistingFiles.args = {
   multiple: true,
 };
 
-export const WithFileErrors: Story<UploadInputProps> = 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<UploadInputProps> = Template.bind({});
 WithoutDelete.args = {
   ...props,
@@ -148,7 +105,7 @@ export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
-  onUploadFile: async () => createDelayedPromise({ successful: false }),
+  onUploadFile: () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 
@@ -156,7 +113,7 @@ export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
-  onDeleteFile: async () => createDelayedPromise({ successful: false }),
+  onDeleteFile: () => createDelayedPromise({ successful: false }),
   multiple: true,
 };
 

package/src/uploadInput/types.ts

@@ -19,14 +19,9 @@ export type UploadResponse = {
   url?: string;
 
   /**
-   * Optionally sets a translated error message when file was rejected
+   * Optionally set a translated error message when file was rejected
    */
   error?: UploadError;
-
-  /**
-   * Optionally sets a translated errors messages when file was rejected
-   */
-  errors?: UploadError[];
   [key: string]: any;
 };
 
@@ -51,11 +46,6 @@ 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/uploadItem/UploadItem.tsx

@@ -7,7 +7,7 @@ import Body from '../../body';
 import { Size, Status, Typography, Sentiment } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
 import StatusIcon from '../../statusIcon/StatusIcon';
-import { UploadedFile, UploadError } from '../types';
+import { UploadedFile } from '../types';
 
 import MESSAGES from './UploadItem.messages';
 import { UploadItemBody } from './UploadItemBody';
@@ -43,13 +43,13 @@ const UploadItem = ({
   singleFileUpload,
 }: UploadItemProps) => {
   const { formatMessage } = useIntl();
-  const { status, filename, error, errors, url } = file;
+  const { status, filename, error, url } = file;
   const { isModern } = useTheme();
 
   const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
 
   const getIcon = () => {
-    if (error || errors?.length || status === Status.FAILED) {
+    if (error || status === Status.FAILED) {
       return isModern ? (
         <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
       ) : (
@@ -81,33 +81,14 @@ const UploadItem = ({
     return <span style={{ transform: 'scale(0.8335)' }}>{processIndicator}</span>; // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
 
-  const getErrorMessage = (error?: UploadError) =>
+  const getErrorMessage = () =>
     typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
 
-  const getMultipleErrors = (errors?: UploadError[]) => {
-    if (!errors?.length) {
-      return null;
-    }
-
-    if (errors?.length === 1) {
-      return getErrorMessage(errors[0]);
-    }
-
-    return (
-      <ul className="np-upload-input-errors m-b-0">
-        {errors.map((error, index) => {
-          // eslint-disable-next-line react/no-array-index-key
-          return <li key={index}>{getErrorMessage(error)}</li>;
-        })}
-      </ul>
-    );
-  };
-
   const getDescription = () => {
-    if (error || errors?.length || status === Status.FAILED) {
+    if (error || status === Status.FAILED) {
       return (
         <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
+          {getErrorMessage()}
         </Body>
       );
     }

package/src/sticky/Sticky.spec.js

@@ -1,34 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import Sticky from './Sticky';
-
-describe('Sticky', () => {
-  let component;
-  const props = {
-    open: true,
-    children: null,
-    stickyPositionFixed: true,
-    position: 'bottom',
-  };
-
-  it('renders with right props', () => {
-    component = mount(<Sticky {...props} />);
-    expect(component.find(Sticky)).toHaveLength(1);
-    expect(component.find(Sticky).props()).toStrictEqual({ ...props });
-  });
-
-  it('renders SlidingPanel with right props', () => {
-    component = shallow(<Sticky {...props} />);
-
-    const slidingPanel = component.find('ForwardRef');
-    expect(slidingPanel).toHaveLength(1);
-
-    expect(slidingPanel.props()).toStrictEqual({
-      children: null,
-      open: true,
-      position: 'bottom',
-      showSlidingPanelBorder: true,
-      slidingPanelPositionFixed: true,
-    });
-  });
-});