@transferwise/components 46.49.0 → 46.50.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 (174) hide show
  1. package/build/avatar/Avatar.js +3 -1
  2. package/build/avatar/Avatar.js.map +1 -1
  3. package/build/avatar/Avatar.mjs +3 -1
  4. package/build/avatar/Avatar.mjs.map +1 -1
  5. package/build/avatarWrapper/AvatarWrapper.js +16 -4
  6. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  7. package/build/avatarWrapper/AvatarWrapper.mjs +16 -4
  8. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  9. package/build/badge/Badge.js +2 -0
  10. package/build/badge/Badge.js.map +1 -1
  11. package/build/badge/Badge.mjs +2 -0
  12. package/build/badge/Badge.mjs.map +1 -1
  13. package/build/card/Card.js.map +1 -1
  14. package/build/card/Card.mjs.map +1 -1
  15. package/build/common/bottomSheet/BottomSheet.js +3 -0
  16. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  17. package/build/common/bottomSheet/BottomSheet.mjs +4 -1
  18. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  19. package/build/common/panel/Panel.js +3 -0
  20. package/build/common/panel/Panel.js.map +1 -1
  21. package/build/common/panel/Panel.mjs +4 -1
  22. package/build/common/panel/Panel.mjs.map +1 -1
  23. package/build/dateLookup/DateLookup.js +21 -17
  24. package/build/dateLookup/DateLookup.js.map +1 -1
  25. package/build/dateLookup/DateLookup.mjs +21 -17
  26. package/build/dateLookup/DateLookup.mjs.map +1 -1
  27. package/build/dateLookup/dateTrigger/DateTrigger.js +6 -0
  28. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  29. package/build/dateLookup/dateTrigger/DateTrigger.mjs +6 -0
  30. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  31. package/build/drawer/Drawer.js +3 -0
  32. package/build/drawer/Drawer.js.map +1 -1
  33. package/build/drawer/Drawer.mjs +4 -1
  34. package/build/drawer/Drawer.mjs.map +1 -1
  35. package/build/i18n/de.json +2 -0
  36. package/build/i18n/de.json.js +2 -0
  37. package/build/i18n/de.json.js.map +1 -1
  38. package/build/i18n/de.json.mjs +2 -0
  39. package/build/i18n/de.json.mjs.map +1 -1
  40. package/build/i18n/es.json +2 -0
  41. package/build/i18n/es.json.js +2 -0
  42. package/build/i18n/es.json.js.map +1 -1
  43. package/build/i18n/es.json.mjs +2 -0
  44. package/build/i18n/es.json.mjs.map +1 -1
  45. package/build/i18n/fr.json +2 -0
  46. package/build/i18n/fr.json.js +2 -0
  47. package/build/i18n/fr.json.js.map +1 -1
  48. package/build/i18n/fr.json.mjs +2 -0
  49. package/build/i18n/fr.json.mjs.map +1 -1
  50. package/build/i18n/hu.json +2 -0
  51. package/build/i18n/hu.json.js +2 -0
  52. package/build/i18n/hu.json.js.map +1 -1
  53. package/build/i18n/hu.json.mjs +2 -0
  54. package/build/i18n/hu.json.mjs.map +1 -1
  55. package/build/i18n/id.json +2 -0
  56. package/build/i18n/id.json.js +2 -0
  57. package/build/i18n/id.json.js.map +1 -1
  58. package/build/i18n/id.json.mjs +2 -0
  59. package/build/i18n/id.json.mjs.map +1 -1
  60. package/build/i18n/it.json +2 -0
  61. package/build/i18n/it.json.js +2 -0
  62. package/build/i18n/it.json.js.map +1 -1
  63. package/build/i18n/it.json.mjs +2 -0
  64. package/build/i18n/it.json.mjs.map +1 -1
  65. package/build/i18n/ja.json +2 -0
  66. package/build/i18n/ja.json.js +2 -0
  67. package/build/i18n/ja.json.js.map +1 -1
  68. package/build/i18n/ja.json.mjs +2 -0
  69. package/build/i18n/ja.json.mjs.map +1 -1
  70. package/build/i18n/pl.json +2 -0
  71. package/build/i18n/pl.json.js +2 -0
  72. package/build/i18n/pl.json.js.map +1 -1
  73. package/build/i18n/pl.json.mjs +2 -0
  74. package/build/i18n/pl.json.mjs.map +1 -1
  75. package/build/i18n/ro.json +2 -0
  76. package/build/i18n/ro.json.js +2 -0
  77. package/build/i18n/ro.json.js.map +1 -1
  78. package/build/i18n/ro.json.mjs +2 -0
  79. package/build/i18n/ro.json.mjs.map +1 -1
  80. package/build/i18n/ru.json +2 -0
  81. package/build/i18n/ru.json.js +2 -0
  82. package/build/i18n/ru.json.js.map +1 -1
  83. package/build/i18n/ru.json.mjs +2 -0
  84. package/build/i18n/ru.json.mjs.map +1 -1
  85. package/build/i18n/th.json +2 -0
  86. package/build/i18n/th.json.js +2 -0
  87. package/build/i18n/th.json.js.map +1 -1
  88. package/build/i18n/th.json.mjs +2 -0
  89. package/build/i18n/th.json.mjs.map +1 -1
  90. package/build/i18n/tr.json +2 -0
  91. package/build/i18n/tr.json.js +2 -0
  92. package/build/i18n/tr.json.js.map +1 -1
  93. package/build/i18n/tr.json.mjs +2 -0
  94. package/build/i18n/tr.json.mjs.map +1 -1
  95. package/build/main.css +28 -20
  96. package/build/modal/Modal.js +3 -0
  97. package/build/modal/Modal.js.map +1 -1
  98. package/build/modal/Modal.mjs +4 -1
  99. package/build/modal/Modal.mjs.map +1 -1
  100. package/build/provider/overlay/OverlayIdProvider.js +20 -0
  101. package/build/provider/overlay/OverlayIdProvider.js.map +1 -0
  102. package/build/provider/overlay/OverlayIdProvider.mjs +17 -0
  103. package/build/provider/overlay/OverlayIdProvider.mjs.map +1 -0
  104. package/build/styles/main.css +28 -20
  105. package/build/styles/uploadInput/uploadButton/UploadButton.css +5 -0
  106. package/build/styles/uploadInput/uploadItem/UploadItem.css +23 -20
  107. package/build/types/avatar/Avatar.d.ts +1 -0
  108. package/build/types/avatar/Avatar.d.ts.map +1 -1
  109. package/build/types/avatarWrapper/AvatarWrapper.d.ts +2 -1
  110. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  111. package/build/types/badge/Badge.d.ts +2 -1
  112. package/build/types/badge/Badge.d.ts.map +1 -1
  113. package/build/types/card/Card.d.ts +4 -0
  114. package/build/types/card/Card.d.ts.map +1 -1
  115. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  116. package/build/types/common/panel/Panel.d.ts.map +1 -1
  117. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  118. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  119. package/build/types/drawer/Drawer.d.ts.map +1 -1
  120. package/build/types/modal/Modal.d.ts.map +1 -1
  121. package/build/types/provider/overlay/OverlayIdProvider.d.ts +7 -0
  122. package/build/types/provider/overlay/OverlayIdProvider.d.ts.map +1 -0
  123. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  124. package/build/types/uploadInput/uploadItem/{UploadItemBody.d.ts → UploadItemLink.d.ts} +2 -2
  125. package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -0
  126. package/build/uploadInput/uploadItem/UploadItem.js +14 -11
  127. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  128. package/build/uploadInput/uploadItem/UploadItem.mjs +15 -12
  129. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  130. package/build/uploadInput/uploadItem/UploadItemLink.js +32 -0
  131. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -0
  132. package/build/uploadInput/uploadItem/{UploadItemBody.mjs → UploadItemLink.mjs} +5 -4
  133. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -0
  134. package/package.json +18 -18
  135. package/src/avatar/Avatar.spec.tsx +10 -0
  136. package/src/avatar/Avatar.tsx +3 -0
  137. package/src/avatarWrapper/AvatarWrapper.spec.tsx +15 -4
  138. package/src/avatarWrapper/AvatarWrapper.story.tsx +2 -0
  139. package/src/avatarWrapper/AvatarWrapper.tsx +26 -7
  140. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +0 -64
  141. package/src/badge/Badge.spec.tsx +8 -0
  142. package/src/badge/Badge.tsx +3 -1
  143. package/src/card/Card.tsx +4 -0
  144. package/src/common/bottomSheet/BottomSheet.tsx +12 -1
  145. package/src/common/panel/Panel.tsx +5 -0
  146. package/src/dateLookup/DateLookup.tsx +22 -19
  147. package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -0
  148. package/src/dateLookup/dateTrigger/DateTrigger.tsx +7 -0
  149. package/src/drawer/Drawer.tsx +5 -1
  150. package/src/i18n/de.json +2 -0
  151. package/src/i18n/es.json +2 -0
  152. package/src/i18n/fr.json +2 -0
  153. package/src/i18n/hu.json +2 -0
  154. package/src/i18n/id.json +2 -0
  155. package/src/i18n/it.json +2 -0
  156. package/src/i18n/ja.json +2 -0
  157. package/src/i18n/pl.json +2 -0
  158. package/src/i18n/ro.json +2 -0
  159. package/src/i18n/ru.json +2 -0
  160. package/src/i18n/th.json +2 -0
  161. package/src/i18n/tr.json +2 -0
  162. package/src/main.css +28 -20
  163. package/src/modal/Modal.tsx +5 -1
  164. package/src/provider/overlay/OverlayIdProvider.tsx +15 -0
  165. package/src/uploadInput/uploadButton/UploadButton.css +5 -0
  166. package/src/uploadInput/uploadButton/UploadButton.less +6 -0
  167. package/src/uploadInput/uploadItem/UploadItem.css +23 -20
  168. package/src/uploadInput/uploadItem/UploadItem.less +16 -12
  169. package/src/uploadInput/uploadItem/UploadItem.tsx +12 -7
  170. package/src/uploadInput/uploadItem/{UploadItemBody.tsx → UploadItemLink.tsx} +6 -2
  171. package/build/types/uploadInput/uploadItem/UploadItemBody.d.ts.map +0 -1
  172. package/build/uploadInput/uploadItem/UploadItemBody.js +0 -27
  173. package/build/uploadInput/uploadItem/UploadItemBody.js.map +0 -1
  174. package/build/uploadInput/uploadItem/UploadItemBody.mjs.map +0 -1
