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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/build/index.js +56 -39
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +57 -40
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +108 -121
  6. package/build/styles/main.css +108 -121
  7. package/build/styles/uploadInput/UploadInput.css +27 -19
  8. package/build/styles/uploadInput/uploadButton/UploadButton.css +38 -24
  9. package/build/styles/uploadInput/uploadItem/UploadItem.css +46 -81
  10. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  11. package/build/types/uploadInput/types.d.ts +1 -9
  12. package/build/types/uploadInput/types.d.ts.map +1 -1
  13. package/build/types/uploadInput/uploadButton/UploadButton.d.ts +5 -1
  14. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  15. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  16. package/package.json +18 -19
  17. package/src/chips/Chips.story.tsx +5 -3
  18. package/src/dateLookup/DateLookup.tests.story.tsx +4 -2
  19. package/src/main.css +108 -121
  20. package/src/moneyInput/MoneyInput.story.tsx +1 -3
  21. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -0
  22. package/src/uploadInput/UploadInput.css +27 -19
  23. package/src/uploadInput/UploadInput.less +23 -20
  24. package/src/uploadInput/UploadInput.story.tsx +27 -75
  25. package/src/uploadInput/UploadInput.tsx +4 -1
  26. package/src/uploadInput/types.ts +1 -11
  27. package/src/uploadInput/uploadButton/UploadButton.css +38 -24
  28. package/src/uploadInput/uploadButton/UploadButton.less +40 -27
  29. package/src/uploadInput/uploadButton/UploadButton.spec.tsx +1 -0
  30. package/src/uploadInput/uploadButton/UploadButton.tsx +37 -12
  31. package/src/uploadInput/uploadItem/UploadItem.css +46 -81
  32. package/src/uploadInput/uploadItem/UploadItem.less +40 -75
  33. package/src/uploadInput/uploadItem/UploadItem.tsx +25 -30
  34. package/src/uploadInput/uploadItem/UploadItemBody.tsx +1 -1
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import { Bin } from '@transferwise/icons';
1
+ import { AlertCircle, CrossCircleFill } from '@transferwise/icons';
2
+ import { useTheme } from '@wise/components-theming';
2
3
  import classNames from 'classnames';
3
4
  import { useIntl } from 'react-intl';
4
5
 
@@ -6,7 +7,7 @@ import Body from '../../body';
6
7
  import { Size, Status, Typography, Sentiment } from '../../common';
7
8
  import ProcessIndicator from '../../processIndicator/ProcessIndicator';
8
9
  import StatusIcon from '../../statusIcon/StatusIcon';
9
- import { UploadedFile, UploadError } from '../types';
10
+ import { UploadedFile } from '../types';
10
11
 
11
12
  import MESSAGES from './UploadItem.messages';
12
13
  import { UploadItemBody } from './UploadItemBody';
@@ -42,13 +43,18 @@ const UploadItem = ({
42
43
  singleFileUpload,
43
44
  }: UploadItemProps) => {
44
45
  const { formatMessage } = useIntl();
45
- const { status, filename, error, errors, url } = file;
46
+ const { status, filename, error, url } = file;
47
+ const { isModern } = useTheme();
46
48
 
47
49
  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
48
50
 
49
51
  const getIcon = () => {
50
- if (error || errors?.length || status === Status.FAILED) {
51
- return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
52
+ if (error || status === Status.FAILED) {
53
+ return isModern ? (
54
+ <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />
55
+ ) : (
56
+ <AlertCircle size={24} className="text-negative" />
57
+ );
52
58
  }
53
59
 
54
60
  let processIndicator: React.ReactNode;
@@ -61,39 +67,28 @@ const UploadItem = ({
61
67
  case Status.SUCCEEDED:
62
68
  case Status.DONE:
63
69
  default:
64
- processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;
65
- }
66
-
67
- return processIndicator;
68
- };
69
-
70
- const getErrorMessage = (error?: UploadError) =>
71
- typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
72
-
73
- const getMultipleErrors = (errors?: UploadError[]) => {
74
- if (!errors?.length) {
75
- return null;
70
+ processIndicator = isModern ? (
71
+ <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />
72
+ ) : (
73
+ <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.SUCCEEDED} />
74
+ );
76
75
  }
77
76
 
78
- if (errors?.length === 1) {
79
- return getErrorMessage(errors[0]);
77
+ if (isModern) {
78
+ return processIndicator;
80
79
  }
81
80
 
82
- return (
83
- <ul className="np-upload-input-errors m-b-0">
84
- {errors.map((error, index) => {
85
- // eslint-disable-next-line react/no-array-index-key
86
- return <li key={index}>{getErrorMessage(error)}</li>;
87
- })}
88
- </ul>
89
- );
81
+ return <span style={{ transform: 'scale(0.8335)' }}>{processIndicator}</span>; // Scale down ProcessIndicator to be 20px*20px to match `icons`
90
82
  };
91
83
 
84
+ const getErrorMessage = () =>
85
+ typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
86
+
92
87
  const getDescription = () => {
93
- if (error || errors?.length || status === Status.FAILED) {
88
+ if (error || status === Status.FAILED) {
94
89
  return (
95
90
  <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
96
- {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
91
+ {getErrorMessage()}
97
92
  </Body>
98
93
  );
99
94
  }
@@ -155,7 +150,7 @@ const UploadItem = ({
155
150
  type="button"
156
151
  onClick={() => onDelete()}
157
152
  >
158
- <Bin size={16} />
153
+ <CrossCircleFill size={16} />
159
154
  </button>
160
155
  )}
161
156
  </div>
package/src/uploadInput/uploadItem/UploadItemBody.tsx CHANGED
@@ -21,7 +21,7 @@ export const UploadItemBody = ({
21
21
  href={url}
22
22
  target="_blank"
23
23
  rel="noopener noreferrer"
24
- className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}
24
+ className={singleFileUpload ? 'np-upload-item--single-file' : ''}
25
25
  onClick={onDownload}
26
26
  >
27
27
  {children}