@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

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 (663) hide show
  1. package/build/accordion/Accordion.js +4 -2
  2. package/build/accordion/Accordion.js.map +1 -1
  3. package/build/accordion/AccordionItem/AccordionItem.js +6 -4
  4. package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
  5. package/build/actionButton/ActionButton.js +3 -1
  6. package/build/actionButton/ActionButton.js.map +1 -1
  7. package/build/actionOption/ActionOption.js +5 -3
  8. package/build/actionOption/ActionOption.js.map +1 -1
  9. package/build/alert/Alert.js +4 -4
  10. package/build/alert/Alert.js.map +1 -1
  11. package/build/alert/inlineMarkdown/InlineMarkdown.js +4 -2
  12. package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
  13. package/build/avatar/Avatar.js +3 -1
  14. package/build/avatar/Avatar.js.map +1 -1
  15. package/build/avatarLayout/AvatarLayout.js +5 -3
  16. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  17. package/build/avatarView/AvatarView.js +9 -7
  18. package/build/avatarView/AvatarView.js.map +1 -1
  19. package/build/avatarView/NotificationDot.js +3 -1
  20. package/build/avatarView/NotificationDot.js.map +1 -1
  21. package/build/avatarWrapper/AvatarWrapper.js +8 -6
  22. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  23. package/build/avatarWrapper/AvatarWrapper.mjs +1 -1
  24. package/build/avatarWrapper/index.js +3 -1
  25. package/build/avatarWrapper/index.js.map +1 -1
  26. package/build/badge/Badge.js +3 -1
  27. package/build/badge/Badge.js.map +1 -1
  28. package/build/badge/Badge.mjs.map +1 -1
  29. package/build/badge/BadgeAssets.js +9 -7
  30. package/build/badge/BadgeAssets.js.map +1 -1
  31. package/build/badge/BadgeAssets.mjs +2 -2
  32. package/build/badge/BadgeAssets.mjs.map +1 -1
  33. package/build/body/Body.js +3 -1
  34. package/build/body/Body.js.map +1 -1
  35. package/build/button/Button.js +8 -6
  36. package/build/button/Button.js.map +1 -1
  37. package/build/button/Button.resolver.js +5 -3
  38. package/build/button/Button.resolver.js.map +1 -1
  39. package/build/button/LegacyButton.js +5 -5
  40. package/build/button/LegacyButton.js.map +1 -1
  41. package/build/button/LegacyButton.mjs +0 -2
  42. package/build/button/LegacyButton.mjs.map +1 -1
  43. package/build/card/Card.js +6 -4
  44. package/build/card/Card.js.map +1 -1
  45. package/build/carousel/Carousel.js +8 -8
  46. package/build/carousel/Carousel.js.map +1 -1
  47. package/build/carousel/Carousel.mjs +1 -3
  48. package/build/carousel/Carousel.mjs.map +1 -1
  49. package/build/checkbox/Checkbox.js +6 -4
  50. package/build/checkbox/Checkbox.js.map +1 -1
  51. package/build/checkbox/Checkbox.mjs.map +1 -1
  52. package/build/checkboxButton/CheckboxButton.js +4 -2
  53. package/build/checkboxButton/CheckboxButton.js.map +1 -1
  54. package/build/checkboxButton/CheckboxButton.mjs +1 -1
  55. package/build/checkboxButton/CheckboxButton.mjs.map +1 -1
  56. package/build/checkboxOption/CheckboxOption.js +5 -3
  57. package/build/checkboxOption/CheckboxOption.js.map +1 -1
  58. package/build/checkboxOption/CheckboxOption.mjs.map +1 -1
  59. package/build/chevron/Chevron.js +3 -1
  60. package/build/chevron/Chevron.js.map +1 -1
  61. package/build/chips/Chip.js +4 -2
  62. package/build/chips/Chip.js.map +1 -1
  63. package/build/chips/Chips.js +5 -3
  64. package/build/chips/Chips.js.map +1 -1
  65. package/build/chips/Chips.messages.js +3 -1
  66. package/build/chips/Chips.messages.js.map +1 -1
  67. package/build/circularButton/CircularButton.js +5 -3
  68. package/build/circularButton/CircularButton.js.map +1 -1
  69. package/build/common/Option/Option.js +7 -5
  70. package/build/common/Option/Option.js.map +1 -1
  71. package/build/common/Option/Option.mjs +2 -2
  72. package/build/common/Option/Option.mjs.map +1 -1
  73. package/build/common/RadioButton/RadioButton.js +3 -1
  74. package/build/common/RadioButton/RadioButton.js.map +1 -1
  75. package/build/common/action/Action.js +2 -2
  76. package/build/common/action/Action.js.map +1 -1
  77. package/build/common/bottomSheet/BottomSheet.js +4 -2
  78. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  79. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  80. package/build/common/card/Card.js +3 -1
  81. package/build/common/card/Card.js.map +1 -1
  82. package/build/common/circle/Circle.js +3 -1
  83. package/build/common/circle/Circle.js.map +1 -1
  84. package/build/common/closeButton/CloseButton.js +1 -1
  85. package/build/common/closeButton/CloseButton.js.map +1 -1
  86. package/build/common/closeButton/CloseButton.messages.js +3 -1
  87. package/build/common/closeButton/CloseButton.messages.js.map +1 -1
  88. package/build/common/dateUtils/isDateValid/isDateValid.js +3 -3
  89. package/build/common/dateUtils/isDateValid/isDateValid.js.map +1 -1
  90. package/build/common/dateUtils/isDateValid/isDateValid.mjs +3 -3
  91. package/build/common/dateUtils/isDateValid/isDateValid.mjs.map +1 -1
  92. package/build/common/flowHeader/FlowHeader.js +3 -1
  93. package/build/common/flowHeader/FlowHeader.js.map +1 -1
  94. package/build/common/focusBoundary/FocusBoundary.js +3 -1
  95. package/build/common/focusBoundary/FocusBoundary.js.map +1 -1
  96. package/build/common/historyNavigator/historyNavigator.js +3 -1
  97. package/build/common/historyNavigator/historyNavigator.js.map +1 -1
  98. package/build/common/locale/index.js +0 -24
  99. package/build/common/locale/index.js.map +1 -1
  100. package/build/common/locale/index.mjs +0 -24
  101. package/build/common/locale/index.mjs.map +1 -1
  102. package/build/common/panel/Panel.js +6 -9
  103. package/build/common/panel/Panel.js.map +1 -1
  104. package/build/common/panel/Panel.mjs +3 -8
  105. package/build/common/panel/Panel.mjs.map +1 -1
  106. package/build/common/responsivePanel/ResponsivePanel.js +5 -3
  107. package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
  108. package/build/common/textFormat/formatWithPattern/formatWithPattern.js +4 -2
  109. package/build/common/textFormat/formatWithPattern/formatWithPattern.js.map +1 -1
  110. package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js +4 -2
  111. package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js.map +1 -1
  112. package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js +4 -2
  113. package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js.map +1 -1
  114. package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js +2 -2
  115. package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js.map +1 -1
  116. package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js +3 -1
  117. package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js.map +1 -1
  118. package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js +3 -1
  119. package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js.map +1 -1
  120. package/build/criticalBanner/CriticalCommsBanner.js +3 -1
  121. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  122. package/build/dateInput/DateInput.js +15 -13
  123. package/build/dateInput/DateInput.js.map +1 -1
  124. package/build/dateInput/DateInput.messages.js +3 -1
  125. package/build/dateInput/DateInput.messages.js.map +1 -1
  126. package/build/dateInput/DateInput.mjs +3 -3
  127. package/build/dateInput/DateInput.mjs.map +1 -1
  128. package/build/dateLookup/DateLookup.js +8 -6
  129. package/build/dateLookup/DateLookup.js.map +1 -1
  130. package/build/dateLookup/DateLookup.messages.js +3 -1
  131. package/build/dateLookup/DateLookup.messages.js.map +1 -1
  132. package/build/dateLookup/dateHeader/DateHeader.js +33 -26
  133. package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
  134. package/build/dateLookup/dateHeader/DateHeader.mjs +27 -22
  135. package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
  136. package/build/dateLookup/dateTrigger/DateTrigger.js +8 -6
  137. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  138. package/build/dateLookup/dateTrigger/DateTrigger.messages.js +4 -2
  139. package/build/dateLookup/dateTrigger/DateTrigger.messages.js.map +1 -1
  140. package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs +2 -2
  141. package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs.map +1 -1
  142. package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -2
  143. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  144. package/build/dateLookup/dayCalendar/DayCalendar.js +6 -4
  145. package/build/dateLookup/dayCalendar/DayCalendar.js.map +1 -1
  146. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +4 -2
  147. package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
  148. package/build/dateLookup/monthCalendar/MonthCalendar.js +6 -4
  149. package/build/dateLookup/monthCalendar/MonthCalendar.js.map +1 -1
  150. package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js +4 -2
  151. package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +1 -1
  152. package/build/dateLookup/tableLink/TableLink.js +4 -2
  153. package/build/dateLookup/tableLink/TableLink.js.map +1 -1
  154. package/build/dateLookup/yearCalendar/YearCalendar.js +6 -4
  155. package/build/dateLookup/yearCalendar/YearCalendar.js.map +1 -1
  156. package/build/dateLookup/yearCalendar/table/YearCalendarTable.js +4 -2
  157. package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +1 -1
  158. package/build/decision/Decision.js +2 -2
  159. package/build/decision/Decision.js.map +1 -1
  160. package/build/definitionList/DefinitionList.js +4 -2
  161. package/build/definitionList/DefinitionList.js.map +1 -1
  162. package/build/dimmer/Dimmer.js +3 -3
  163. package/build/dimmer/Dimmer.js.map +1 -1
  164. package/build/dimmer/dimmerManager/DimmerManager.js +3 -1
  165. package/build/dimmer/dimmerManager/DimmerManager.js.map +1 -1
  166. package/build/dimmer/dimmerManager/DimmerManager.mjs.map +1 -1
  167. package/build/display/Display.js +3 -1
  168. package/build/display/Display.js.map +1 -1
  169. package/build/divider/Divider.js +35 -0
  170. package/build/divider/Divider.js.map +1 -0
  171. package/build/divider/Divider.mjs +31 -0
  172. package/build/divider/Divider.mjs.map +1 -0
  173. package/build/drawer/Drawer.js +4 -2
  174. package/build/drawer/Drawer.js.map +1 -1
  175. package/build/dropFade/DropFade.js +3 -1
  176. package/build/dropFade/DropFade.js.map +1 -1
  177. package/build/dropFade/DropFade.mjs.map +1 -1
  178. package/build/emphasis/Emphasis.js +4 -2
  179. package/build/emphasis/Emphasis.js.map +1 -1
  180. package/build/emphasis/EmphasisHtmlTransformer.js +3 -1
  181. package/build/emphasis/EmphasisHtmlTransformer.js.map +1 -1
  182. package/build/emphasis/EmphasisHtmlTransformer.mjs.map +1 -1
  183. package/build/field/Field.js +1 -1
  184. package/build/field/Field.js.map +1 -1
  185. package/build/flowNavigation/FlowNavigation.js +8 -6
  186. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  187. package/build/flowNavigation/FlowNavigation.messages.js +3 -1
  188. package/build/flowNavigation/FlowNavigation.messages.js.map +1 -1
  189. package/build/flowNavigation/animatedLabel/AnimatedLabel.js +5 -3
  190. package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
  191. package/build/header/Header.js +83 -42
  192. package/build/header/Header.js.map +1 -1
  193. package/build/header/Header.mjs +76 -38
  194. package/build/header/Header.mjs.map +1 -1
  195. package/build/i18n/commonMessages/Button.messages.js +3 -1
  196. package/build/i18n/commonMessages/Button.messages.js.map +1 -1
  197. package/build/i18n/cs.json +22 -5
  198. package/build/i18n/cs.json.js +25 -6
  199. package/build/i18n/cs.json.js.map +1 -1
  200. package/build/i18n/cs.json.mjs +22 -5
  201. package/build/i18n/cs.json.mjs.map +1 -1
  202. package/build/i18n/de.json.js +3 -1
  203. package/build/i18n/de.json.js.map +1 -1
  204. package/build/i18n/en.json.js +3 -1
  205. package/build/i18n/en.json.js.map +1 -1
  206. package/build/i18n/es.json.js +3 -1
  207. package/build/i18n/es.json.js.map +1 -1
  208. package/build/i18n/fr.json.js +3 -1
  209. package/build/i18n/fr.json.js.map +1 -1
  210. package/build/i18n/hu.json.js +3 -1
  211. package/build/i18n/hu.json.js.map +1 -1
  212. package/build/i18n/id.json.js +3 -1
  213. package/build/i18n/id.json.js.map +1 -1
  214. package/build/i18n/index.js +22 -20
  215. package/build/i18n/index.js.map +1 -1
  216. package/build/i18n/it.json.js +3 -1
  217. package/build/i18n/it.json.js.map +1 -1
  218. package/build/i18n/ja.json.js +3 -1
  219. package/build/i18n/ja.json.js.map +1 -1
  220. package/build/i18n/nl.json +73 -0
  221. package/build/i18n/pl.json.js +3 -1
  222. package/build/i18n/pl.json.js.map +1 -1
  223. package/build/i18n/pt.json.js +3 -1
  224. package/build/i18n/pt.json.js.map +1 -1
  225. package/build/i18n/ro.json.js +3 -1
  226. package/build/i18n/ro.json.js.map +1 -1
  227. package/build/i18n/ru.json.js +3 -1
  228. package/build/i18n/ru.json.js.map +1 -1
  229. package/build/i18n/th.json.js +3 -1
  230. package/build/i18n/th.json.js.map +1 -1
  231. package/build/i18n/tr.json.js +3 -1
  232. package/build/i18n/tr.json.js.map +1 -1
  233. package/build/i18n/uk.json.js +3 -1
  234. package/build/i18n/uk.json.js.map +1 -1
  235. package/build/i18n/zh-CN.json.js +3 -1
  236. package/build/i18n/zh-CN.json.js.map +1 -1
  237. package/build/i18n/zh-HK.json.js +3 -1
  238. package/build/i18n/zh-HK.json.js.map +1 -1
  239. package/build/iconButton/IconButton.js +5 -3
  240. package/build/iconButton/IconButton.js.map +1 -1
  241. package/build/index.js +85 -84
  242. package/build/index.js.map +1 -1
  243. package/build/index.mjs +5 -4
  244. package/build/index.mjs.map +1 -1
  245. package/build/info/Info.js +13 -17
  246. package/build/info/Info.js.map +1 -1
  247. package/build/info/Info.messages.js +3 -1
  248. package/build/info/Info.messages.js.map +1 -1
  249. package/build/info/Info.mjs +7 -13
  250. package/build/info/Info.mjs.map +1 -1
  251. package/build/inlineAlert/InlineAlert.js +5 -3
  252. package/build/inlineAlert/InlineAlert.js.map +1 -1
  253. package/build/inputWithDisplayFormat/InputWithDisplayFormat.js +4 -2
  254. package/build/inputWithDisplayFormat/InputWithDisplayFormat.js.map +1 -1
  255. package/build/inputs/Input.js +1 -3
  256. package/build/inputs/Input.js.map +1 -1
  257. package/build/inputs/Input.mjs +1 -3
  258. package/build/inputs/Input.mjs.map +1 -1
  259. package/build/inputs/SelectInput.js +5 -7
  260. package/build/inputs/SelectInput.js.map +1 -1
  261. package/build/inputs/SelectInput.messages.js +3 -1
  262. package/build/inputs/SelectInput.messages.js.map +1 -1
  263. package/build/inputs/SelectInput.mjs +4 -6
  264. package/build/inputs/SelectInput.mjs.map +1 -1
  265. package/build/inputs/_ButtonInput.js +1 -3
  266. package/build/inputs/_ButtonInput.js.map +1 -1
  267. package/build/inputs/_ButtonInput.mjs +1 -3
  268. package/build/inputs/_ButtonInput.mjs.map +1 -1
  269. package/build/inputs/_Popover.js +1 -3
  270. package/build/inputs/_Popover.js.map +1 -1
  271. package/build/inputs/_Popover.mjs +1 -3
  272. package/build/inputs/_Popover.mjs.map +1 -1
  273. package/build/instructionsList/InstructionsList.js +4 -2
  274. package/build/instructionsList/InstructionsList.js.map +1 -1
  275. package/build/label/Label.js +3 -3
  276. package/build/label/Label.js.map +1 -1
  277. package/build/label/Label.messages.js +3 -1
  278. package/build/label/Label.messages.js.map +1 -1
  279. package/build/link/Link.js +5 -3
  280. package/build/link/Link.js.map +1 -1
  281. package/build/link/Link.messages.js +3 -1
  282. package/build/link/Link.messages.js.map +1 -1
  283. package/build/listItem/ListItem.js +6 -4
  284. package/build/listItem/ListItem.js.map +1 -1
  285. package/build/listItem/ListItem.mjs +1 -1
  286. package/build/listItem/ListItem.mjs.map +1 -1
  287. package/build/loader/Loader.js +3 -1
  288. package/build/loader/Loader.js.map +1 -1
  289. package/build/main.css +55 -102
  290. package/build/markdown/Markdown.js +3 -1
  291. package/build/markdown/Markdown.js.map +1 -1
  292. package/build/modal/Modal.js +5 -3
  293. package/build/modal/Modal.js.map +1 -1
  294. package/build/money/Money.js +3 -1
  295. package/build/money/Money.js.map +1 -1
  296. package/build/moneyInput/MoneyInput.js +7 -5
  297. package/build/moneyInput/MoneyInput.js.map +1 -1
  298. package/build/moneyInput/MoneyInput.messages.js +3 -1
  299. package/build/moneyInput/MoneyInput.messages.js.map +1 -1
  300. package/build/moneyInput/currencyFormatting.js +2 -2
  301. package/build/moneyInput/currencyFormatting.js.map +1 -1
  302. package/build/moneyInput/currencyFormatting.mjs +2 -2
  303. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  304. package/build/navigationOption/NavigationOption.js +5 -3
  305. package/build/navigationOption/NavigationOption.js.map +1 -1
  306. package/build/navigationOptionsList/NavigationOptionsList.js +3 -1
  307. package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
  308. package/build/nudge/Nudge.js +2 -4
  309. package/build/nudge/Nudge.js.map +1 -1
  310. package/build/nudge/Nudge.mjs +0 -2
  311. package/build/nudge/Nudge.mjs.map +1 -1
  312. package/build/overlayHeader/OverlayHeader.js +4 -2
  313. package/build/overlayHeader/OverlayHeader.js.map +1 -1
  314. package/build/phoneNumberInput/PhoneNumberInput.js +5 -3
  315. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  316. package/build/phoneNumberInput/PhoneNumberInput.messages.js +3 -1
  317. package/build/phoneNumberInput/PhoneNumberInput.messages.js.map +1 -1
  318. package/build/phoneNumberInput/data/countries.js +3 -1
  319. package/build/phoneNumberInput/data/countries.js.map +1 -1
  320. package/build/phoneNumberInput/utils/findCountryByCode/index.js +1 -1
  321. package/build/phoneNumberInput/utils/findCountryByCode/index.js.map +1 -1
  322. package/build/phoneNumberInput/utils/findCountryByPrefix/index.js +1 -1
  323. package/build/phoneNumberInput/utils/findCountryByPrefix/index.js.map +1 -1
  324. package/build/popover/Popover.js +5 -3
  325. package/build/popover/Popover.js.map +1 -1
  326. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js +3 -1
  327. package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -1
  328. package/build/primitives/PrimitiveButton/PrimitiveButton.js +4 -2
  329. package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -1
  330. package/build/processIndicator/ProcessIndicator.js +3 -1
  331. package/build/processIndicator/ProcessIndicator.js.map +1 -1
  332. package/build/progress/Progress.js +3 -1
  333. package/build/progress/Progress.js.map +1 -1
  334. package/build/progressBar/ProgressBar.js +7 -5
  335. package/build/progressBar/ProgressBar.js.map +1 -1
  336. package/build/promoCard/PromoCard.js +8 -6
  337. package/build/promoCard/PromoCard.js.map +1 -1
  338. package/build/promoCard/PromoCardContext.js +0 -1
  339. package/build/promoCard/PromoCardContext.js.map +1 -1
  340. package/build/promoCard/PromoCardContext.mjs +0 -1
  341. package/build/promoCard/PromoCardContext.mjs.map +1 -1
  342. package/build/promoCard/PromoCardGroup.js +3 -2
  343. package/build/promoCard/PromoCardGroup.js.map +1 -1
  344. package/build/promoCard/PromoCardGroup.mjs +0 -1
  345. package/build/promoCard/PromoCardGroup.mjs.map +1 -1
  346. package/build/promoCard/PromoCardIndicator.js +5 -3
  347. package/build/promoCard/PromoCardIndicator.js.map +1 -1
  348. package/build/provider/Provider.js +4 -2
  349. package/build/provider/Provider.js.map +1 -1
  350. package/build/radio/Radio.js +6 -4
  351. package/build/radio/Radio.js.map +1 -1
  352. package/build/radioGroup/RadioGroup.js +4 -2
  353. package/build/radioGroup/RadioGroup.js.map +1 -1
  354. package/build/radioOption/RadioOption.js +5 -3
  355. package/build/radioOption/RadioOption.js.map +1 -1
  356. package/build/section/Section.js +3 -1
  357. package/build/section/Section.js.map +1 -1
  358. package/build/segmentedControl/SegmentedControl.js +5 -3
  359. package/build/segmentedControl/SegmentedControl.js.map +1 -1
  360. package/build/select/Select.js +31 -35
  361. package/build/select/Select.js.map +1 -1
  362. package/build/select/Select.messages.js +3 -1
  363. package/build/select/Select.messages.js.map +1 -1
  364. package/build/select/Select.mjs +19 -25
  365. package/build/select/Select.mjs.map +1 -1
  366. package/build/select/option/Option.js +9 -5
  367. package/build/select/option/Option.js.map +1 -1
  368. package/build/select/option/Option.mjs +3 -1
  369. package/build/select/option/Option.mjs.map +1 -1
  370. package/build/select/option/index.js +3 -1
  371. package/build/select/option/index.js.map +1 -1
  372. package/build/select/searchBox/SearchBox.js +3 -1
  373. package/build/select/searchBox/SearchBox.js.map +1 -1
  374. package/build/selectOption/SelectOption.js +11 -9
  375. package/build/selectOption/SelectOption.js.map +1 -1
  376. package/build/selectOption/SelectOption.messages.js +3 -1
  377. package/build/selectOption/SelectOption.messages.js.map +1 -1
  378. package/build/selectOption/SelectOption.mjs +1 -1
  379. package/build/snackbar/Snackbar.js +3 -3
  380. package/build/snackbar/Snackbar.js.map +1 -1
  381. package/build/snackbar/SnackbarProvider.js +3 -1
  382. package/build/snackbar/SnackbarProvider.js.map +1 -1
  383. package/build/snackbar/useSnackbar.js +3 -1
  384. package/build/snackbar/useSnackbar.js.map +1 -1
  385. package/build/statusIcon/StatusIcon.js +12 -10
  386. package/build/statusIcon/StatusIcon.js.map +1 -1
  387. package/build/statusIcon/StatusIcon.messages.js +3 -1
  388. package/build/statusIcon/StatusIcon.messages.js.map +1 -1
  389. package/build/stepper/Stepper.js +4 -2
  390. package/build/stepper/Stepper.js.map +1 -1
  391. package/build/sticky/Sticky.js +3 -1
  392. package/build/sticky/Sticky.js.map +1 -1
  393. package/build/styles/button/Button.css +2 -2
  394. package/build/styles/common/Option/Option.css +1 -1
  395. package/build/styles/dateLookup/DateLookup.css +0 -5
  396. package/build/styles/divider/Divider.css +24 -0
  397. package/build/styles/header/Header.css +28 -11
  398. package/build/styles/info/Info.css +0 -23
  399. package/build/styles/main.css +55 -102
  400. package/build/summary/Summary.js +11 -9
  401. package/build/summary/Summary.js.map +1 -1
  402. package/build/summary/Summary.messages.js +3 -1
  403. package/build/summary/Summary.messages.js.map +1 -1
  404. package/build/summary/Summary.mjs +2 -2
  405. package/build/summary/Summary.mjs.map +1 -1
  406. package/build/switch/Switch.js +3 -1
  407. package/build/switch/Switch.js.map +1 -1
  408. package/build/switchOption/SwitchOption.js +5 -3
  409. package/build/switchOption/SwitchOption.js.map +1 -1
  410. package/build/table/Table.js +17 -17
  411. package/build/table/Table.js.map +1 -1
  412. package/build/table/Table.messages.js +3 -1
  413. package/build/table/Table.messages.js.map +1 -1
  414. package/build/table/Table.mjs +1 -3
  415. package/build/table/Table.mjs.map +1 -1
  416. package/build/table/TableCell.js +9 -7
  417. package/build/table/TableCell.js.map +1 -1
  418. package/build/table/TableHeader.js +6 -4
  419. package/build/table/TableHeader.js.map +1 -1
  420. package/build/table/TableRow.js +6 -4
  421. package/build/table/TableRow.js.map +1 -1
  422. package/build/table/TableStatusText.js +4 -2
  423. package/build/table/TableStatusText.js.map +1 -1
  424. package/build/tabs/Tab.js +3 -1
  425. package/build/tabs/Tab.js.map +1 -1
  426. package/build/tabs/TabList.js +3 -1
  427. package/build/tabs/TabList.js.map +1 -1
  428. package/build/tabs/TabPanel.js +3 -1
  429. package/build/tabs/TabPanel.js.map +1 -1
  430. package/build/tabs/Tabs.js +6 -4
  431. package/build/tabs/Tabs.js.map +1 -1
  432. package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js +4 -2
  433. package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js.map +1 -1
  434. package/build/tile/Tile.js +5 -3
  435. package/build/tile/Tile.js.map +1 -1
  436. package/build/title/Title.js +9 -5
  437. package/build/title/Title.js.map +1 -1
  438. package/build/title/Title.mjs +6 -4
  439. package/build/title/Title.mjs.map +1 -1
  440. package/build/tooltip/Tooltip.js +5 -7
  441. package/build/tooltip/Tooltip.js.map +1 -1
  442. package/build/tooltip/Tooltip.mjs +2 -6
  443. package/build/tooltip/Tooltip.mjs.map +1 -1
  444. package/build/typeahead/Typeahead.js +8 -6
  445. package/build/typeahead/Typeahead.js.map +1 -1
  446. package/build/typeahead/Typeahead.messages.js +3 -1
  447. package/build/typeahead/Typeahead.messages.js.map +1 -1
  448. package/build/typeahead/typeaheadInput/TypeaheadInput.js +3 -1
  449. package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
  450. package/build/typeahead/typeaheadOption/TypeaheadOption.js +5 -3
  451. package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
  452. package/build/typeahead/util/highlight.js +3 -1
  453. package/build/typeahead/util/highlight.js.map +1 -1
  454. package/build/types/badge/Badge.d.ts +1 -1
  455. package/build/types/badge/Badge.d.ts.map +1 -1
  456. package/build/types/badge/BadgeAssets.d.ts.map +1 -1
  457. package/build/types/button/LegacyButton.d.ts.map +1 -1
  458. package/build/types/carousel/Carousel.d.ts.map +1 -1
  459. package/build/types/checkbox/Checkbox.d.ts.map +1 -1
  460. package/build/types/checkboxOption/CheckboxOption.d.ts +1 -2
  461. package/build/types/checkboxOption/CheckboxOption.d.ts.map +1 -1
  462. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  463. package/build/types/common/dateUtils/isDateValid/isDateValid.d.ts.map +1 -1
  464. package/build/types/common/locale/index.d.ts +1 -1
  465. package/build/types/common/locale/index.d.ts.map +1 -1
  466. package/build/types/common/panel/Panel.d.ts.map +1 -1
  467. package/build/types/dateInput/DateInput.d.ts +1 -1
  468. package/build/types/dateInput/DateInput.d.ts.map +1 -1
  469. package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map +1 -1
  470. package/build/types/dimmer/dimmerManager/DimmerManager.d.ts +1 -1
  471. package/build/types/dimmer/dimmerManager/DimmerManager.d.ts.map +1 -1
  472. package/build/types/divider/Divider.d.ts +29 -0
  473. package/build/types/divider/Divider.d.ts.map +1 -0
  474. package/build/types/divider/index.d.ts +3 -0
  475. package/build/types/divider/index.d.ts.map +1 -0
  476. package/build/types/dropFade/DropFade.d.ts.map +1 -1
  477. package/build/types/emphasis/EmphasisHtmlTransformer.d.ts +2 -2
  478. package/build/types/emphasis/EmphasisHtmlTransformer.d.ts.map +1 -1
  479. package/build/types/header/Header.d.ts +28 -11
  480. package/build/types/header/Header.d.ts.map +1 -1
  481. package/build/types/header/index.d.ts +1 -0
  482. package/build/types/header/index.d.ts.map +1 -1
  483. package/build/types/index.d.ts +3 -2
  484. package/build/types/index.d.ts.map +1 -1
  485. package/build/types/info/Info.d.ts.map +1 -1
  486. package/build/types/inputs/Input.d.ts.map +1 -1
  487. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  488. package/build/types/inputs/_ButtonInput.d.ts.map +1 -1
  489. package/build/types/inputs/_Popover.d.ts.map +1 -1
  490. package/build/types/nudge/Nudge.d.ts.map +1 -1
  491. package/build/types/promoCard/PromoCardContext.d.ts.map +1 -1
  492. package/build/types/promoCard/PromoCardGroup.d.ts.map +1 -1
  493. package/build/types/select/Select.d.ts.map +1 -1
  494. package/build/types/select/option/Option.d.ts +2 -1
  495. package/build/types/select/option/Option.d.ts.map +1 -1
  496. package/build/types/table/Table.d.ts.map +1 -1
  497. package/build/types/title/Title.d.ts +3 -4
  498. package/build/types/title/Title.d.ts.map +1 -1
  499. package/build/types/tooltip/Tooltip.d.ts.map +1 -1
  500. package/build/types/upload/Upload.d.ts.map +1 -1
  501. package/build/upload/Upload.js +20 -18
  502. package/build/upload/Upload.js.map +1 -1
  503. package/build/upload/Upload.messages.js +3 -1
  504. package/build/upload/Upload.messages.js.map +1 -1
  505. package/build/upload/Upload.mjs +3 -1
  506. package/build/upload/Upload.mjs.map +1 -1
  507. package/build/upload/steps/completeStep/completeStep.js +30 -6
  508. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  509. package/build/upload/steps/completeStep/completeStep.mjs +24 -2
  510. package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
  511. package/build/upload/steps/processingStep/processingStep.js +6 -4
  512. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  513. package/build/upload/steps/uploadImageStep/uploadImageStep.js +5 -3
  514. package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
  515. package/build/uploadInput/UploadInput.js +13 -11
  516. package/build/uploadInput/UploadInput.js.map +1 -1
  517. package/build/uploadInput/UploadInput.messages.js +3 -1
  518. package/build/uploadInput/UploadInput.messages.js.map +1 -1
  519. package/build/uploadInput/uploadButton/UploadButton.js +8 -8
  520. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  521. package/build/uploadInput/uploadButton/UploadButton.messages.js +3 -1
  522. package/build/uploadInput/uploadButton/UploadButton.messages.js.map +1 -1
  523. package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -1
  524. package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
  525. package/build/uploadInput/uploadItem/UploadItem.js +12 -12
  526. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  527. package/build/uploadInput/uploadItem/UploadItem.messages.js +3 -1
  528. package/build/uploadInput/uploadItem/UploadItem.messages.js.map +1 -1
  529. package/build/withDisplayFormat/WithDisplayFormat.js +19 -17
  530. package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
  531. package/build/withId/withId.js +3 -1
  532. package/build/withId/withId.js.map +1 -1
  533. package/build/withNextPortal/withNextPortal.js +3 -1
  534. package/build/withNextPortal/withNextPortal.js.map +1 -1
  535. package/package.json +12 -10
  536. package/src/accordion/Accordion.story.tsx +2 -2
  537. package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +6 -2
  538. package/src/alert/Alert.story.tsx +2 -2
  539. package/src/alert/Alert.tests.story.tsx +1 -1
  540. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +12 -4
  541. package/src/badge/Badge.tsx +1 -1
  542. package/src/badge/BadgeAssets.tsx +2 -2
  543. package/src/button/Button.css +2 -2
  544. package/src/button/Button.less +2 -2
  545. package/src/button/LegacyButton.tsx +0 -2
  546. package/src/carousel/Carousel.spec.tsx +0 -4
  547. package/src/carousel/Carousel.tsx +0 -1
  548. package/src/checkbox/Checkbox.tsx +0 -1
  549. package/src/checkboxButton/CheckboxButton.story.tsx +0 -2
  550. package/src/checkboxButton/CheckboxButton.tsx +1 -1
  551. package/src/checkboxOption/CheckboxOption.tsx +1 -2
  552. package/src/chips/__snapshots__/Chips.spec.tsx.snap +1 -1
  553. package/src/common/Option/Option.css +1 -1
  554. package/src/common/Option/Option.less +2 -2
  555. package/src/common/Option/Option.tsx +1 -1
  556. package/src/common/bottomSheet/BottomSheet.spec.tsx +0 -1
  557. package/src/common/bottomSheet/BottomSheet.story.tsx +1 -1
  558. package/src/common/bottomSheet/BottomSheet.tsx +0 -1
  559. package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +1 -1
  560. package/src/common/closeButton/__snapshots__/CloseButton.spec.tsx.snap +1 -1
  561. package/src/common/dateUtils/isDateValid/isDateValid.ts +5 -3
  562. package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js +0 -2
  563. package/src/common/locale/index.ts +1 -1
  564. package/src/common/panel/Panel.tsx +2 -13
  565. package/src/dateInput/DateInput.tsx +7 -1
  566. package/src/dateLookup/DateLookup.css +0 -5
  567. package/src/dateLookup/DateLookup.less +0 -4
  568. package/src/dateLookup/dateHeader/DateHeader.tsx +24 -26
  569. package/src/dimmer/Dimmer.story.tsx +0 -1
  570. package/src/dimmer/dimmerManager/DimmerManager.ts +1 -1
  571. package/src/display/Display.story.tsx +0 -2
  572. package/src/divider/Divider.accessibility.docs.mdx +61 -0
  573. package/src/divider/Divider.css +24 -0
  574. package/src/divider/Divider.less +31 -0
  575. package/src/divider/Divider.spec.tsx +60 -0
  576. package/src/divider/Divider.story.tsx +130 -0
  577. package/src/divider/Divider.tsx +54 -0
  578. package/src/divider/index.ts +2 -0
  579. package/src/dropFade/DropFade.story.tsx +0 -1
  580. package/src/dropFade/DropFade.tsx +0 -1
  581. package/src/emphasis/EmphasisHtmlTransformer.spec.tsx +4 -4
  582. package/src/emphasis/EmphasisHtmlTransformer.ts +2 -2
  583. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +5 -3
  584. package/src/header/Header.accessibility.docs.mdx +85 -0
  585. package/src/header/Header.css +28 -11
  586. package/src/header/Header.less +29 -7
  587. package/src/header/Header.spec.tsx +68 -50
  588. package/src/header/Header.story.tsx +184 -39
  589. package/src/header/Header.tsx +123 -69
  590. package/src/header/index.ts +1 -0
  591. package/src/i18n/cs.json +22 -5
  592. package/src/i18n/nl.json +73 -0
  593. package/src/index.ts +3 -2
  594. package/src/info/Info.css +0 -23
  595. package/src/info/Info.less +0 -28
  596. package/src/info/Info.tsx +8 -14
  597. package/src/inputs/Input.tsx +0 -1
  598. package/src/inputs/SelectInput.tsx +1 -7
  599. package/src/inputs/_ButtonInput.tsx +0 -1
  600. package/src/inputs/_Popover.tsx +0 -1
  601. package/src/link/Link.story.tsx +0 -1
  602. package/src/listItem/ListItem.story.tsx +4 -11
  603. package/src/listItem/ListItem.tests.story.tsx +52 -0
  604. package/src/listItem/ListItem.tsx +1 -1
  605. package/src/main.css +55 -102
  606. package/src/main.less +1 -1
  607. package/src/markdown/Markdown.spec.tsx +0 -1
  608. package/src/modal/Modal.story.tsx +1 -1
  609. package/src/moneyInput/currencyFormatting.ts +3 -3
  610. package/src/nudge/Nudge.tsx +0 -2
  611. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +1 -1
  612. package/src/promoCard/PromoCardContext.tsx +0 -1
  613. package/src/promoCard/PromoCardGroup.story.tsx +3 -15
  614. package/src/promoCard/PromoCardGroup.tsx +0 -1
  615. package/src/provider/theme/ThemeProvider.story.tsx +3 -5
  616. package/src/select/Select.spec.tsx +0 -1
  617. package/src/select/Select.tsx +0 -3
  618. package/src/select/option/Option.spec.tsx +51 -0
  619. package/src/select/option/Option.tsx +3 -1
  620. package/src/selectOption/SelectOption.story.tsx +1 -2
  621. package/src/summary/Summary.tests.story.tsx +55 -0
  622. package/src/summary/Summary.tsx +2 -2
  623. package/src/table/Table.tsx +0 -1
  624. package/src/test-utils/jest.setup.ts +0 -1
  625. package/src/title/Title.tsx +25 -11
  626. package/src/tooltip/Tooltip.tsx +0 -2
  627. package/src/upload/Upload.spec.tsx +295 -0
  628. package/src/upload/Upload.tsx +5 -1
  629. package/src/upload/steps/completeStep/completeStep.spec.tsx +51 -0
  630. package/src/upload/steps/completeStep/completeStep.tsx +1 -1
  631. package/src/upload/steps/processingStep/processingStep.spec.tsx +59 -0
  632. package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx +79 -0
  633. package/build/styles/item/Item.css +0 -60
  634. package/build/types/item/Item.d.ts +0 -39
  635. package/build/types/item/Item.d.ts.map +0 -1
  636. package/build/types/item/ItemAdditionalInfo.d.ts +0 -7
  637. package/build/types/item/ItemAdditionalInfo.d.ts.map +0 -1
  638. package/build/types/item/ItemCheckbox.d.ts +0 -4
  639. package/build/types/item/ItemCheckbox.d.ts.map +0 -1
  640. package/build/types/item/ItemIconButton.d.ts +0 -4
  641. package/build/types/item/ItemIconButton.d.ts.map +0 -1
  642. package/build/types/item/ItemImage.d.ts +0 -4
  643. package/build/types/item/ItemImage.d.ts.map +0 -1
  644. package/build/types/item/ItemNavigation.d.ts +0 -4
  645. package/build/types/item/ItemNavigation.d.ts.map +0 -1
  646. package/build/types/item/index.d.ts +0 -5
  647. package/build/types/item/index.d.ts.map +0 -1
  648. package/src/item/Item.css +0 -60
  649. package/src/item/Item.less +0 -60
  650. package/src/item/Item.story.tsx +0 -39
  651. package/src/item/Item.tsx +0 -153
  652. package/src/item/ItemAdditionalInfo.tsx +0 -14
  653. package/src/item/ItemCheckbox.tsx +0 -16
  654. package/src/item/ItemIconButton.tsx +0 -15
  655. package/src/item/ItemImage.tsx +0 -11
  656. package/src/item/ItemNavigation.tsx +0 -16
  657. package/src/item/index.ts +0 -4
  658. package/src/select/option/Option.spec.js +0 -43
  659. package/src/upload/Upload.events.spec.js +0 -49
  660. package/src/upload/Upload.spec.js +0 -305
  661. package/src/upload/steps/completeStep/completeStep.spec.js +0 -51
  662. package/src/upload/steps/processingStep/processingStep.spec.js +0 -55
  663. package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +0 -91