package/src/i18n/ro.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Selectează o opțiune...",
24
24
  "neptune.Select.searchPlaceholder": "Caută...",
25
25
  "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
26
+ "neptune.SelectOption.action.label": "Alege",
27
+ "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
26
28
  "neptune.Summary.statusDone": "Finalizat",
27
29
  "neptune.Summary.statusNotDone": "De făcut",
28
30
  "neptune.Summary.statusPending": "În așteptare",
package/src/i18n/ru.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
24
24
  "neptune.Select.searchPlaceholder": "Поиск...",
25
25
  "neptune.SelectInput.noResultsFound": "Ничего не найдено",
26
+ "neptune.SelectOption.action.label": "Выбрать",
27
+ "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
26
28
  "neptune.Summary.statusDone": "Этап завершен",
27
29
  "neptune.Summary.statusNotDone": "Этап к выполнению",
28
30
  "neptune.Summary.statusPending": "Этап в процессе",
package/src/i18n/th.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "เลือกตัวเลือก...",
24
24
  "neptune.Select.searchPlaceholder": "ค้นหา...",
25
25
  "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
26
+ "neptune.SelectOption.action.label": "เลือก",
27
+ "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
26
28
  "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
27
29
  "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
28
30
  "neptune.Summary.statusPending": "รายการที่รอดำเนินการ",
