@transferwise/components 0.0.0-experimental-438bbba → 0.0.0-experimental-cf33ac7

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -1,6 +1,6 @@
 import { PlusCircle as PlusIcon, Upload as UploadIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { ChangeEvent, DragEvent, useRef, useState, forwardRef, RefObject } from 'react';
+import { ChangeEvent, DragEvent, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
 import Body from '../../body';
@@ -17,6 +17,12 @@ export type UploadButtonProps = {
    */
   disabled?: boolean;
 
+  /**
+   * Should be true, if the UploadInput has at least 1
+   * file (valid or invalid) listed.
+   */
+  withEntries?: boolean;
+
   /**
    * Allow multiple file uploads
    */
@@ -70,174 +76,174 @@ 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 inputRef = useRef<HTMLInputElement>(null);
-
-    const [isDropping, setIsDropping] = useState(false);
-
-    const dragCounter = useRef(0);
-
-    const reset = (): void => {
-      dragCounter.current = 0;
+const UploadButton = ({
+  disabled,
+  withEntries,
+  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 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);
+  const onDragEnter = (event: DragEvent): void => {
+    event.preventDefault();
+    dragCounter.current += 1;
+    if (dragCounter.current === 1) {
+      setIsDropping(true);
+    }
+  };
 
-        if (inputRef.current) {
-          inputRef.current.value = '';
-        }
-      }
-    };
+  const onDrop = (event: DragEvent): void => {
+    event.preventDefault();
+    reset();
+    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      onChange(event.dataTransfer.files);
+    }
+  };
 
-    const getFileTypesDescription = (): string => {
-      if (fileTypes === '*') {
-        return fileTypes;
-      }
+  const filesSelected = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { files } = event.target;
 
-      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 getFileTypesDescription = (): string => {
+    if (fileTypes === '*') {
+      return fileTypes;
+    }
 
-      const derivedFileDescription =
-        fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
+    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
+  };
 
-      return formatMessage(MESSAGES.instructions, {
-        fileTypes: derivedFileDescription,
-        size: Math.round(sizeLimit / 1000),
-      });
+  function getDescription() {
+    if (description) {
+      return description;
     }
 
-    function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
-      const areAllFilesAllowed = getFileTypesDescription() === '*';
+    const fileTypesDescription = getFileTypesDescription();
 
-      if (areAllFilesAllowed) {
-        return {}; // file input by default allows all files
-      }
+    const derivedFileDescription =
+      fileTypesDescription === '*' ? formatMessage(MESSAGES.allFileTypes) : fileTypesDescription;
 
-      if (Array.isArray(fileTypes)) {
-        return { accept: fileTypes.join(',') };
-      }
+    return formatMessage(MESSAGES.instructions, {
+      fileTypes: derivedFileDescription,
+      size: Math.round(sizeLimit / 1000),
+    });
+  }
 
-      return { accept: fileTypes as string };
-    }
+  function getAcceptedTypes(): Pick<React.ComponentPropsWithoutRef<'input'>, 'accept'> {
+    const areAllFilesAllowed = getFileTypesDescription() === '*';
 
-    function renderDescription() {
-      return (
-        <Body className={clsx({ 'text-primary': !disabled })}>
-          {getDescription()}
-          {maxFiles && (
-            <>
-              <br />
-              {`Maximum ${maxFiles} files.`}
-            </>
-          )}
-        </Body>
-      );
+    if (areAllFilesAllowed) {
+      return {}; // file input by default allows all files
     }
 
-    function renderButtonTitle() {
-      if (uploadButtonTitle) {
-        return uploadButtonTitle;
-      }
-      return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+    if (Array.isArray(fileTypes)) {
+      return { accept: fileTypes.join(',') };
     }
 
+    return { accept: fileTypes as string };
+  }
+
+  function renderDescription() {
     return (
-      <div
-        className={clsx('np-upload-button-container', 'droppable', {
-          'droppable-dropping': isDropping,
-        })}
-        {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
-      >
-        <input
-          ref={ref}
-          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={clsx('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={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}
-          >
-            <PlusIcon className="m-x-1" size={24} />
-            <div>{formatMessage(MESSAGES.dropFile)}</div>
-          </div>
+      <Body className="np-upload-input__text">
+        {getDescription()}
+        {maxFiles && (
+          <>
+            <br />
+            {`Maximum ${maxFiles} files.`}
+          </>
         )}
-      </div>
+      </Body>
     );
-  },
-);
+  }
+
+  function renderButtonTitle() {
+    if (uploadButtonTitle) {
+      return uploadButtonTitle;
+    }
+    return formatMessage(multiple ? MESSAGES.uploadFiles : MESSAGES.uploadFile);
+  }
+
+  return (
+    <label
+      className={clsx(
+        'np-upload-input__upload-button',
+        `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`,
+        `np-upload-input__upload-button--${withEntries ? 'with' : 'without'}-entries`,
+        {
+          'is-dropping': isDropping,
+        },
+      )}
+      htmlFor={id}
+      {...(!disabled && { onDragEnter, onDragLeave, onDrop, onDragOver })}
+    >
+      <span className="np-upload-input__icon">
+        <UploadIcon size={24} className="text-link" />
+      </span>
+      <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
+        <Body type={Typography.BODY_LARGE_BOLD} className="np-upload-input__title">
+          {renderButtonTitle()}
+        </Body>
+        {renderDescription()}
+      </div>
+      <input
+        ref={inputReference}
+        className="np-upload-input__upload-button-input sr-only"
+        type="file"
+        id={id}
+        {...getAcceptedTypes()}
+        {...(multiple && { multiple: true })}
+        disabled={disabled}
+        name="file-upload"
+        data-testid={TEST_IDS.uploadInput}
+        onChange={filesSelected}
+      />
+      {isDropping && (
+        <div
+          className={clsx(
+            'np-upload-input__drop-file-overlay',
+            'droppable-card',
+            'droppable-dropping-card',
+            'droppable-card-content',
+          )}
+        >
+          <PlusIcon className="m-x-1" size={24} />
+          <div>{formatMessage(MESSAGES.dropFile)}</div>
+        </div>
+      )}
+    </label>
+  );
+};
 
 export default UploadButton;

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,144 +1,165 @@
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
+.np-upload-input__item {
   position: relative;
-}
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
+  padding: 16px;
+  padding: var(--size-16);
+  display: flex;
+  align-items: flex-start;
+  border-left: var(--outerBorder);
+  border-right: var(--outerBorder);
+}
+.np-upload-input__item:first-child {
+  border-top: var(--outerBorder);
+  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__item + .np-upload-input__item:before {
+  content: " ";
   display: block;
   position: absolute;
   height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
-  content: " ";
   left: 16px;
   left: var(--size-16);
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
-}
-.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
-.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
   top: 0;
+  background: rgba(0,0,0,0.10196);
+  background: var(--color-border-neutral);
 }
-.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
-  bottom: -1px;
-}
-.np-upload-item:first-child ~ div {
-  border-top: 1px;
+.np-upload-input__item .np-upload-input__item-content {
+  padding-right: 32px;
+  padding-right: var(--size-32);
+  flex: 1;
 }
-.np-upload-item:not(:first-child) .np-upload-item__link:hover {
-  border-top-color: rgba(0,0,0,0.10196);
-  border-top-color: var(--color-border-neutral);
+@media (max-width: 320px) {
+  .np-upload-input__item .np-upload-input__item-content {
+    padding-right: 64px;
+    padding-right: var(--size-64);
+  }
 }
-.np-upload-item:not(:last-child) {
-  border-bottom: 0;
+.np-upload-input__item .np-upload-input__title,
+.np-upload-input__item .np-upload-input__text {
+  margin: 0;
+  -moz-text-align-last: left;
+       text-align-last: left;
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
+.np-upload-input__item .np-upload-input__icon {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+}
+.np-upload-input__item .np-upload-input__item-link,
+.np-upload-input__item .np-upload-input__item-container {
+  align-items: flex-start;
+  display: flex;
+  width: 100%;
 }
-.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
-.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
-  display: none;
+.np-upload-input__item .np-upload-input__item-action {
+  --iconSize: var(--size-24);
+  --clickArea: 44px;
+  --buttonTopRightOffset: var(--size-16);
+  --clickAreaTopRightOffset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
+  position: absolute;
+  right: 16px;
+  right: var(--buttonTopRightOffset);
+  top: 16px;
+  top: var(--buttonTopRightOffset);
 }
-.np-upload-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !important;
+@media (max-width: 320px) {
+  .np-upload-input__item .np-upload-input__item-action {
+    --iconSize: var(--size-48);
+    --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
+  }
 }
-.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-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: var(--iconSize);
+  width: var(--iconSize);
+  padding: 0 4px;
+  padding: 0 var(--size-4);
+  border-radius: 50%;
+  border: 0;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  transition: color, background-color 0.15s ease-in-out;
+  outline-offset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.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-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
+  content: '';
+  display: block;
+  width: var(--clickArea);
+  height: var(--clickArea);
+  border-radius: 50%;
+  position: absolute;
+  top: var(--clickAreaTopRightOffset);
+  right: var(--clickAreaTopRightOffset);
 }
-.np-upload-item--link a {
-  flex: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-top: 1px solid transparent;
-  border-radius: inherit;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
 }
-.np-upload-item--link a:focus-visible {
-  outline-offset: -2px;
+.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: var(--color-background-neutral-active);
 }
-.np-upload-item--link a:hover:before {
-  display: none !important;
+.np-upload-input__item.is-interactive {
+  padding: 0;
 }
-.np-upload-item--link a:hover:after {
-  left: 0 !important;
-  width: 100% !important;
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)):before,
+.np-upload-input__item.is-interactive:hover:not(:has(.np-upload-input__item-button:hover)) + .np-upload-input__item:before {
+  width: 100%;
+  left: 0;
 }
-.np-upload-item--link a:hover,
-.np-upload-item--link a:active {
+.np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
+  padding: var(--size-16);
   -webkit-text-decoration: none;
   text-decoration: none;
+  border-radius: inherit;
+  border-top: 1px solid transparent;
+  background-clip: padding-box;
+}
+.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
+  outline-offset: -2px;
+  outline-width: 3px;
 }
-.np-upload-item--link a:hover .np-upload-button,
-.np-upload-item--link a:active .np-upload-button {
+.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
+.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border-radius: inherit;
 }
-.np-upload-item--link:first-of-type a {
-  border-top: 0;
+.np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
+  border-top-width: 0;
 }
-.np-upload-item__body {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.np-upload-input__item .np-upload-input-errors {
+  padding-left: 0;
+  list-style-type: "";
+}
+.np-upload-input__item .np-upload-input-errors > li {
   position: relative;
-  border-radius: inherit;
+  padding-left: 16px;
+  padding-left: var(--size-16);
 }
-.np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
+.np-upload-input__item .np-upload-input-errors > li::before {
+  content: '•';
   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);
-  border: none;
-  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;
+  display: block;
+  left: 0;
 }
 @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-input__item .np-upload-input-errors > li {
+    padding-left: 32px;
+    padding-left: var(--size-32);
   }
 }
-.np-upload-item__remove-button:hover {
-  background-color: var(--color-sentiment-negative);
-  color: var(--color-contrast-overlay) !important;
-}
-.np-upload-item__remove-button:before {
-  display: block;
-  width: 44px;
-  height: 44px;
-  content: '';
-  border-radius: 50%;
-  position: absolute;
-}