@transferwise/components 0.0.0-experimental-e5e0684 → 0.0.0-experimental-37d8e2c

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 (151) hide show
  1. package/build/avatar/Avatar.js +4 -1
  2. package/build/avatar/Avatar.js.map +1 -1
  3. package/build/avatar/Avatar.mjs +4 -1
  4. package/build/avatar/Avatar.mjs.map +1 -1
  5. package/build/avatar/colors/colors.js +1 -1
  6. package/build/avatar/colors/colors.js.map +1 -1
  7. package/build/avatar/colors/colors.mjs +1 -1
  8. package/build/avatar/colors/colors.mjs.map +1 -1
  9. package/build/avatarView/AvatarView.js +207 -0
  10. package/build/avatarView/AvatarView.js.map +1 -0
  11. package/build/avatarView/AvatarView.mjs +205 -0
  12. package/build/avatarView/AvatarView.mjs.map +1 -0
  13. package/build/avatarWrapper/AvatarWrapper.js +6 -9
  14. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  15. package/build/avatarWrapper/AvatarWrapper.mjs +5 -8
  16. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  17. package/build/badge/Badge.js +6 -1
  18. package/build/badge/Badge.js.map +1 -1
  19. package/build/badge/Badge.mjs +6 -1
  20. package/build/badge/Badge.mjs.map +1 -1
  21. package/build/circularButton/CircularButton.js +4 -7
  22. package/build/circularButton/CircularButton.js.map +1 -1
  23. package/build/circularButton/CircularButton.mjs +4 -7
  24. package/build/circularButton/CircularButton.mjs.map +1 -1
  25. package/build/common/circle/Circle.js +24 -1
  26. package/build/common/circle/Circle.js.map +1 -1
  27. package/build/common/circle/Circle.mjs +24 -1
  28. package/build/common/circle/Circle.mjs.map +1 -1
  29. package/build/common/initials.js +12 -0
  30. package/build/common/initials.js.map +1 -0
  31. package/build/common/initials.mjs +10 -0
  32. package/build/common/initials.mjs.map +1 -0
  33. package/build/common/notificationDot/NotificationDot.js +16 -0
  34. package/build/common/notificationDot/NotificationDot.js.map +1 -0
  35. package/build/common/notificationDot/NotificationDot.mjs +14 -0
  36. package/build/common/notificationDot/NotificationDot.mjs.map +1 -0
  37. package/build/display/Display.js +1 -1
  38. package/build/display/Display.js.map +1 -1
  39. package/build/display/Display.mjs +1 -1
  40. package/build/display/Display.mjs.map +1 -1
  41. package/build/index.js +6 -0
  42. package/build/index.js.map +1 -1
  43. package/build/index.mjs +3 -0
  44. package/build/index.mjs.map +1 -1
  45. package/build/main.css +82 -41
  46. package/build/statusIcon/StatusIcon.js +4 -2
  47. package/build/statusIcon/StatusIcon.js.map +1 -1
  48. package/build/statusIcon/StatusIcon.mjs +4 -2
  49. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  50. package/build/styles/avatarGroup/AvatarGroup.css +28 -0
  51. package/build/styles/avatarView/AvatarView.css +22 -0
  52. package/build/styles/badge/Badge.css +5 -5
  53. package/build/styles/circularButton/CircularButton.css +0 -24
  54. package/build/styles/common/circle/Circle.css +17 -0
  55. package/build/styles/common/notificationDot/NotificationDot.css +10 -0
  56. package/build/styles/main.css +82 -41
  57. package/build/styles/statusIcon/StatusIcon.css +0 -12
  58. package/build/typeahead/util/highlight.js +14 -2
  59. package/build/typeahead/util/highlight.js.map +1 -1
  60. package/build/typeahead/util/highlight.mjs +15 -3
  61. package/build/typeahead/util/highlight.mjs.map +1 -1
  62. package/build/types/avatar/Avatar.d.ts +3 -0
  63. package/build/types/avatar/Avatar.d.ts.map +1 -1
  64. package/build/types/avatar/colors/colors.d.ts +1 -1
  65. package/build/types/avatar/colors/colors.d.ts.map +1 -1
  66. package/build/types/avatarGroup/AvatarGroup.d.ts +19 -0
  67. package/build/types/avatarGroup/AvatarGroup.d.ts.map +1 -0
  68. package/build/types/avatarGroup/index.d.ts +3 -0
  69. package/build/types/avatarGroup/index.d.ts.map +1 -0
  70. package/build/types/avatarView/AvatarView.d.ts +25 -0
  71. package/build/types/avatarView/AvatarView.d.ts.map +1 -0
  72. package/build/types/avatarView/index.d.ts +3 -0
  73. package/build/types/avatarView/index.d.ts.map +1 -0
  74. package/build/types/avatarWrapper/AvatarWrapper.d.ts +3 -0
  75. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  76. package/build/types/badge/Badge.d.ts +2 -1
  77. package/build/types/badge/Badge.d.ts.map +1 -1
  78. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  79. package/build/types/common/circle/Circle.d.ts +1 -1
  80. package/build/types/common/circle/Circle.d.ts.map +1 -1
  81. package/build/types/common/index.d.ts +1 -0
  82. package/build/types/common/initials.d.ts +2 -0
  83. package/build/types/common/initials.d.ts.map +1 -0
  84. package/build/types/common/notificationDot/NotificationDot.d.ts +8 -0
  85. package/build/types/common/notificationDot/NotificationDot.d.ts.map +1 -0
  86. package/build/types/index.d.ts +4 -1
  87. package/build/types/index.d.ts.map +1 -1
  88. package/build/types/statusIcon/StatusIcon.d.ts +6 -2
  89. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  90. package/build/types/typeahead/util/highlight.d.ts +1 -1
  91. package/build/types/typeahead/util/highlight.d.ts.map +1 -1
  92. package/build/types/uploadInput/UploadInput.d.ts +0 -9
  93. package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
  94. package/build/types/uploadInput/uploadItem/UploadItem.d.ts +1 -3
  95. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  96. package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -1
  97. package/build/uploadInput/UploadInput.js +51 -57
  98. package/build/uploadInput/UploadInput.js.map +1 -1
  99. package/build/uploadInput/UploadInput.mjs +51 -57
  100. package/build/uploadInput/UploadInput.mjs.map +1 -1
  101. package/build/uploadInput/uploadItem/UploadItem.js +3 -8
  102. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  103. package/build/uploadInput/uploadItem/UploadItem.mjs +3 -8
  104. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  105. package/build/uploadInput/uploadItem/UploadItemLink.js +0 -1
  106. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
  107. package/build/uploadInput/uploadItem/UploadItemLink.mjs +0 -1
  108. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
  109. package/package.json +3 -3
  110. package/src/avatar/Avatar.tsx +4 -1
  111. package/src/avatar/colors/colors.ts +4 -4
  112. package/src/avatarGroup/AvatarGroup.css +28 -0
  113. package/src/avatarGroup/AvatarGroup.less +32 -0
  114. package/src/avatarGroup/AvatarGroup.story.tsx +249 -0
  115. package/src/avatarGroup/AvatarGroup.tsx +78 -0
  116. package/src/avatarGroup/index.ts +2 -0
  117. package/src/avatarView/AvatarView.css +22 -0
  118. package/src/avatarView/AvatarView.less +24 -0
  119. package/src/avatarView/AvatarView.story.tsx +425 -0
  120. package/src/avatarView/AvatarView.tsx +217 -0
  121. package/src/avatarView/index.ts +2 -0
  122. package/src/avatarWrapper/AvatarWrapper.tsx +12 -16
  123. package/src/badge/Badge.css +5 -5
  124. package/src/badge/Badge.less +3 -3
  125. package/src/badge/Badge.tsx +10 -1
  126. package/src/circularButton/CircularButton.css +0 -24
  127. package/src/circularButton/CircularButton.less +15 -15
  128. package/src/circularButton/CircularButton.tsx +4 -5
  129. package/src/common/circle/Circle.css +17 -0
  130. package/src/common/circle/Circle.less +22 -0
  131. package/src/common/circle/Circle.tsx +33 -2
  132. package/src/common/index.js +1 -0
  133. package/src/common/initials.ts +13 -0
  134. package/src/common/notificationDot/NotificationDot.css +10 -0
  135. package/src/common/notificationDot/NotificationDot.less +7 -0
  136. package/src/common/notificationDot/NotificationDot.tsx +10 -0
  137. package/src/display/Display.tsx +1 -1
  138. package/src/index.ts +4 -0
  139. package/src/main.css +82 -41
  140. package/src/main.less +3 -0
  141. package/src/statusIcon/StatusIcon.css +0 -12
  142. package/src/statusIcon/StatusIcon.less +6 -6
  143. package/src/statusIcon/StatusIcon.story.tsx +32 -28
  144. package/src/statusIcon/StatusIcon.tsx +18 -4
  145. package/src/test-utils/avatar-img.webp +0 -0
  146. package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +7 -5
  147. package/src/typeahead/util/highlight.tsx +7 -2
  148. package/src/uploadInput/UploadInput.spec.tsx +6 -150
  149. package/src/uploadInput/UploadInput.tsx +60 -81
  150. package/src/uploadInput/uploadItem/UploadItem.tsx +6 -12
  151. package/src/uploadInput/uploadItem/UploadItemLink.tsx +1 -9