package/src/i18n/tr.json CHANGED
@@ -23,6 +23,8 @@
23
23
  "neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
24
24
  "neptune.Select.searchPlaceholder": "Ara...",
25
25
  "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
26
+ "neptune.SelectOption.action.label": "Seç",
27
+ "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
26
28
  "neptune.Summary.statusDone": "Tamamlanan aşama",
27
29
  "neptune.Summary.statusNotDone": "Yapılacak",
28
30
  "neptune.Summary.statusPending": "Bekliyor",
package/src/main.css CHANGED
@@ -5472,6 +5472,11 @@ label.np-upload-button:not(.disabled):active {
5472
5472
  .np-upload-button .media {
5473
5473
  align-items: flex-start;
5474
5474
  }
5475
+ @media (max-width: 320px) {
5476
+ .np-upload-icon {
5477
+ padding-left: 0;
5478
+ }
5479
+ }
5475
5480
  .np-upload-input.form-control {
5476
5481
  height: auto;
5477
5482
  padding: 0;
@@ -5563,9 +5568,9 @@ label.np-upload-button:not(.disabled):active {
5563
5568
  border: 1px solid var(--color-interactive-secondary);
5564
5569
  position: relative;
5565
5570
  }
5566
- .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5567
- .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
5568
- .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5571
+ .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
5572
+ .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
5573
+ .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
5569
5574
  display: block;
5570
5575
  position: absolute;
5571
5576
  height: 1px;
@@ -5577,27 +5582,27 @@ label.np-upload-button:not(.disabled):active {
5577
5582
  width: calc(100% - 2 * 16px);
5578
5583
  width: calc(100% - 2 * var(--size-16));
5579
5584
  }
5580
- .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
5581
- .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
5585
+ .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
5586
+ .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
5582
5587
  top: 0;
5583
5588
  }
5584
- .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
5589
+ .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
5585
5590
  bottom: -1px;
5586
5591
  }
