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

package/build/index.js

@@ -13030,8 +13030,13 @@ const UploadButton = ({
   maxFiles,
   onChange,
   id = DEFAULT_FILE_INPUT_ID,
-  uploadButtonTitle
+  uploadButtonTitle,
+  multipleFileInputWithFilesAdded
 }) => {
+  const {
+    isModern
+  } = componentsTheming.useTheme();
+  useDirection();
   const {
     formatMessage
   } = reactIntl.useIntl();
@@ -13094,7 +13099,7 @@ const UploadButton = ({
   function getAcceptedTypes() {
     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)) {
       return {
@@ -13106,13 +13111,17 @@ const UploadButton = ({
     };
   }
   function renderDescription() {
-    return /*#__PURE__*/jsxRuntime.jsxs(Body, {
-      className: classNames__default.default({
-        'text-primary': !disabled
-      }),
-      children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
-      })]
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(Body, {
+        className: classNames__default.default({
+          'text-primary': !disabled,
+          small: !isModern,
+          'font-weight-normal': !isModern
+        }),
+        children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
+        })]
+      })
     });
   }
   function renderButtonTitle() {
@@ -13146,11 +13155,14 @@ const UploadButton = ({
       onChange: filesSelected
     }), /*#__PURE__*/jsxRuntime.jsx("label", {
       htmlFor: id,
-      className: classNames__default.default('btn', 'np-upload-button'),
+      className: classNames__default.default('btn', 'np-upload-accent', 'np-upload-button', {
+        disabled,
+        'np-upload-input--square-top': multipleFileInputWithFilesAdded
+      }),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "media",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "np-upload-icon media-middle media-left",
+          className: "np-upload-icon media-left",
           children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
             size: 24,
             className: "text-link"
@@ -13166,7 +13178,9 @@ const UploadButton = ({
         })]
       })
     }), isDropping && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
+      className: classNames__default.default('droppable-card', 'droppable-dropping-card', 'droppable-card-content', {
+        'np-upload-input--square-top': multipleFileInputWithFilesAdded
+      }),
       children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
         className: "m-x-1",
         size: 24
@@ -13213,7 +13227,7 @@ const UploadItemBody = ({
     href: url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
+    className: singleFileUpload ? 'np-upload-item--single-file' : '',
     onClick: onDownload,
     children: children
   });
@@ -13238,15 +13252,20 @@ const UploadItem = ({
     status,
     filename,
     error,
-    errors,
     url
   } = file;
+  const {
+    isModern
+  } = componentsTheming.useTheme();
   const isSucceeded = [exports.Status.SUCCEEDED, undefined].includes(status) && !!url;
   const getIcon = () => {
-    if (error || errors?.length || status === exports.Status.FAILED) {
-      return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+    if (error || status === exports.Status.FAILED) {
+      return isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
         size: exports.Size.SMALL,
         sentiment: exports.Sentiment.NEGATIVE
+      }) : /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {
+        size: 24,
+        className: "text-negative"
       });
     }
     let processIndicator;
@@ -13261,37 +13280,31 @@ const UploadItem = ({
       case exports.Status.SUCCEEDED:
       case exports.Status.DONE:
       default:
-        processIndicator = /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
+        processIndicator = isModern ? /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
           size: exports.Size.SMALL,
           sentiment: exports.Sentiment.POSITIVE
+        }) : /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
+          size: exports.Size.EXTRA_SMALL,
+          status: exports.Status.SUCCEEDED
         });
     }
-    return processIndicator;
-  };
-  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
-  const getMultipleErrors = errors => {
-    if (!errors?.length) {
-      return null;
-    }
-    if (errors?.length === 1) {
-      return getErrorMessage(errors[0]);
+    if (isModern) {
+      return processIndicator;
     }
-    return /*#__PURE__*/jsxRuntime.jsx("ul", {
-      className: "np-upload-input-errors m-b-0",
-      children: errors.map((error, index) => {
-        // eslint-disable-next-line react/no-array-index-key
-        return /*#__PURE__*/jsxRuntime.jsx("li", {
-          children: getErrorMessage(error)
-        }, index);
-      })
-    });
+    return /*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        transform: 'scale(0.8335)'
+      },
+      children: processIndicator
+    }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
+  const getErrorMessage = () => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
-    if (error || errors?.length || status === exports.Status.FAILED) {
+    if (error || status === exports.Status.FAILED) {
       return /*#__PURE__*/jsxRuntime.jsx(Body, {
         type: exports.Typography.BODY_DEFAULT_BOLD,
         className: "text-negative",
-        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
+        children: getErrorMessage()
       });
     }
     switch (status) {
@@ -13361,7 +13374,7 @@ const UploadItem = ({
         }),
         type: "button",
         onClick: () => onDelete(),
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
           size: 16
         })
       })]
@@ -13398,6 +13411,9 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle
 }) => {
+  const {
+    isModern
+  } = componentsTheming.useTheme();
   const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
   const [mounted, setMounted] = React.useState(false);
   const {
@@ -13555,7 +13571,7 @@ const UploadInput = ({
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: classNames__default.default('np-upload-input', className, {
-        disabled
+        disabled: isModern && disabled
       }),
       children: [uploadedFiles.map(file => /*#__PURE__*/jsxRuntime.jsx(UploadItem, {
         file: file,
@@ -13572,6 +13588,7 @@ const UploadInput = ({
         sizeLimit: sizeLimit,
         description: description,
         maxFiles: maxFiles,
+        multipleFileInputWithFilesAdded: multiple && uploadedFiles.length > 0,
         onChange: addFiles
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Modal, {