package/src/select/option/Option.tsx CHANGED
@@ -16,6 +16,7 @@ export type Props<T> = {
16
16
  /** @deprecated */
17
17
  classNames?: Record<string, string>;
18
18
  selected?: boolean;
19
+ testId?: string;
19
20
  };
20
21
 
21
22
  function Option<T>({
@@ -25,6 +26,7 @@ function Option<T>({
25
26
  secondary = '',
26
27
  icon,
27
28
  selected = false,
29
+ testId,
28
30
  }: Props<T>) {
29
31
  const iconElement = icon
30
32
  ? cloneElement(icon as ReactElement<IdIconProps>, {
@@ -49,7 +51,7 @@ function Option<T>({
49
51
  );
50
52
 
51
53
  return iconElement ? (
52
- <div className="d-flex np-option-content">
54
+ <div className="d-flex np-option-content" data-testid={testId}>
53
55
  <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
54
56
  {iconElement}
55
57
  </div>
package/src/selectOption/SelectOption.story.tsx CHANGED
@@ -175,8 +175,8 @@ export const Basic: Story = {
175
175
  options: balances,
176
176
  },
177
177
  render: (args: SelectOptionProps) => {
178
- // eslint-disable-next-line react-hooks/rules-of-hooks
179
178
  const [selected, setSelected] = useState<SelectOptionValue | undefined>(undefined);
179
+
180
180
  function onChange(value: SelectOptionValue): void {
181
181
  setSelected(value);
182
182
  }
@@ -194,7 +194,6 @@ export const Basic: Story = {
194
194
 
195
195
  export const Variants: Story = {
196
196
  render: () => {
197
- // eslint-disable-next-line react-hooks/rules-of-hooks
198
197
  const [selected, setSelected] = useState<SelectOptionValue<CustomData>>({
199
198
  ...paymentMethods[1].options[1],
200
199
  content: null,
package/src/summary/Summary.tests.story.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import { Home as HomeIcon } from '@transferwise/icons';
2
+ import { Status } from '../common';
3
+ import Summary, { type SummaryProps } from '.';
4
+
5
+ export default {
6
+ component: Summary,
7
+ title: 'Content/Summary/tests',
8
+ };
9
+
10
+ export const LongText = () => {
11
+ const sharedProps: Partial<SummaryProps> = {
12
+ action: {
13
+ text: 'Change address',
14
+ href: '#change-address',
15
+ 'aria-label': ' Click here to change address',
16
+ },
17
+ as: 'li',
18
+ icon: <HomeIcon size={24} />,
19
+ status: Status.NOT_DONE,
20
+ info: {
21
+ title: 'Title',
22
+ },
23
+ };
24
+ return (
25
+ <ul style={{ width: '34rem' }}>
26
+ <Summary
27
+ title="Default behaviour"
28
+ description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
29
+ {...sharedProps}
30
+ />
31
+
32
+ <Summary
33
+ title="Wrapping the long word with a 'span.text-word-break'"
34
+ description={
35
+ <>
36
+ {
37
+ 'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
38
+ }
39
+ <span className="text-word-break">
40
+ breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
41
+ </span>
42
+ {' word.'}
43
+ </>
44
+ }
45
+ {...sharedProps}
46
+ />
47
+
48
+ <Summary
49
+ title="Using '&amp;shy;' HTML entitty"
50
+ description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
51
+ {...sharedProps}
52
+ />
53
+ </ul>
54
+ );
55
+ };
package/src/summary/Summary.tsx CHANGED
@@ -142,7 +142,7 @@ const Summary = ({
142
142
  role="heading"
143
143
  aria-level={6}
144
144
  type={Typography.BODY_LARGE_BOLD}
145
- className="text-primary m-b-1"
145
+ className="text-primary text-overflow-wrap m-b-1"
146
146
  >
147
147
  {title}
148
148
  </Body>
@@ -163,7 +163,7 @@ const Summary = ({
163
163
  <Body
164
164
  as="span"
165
165
  type={Typography.BODY_DEFAULT}
166
- className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
166
+ className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
167
167
  >
168
168
  {description}
169
169
  </Body>
package/src/table/Table.tsx CHANGED
@@ -113,7 +113,6 @@ const Table = ({
113
113
  'np-table-outer-container--center': !fullWidth,
114
114
  'np-table-outer-container--full-width': fullWidth,
115
115
  })}
116
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
117
116
  tabIndex={0}
118
117
  data-testid="np-table-outer-container"
119
118
  >
package/src/test-utils/jest.setup.ts CHANGED
@@ -7,7 +7,6 @@ import fetchMock from 'jest-fetch-mock';
7
7
 
8
8
  global.fetch = fetchMock as unknown as typeof global.fetch;
9
9
 
10
- // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
11
10
  Enzyme.configure({ adapter: new Adapter() });
12
11
 
13
12
  global.requestAnimationFrame = (callback: (time: number) => void): number => {
package/src/title/Title.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
2
+ import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
3
3
 
4
4
  import { TitleTypes, Typography, Heading } from '../common';
5
5
 
@@ -25,15 +25,29 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
25
25
  type?: TitleTypes;
26
26
  };
27
27
 
28
- function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
29
- const mapping = titleTypeMapping[type];
30
- const isTypeSupported = mapping !== undefined;
31
- if (isTypeSupported) {
32
- const HeaderTag = as ?? mapping;
33
- return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
34
- }
35
- const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
36
- return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
37
- }
28
+ const Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
29
+ ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
30
+ const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
31
+ const isTypeSupported = mapping !== undefined;
32
+ if (isTypeSupported) {
33
+ const HeaderTag = as ?? mapping;
34
+ return (
35
+ <HeaderTag
36
+ ref={ref as React.Ref<any>}
37
+ {...props}
38
+ className={clsx(`np-text-${type}`, className)}
39
+ />
40
+ );
41
+ }
42
+ const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
43
+ return (
44
+ <HeaderTag
45
+ ref={ref as React.Ref<any>}
46
+ {...props}
47
+ className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
48
+ />
49
+ );
50
+ },
51
+ );
38
52
 
39
53
  export default Title;
package/src/tooltip/Tooltip.tsx CHANGED
@@ -98,7 +98,6 @@ const Tooltip = ({
98
98
  open ? `np-panel--open np-tooltip--open` : null,
99
99
  className,
100
100
  )}
101
- // eslint-disable-next-line react/forbid-dom-props
102
101
  style={{ ...styles.popper }}
103
102
  {...attributes.popper}
104
103
  aria-hidden={!open}
@@ -111,7 +110,6 @@ const Tooltip = ({
111
110
  // @ts-expect-error
112
111
  ref={setArrowElement}
113
112
  className={clsx('np-panel__arrow')}
114
- // eslint-disable-next-line react/forbid-dom-props
115
113
  style={styles.arrow}
116
114
  />
117
115
  </div>
package/src/upload/Upload.spec.tsx ADDED
@@ -0,0 +1,295 @@
1
+ import { render, fireEvent, waitFor, screen } from '../test-utils';
2
+ import { act } from 'react';
3
+ import Upload from '.';
4
+ import { asyncFileRead } from './utils/asyncFileRead';
5
+ import { postData } from './utils/postData';
6
+
7
+ jest.mock('./utils/asyncFileRead');
8
+ jest.mock('./utils/postData');
9
+
10
+ const TEST_FILE = new File(['test content'], 'test.png', { type: 'image/png' });
11
+ const INVALID_FILE = new File(['invalid content'], 'invalid.txt', { type: 'text/plain' });
12
+
13
+ beforeAll(() => {
14
+ class MockDataTransfer {
15
+ items: { add: (file: File) => void };
16
+ files: File[];
17
+
18
+ constructor() {
19
+ this.items = {
20
+ add: (file: File) => {
21
+ this.files.push(file);
22
+ },
23
+ };
24
+ this.files = [];
25
+ }
26
+ }
27
+
28
+ // @ts-expect-error: Mocking global DataTransfer for testing purposes
29
+ global.DataTransfer = MockDataTransfer;
30
+ });
31
+
32
+ describe('Upload Component', () => {
33
+ const props = {
34
+ animationDelay: 100,
35
+ csButtonText: 'csButtonText',
36
+ csFailureText: 'csFailureText',
37
+ csSuccessText: 'csSuccessText',
38
+ csTooLargeMessage: 'csTooLargeMessage',
39
+ maxSize: 5000000,
40
+ onCancel: jest.fn(),
41
+ onChange: jest.fn(),
42
+ onFailure: jest.fn(),
43
+ onStart: jest.fn(),
44
+ onSuccess: jest.fn(),
45
+ psButtonText: 'psButtonText',
46
+ psProcessingText: 'psProcessingText',
47
+ usAccept: 'image/*',
48
+ usButtonText: 'Or Select File',
49
+ usButtonRetryText: 'Try again',
50
+ usDropMessage: 'Drop file to start upload',
51
+ usPlaceholder: 'Drag and drop a file less than 5MB',
52
+ };
53
+
54
+ const waitForUpload = async () => {
55
+ for (let i = 0; i < 4; i += 1) {
56
+ await act(async () => {
57
+ await jest.runOnlyPendingTimersAsync();
58
+ });
59
+ }
60
+ };
61
+
62
+ beforeEach(() => {
63
+ jest.useFakeTimers();
64
+ (asyncFileRead as jest.Mock).mockImplementation(async () => 'a value');
65
+ (postData as jest.Mock).mockResolvedValue('ServerResponse');
66
+ Object.defineProperty(window, 'matchMedia', {
67
+ writable: true,
68
+ value: jest.fn().mockImplementation((query: string) => ({
69
+ matches: false,
70
+ media: query,
71
+ onchange: null,
72
+ addListener: jest.fn(),
73
+ removeListener: jest.fn(),
74
+ addEventListener: jest.fn(),
75
+ removeEventListener: jest.fn(),
76
+ dispatchEvent: jest.fn(),
77
+ })),
78
+ });
79
+ });
80
+
81
+ afterEach(async () => {
82
+ await jest.runOnlyPendingTimersAsync();
83
+ jest.runOnlyPendingTimers();
84
+ jest.useRealTimers();
85
+ });
86
+
87
+ test('adds droppable-dropping class on dragenter', async () => {
88
+ const { container } = render(<Upload {...props} />);
89
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
90
+ expect(droppableElement).toBeTruthy();
91
+
92
+ fireEvent.dragEnter(droppableElement!, { dataTransfer: new DataTransfer() });
93
+
94
+ await waitFor(() => {
95
+ expect(droppableElement).toHaveClass('droppable-dropping');
96
+ });
97
+ });
98
+
99
+ test('removes droppable-dropping class on dragleave', async () => {
100
+ const { container } = render(<Upload {...props} />);
101
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
102
+ expect(droppableElement).toBeTruthy();
103
+
104
+ fireEvent.dragEnter(droppableElement!, { dataTransfer: new DataTransfer() });
105
+
106
+ await waitFor(() => {
107
+ expect(droppableElement).toHaveClass('droppable-dropping');
108
+ });
109
+
110
+ fireEvent.dragLeave(droppableElement!);
111
+
112
+ await waitFor(() => {
113
+ expect(droppableElement).not.toHaveClass('droppable-dropping');
114
+ });
115
+ });
116
+
117
+ test('adds droppable-processing when file is dropped', async () => {
118
+ const { container } = render(<Upload {...props} />);
119
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
120
+
121
+ const dataTransfer = new DataTransfer();
122
+ dataTransfer.items.add(TEST_FILE);
123
+
124
+ fireEvent.drop(droppableElement!, { dataTransfer });
125
+
126
+ await waitFor(() => expect(droppableElement).toHaveClass('droppable-processing'));
127
+ });
128
+
129
+ test('should handle successful file upload', async () => {
130
+ (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
131
+ (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
132
+
133
+ const { container } = render(<Upload {...props} />);
134
+
135
+ await act(async () => {
136
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
137
+
138
+ const dataTransfer = new DataTransfer();
139
+ dataTransfer.items.add(TEST_FILE);
140
+ fireEvent.drop(droppableElement!, { dataTransfer });
141
+ });
142
+
143
+ await act(async () => {
144
+ jest.advanceTimersByTime(10);
145
+ jest.advanceTimersByTime(props.animationDelay);
146
+ });
147
+
148
+ expect(await screen.findByText(/csSuccessText/i)).toBeInTheDocument();
149
+ });
150
+
151
+ test('should handle file size exceeding the limit', async () => {
152
+ const largeFile = new File(['large '.repeat(1000000)], 'large.jpg', { type: 'image/jpeg' });
153
+ const { container } = render(<Upload {...props} maxSize={10} />);
154
+
155
+ await act(async () => {
156
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
157
+ const dataTransfer = new DataTransfer();
158
+ dataTransfer.items.add(largeFile);
159
+ fireEvent.drop(droppableElement!, { dataTransfer });
160
+ });
161
+
162
+ await act(async () => {
163
+ jest.advanceTimersByTime(1000);
164
+ jest.advanceTimersByTime(props.animationDelay);
165
+ });
166
+
167
+ await waitForUpload();
168
+
169
+ expect(await screen.findByText(/csTooLargeMessage/i)).toBeInTheDocument();
170
+ });
171
+
172
+ test('should handle invalid file type', async () => {
173
+ (postData as jest.Mock).mockRejectedValue(new Error('mockErrorResponse'));
174
+
175
+ const { container } = render(<Upload {...props} />);
176
+
177
+ await act(async () => {
178
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
179
+
180
+ const dataTransfer = new DataTransfer();
181
+ dataTransfer.items.add(INVALID_FILE);
182
+ fireEvent.drop(droppableElement!, { dataTransfer });
183
+ });
184
+
185
+ await waitForUpload();
186
+
187
+ expect(
188
+ await screen.findByText(/File type not supported. Please try again with a different file/i),
189
+ ).toBeInTheDocument();
190
+ });
191
+
192
+ test('should handle canceling the upload', async () => {
193
+ const { container } = render(<Upload {...props} />);
194
+
195
+ await act(async () => {
196
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
197
+
198
+ const dataTransfer = new DataTransfer();
199
+ dataTransfer.items.add(TEST_FILE);
200
+ fireEvent.drop(droppableElement!, { dataTransfer });
201
+ });
202
+
203
+ fireEvent.click(await screen.findByText(/csButtonText/i));
204
+
205
+ expect(props.onCancel).toHaveBeenCalled();
206
+ });
207
+
208
+ test('should handle retrying the upload', async () => {
209
+ (asyncFileRead as jest.Mock).mockRejectedValueOnce('error');
210
+
211
+ const { container } = render(<Upload {...props} />);
212
+
213
+ await act(async () => {
214
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
215
+
216
+ const dataTransfer = new DataTransfer();
217
+ dataTransfer.items.add(TEST_FILE);
218
+ fireEvent.drop(droppableElement!, { dataTransfer });
219
+ });
220
+
221
+ await waitForUpload();
222
+
223
+ fireEvent.click(await screen.findByText(/Try again/i));
224
+
225
+ expect(props.onStart).toHaveBeenCalled();
226
+ });
227
+
228
+ test('should call onSuccess with the server response when httpOptions are provided', async () => {
229
+ (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
230
+ (postData as jest.Mock).mockResolvedValue('mockServerResponse');
231
+
232
+ const { container } = render(<Upload {...props} httpOptions={{ url: 'test-url' }} />);
233
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
234
+
235
+ const dataTransfer = new DataTransfer();
236
+ dataTransfer.items.add(TEST_FILE);
237
+
238
+ await act(async () => {
239
+ fireEvent.drop(droppableElement!, { dataTransfer });
240
+ });
241
+
242
+ await waitForUpload();
243
+
244
+ expect(props.onSuccess).toHaveBeenCalledWith('mockServerResponse', TEST_FILE.name);
245
+ });
246
+
247
+ test('should not allow new file to process while current one is in progress', async () => {
248
+ (asyncFileRead as jest.Mock).mockResolvedValue('someResult');
249
+
250
+ const { container } = render(<Upload {...props} httpOptions={{ url: 'test-url' }} />);
251
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
252
+
253
+ const dataTransfer = new DataTransfer();
254
+ dataTransfer.items.add(TEST_FILE);
255
+
256
+ await act(async () => {
257
+ fireEvent.drop(droppableElement!, { dataTransfer });
258
+ });
259
+
260
+ const secondFileDataTransfer = new DataTransfer();
261
+ secondFileDataTransfer.items.add(TEST_FILE);
262
+
263
+ let dropResult = true;
264
+ await act(async () => {
265
+ try {
266
+ fireEvent.drop(droppableElement!, { dataTransfer: secondFileDataTransfer });
267
+ } catch {
268
+ dropResult = false;
269
+ }
270
+ });
271
+
272
+ expect(dropResult).toBe(true);
273
+ });
274
+
275
+ test('should override the error icon label when errorIconLabel prop is provided', async () => {
276
+ (asyncFileRead as jest.Mock).mockRejectedValueOnce('mockReadError');
277
+ (postData as jest.Mock).mockRejectedValueOnce(new Error('mockPostError'));
278
+
279
+ const customLabel = 'Custom error label';
280
+ const { container } = render(<Upload {...props} errorIconLabel={customLabel} />);
281
+ const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
282
+
283
+ const dataTransfer = new DataTransfer();
284
+ dataTransfer.items.add(TEST_FILE);
285
+
286
+ await act(async () => {
287
+ fireEvent.drop(droppableElement!, { dataTransfer });
288
+ });
289
+
290
+ await waitForUpload();
291
+
292
+ const errorIcon = await screen.findByLabelText(/Custom error label/i);
293
+ expect(errorIcon).toBeInTheDocument();
294
+ });
295
+ });
package/src/upload/Upload.tsx CHANGED
@@ -172,7 +172,11 @@ export class Upload extends Component<UploadProps, UploadState> {
172
172
  isProcessing: false,
173
173
  isComplete: true,
174
174
  },
175
- onSuccess ? () => onSuccess(response as string | Response, fileName) : undefined,
175
+ onSuccess
176
+ ? () => {
177
+ onSuccess(response as string | Response, fileName);
178
+ }
179
+ : undefined,
176
180
  );
177
181
  }, animationDelay);
178
182
  }
package/src/upload/steps/completeStep/completeStep.spec.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import { render, fireEvent, waitFor, screen } from '../../../test-utils';
2
+
3
+ import CompleteStep from '.';
4
+
5
+ describe('CompleteStep', () => {
6
+ const COMPLETED_STEP_PROPS = {
7
+ isComplete: true,
8
+ uploadedImage: '',
9
+ fileName: 'fileName',
10
+ isError: false,
11
+ isImage: true,
12
+ csSuccessText: 'csSuccessText',
13
+ csFailureText: 'csFailureText',
14
+ csButtonText: 'csButtonText',
15
+ onClear: jest.fn(),
16
+ usLabel: 'usLabel',
17
+ };
18
+
19
+ let container: HTMLElement;
20
+
21
+ beforeEach(() => {
22
+ const view = render(<CompleteStep {...COMPLETED_STEP_PROPS} />);
23
+ container = view.container;
24
+ });
25
+
26
+ test('renders container', async () => {
27
+ await waitFor(() => {
28
+ const complete = container.querySelector('.droppable-complete-card');
29
+ expect(complete).toBeInTheDocument();
30
+ });
31
+ });
32
+
33
+ describe('when error is false', () => {
34
+ test('renders isImage or Upload icon', () => {
35
+ expect(screen.getByTestId('document-icon')).toBeInTheDocument();
36
+ });
37
+
38
+ test('renders filename when error is false', () => {
39
+ expect(screen.getByText(COMPLETED_STEP_PROPS.fileName)).toBeInTheDocument();
40
+ });
41
+ });
42
+
43
+ test('renders button when csButtonText is set up', () => {
44
+ expect(screen.getByText(COMPLETED_STEP_PROPS.csButtonText)).toBeInTheDocument();
45
+ });
46
+
47
+ test('calls onClear when button is clicked', () => {
48
+ fireEvent.click(screen.getByText(COMPLETED_STEP_PROPS.csButtonText));
49
+ expect(COMPLETED_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
50
+ });
51
+ });
package/src/upload/steps/completeStep/completeStep.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Document as DocumentIcon } from '@transferwise/icons';
2
2
 
3
- import { Typography } from '../../..';
3
+ import { Typography } from '../../../common';
4
4
  import Body from '../../../body';
5
5
  import Button from '../../../button';
6
6
  import Title from '../../../title';
package/src/upload/steps/processingStep/processingStep.spec.tsx ADDED
@@ -0,0 +1,59 @@
1
+ import { render, fireEvent, waitFor, screen } from '../../../test-utils';
2
+
3
+ import ProcessingStep from '.';
4
+
5
+ describe('ProcessingStep', () => {
6
+ const PROCESSING_STEP_PROPS = {
7
+ isComplete: false,
8
+ isError: false,
9
+ isSuccess: false,
10
+ onAnimationCompleted: jest.fn(),
11
+ onClear: jest.fn(),
12
+ psButtonText: 'psButtonText',
13
+ psProcessingText: 'psProcessingText',
14
+ psButtonDisabled: false,
15
+ };
16
+
17
+ let container: HTMLElement;
18
+
19
+ beforeEach(() => {
20
+ const view = render(<ProcessingStep {...PROCESSING_STEP_PROPS} />);
21
+ container = view.container;
22
+ });
23
+
24
+ test('renders container', async () => {
25
+ await waitFor(() => {
26
+ const processing = container.querySelector('.droppable-processing-card');
27
+ expect(processing).toBeInTheDocument();
28
+ });
29
+ });
30
+
31
+ test('renders ProcessIndicator with default status', () => {
32
+ expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
33
+ });
34
+
35
+ test('renders ProcessIndicator with success status', async () => {
36
+ const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isSuccess />);
37
+ await waitFor(() => {
38
+ const processIndicator = container.querySelector('.process-success');
39
+ expect(processIndicator).toBeInTheDocument();
40
+ });
41
+ });
42
+
43
+ test('renders ProcessIndicator with error status', async () => {
44
+ const { container } = render(<ProcessingStep {...PROCESSING_STEP_PROPS} isError />);
45
+ await waitFor(() => {
46
+ const processIndicator = container.querySelector('.process-danger');
47
+ expect(processIndicator).toBeInTheDocument();
48
+ });
49
+ });
50
+
51
+ test('renders button when psButtonText is set up', () => {
52
+ expect(screen.getByText(PROCESSING_STEP_PROPS.psButtonText)).toBeInTheDocument();
53
+ });
54
+
55
+ test('calls onClear when button is clicked', () => {
56
+ fireEvent.click(screen.getByText(PROCESSING_STEP_PROPS.psButtonText));
57
+ expect(PROCESSING_STEP_PROPS.onClear).toHaveBeenCalledTimes(1);
58
+ });
59
+ });