5587
5592
  .np-upload-item:first-child ~ div {
5588
5593
  border-top: 1px;
5589
5594
  }
5590
- .np-upload-item:not(:first-child) .np-upload-item--link:hover {
5595
+ .np-upload-item:not(:first-child) .np-upload-item__link:hover {
5591
5596
  border-top-color: rgba(0,0,0,0.10196);
5592
5597
  border-top-color: var(--color-border-neutral);
5593
5598
  }
5594
5599
  .np-upload-item:not(:last-child) {
5595
5600
  border-bottom: 0;
5596
5601
  }
5597
- .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
5598
- .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
5599
- .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
5600
- .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
5602
+ .np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
5603
+ .np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
5604
+ .np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
5605
+ .np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
5601
5606
  display: none;
5602
5607
  }
5603
5608
  .np-upload-button-container:hover:before,
@@ -5612,38 +5617,41 @@ label.np-upload-button:not(.disabled):active {
5612
5617
  outline-offset: -3px;
5613
5618
  }
5614
5619
  .np-upload-item--single-file:focus-visible,
5615
- .np-upload-item--link:focus-visible,
5620
+ .np-upload-item__link:focus-visible,
5616
5621
  .np-upload-button-container:has(:focus-visible) {
5617
5622
  outline-width: 3px;
5618
5623
  }