package/src/uploadInput/uploadItem/UploadItem.tsx CHANGED
@@ -4,8 +4,9 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
4
4
  import { useIntl } from 'react-intl';
5
5
 
6
6
  import Body from '../../body';
7
- import { Size, Status, Typography } from '../../common';
7
+ import { Size, Status, Typography, Sentiment } from '../../common';
8
8
  import ProcessIndicator from '../../processIndicator/ProcessIndicator';
9
+ import StatusIcon from '../../statusIcon/StatusIcon';
9
10
  import { UploadedFile, UploadError } from '../types';
10
11
 
11
12
  import MESSAGES from './UploadItem.messages';
@@ -37,8 +38,6 @@ interface UploadItemRef {
37
38
  export enum TEST_IDS {
38
39
  uploadItem = 'uploadItem',
39
40
  mediaBody = 'mediaBody',
40
- link = 'link',
41
- action = 'action',
42
41
  }
43
42
 
44
43
  const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
@@ -47,7 +46,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
47
46
  const { status, filename, error, errors, url } = file;
48
47
  const linkRef = useRef<HTMLAnchorElement>(null);
49
48
  const buttonRef = useRef<HTMLButtonElement>(null);
50
- const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
51
49
 
52
50
  useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
53
51
  focus: (): void => {
@@ -59,6 +57,8 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
59
57
  },
60
58
  }));
