@transferwise/components 46.67.2 → 46.68.0

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 (73) hide show
  1. package/build/button/Button.js +22 -6
  2. package/build/button/Button.js.map +1 -1
  3. package/build/button/Button.mjs +22 -6
  4. package/build/button/Button.mjs.map +1 -1
  5. package/build/main.css +212 -210
  6. package/build/styles/button/Button.css +3 -0
  7. package/build/styles/main.css +212 -210
  8. package/build/styles/uploadInput/UploadInput.css +13 -81
  9. package/build/styles/uploadInput/uploadButton/UploadButton.css +77 -31
  10. package/build/styles/uploadInput/uploadItem/UploadItem.css +130 -109
  11. package/build/typeahead/Typeahead.js +22 -8
  12. package/build/typeahead/Typeahead.js.map +1 -1
  13. package/build/typeahead/Typeahead.mjs +22 -9
  14. package/build/typeahead/Typeahead.mjs.map +1 -1
  15. package/build/typeahead/typeaheadInput/TypeaheadInput.js +5 -2
  16. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  17. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs +5 -2
  18. package/build/typeahead/typeaheadInput/TypeaheadInput.mjs.map +1 -1
  19. package/build/typeahead/typeaheadOption/TypeaheadOption.js +9 -6
  20. package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
  21. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs +9 -6
  22. package/build/typeahead/typeaheadOption/TypeaheadOption.mjs.map +1 -1
  23. package/build/types/button/Button.d.ts.map +1 -1
  24. package/build/types/typeahead/Typeahead.d.ts +1 -1
  25. package/build/types/typeahead/Typeahead.d.ts.map +1 -1
  26. package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts +2 -0
  27. package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts.map +1 -1
  28. package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts +2 -1
  29. package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map +1 -1
  30. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  31. package/build/types/uploadInput/uploadButton/UploadButton.d.ts +5 -0
  32. package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
  33. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  34. package/build/uploadInput/UploadInput.js +30 -20
  35. package/build/uploadInput/UploadInput.js.map +1 -1
  36. package/build/uploadInput/UploadInput.mjs +30 -20
  37. package/build/uploadInput/UploadInput.mjs.map +1 -1
  38. package/build/uploadInput/uploadButton/UploadButton.js +25 -32
  39. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  40. package/build/uploadInput/uploadButton/UploadButton.mjs +25 -32
  41. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  42. package/build/uploadInput/uploadItem/UploadItem.js +32 -38
  43. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  44. package/build/uploadInput/uploadItem/UploadItem.mjs +33 -39
  45. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  46. package/build/uploadInput/uploadItem/UploadItemLink.js +2 -1
  47. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
  48. package/build/uploadInput/uploadItem/UploadItemLink.mjs +2 -1
  49. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
  50. package/package.json +4 -4
  51. package/src/button/Button.css +3 -0
  52. package/src/button/Button.less +6 -0
  53. package/src/button/Button.spec.js +81 -45
  54. package/src/button/Button.story.tsx +54 -20
  55. package/src/button/Button.tsx +32 -7
  56. package/src/button/__snapshots__/Button.spec.js.snap +56 -12
  57. package/src/main.css +212 -210
  58. package/src/typeahead/Typeahead.spec.js +8 -0
  59. package/src/typeahead/Typeahead.tsx +29 -13
  60. package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +9 -0
  61. package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +8 -0
  62. package/src/typeahead/typeaheadOption/TypeaheadOption.tsx +9 -6
  63. package/src/uploadInput/UploadInput.css +13 -81
  64. package/src/uploadInput/UploadInput.less +18 -80
  65. package/src/uploadInput/UploadInput.tests.story.tsx +5 -5
  66. package/src/uploadInput/UploadInput.tsx +43 -32
  67. package/src/uploadInput/uploadButton/UploadButton.css +77 -31
  68. package/src/uploadInput/uploadButton/UploadButton.less +77 -35
  69. package/src/uploadInput/uploadButton/UploadButton.tsx +37 -26
  70. package/src/uploadInput/uploadItem/UploadItem.css +130 -109
  71. package/src/uploadInput/uploadItem/UploadItem.less +130 -118
  72. package/src/uploadInput/uploadItem/UploadItem.tsx +26 -28
  73. package/src/uploadInput/uploadItem/UploadItemLink.tsx +3 -3
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -112,7 +112,7 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
112
112
  const getDescription = () => {
113
113
  if (error || errors?.length || status === Status.FAILED) {
114
114
  return (
115
- <Body type={Typography.BODY_DEFAULT_BOLD} className="text-negative">
115
+ <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text text-negative">
116
116
  {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}
117
117
  </Body>
118
118
  );
@@ -121,15 +121,17 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
121
121
  switch (status) {
122
122
  case Status.PENDING:
123
123
  return (
124
- <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>
124
+ <Body type={Typography.BODY_DEFAULT} className="np-upload-input__text">
125
+ {formatMessage(MESSAGES.uploading)}
126
+ </Body>
125
127
  );
126
128
  case Status.PROCESSING:
127
- return <Body>{formatMessage(MESSAGES.deleting)}</Body>;
129
+ return <Body className="np-upload-input__text">{formatMessage(MESSAGES.deleting)}</Body>;
128
130
  case Status.SUCCEEDED:
129
131
  case Status.DONE:
130
132
  default:
131
133
  return (
132
- <Body type={Typography.BODY_DEFAULT_BOLD} className="text-positive">
134
+ <Body type={Typography.BODY_DEFAULT_BOLD} className="np-upload-input__text">
133
135
  {formatMessage(MESSAGES.uploaded)}
134
136
  </Body>
135
137
  );
@@ -149,40 +151,36 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
149
151
 
150
152
  return (
151
153
  <div
152
- className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}
154
+ className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
153
155
  data-testid={TEST_IDS.uploadItem}
154
156
  >
155
- <div className="np-upload-item__body">
156
- <UploadItemLink
157
- ref={linkRef}
158
- url={isSucceeded ? url : undefined}
159
- singleFileUpload={singleFileUpload}
160
- onDownload={onDownloadFile}
161
- >
162
- <div className="np-upload-button" aria-live="polite">
163
- <div className="media">
164
- <div className="np-upload-icon media-left">{getIcon()}</div>
165
- <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>
166
- <Body className="text-word-break d-block text-primary">{getTitle()}</Body>
167
- {getDescription()}
168
- </div>
169
- </div>
170
- </div>
171
- </UploadItemLink>
172
- {canDelete && (
157
+ <UploadItemLink
158
+ ref={linkRef}
159
+ url={isSucceeded ? url : undefined}
160
+ singleFileUpload={singleFileUpload}
161
+ onDownload={onDownloadFile}
162
+ >
163
+ <span className="np-upload-input__icon">{getIcon()}</span>
164
+ <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
165
+ <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
166
+ {getTitle()}
167
+ </Body>
168
+ {getDescription()}
169
+ </div>
170
+ </UploadItemLink>
171
+ {canDelete && (
172
+ <div className="np-upload-input__item-action">
173
173
  <button
174
174
  ref={buttonRef}
175
175
  aria-label={formatMessage(MESSAGES.removeFile, { filename })}
176
- className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {
177
- 'np-upload-item--single-file': singleFileUpload,
178
- })}
176
+ className="np-upload-input__item-button"
179
177
  type="button"
180
178
  onClick={() => onDelete()}
181
179
  >
182
180
  <Bin size={16} />
183
181
  </button>
184
- )}
185
- </div>
182
+ </div>
183
+ )}
186
184
  </div>
187
185
  );
188
186
  },
package/src/uploadInput/uploadItem/UploadItemLink.tsx CHANGED
@@ -10,7 +10,7 @@ type UploadItemLinkProps = PropsWithChildren<{
10
10
  export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, UploadItemLinkProps>(
11
11
  ({ children, url, onDownload, singleFileUpload }, ref) => {
12
12
  if (!url) {
13
- return <div ref={ref as React.RefObject<HTMLDivElement>}>{children}</div>;
13
+ return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
14
14
  }
15
15
 
16
16
  return (
@@ -20,8 +20,8 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
20
20
  target="_blank"
21
21
  rel="noopener noreferrer"
22
22
  className={clsx(
23
- 'np-upload-item__link',
24
- singleFileUpload ? 'np-upload-item--single-file' : '',
23
+ 'np-upload-input__item-link',
24
+ singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
25
25
  )}
26
26
  onClick={onDownload}
27
27
  >