5619
- .np-upload-item__link a {
5624
+ .np-upload-item--link a {
5620
5625
  flex: 1;
5621
5626
  -webkit-text-decoration: none;
5622
5627
  text-decoration: none;
5623
5628
  border-top: 1px solid transparent;
5624
5629
  border-radius: inherit;
5625
5630
  }
5626
- .np-upload-item__link a:focus-visible {
5631
+ .np-upload-item--link a:focus-visible {
5627
5632
  outline-offset: -2px;
5628
5633
  }
5629
- .np-upload-item__link a:hover:before {
5634
+ .np-upload-item--link a:hover:before {
5630
5635
  display: none !important;
5631
5636
  }
5632
- .np-upload-item__link a:hover:after {
5637
+ .np-upload-item--link a:hover:after {
5633
5638
  left: 0 !important;
5634
5639
  width: 100% !important;
5635
5640
  }
5636
- .np-upload-item__link a:hover,
5637
- .np-upload-item__link a:active {
5641
+ .np-upload-item--link a:hover,
5642
+ .np-upload-item--link a:active {
5638
5643
  -webkit-text-decoration: none;
5639
5644
  text-decoration: none;
5640
5645
  }
5641
- .np-upload-item__link a:hover .np-upload-button,
5642
- .np-upload-item__link a:active .np-upload-button {
5646
+ .np-upload-item--link a:hover .np-upload-button,
5647
+ .np-upload-item--link a:active .np-upload-button {
5643
5648
  background-color: rgba(134,167,189,0.10196);
5644
5649
  background-color: var(--color-background-neutral);
5645
5650
  border-radius: inherit;
5646
5651
  }
5652
+ .np-upload-item--link:first-of-type a {
5653
+ border-top: 0;
5654
+ }
5647
5655
  .np-upload-item__body {
5648
5656
  display: flex;
5649
5657
  align-items: center;
@@ -1,5 +1,5 @@
1
1
  import classNames from 'classnames';
2
- import { ReactNode, useId, useRef } from 'react';
2
+ import { ReactNode, useContext, useId, useRef } from 'react';
3
3
  import { CSSTransition } from 'react-transition-group';
4
4
 
5
5
  import {
@@ -21,6 +21,7 @@ import { CloseButton } from '../common/closeButton';
21
21
  import { useLayout } from '../common/hooks';
22
22
  import Dimmer from '../dimmer';
23
23
  import Drawer from '../drawer';
24
+ import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
24
25
  import Title from '../title/Title';
25
26
 
26
27
  const TRANSITION_DURATION_IN_MILLISECONDS = 150;
@@ -61,6 +62,8 @@ const Modal = ({
61
62
  const contentReference = useRef<HTMLDivElement>(null);
62
63
  const titleId = useId();
63
64
 
65
+ const overlayId = useContext(OverlayIdContext);
66
+
64
67
  return !isMedium ? (
65
68
  <Drawer
66
69
  open={open}
@@ -100,6 +103,7 @@ const Modal = ({
100
103
  {...otherProps}
101
104
  >
102
105
  <div
106
+ id={overlayId}
103
107
  role="dialog"
104
108
  aria-modal
105
109
  aria-labelledby={titleId}
@@ -0,0 +1,15 @@
1
+ import { createContext, useId } from 'react';
2
+
3
+ export const OverlayIdContext = createContext<string | undefined>(undefined);
4
+
5
+ export type OverlayIdProviderProps = {
6
+ open: boolean;
7
+ children?: React.ReactNode;
8
+ };
9
+
10
+ export const OverlayIdProvider = ({ open, children }: OverlayIdProviderProps) => {
11
+ const id = useId();
12
+ return (
13
+ <OverlayIdContext.Provider value={open ? id : undefined}>{children}</OverlayIdContext.Provider>
14
+ );
15
+ };
@@ -37,3 +37,8 @@ label.np-upload-button:not(.disabled):active {
37
37
  .np-upload-button .media {
38
38
  align-items: flex-start;
39
39
  }
40
+ @media (max-width: 320px) {
41
+ .np-upload-icon {
42
+ padding-left: 0;
43
+ }
44
+ }
@@ -47,3 +47,9 @@
47
47
  align-items: flex-start;
48
48
  }
49
49
  }
50
+
51
+ .np-upload-icon{
52
+ @media (max-width: 320px) {
53
+ padding-left: 0;
54
+ }
55
+ }
@@ -3,9 +3,9 @@
3
3
  border: 1px solid var(--color-interactive-secondary);
4
4
  position: relative;
5
5
  }
6
- .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
7
- .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
8
- .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
6
+ .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
7
+ .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
8
+ .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
9
9
  display: block;
10
10
  position: absolute;
11
11
  height: 1px;
@@ -17,27 +17,27 @@
17
17
  width: calc(100% - 2 * 16px);
18
18
  width: calc(100% - 2 * var(--size-16));
19
19
  }
20
- .np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
21
- .np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
20
+ .np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
21
+ .np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
22
22
  top: 0;
23
23
  }
24
- .np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
24
+ .np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
25
25
  bottom: -1px;
26
26
  }
27
27
  .np-upload-item:first-child ~ div {
28
28
  border-top: 1px;
29
29
  }
30
- .np-upload-item:not(:first-child) .np-upload-item--link:hover {
30
+ .np-upload-item:not(:first-child) .np-upload-item__link:hover {
31
31
  border-top-color: rgba(0,0,0,0.10196);
32
32
  border-top-color: var(--color-border-neutral);
33
33
  }
34
34
  .np-upload-item:not(:last-child) {
35
35
  border-bottom: 0;
36
36
  }
37
- .np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
38
- .np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
39
- .np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
40
- .np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
37
+ .np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
38
+ .np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
39
+ .np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
40
+ .np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
41
41
  display: none;
42
42
  }
43
43
  .np-upload-button-container:hover:before,
@@ -52,38 +52,41 @@
52
52
  outline-offset: -3px;
53
53
  }
54
54
  .np-upload-item--single-file:focus-visible,
55
- .np-upload-item--link:focus-visible,
55
+ .np-upload-item__link:focus-visible,
56
56
  .np-upload-button-container:has(:focus-visible) {
57
57
  outline-width: 3px;
58
58
  }
59
- .np-upload-item__link a {
59
+ .np-upload-item--link a {
60
60
  flex: 1;
61
61
  -webkit-text-decoration: none;
62
62
  text-decoration: none;
63
63
  border-top: 1px solid transparent;
64
64
  border-radius: inherit;
65
65
  }
66
- .np-upload-item__link a:focus-visible {
66
+ .np-upload-item--link a:focus-visible {
67
67
  outline-offset: -2px;
68
68
  }
69
- .np-upload-item__link a:hover:before {
69
+ .np-upload-item--link a:hover:before {
70
70
  display: none !important;
71
71
  }
72
- .np-upload-item__link a:hover:after {
72
+ .np-upload-item--link a:hover:after {
73
73
  left: 0 !important;
74
74
  width: 100% !important;
75
75
  }
76
- .np-upload-item__link a:hover,
77
- .np-upload-item__link a:active {
76
+ .np-upload-item--link a:hover,
77
+ .np-upload-item--link a:active {
78
78
  -webkit-text-decoration: none;
79
79
  text-decoration: none;
80
80
  }
81
- .np-upload-item__link a:hover .np-upload-button,
82
- .np-upload-item__link a:active .np-upload-button {
81
+ .np-upload-item--link a:hover .np-upload-button,
82
+ .np-upload-item--link a:active .np-upload-button {
83
83
  background-color: rgba(134,167,189,0.10196);
84
84
  background-color: var(--color-background-neutral);
85
85
  border-radius: inherit;
86
86
  }
87
+ .np-upload-item--link:first-of-type a {
88
+ border-top: 0;
89
+ }
87
90
  .np-upload-item__body {
88
91
  display: flex;
89
92
  align-items: center;
@@ -5,9 +5,9 @@
5
5
  border: 1px solid var(--color-interactive-secondary);
6
6
  position: relative;
7
7
 
8
- &:first-child ~ div:not(.np-upload-item__link):before,
9
- &:not(:first-child).np-upload-item__link .np-upload-item--link:before,
10
- &.np-upload-item__link:hover .np-upload-item--link:after {
8
+ &:first-child ~ div:not(.np-upload-item--link):before,
9
+ &:not(:first-child).np-upload-item--link .np-upload-item__link:before,
10
+ &.np-upload-item--link:hover .np-upload-item__link:after {
11
11
  display: block;
12
12
  position: absolute;
13
13
  height: 1px;
@@ -17,12 +17,12 @@
17
17
  width: calc(100% - 2 * var(--size-16));
18
18
  }
19
19
 
20
- &:first-child ~ div:not(.np-upload-item__link):before,
21
- &:not(:first-child).np-upload-item__link .np-upload-item--link:before {
20
+ &:first-child ~ div:not(.np-upload-item--link):before,
21
+ &:not(:first-child).np-upload-item--link .np-upload-item__link:before {
22
22
  top: 0;
23
23
  }
24
24
 
25
- &.np-upload-item__link:hover .np-upload-item--link:after {
25
+ &.np-upload-item--link:hover .np-upload-item__link:after {
26
26
  bottom: -1px;
27
27
  }
28
28
 
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  &:not(:first-child) {
36
- .np-upload-item--link:hover {
36
+ .np-upload-item__link:hover {
37
37
  border-top-color: var(--color-border-neutral);
38
38
  }
39
39
  }
@@ -43,10 +43,10 @@
43
43
  }
44
44
 
45
45
 
46
- &.np-upload-item__link:hover + .np-upload-item,
47
- &.np-upload-item__link:hover + .np-upload-button-container {
46
+ &.np-upload-item--link:hover + .np-upload-item,
47
+ &.np-upload-item--link:hover + .np-upload-button-container {
48
48
  &:before,
49
- .np-upload-item--link:before {
49
+ .np-upload-item__link:before {
50
50
  display: none;
51
51
  }
52
52
  }
@@ -67,12 +67,12 @@
67
67
  }
68
68
 
69
69
  .np-upload-item--single-file:focus-visible,
70
- .np-upload-item--link:focus-visible,
70
+ .np-upload-item__link:focus-visible,
71
71
  .np-upload-button-container:has(:focus-visible) {
72
72
  outline-width: 3px;
73
73
  }
74
74
 
75
- .np-upload-item__link {
75
+ .np-upload-item--link {
76
76
  a {
77
77
  flex: 1;
78
78
  text-decoration: none;
@@ -103,6 +103,10 @@
103
103
  }
104
104
  }
105
105
  }
106
+
107
+ &:first-of-type a {
108
+ border-top: 0;
109
+ }
106
110
  }
107
111
 
108
112
  .np-upload-item__body {
@@ -1,4 +1,4 @@
1
- import { Bin } from '@transferwise/icons';
1
+ import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
2
2
  import classNames from 'classnames';
3
3
  import { useIntl } from 'react-intl';
4
4
 
@@ -9,7 +9,7 @@ import StatusIcon from '../../statusIcon/StatusIcon';
9
9
  import { UploadedFile, UploadError } from '../types';
10
10
 
11
11
  import MESSAGES from './UploadItem.messages';
12
- import { UploadItemBody } from './UploadItemBody';
12
+ import { UploadItemLink } from './UploadItemLink';
13
13
 
14
14
  export type UploadItemProps = JSX.IntrinsicAttributes & {
15
15
  file: UploadedFile;
@@ -46,9 +46,14 @@ const UploadItem = ({
46
46
 
47
47
  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;
48
48
 
49
+ /**
50
+ * We're temporarily reverting to the regular icon components,
51
+ * until the StatusIcon receives 24px sizing. Some misalignment
52
+ * to be expected.
53
+ */
49
54
  const getIcon = () => {
50
55
  if (error || errors?.length || status === Status.FAILED) {
51
- return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;
56
+ return <CrossCircleFill size={24} className="emphasis--negative" />;
52
57
  }
53
58
 
54
59
  let processIndicator: React.ReactNode;
@@ -61,7 +66,7 @@ const UploadItem = ({
61
66
  case Status.SUCCEEDED:
62
67
  case Status.DONE:
63
68
  default:
64
- processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;
69
+ processIndicator = <CheckCircleFill size={24} className="emphasis--positive" />;
65
70
  }
66
71
 
67
72
  return processIndicator;
@@ -127,11 +132,11 @@ const UploadItem = ({
127
132
 
128
133
  return (
129
134
  <div
130
- className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}
135
+ className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}
131
136
  data-testid={TEST_IDS.uploadItem}
132
137
  >
133
138
  <div className="np-upload-item__body">
134
- <UploadItemBody
139
+ <UploadItemLink
135
140
  url={isSucceeded ? url : undefined}
136
141
  singleFileUpload={singleFileUpload}
137
142
  onDownload={onDownloadFile}
@@ -145,7 +150,7 @@ const UploadItem = ({
145
150
  </div>
146
151
  </div>
147
152
  </div>
148
- </UploadItemBody>
153
+ </UploadItemLink>
149
154
  {canDelete && (
150
155
  <button
151
156
  aria-label={formatMessage(MESSAGES.removeFile, { filename })}
@@ -1,4 +1,5 @@
1
1
  import { PropsWithChildren, MouseEvent } from 'react';
2
+ import classnames from 'classnames';
2
3
 
3
4
  type UploadItemLinkProps = PropsWithChildren<{
4
5
  url?: string;
@@ -6,7 +7,7 @@ type UploadItemLinkProps = PropsWithChildren<{
6
7
  singleFileUpload: boolean;
7
8
  }>;
8
9
 
9
- export const UploadItemBody = ({
10
+ export const UploadItemLink = ({
10
11
  children,
11
12
  url,
12
13
  onDownload,
@@ -21,7 +22,10 @@ export const UploadItemBody = ({
21
22
  href={url}
22
23
  target="_blank"
23
24
  rel="noopener noreferrer"
24
- className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}
25
+ className={classnames(
26
+ 'np-upload-item__link',
27
+ singleFileUpload ? 'np-upload-item--single-file' : '',
28
+ )}
25
29
  onClick={onDownload}
26
30
  >
27
31
  {children}
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemBody.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,qDAKxB,mBAAmB,gCAgBrB,CAAC"}
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
-
5
- const UploadItemBody = ({
6
- children,
7
- url,
8
- onDownload,
9
- singleFileUpload
10
- }) => {
11
- if (!url) {
12
- return /*#__PURE__*/jsxRuntime.jsx("div", {
13
- children: children
14
- });
15
- }
16
- return /*#__PURE__*/jsxRuntime.jsx("a", {
17
- href: url,
18
- target: "_blank",
19
- rel: "noopener noreferrer",
20
- className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
21
- onClick: onDownload,
22
- children: children
23
- });
24
- };
25
-
26
- exports.UploadItemBody = UploadItemBody;
27
- //# sourceMappingURL=UploadItemBody.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemBody.js","sources":["../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemBody = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemBody","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","onClick"],"mappings":";;;;AAQO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBC,IAAAA,SAAS,EAAEL,gBAAgB,GAAG,6BAA6B,GAAG,sBAAuB;AACrFM,IAAAA,OAAO,EAAEP,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"UploadItemBody.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemBody.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemBody = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link'}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemBody","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","onClick"],"mappings":";;AAQO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;AACzBC,IAAAA,SAAS,EAAEL,gBAAgB,GAAG,6BAA6B,GAAG,sBAAuB;AACrFM,IAAAA,OAAO,EAAEP,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}