61
59
 
60
+ const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
61
+
62
62
  /**
63
63
  * We're temporarily reverting to the regular icon components,
64
64
  * until the StatusIcon receives 24px sizing. Some misalignment
@@ -152,20 +152,16 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
152
152
  return (
153
153
  <div
154
154
  className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}
155
- data-testid={`${file.id}-${TEST_IDS.uploadItem}`}
155
+ data-testid={TEST_IDS.uploadItem}
156
156
  >
157
157
  <UploadItemLink
158
158
  ref={linkRef}
159
159
  url={isSucceeded ? url : undefined}
160
160
  singleFileUpload={singleFileUpload}
161
- data-testid={`${file.id}-${TEST_IDS.link}`}
162
161
  onDownload={onDownloadFile}
163
162
  >
164
163
  <span className="np-upload-input__icon">{getIcon()}</span>
165
- <div
166
- className="np-upload-input__item-content"
167
- data-testid={`${file.id}-${TEST_IDS.mediaBody}`}
168
- >
164
+ <div className="np-upload-input__item-content" data-testid={TEST_IDS.mediaBody}>
169
165
  <Body type={Typography.BODY_LARGE} className="np-upload-input__title text-word-break">
170
166
  {getTitle()}
171
167
  </Body>
@@ -179,8 +175,6 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
179
175
  aria-label={formatMessage(MESSAGES.removeFile, { filename })}
180
176
  className="np-upload-input__item-button"
181
177
  type="button"
182
- tabIndex={0}
183
- data-testid={`${file.id}-${TEST_IDS.action}`}
184
178
  onClick={() => onDelete()}
185
179
  >
186
180
  <Bin size={16} />
package/src/uploadInput/uploadItem/UploadItemLink.tsx CHANGED
@@ -10,14 +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 (
14
- <div
15
- ref={ref as React.RefObject<HTMLDivElement>}
16
- className={clsx('np-upload-input__item-container')}
17
- >
18
- {children}
19
- </div>
20
- );
13
+ return <div ref={ref as React.RefObject<HTMLDivElement>} className={clsx('np-upload-input__item-container')}>{children}</div>;
21
14
  }
22
15
 
23
16
  return (
@@ -30,7 +23,6 @@ export const UploadItemLink = forwardRef<HTMLAnchorElement | HTMLDivElement, Upl
30
23
  'np-upload-input__item-link',
31
24
  singleFileUpload ? 'np-upload-input__item-link--single-file' : '',
32
25
  )}
33
- tabIndex={0}
34
26
  onClick={onDownload}
35
27
  >
36
28
  {children}