@transferwise/components 0.0.0-experimental-5ac3a46 → 0.0.0-experimental-215a547

package/src/uploadInput/UploadInput.tsx

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

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 translated error messages when a file gets 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/uploadButton/UploadButton.css

@@ -1,35 +1,49 @@
-.np-upload-button-container {
-  border-style: solid;
+.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 .droppable-card-content {
   display: flex;
 }
-.np-upload-button-container.droppable-dropping {
-  border-color: #c9cbce !important;
-  border-color: var(--color-interactive-secondary) !important;
+.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 input[type="file"] {
   opacity: 0;
   z-index: -1;
   position: absolute;
 }
-.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;
+.np-upload-button-container input[type="file"]:focus-visible + label {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
 }

package/src/uploadInput/uploadButton/UploadButton.less

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

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

@@ -9,6 +9,7 @@ describe('UploadButton', () => {
 
   const props: UploadButtonProps = {
     onChange: jest.fn(),
+    multipleFileInputWithFilesAdded: true,
   };
 
   const renderComponent = (customProps = props) => render(<UploadButton {...customProps} />);

package/src/uploadInput/uploadButton/UploadButton.tsx

@@ -1,10 +1,12 @@
 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';
@@ -58,6 +60,11 @@ 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 {
@@ -80,7 +87,10 @@ 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);
 
@@ -157,7 +167,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)) {
@@ -169,15 +179,23 @@ const UploadButton = ({
 
   function renderDescription() {
     return (
-      <Body className={classNames({ 'text-primary': !disabled })}>
-        {getDescription()}
-        {maxFiles && (
-          <>
-            <br />
-            {`Maximum ${maxFiles} files.`}
-          </>
-        )}
-      </Body>
+      <>
+        <Body
+          className={classNames({
+            'text-primary': !disabled,
+            small: !isModern,
+            'font-weight-normal': !isModern,
+          })}
+        >
+          {getDescription()}
+          {maxFiles && (
+            <>
+              <br />
+              {`Maximum ${maxFiles} files.`}
+            </>
+          )}
+        </Body>
+      </>
     );
   }
 
@@ -208,9 +226,15 @@ const UploadButton = ({
         onChange={filesSelected}
       />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-      <label htmlFor={id} className={classNames('btn', 'np-upload-button')}>
+      <label
+        htmlFor={id}
+        className={classNames('btn', 'np-upload-accent', 'np-upload-button', {
+          disabled,
+          'np-upload-input--square-top': multipleFileInputWithFilesAdded,
+        })}
+      >
         <div className="media">
-          <div className="np-upload-icon media-middle media-left">
+          <div className="np-upload-icon media-left">
             <UploadIcon size={24} className="text-link" />
           </div>
           <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
@@ -229,6 +253,7 @@ const UploadButton = ({
             'droppable-card',
             'droppable-dropping-card',
             'droppable-card-content',
+            { 'np-upload-input--square-top': multipleFileInputWithFilesAdded },
           )}
         >
           <PlusIcon className="m-x-1" size={24} />

package/src/uploadInput/uploadItem/UploadItem.css

@@ -1,109 +1,74 @@
-.np-upload-item {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-upload-item:first-child ~ div:before {
+.np-upload-item:not(:last-child)::after {
   display: block;
   position: relative;
-  height: 1px;
-  background-color: rgba(0,0,0,0.10196);
-  background-color: var(--color-border-neutral);
+  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid var(--color-border-neutral);
   content: " ";
   margin: 0 16px;
   margin: 0 var(--size-16);
 }
-.np-upload-item:first-child ~ div {
-  border-top: 0;
-}
-.np-upload-item:not(:last-child) {
-  border-bottom: 0;
-}
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
-}
-.np-upload-item.np-upload-item__link:hover + div:before,
-.np-upload-button-container:hover + div:before {
-  margin: 0 !important;
-}
-.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-theme-personal .np-upload-item:first-child a:hover,
+.np-theme-personal .np-upload-item:first-child a:focus-visible,
+.np-theme-personal .np-upload-item:first-child a:active {
+  border-top-left-radius: calc(10px - 1px);
+  border-top-left-radius: calc(var(--radius-small) - 1px);
 }
-.np-upload-item--single-file:focus-visible,
-.np-upload-item--link:focus-visible,
-.np-upload-button-container:has(:focus-visible) {
-  outline-width: 3px;
+.np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
+.np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
+.np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
+  border-top-right-radius: calc(10px - 1px);
+  border-top-right-radius: calc(var(--radius-small) - 1px);
 }
 .np-upload-item__link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-radius: inherit;
+  outline: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
-.np-upload-item__link a:focus-visible {
-  outline-offset: -2px;
+.np-theme-personal .np-upload-item__link a {
+  border-radius: 0;
+  border-radius: initial;
+}
+.np-upload-item__link a.np-upload-item--single-file {
+  border-bottom-left-radius: calc(10px - 1px);
+  border-bottom-left-radius: calc(var(--radius-small) - 1px);
 }
 .np-upload-item__link a:hover,
+.np-upload-item__link a:focus-visible,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
+.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
+.np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
+.np-upload-item__link a:active ~ .np-upload-item__remove-button {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
+  border-bottom-right-radius: calc(10px - 1px);
+  border-bottom-right-radius: calc(var(--radius-small) - 1px);
+}
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  position: relative;
-  border-radius: inherit;
 }
 .np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  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);
-  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;
-}
-@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-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;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 12px 16px;
+  padding: var(--size-12) var(--size-16);
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+  background: transparent;
+}
+.np-upload-item__remove-button:hover,
+.np-upload-item__remove-button:focus {
+  color: #d03238 !important;
+  color: var(--color-interactive-negative-hover) !important;
 }

package/src/uploadInput/uploadItem/UploadItem.less

@@ -1,112 +1,77 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@small-border-minus-one: calc(var(--radius-small) - 1px);
 
 .np-upload-item {
-  border: 1px solid var(--color-interactive-secondary);
-
-  &:first-child ~ div:before {
+  &:not(:last-child)::after {
     display: block;
     position: relative;
-    height: 1px;
-    background-color: var(--color-border-neutral);
+    border-bottom: 1px solid var(--color-border-neutral);
     content: " ";
     margin: 0 var(--size-16);
   }
-
   &:first-child {
-    & ~ div {
-      border-top: 0;
-    }
-  }
+    .np-theme-personal & {
+      a {
+        &:hover,
+        &:focus-visible,
+        &:active {
+          border-top-left-radius: @small-border-minus-one;
 
-  &:not(:last-child) {
-    border-bottom: 0;
+          ~ .np-upload-item__remove-button {
+            border-top-right-radius: @small-border-minus-one;
+          }
+        }
+      }
   }
-}
-
-.np-upload-item.np-upload-item__link:hover,
-.np-upload-button-container:hover {
-  &:before {
-    margin: 0 !important;
   }
-  & + div:before {
-    margin: 0 !important;
-  }
-}
-
-.np-upload-button-container:has(:focus-visible) {
-  .ring();
-  border-color: transparent;
-  outline-offset: -3px;
-}
-
-.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-item__link {
   a {
+    .np-theme-personal & {
+      border-radius: unset;
+    }
     flex: 1;
     text-decoration: none;
-    border-radius: inherit;
-    &:focus-visible {
-      outline-offset: -2px;
+    outline: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &.np-upload-item--single-file {
+      border-bottom-left-radius: @small-border-minus-one;
     }
 
     &:hover,
+    &:focus-visible,
     &:active {
       text-decoration: none;
       background-color: var(--color-background-neutral);
+
+      ~ .np-upload-item__remove-button {
+        background-color: var(--color-background-neutral);
+      }
     }
   }
+  
+  .np-upload-item__remove-button.np-upload-item--single-file {
+    border-bottom-right-radius: @small-border-minus-one;
+  }
 }
 
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  // We should have the `relative` position for the body, because we have `absolute` position for `np-upload-item__remove-button` to achieve appropriate `hover` effects
-  position: relative;
-  border-radius: inherit;
 }
 
 .np-upload-item__remove-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  position: absolute;
-  height: var(--size-24);
-  min-height: 0;
-  width: var(--size-24);
-  padding: 0;
-  border-radius: 50% !important;
-  outline-offset: 0 !important;
-  background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
-  right: var(--size-16);
-  top: var(--size-16);
-  transition: color, background-color 0.15s ease-in-out;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: var(--size-12) var(--size-16);
+  color: var(--color-interactive-secondary);
+  background: transparent;
 
-  @media (--screen-400-zoom) {
-    top: var(--size-16);
-    right: var(--size-16);
-    height: var(--size-48);
-    width: var(--size-48);
-  }
-
-  &:hover {
-    background-color: var(--color-sentiment-negative);
-    color: var(--color-contrast-overlay) !important;
-  }
-
-  &:before {
-    display: block;
-    width: 44px;
-    height: 44px;
-    content: '';
-    border-radius: 50%;
-    position: absolute;
+  &:hover,
+  &:focus {
+    color: var(--color-interactive-negative-hover) !important; // Override btn:hover color
   }
 }