@transferwise/components 0.0.0-experimental-91bc693 → 0.0.0-experimental-c023984

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -1,6 +1,6 @@
 import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ChangeEvent, DragEvent, forwardRef, useRef, useState } from 'react';
+import { ChangeEvent, DragEvent, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -70,168 +70,173 @@ const onDragOver = (event: DragEvent): void => {
 };
 
 const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
-const UploadButton = forwardRef<HTMLInputElement, UploadButtonProps>(
-  (
-    {
-      disabled,
-      multiple,
-      description,
-      fileTypes = imageFileTypes,
-      sizeLimit = DEFAULT_SIZE_LIMIT,
-      maxFiles,
-      onChange,
-      id = DEFAULT_FILE_INPUT_ID,
-      uploadButtonTitle,
-    },
-    ref,
-  ) => {
-    const { formatMessage } = useIntl();
-    const buttonRef = useRef<HTMLLabelElement>(null);
-
-    const inputReference = useRef<HTMLInputElement>(null);
-    const [isDropping, setIsDropping] = useState(false);
-    const dragCounter = useRef(0);
-
-    const reset = (): void => {
-      dragCounter.current = 0;
+const UploadButton = ({
+  disabled,
+  multiple,
+  description,
+  fileTypes = imageFileTypes,
+  sizeLimit = DEFAULT_SIZE_LIMIT,
+  maxFiles,
+  onChange,
+  id = DEFAULT_FILE_INPUT_ID,
+  uploadButtonTitle,
+}: UploadButtonProps) => {
+  const { formatMessage } = useIntl();
+  const inputReference = useRef<HTMLInputElement>(null);
+
+  const [isDropping, setIsDropping] = useState(false);
+
+  const dragCounter = useRef(0);
+
+  const reset = (): void => {
+    dragCounter.current = 0;
+    setIsDropping(false);
+  };
+
+  const onDragLeave = (event: DragEvent): void => {
+    event.preventDefault();
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) {
       setIsDropping(false);
-    };
+    }
+  };
 
-    const onDragLeave = (event: DragEvent): void => {
-      event.preventDefault();
-      dragCounter.current -= 1;
-      if (dragCounter.current === 0) {
-        setIsDropping(false);
-      }
-    };
+  const onDragEnter = (event: DragEvent): void => {
+    event.preventDefault();
+    dragCounter.current += 1;
+    if (dragCounter.current === 1) {
+      setIsDropping(true);
+    }
+  };
 
-    const onDragEnter = (event: DragEvent): void => {
-      event.preventDefault();
-      dragCounter.current += 1;
-      if (dragCounter.current === 1) {
-        setIsDropping(true);
-      }
-    };
+  const onDrop = (event: DragEvent): void => {
+    event.preventDefault();
+    reset();
+    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      onChange(event.dataTransfer.files);
+    }
+  };
 
-    const onDrop = (event: DragEvent): void => {
-      event.preventDefault();
-      reset();
-      if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
-        onChange(event.dataTransfer.files);
-      }
-    };
-
-    const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {
-      const { files } = event.target;
-      if (files) {
-        onChange(files);
-        if (inputReference.current) {
-          inputReference.current.value = '';
-        }
-      }
-    };
+  const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { files } = event.target;
 
-    const getFileTypesDescription = (): string => {
-      if (fileTypes === '*') {
-        return fileTypes;
-      }
-      return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
-    };
+    if (files) {
+      onChange(files);
 
-    function getDescription() {
-      if (description) {
-        return description;
+      if (inputReference.current) {
+        inputReference.current.value = '';
       }
-      const fileTypesDescription = getFileTypesDescription();
-      const derivedFileDescription =
-        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
-
-      return formatMessage(MESSAGES.instructions, {
-        fileTypes: derivedFileDescription,
-        size: Math.round(sizeLimit / 1000),
-      });
     }
+  };
 
-    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
-      const areAllFilesAllowed = getFileTypesDescription() === '*';
-      if (areAllFilesAllowed) {
-        return {};
-      }
-      if (Array.isArray(fileTypes)) {
-        return { accept: fileTypes.join(',') };
-      }
-      return { accept: fileTypes as string };
+  const getFileTypesDescription = (): string => {
+    if (fileTypes === '*') {
+      return fileTypes;
     }
 
-    function renderDescription() {
-      return (
-        <Body className={classNames({ 'text-primary': !disabled })}>
-          {getDescription()}
-          {maxFiles && (
-            <>
-              <br />
-              {`Maximum ${maxFiles} files.`}
-            </>
-          )}
-        </Body>
-      );
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
+  };
+
+  function getDescription() {
+    if (description) {
+      return description;
     }
 
-    function renderButtonTitle() {
-      if (uploadButtonTitle) {
-        return uploadButtonTitle;
-      }
-      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+    const fileTypesDescription = getFileTypesDescription();
+
+    const derivedFileDescription =
+      fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
+
+    return formatMessage(MESSAGES.instructions, {
+      fileTypes: derivedFileDescription,
+      size: Math.round(sizeLimit / 1000),
+    });
+  }
+
+  function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
+    const areAllFilesAllowed = getFileTypesDescription() === '*';
+
+    if (areAllFilesAllowed) {
+      return {}; // file input by default allows all files
     }
 
+    if (Array.isArray(fileTypes)) {
+      return { accept: fileTypes.join(',') };
+    }
+
+    return { accept: fileTypes as string };
+  }
+
+  function renderDescription() {
     return (
-      <div
-        className={classNames('np-upload-button-container', 'droppable', {
-          'droppable-dropping': isDropping,
-        })}
-        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
-      >
-        <input
-          ref={inputReference}
-          id={id}
-          type="file"
-          {...getAcceptedTypes()}
-          {...(multiple && { multiple: true })}
-          className="tw-droppable-input"
-          disabled={disabled}
-          name="file-upload"
-          data-testid={TEST_IDS.uploadInput}
-          onChange={filesSelected}
-        />
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label ref={buttonRef} htmlFor={id} className={classNames('btn', 'np-upload-button')}>
-          <div className="media">
-            <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}>
-              <Body type={Typography.BODY_LARGE_BOLD} className="d-block">
-                {renderButtonTitle()}
-              </Body>
-              {renderDescription()}
-            </div>
-          </div>
-        </label>
-        {isDropping && (
-          <div
-            className={classNames(
-              'droppable-card',
-              'droppable-dropping-card',
-              'droppable-card-content',
-            )}
-          >
-            <PlusIcon className="m-x-1" size={24} />
-            <div>{formatMessage(MESSAGES.dropFile)}</div>
-          </div>
+      <Body className={classNames({ 'text-primary': !disabled })}>
+        {getDescription()}
+        {maxFiles && (
+          <>
+            <br />
+            {`Maximum ${maxFiles} files.`}
+          </>
         )}
-      </div>
+      </Body>
     );
-  },
-);
+  }
+
+  function renderButtonTitle() {
+    if (uploadButtonTitle) {
+      return uploadButtonTitle;
+    }
+    return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+  }
+
+  return (
+    <div
+      className={classNames('np-upload-button-container', 'droppable', {
+        'droppable-dropping': isDropping,
+      })}
+      {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
+    >
+      <input
+        ref={inputReference}
+        id={id}
+        type="file"
+        {...getAcceptedTypes()}
+        {...(multiple && { multiple: true })}
+        className="tw-droppable-input"
+        disabled={disabled}
+        name="file-upload"
+        data-testid={TEST_IDS.uploadInput}
+        onChange={filesSelected}
+      />
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label htmlFor={id} className={classNames('btn', 'np-upload-button')}>
+        <div className="media">
+          <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}>
+            <Body type={Typography.BODY_LARGE_BOLD} className="d-block">
+              {renderButtonTitle()}
+            </Body>
+            {renderDescription()}
+          </div>
+        </div>
+      </label>
+
+      {/* Drop area overlay */}
+      {isDropping && (
+        <div
+          className={classNames(
+            'droppable-card',
+            'droppable-dropping-card',
+            'droppable-card-content',
+          )}
+        >
+          <PlusIcon className="m-x-1" size={24} />
+          <div>{formatMessage(MESSAGES.dropFile)}</div>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default UploadButton;

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -1,152 +1,171 @@
 import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import classNames from 'classnames';
 import { useIntl } from 'react-intl';
+
 import Body from '../../body';
-import { Size, Status, Typography } from '../../common';
+import { Size, Status, Typography, Sentiment } from '../../common';
 import ProcessIndicator from '../../processIndicator/ProcessIndicator';
+import StatusIcon from '../../statusIcon/StatusIcon';
 import { UploadedFile, UploadError } from '../types';
+
 import MESSAGES from './UploadItem.messages';
 import { UploadItemLink } from './UploadItemLink';
-import { forwardRef } from 'react';
 
 export type UploadItemProps = JSX.IntrinsicAttributes & {
   file: UploadedFile;
+  /**
+   * Is this Item part of a multiple- or single-file UploadInput
+   */
   singleFileUpload: boolean;
   canDelete: boolean;
   onDelete: () => void;
+
+  /**
+   * Callback to be called when the file link is clicked.
+   * When provided, you need to manually trigger actions to load/download the file.
+   *
+   * @param file
+   */
   onDownload?: (file: UploadedFile) => void;
-  testid?: string;
 };
 
-const UploadItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, UploadItemProps>(
-  ({ file, canDelete, onDelete, onDownload, singleFileUpload, testid }, ref) => {
-    const { formatMessage } = useIntl();
-    const { status, filename, error, errors, url } = file;
-    const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
-
-    const getIcon = () => {
-      if (error || errors?.length || status === Status.FAILED) {
-        return <CrossCircleFill size={24} className="emphasis--negative" />;
-      }
-
-      let processIndicator: React.ReactNode;
-
-      switch (status) {
-        case Status.PROCESSING:
-        case Status.PENDING:
-          processIndicator = (
-            <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />
-          );
-          break;
-        case Status.SUCCEEDED:
-        case Status.DONE:
-        default:
-          processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
-          return processIndicator;
-      }
-    };
-
-    const getErrorMessage = (error?: UploadError) =>
-      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]);
-      }
+export enum TEST_IDS {
+  uploadItem = 'uploadItem',
+  mediaBody = 'mediaBody',
+}
+
+const UploadItem = ({
+  file,
+  canDelete,
+  onDelete,
+  onDownload,
+  singleFileUpload,
+}: UploadItemProps) => {
+  const { formatMessage } = useIntl();
+  const { status, filename, error, errors, url } = file;
+
+  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
+
+  /**
+   * We're temporarily reverting to the regular icon components,
+   * until the StatusIcon receives 24px sizing. Some misalignment
+   * to be expected.
+   */
+  const getIcon = () => {
+    if (error || errors?.length || status === Status.FAILED) {
+      return <CrossCircleFill size={24} className="emphasis--negative" />;
+    }
+
+    let processIndicator: React.ReactNode;
+
+    switch (status) {
+      case Status.PROCESSING:
+      case Status.PENDING:
+        processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;
+        break;
+      case Status.SUCCEEDED:
+      case Status.DONE:
+      default:
+        processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
+    }
+
+    return processIndicator;
+  };
+
+  const getErrorMessage = (error?: UploadError) =>
+    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) {
       return (
-        <ul className="np-upload-input-errors m-b-0">
-          {errors.map((error, index) => (
-            <li key={index}>{getErrorMessage(error)}</li>
-          ))}
-        </ul>
+        <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
+          {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
+        </Body>
       );
-    };
+    }
 
-    const getDescription = () => {
-      if (error || errors?.length || status === Status.FAILED) {
+    switch (status) {
+      case Status.PENDING:
+        return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;
+      case Status.PROCESSING:
+        return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
+      case Status.SUCCEEDED:
+      case Status.DONE:
+      default:
         return (
-          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
-            {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
+          <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
+            {formatMessage(MESSAGES.uploaded)}
           </Body>
         );
-      }
-      switch (status) {
-        case Status.PENDING:
-          return (
-            <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>
-          );
-        case Status.PROCESSING:
-          return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
-        case Status.SUCCEEDED:
-        case Status.DONE:
-        default:
-          return (
-            <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
-              {formatMessage(MESSAGES.uploaded)}
-            </Body>
-          );
-      }
-    };
-
-    const getTitle = () => filename || formatMessage(MESSAGES.uploadedFile);
-
-    const onDownloadFile = (event: React.MouseEvent): void => {
-      if (onDownload) {
-        event.preventDefault();
-        onDownload(file);
-      }
-    };
-
-    const handleDelete = () => {
-      onDelete();
-      const uploadButtonElement = document.querySelector<HTMLLabelElement>('.np-upload-button');
-      uploadButtonElement?.focus();
-    };
+    }
+  };
 
-    return (
-      <div
-        className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
-        data-testid={`upload-item-${testid}`}
-      >
-        <div className="np-upload-item__body">
-          <UploadItemLink
-            ref={isSucceeded ? (ref as React.Ref<HTMLAnchorElement>) : undefined}
-            url={isSucceeded ? url : undefined}
-            singleFileUpload={singleFileUpload}
-            onDownload={onDownloadFile}
-          >
-            <div className="np-upload-button" aria-live="polite">
-              <div className="media">
-                <div className="np-upload-icon media-left">{getIcon()}</div>
-                <div className="media-body text-xs-left" data-testid="mediaBody">
-                  <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
-                  {getDescription()}
-                </div>
+  const getTitle = () => {
+    return filename || formatMessage(MESSAGES.uploadedFile);
+  };
+
+  const onDownloadFile = (event: React.MouseEvent): void => {
+    if (onDownload) {
+      event.preventDefault();
+      onDownload(file);
+    }
+  };
+
+  return (
+    <div
+      className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
+      data-testid={TEST_IDS.uploadItem}
+    >
+      <div className="np-upload-item__body">
+        <UploadItemLink
+          url={isSucceeded ? url : undefined}
+          singleFileUpload={singleFileUpload}
+          onDownload={onDownloadFile}
+        >
+          <div className="np-upload-button" aria-live="polite">
+            <div className="media">
+              <div className="np-upload-icon media-left">{getIcon()}</div>
+              <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
+                <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
+                {getDescription()}
               </div>
             </div>
-          </UploadItemLink>
-          {canDelete && (
-            <button
-              ref={isSucceeded ? undefined : (ref as React.Ref<HTMLButtonElement>)}
-              aria-label={formatMessage(MESSAGES.removeFile, { filename })}
-              className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {
-                'np-upload-item--single-file': singleFileUpload,
-              })}
-              type="button"
-              onClick={handleDelete}
-            >
-              <Bin size={16} />
-            </button>
-          )}
-        </div>
+          </div>
+        </UploadItemLink>
+        {canDelete && (
+          <button
+            aria-label={formatMessage(MESSAGES.removeFile, { filename })}
+            className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {
+              'np-upload-item--single-file': singleFileUpload,
+            })}
+            type="button"
+            onClick={() => onDelete()}
+          >
+            <Bin size={16} />
+          </button>
+        )}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 export default UploadItem;

package/src/uploadInput/uploadItem/UploadItemLink.tsx

@@ -1,5 +1,5 @@
+import { PropsWithChildren, MouseEvent } from 'react';
 import classnames from 'classnames';
-import { PropsWithChildren, MouseEvent, forwardRef } from 'react';
 
 type UploadItemLinkProps = PropsWithChildren<{
   url?: string;
@@ -7,26 +7,28 @@ type UploadItemLinkProps = PropsWithChildren<{
   singleFileUpload: boolean;
 }>;
 
-export const UploadItemLink = forwardRef<HTMLDivElement | HTMLAnchorElement, UploadItemLinkProps>(
-  ({ children, url, onDownload, singleFileUpload }, ref) => {
-    if (!url) {
-      return <div>{children}</div>;
-    }
+export const UploadItemLink = ({
+  children,
+  url,
+  onDownload,
+  singleFileUpload,
+}: UploadItemLinkProps) => {
+  if (!url) {
+    return <div>{children}</div>;
+  }
 
-    return (
-      <a
-        ref={ref as React.Ref<HTMLAnchorElement>}
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={classnames(
-          'np-upload-item__link',
-          singleFileUpload ? 'np-upload-item--single-file' : '',
-        )}
-        onClick={onDownload}
-      >
-        {children}
-      </a>
-    );
-  },
-);
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={classnames(
+        'np-upload-item__link',
+        singleFileUpload ? 'np-upload-item--single-file' : '',
+      )}
+      onClick={onDownload}
+    >
+      {children}
+    </a>
+  );
+};