@transferwise/components 0.0.0-experimental-e0e44ba → 0.0.0-experimental-9cff936

package/src/uploadInput/UploadInput.less

@@ -3,28 +3,90 @@
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {
-  --outerBorder: 1px solid var(--color-interactive-secondary);
-  border-radius: var(--radius-small);
+  &.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-upload-input__section {
-    margin: 0;
+.np-theme-personal {
+  .np-upload-input {
+    &.disabled .btn {
+      cursor: inherit;
+    }
+
+    .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);
+      }
 
-    // only 1 file allowed and already uploaded (no UploadButton shown)
-    &:only-child {
-      .np-upload-input__item {
-        border-radius: var(--radius-small);
-        border-bottom: var(--outerBorder);
+      .np-text-body-large-bold {
+        text-decoration: underline;
+        .link-underline();
+      }
+
+      .np-text-body-default,
+      .np-upload-description,
+      .text-positive {
+        color: var(--color-content-secondary) !important;
+      }
+
+      .text-negative {
+        color: var(--color-sentiment-negative) !important;
+      }
+    }
+
+    &-errors {
+      list-style: none;
+      padding-left: 0;
+
+      li {
+        position: relative;
+        padding-left: var(--size-16);
+
+        @media (--screen-400-zoom) {
+          padding-left: var(--size-32);
+        }
+
+        &:before {
+          content: '•';
+          position: absolute;
+          display: block;
+          left: 0;
+        }
       }
     }
 
-    // if the last item in the file list is interactive (not an error)
-    // and the user is hovering over it, then we need to adjust the
-    // bottom separator, which happens to be in .np-upload-input__section--uploader
-    &:has(.np-upload-input__item:last-child.is-interactive:hover)
-    + .np-upload-input__section--uploader .np-upload-input__upload-button::before {
-      left: 0;
-      width: 100%;
-      top: 0;
+    .status-circle {
+      width: var(--size-x-small);
+      height: var(--size-x-small);
+
+      @media (--screen-400-zoom) {
+        width: var(--size-large);
+        height: var(--size-large);
+      }
     }
   }
 }

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

@@ -26,23 +26,18 @@ const files = [
     url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
   },
   {
-    id: 3,
-    filename: 'purchase-receipt-2.pdf',
-    url: 'https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg',
-  },
-  {
-    id: 4,
+    id: 2,
     filename: 'receipt failed.png',
     status: Status.FAILED,
   },
   {
-    id: 5,
+    id: 3,
     filename: 'receipt failed With error string.png',
     status: Status.FAILED,
     error: 'Something went wrong',
   },
   {
-    id: 6,
+    id: 4,
     filename: 'receipt failed With error object.png',
     status: Status.FAILED,
     error: { message: 'Something went wrong' },

package/src/uploadInput/UploadInput.tsx

@@ -307,45 +307,35 @@ const UploadInput = ({
         className={clsx('np-upload-input', className, { disabled })}
         {...inputAttributes}
       >
-        <div
-          className="np-upload-input__section"
-          aria-live="polite"
-          aria-relevant="all"
-          role="region"
-        >
-          {uploadedFiles.map((file) => (
-            <UploadItem
-              key={file.id}
-              file={file}
-              singleFileUpload={!multiple}
-              canDelete={
-                (!!onDeleteFile || file.status === Status.FAILED) &&
-                (!file.status || !PROGRESS_STATUSES.has(file.status))
-              }
-              onDelete={
-                file.status === Status.FAILED
-                  ? () => removeFile(file)
-                  : () => setMarkedFileForDelete(file)
-              }
-              onDownload={onDownload}
-            />
-          ))}
-        </div>
+        {uploadedFiles.map((file) => (
+          <UploadItem
+            key={file.id}
+            file={file}
+            singleFileUpload={!multiple}
+            canDelete={
+              (!!onDeleteFile || file.status === Status.FAILED) &&
+              (!file.status || !PROGRESS_STATUSES.has(file.status))
+            }
+            onDelete={
+              file.status === Status.FAILED
+                ? () => removeFile(file)
+                : () => setMarkedFileForDelete(file)
+            }
+            onDownload={onDownload}
+          />
+        ))}
         {(multiple || (!multiple && !uploadedFiles.length)) && (
-          <div className="np-upload-input__section np-upload-input__section--uploader">
-            <UploadButton
-              id={id}
-              uploadButtonTitle={uploadButtonTitle}
-              disabled={areMaximumFilesUploadedAlready() || disabled}
-              multiple={multiple}
-              fileTypes={fileTypes}
-              sizeLimit={sizeLimit}
-              description={description}
-              maxFiles={maxFiles}
-              withEntries={Boolean(uploadedFiles.length)}
-              onChange={addFiles}
-            />
-          </div>
+          <UploadButton
+            id={id}
+            uploadButtonTitle={uploadButtonTitle}
+            disabled={areMaximumFilesUploadedAlready() || disabled}
+            multiple={multiple}
+            fileTypes={fileTypes}
+            sizeLimit={sizeLimit}
+            description={description}
+            maxFiles={maxFiles}
+            onChange={addFiles}
+          />
         )}
       </div>
       <Modal

package/src/uploadInput/uploadButton/UploadButton.css

@@ -1,91 +1,44 @@
-.np-upload-input__upload-button {
-  position: relative;
-  padding: 16px;
-  padding: var(--size-16);
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: var(--radius-small);
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: var(--radius-small);
-  border: var(--outerBorder);
-  cursor: pointer;
-}
-.np-upload-input__upload-button .np-upload-input__title {
-  color: var(--color-content-link);
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 0.3em;
-}
-.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  line-height: 22px;
+.np-upload-button-container {
+  border-style: solid;
 }
-.np-upload-input__upload-button .np-upload-input__icon {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-  color: var(--color-interactive-primary);
+.np-upload-button-container .droppable-card-content {
+  display: flex;
 }
-.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
-.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
-  display: none;
+.np-upload-button-container.droppable-dropping {
+  border-color: #c9cbce !important;
+  border-color: var(--color-interactive-secondary) !important;
 }
-.np-upload-input__upload-button:focus-within,
-.np-upload-input__upload-button:focus-visible {
-  outline: var(--ring-outline-color) solid 3px;
-  outline-offset: -3px;
+.np-upload-button-container.droppable-dropping:before {
+  z-index: 2;
 }
-.np-upload-input__upload-button-input {
-  position: absolute;
+.np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
+  position: absolute;
 }
-.np-upload-input__upload-button-input:focus {
-  outline: none;
-}
-.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
-  display: flex;
-  flex: 1;
-  padding: 13px 0 !important;
-  background-color: transparent;
-  transition: transform 0.3s ease;
-  position: relative;
-}
-.np-upload-input__upload-button--with-entries {
-  border-top-width: 0;
+.np-upload-button-container .np-upload-button {
+  border: none;
 }
-.np-upload-input__upload-button--with-entries:before {
-  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));
-  top: 0;
+.np-upload-button {
+  width: 100%;
+  border-top: 1px solid transparent;
+  padding: 16px;
+  padding: var(--padding-small);
+  border-radius: 0;
 }
-.np-upload-input__upload-button--without-entries {
-  border-top: var(--outerBorder);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+label.np-upload-button:not(.disabled):hover,
+label.np-upload-button:not(.disabled):active {
+  background-color: var(--color-background-screen-hover);
 }
-.np-upload-input__upload-button--enabled.is-dropping,
-.np-upload-input__upload-button--enabled:hover,
-.np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
+.disabled label.np-upload-button:not(.disabled):hover,
+.disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
 }
-.np-upload-input__upload-button--enabled.is-dropping:before,
-.np-upload-input__upload-button--enabled:hover:before,
-.np-upload-input__upload-button--enabled:active:before {
-  width: 100%;
-  left: 0;
+.np-upload-button .media {
+  align-items: flex-start;
 }
-.np-upload-input__upload-button--disabled {
-  cursor: inherit;
+@media (max-width: 320px) {
+  .np-upload-icon {
+    padding-left: 0;
+  }
 }

package/src/uploadInput/uploadButton/UploadButton.less

@@ -1,98 +1,55 @@
-.np-upload-input__upload-button {
-  position: relative;
-  padding: var(--size-16);
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border-bottom-left-radius: var(--radius-small);
-  border-bottom-right-radius: var(--radius-small);
-  border: var(--outerBorder);
-  cursor: pointer;
+.np-upload-button-container {
+  border-style: solid;
 
-  .np-upload-input__title {
-    color: var(--color-content-link);
-    text-decoration: underline;
-    text-underline-offset: 0.3em;
-
-    & + .np-upload-input__text {
-      margin-top: var(--size-4);
-      line-height: 22px;
-    }
+  .droppable-card-content {
+    display: flex;
   }
 
-  .np-upload-input__icon {
-    padding-right: var(--size-16);
-    color: var(--color-interactive-primary);
-  }
+  &.droppable-dropping {
+    border-color: var(--color-interactive-secondary) !important;
 
-  &.is-dropping {
-    .np-upload-input__icon,
-    .np-upload-input__item-content {
-      display: none;
+    &:before {
+      z-index: 2;
     }
   }
 
-  &:focus-within,
-  &:focus-visible {
-    outline: var(--ring-outline-color) solid 3px;
-    outline-offset: -3px;
-  }
-
-  &-input {
-    position: absolute;
+  input[type="file"] {
     opacity: 0;
     z-index: -1;
-
-    &:focus {
-      outline: none;
-    }
+    position: absolute;
   }
 
-  .np-upload-input__drop-file-overlay {
-    display: flex;
-    flex: 1;
-    padding: 13px 0 !important;
-    background-color: transparent;
-    transition: transform 0.3s ease;
-    position: relative;
+  .np-upload-button {
+    border: none;
   }
 }
 
-// at least 1 file uploaded or 1 error visible
-.np-upload-input__upload-button--with-entries {
-  border-top-width: 0;
-
-  &:before {
-    display: block;
-    position: absolute;
-    height: 1px;
-    background-color: var(--color-border-neutral);
-    content: " ";
-    left: var(--size-16);
-    width: calc(100% - 2 * var(--size-16));
-    top: 0;
+.np-upload-button {
+  width: 100%;
+  border-top: 1px solid transparent;
+  padding: var(--padding-small);
+  border-radius: 0;
+
+  label& {
+    &:not(.disabled) {
+      &:hover,
+      &:active {
+        background-color: var(--color-background-screen-hover);
+
+        .disabled & {
+          background-color: transparent;
+        }
+      }
+    }
   }
-}
 
-// no files uploaded (only button shown)
-.np-upload-input__upload-button--without-entries {
-  border-top: var(--outerBorder);
-  border-radius: var(--radius-small);
-}
-
-.np-upload-input__upload-button--enabled {
-  &.is-dropping,
-  &:hover,
-  &:active {
-    background: var(--color-background-neutral);
-
-    &:before {
-      width: 100%;
-      left: 0;
-    }
+  .media {
+    align-items: flex-start;
   }
 }
 
-.np-upload-input__upload-button--disabled {
-  cursor: inherit;
+.np-upload-icon{
+  @media (max-width: 320px) {
+    padding-left: 0;
+  }
 }

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -17,12 +17,6 @@ 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
    */
@@ -78,7 +72,6 @@ const onDragOver = (event: DragEvent): void => {
 const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
 const UploadButton = ({
   disabled,
-  withEntries,
   multiple,
   description,
   fileTypes = imageFileTypes,
@@ -176,7 +169,7 @@ const UploadButton = ({
 
   function renderDescription() {
     return (
-      <Body className="np-upload-input__text">
+      <Body className={clsx({ 'text-primary': !disabled })}>
         {getDescription()}
         {maxFiles && (
           <>
@@ -196,53 +189,49 @@ const UploadButton = ({
   }
 
   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}
+    <div
+      className={clsx('np-upload-button-container', 'droppable', {
+        'droppable-dropping': isDropping,
+      })}
       {...(!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}
+        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(
-            'np-upload-input__drop-file-overlay',
-            'droppable-card',
-            'droppable-dropping-card',
-            'droppable-card-content',
-          )}
+          className={clsx('droppable-card', 'droppable-dropping-card', 'droppable-card-content')}
         >
           <PlusIcon className="m-x-1" size={24} />
           <div>{formatMessage(MESSAGES.dropFile)}</div>
         </div>
       )}
-    </label>
+    </div>
   );
 };