@transferwise/components 46.130.3 → 46.131.1

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 (389) hide show
  1. package/build/flowNavigation/FlowNavigation.js +4 -2
  2. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  3. package/build/flowNavigation/FlowNavigation.mjs +4 -2
  4. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  5. package/build/main.css +27004 -7
  6. package/build/styles/css/accordion.css +255 -0
  7. package/build/styles/css/alerts.css +751 -0
  8. package/build/styles/css/background.css +20 -0
  9. package/build/styles/css/badge.css +90 -0
  10. package/build/styles/css/border-radius.css +3 -0
  11. package/build/styles/css/breadcrumbs.css +20 -0
  12. package/build/styles/css/button-groups.css +495 -0
  13. package/build/styles/css/buttons.css +1390 -0
  14. package/build/styles/css/chevron.css +35 -0
  15. package/build/styles/css/circles.css +248 -0
  16. package/build/styles/css/close.css +47 -0
  17. package/build/styles/css/column-layout.css +164 -0
  18. package/build/styles/css/currency-flags.css +46 -0
  19. package/build/styles/css/decision.css +136 -0
  20. package/build/styles/css/dropdowns.css +472 -0
  21. package/build/styles/css/droppable.css +221 -0
  22. package/build/styles/css/flex.css +598 -0
  23. package/build/styles/css/footer.css +129 -0
  24. package/build/styles/css/grid.css +2369 -0
  25. package/build/styles/css/input-groups.css +2740 -0
  26. package/build/styles/css/link-callout.css +20 -0
  27. package/build/styles/css/list-group.css +350 -0
  28. package/build/styles/css/loaders.css +76 -0
  29. package/build/styles/css/media.css +74 -0
  30. package/build/styles/css/modals.css +185 -0
  31. package/build/styles/css/navbar.css +2406 -0
  32. package/build/styles/css/navs.css +296 -0
  33. package/build/styles/css/neptune-social-media.css +144 -0
  34. package/build/styles/css/neptune.css +25724 -0
  35. package/build/styles/css/panels.css +528 -0
  36. package/build/styles/css/popovers.css +661 -0
  37. package/build/styles/css/process.css +483 -0
  38. package/build/styles/css/progress-bars.css +64 -0
  39. package/build/styles/css/ring.css +55 -0
  40. package/build/styles/css/select.css +99 -0
  41. package/build/styles/css/sequences.css +855 -0
  42. package/build/styles/css/table.css +446 -0
  43. package/build/styles/css/tick.css +32 -0
  44. package/build/styles/css/tooltip.css +160 -0
  45. package/build/styles/css/utilities.css +145 -0
  46. package/build/styles/css/wells.css +74 -0
  47. package/build/styles/fonts/TW-Averta-Bold.woff +0 -0
  48. package/build/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  49. package/build/styles/fonts/TW-Averta-Regular.woff +0 -0
  50. package/build/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  51. package/build/styles/fonts/TW-Averta-Semibold.woff +0 -0
  52. package/build/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  53. package/build/styles/fonts/TransferWise-IconFont.svg +81 -0
  54. package/build/styles/fonts/TransferWise-IconFont.woff +0 -0
  55. package/build/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  56. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  57. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  58. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  59. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  60. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  61. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  62. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  63. package/build/styles/img/bg-dark.svg +31 -0
  64. package/build/styles/img/bg-light.svg +26 -0
  65. package/build/styles/less/legacy-variables.css +0 -0
  66. package/build/styles/less/legacy-variables.less +1299 -0
  67. package/build/styles/less/neptune-tokens.css +0 -0
  68. package/build/styles/less/neptune-tokens.less +275 -0
  69. package/build/styles/less/zindex.css +0 -0
  70. package/build/styles/less/zindex.less +17 -0
  71. package/build/styles/main.css +27004 -7
  72. package/build/styles/props/custom-media.css +11 -0
  73. package/build/styles/props/legacy-custom-props.css +69 -0
  74. package/build/styles/props/neptune-tokens.css +152 -0
  75. package/build/styles/styles/less/accordion.css +255 -0
  76. package/build/styles/styles/less/alerts.css +751 -0
  77. package/build/styles/styles/less/background.css +20 -0
  78. package/build/styles/styles/less/badge.css +90 -0
  79. package/build/styles/styles/less/border-radius.css +3 -0
  80. package/build/styles/styles/less/breadcrumbs.css +20 -0
  81. package/build/styles/styles/less/button-groups.css +495 -0
  82. package/build/styles/styles/less/buttons.css +1390 -0
  83. package/build/styles/styles/less/chevron.css +35 -0
  84. package/build/styles/styles/less/circles.css +248 -0
  85. package/build/styles/styles/less/close.css +47 -0
  86. package/build/styles/styles/less/column-layout.css +164 -0
  87. package/build/styles/styles/less/core/viewport-themes.css +59 -0
  88. package/build/styles/styles/less/currency-flags.css +46 -0
  89. package/build/styles/styles/less/decision.css +136 -0
  90. package/build/styles/styles/less/dropdowns.css +472 -0
  91. package/build/styles/styles/less/droppable.css +221 -0
  92. package/build/styles/styles/less/flex.css +598 -0
  93. package/build/styles/styles/less/footer.css +129 -0
  94. package/build/styles/styles/less/forms/bootstrap-forms.css +2277 -0
  95. package/build/styles/styles/less/forms/checkbox-radio.css +367 -0
  96. package/build/styles/styles/less/grid.css +2369 -0
  97. package/build/styles/styles/less/input-groups.css +2740 -0
  98. package/build/styles/styles/less/link-callout.css +20 -0
  99. package/build/styles/styles/less/list-group.css +350 -0
  100. package/build/styles/styles/less/loaders.css +76 -0
  101. package/build/styles/styles/less/media.css +74 -0
  102. package/build/styles/styles/less/modals.css +185 -0
  103. package/build/styles/styles/less/navbar.css +2406 -0
  104. package/build/styles/styles/less/navs.css +296 -0
  105. package/build/styles/styles/less/neptune-social-media.css +144 -0
  106. package/build/styles/styles/less/neptune.css +25724 -0
  107. package/build/styles/styles/less/panels.css +528 -0
  108. package/build/styles/styles/less/popovers.css +661 -0
  109. package/build/styles/styles/less/process.css +483 -0
  110. package/build/styles/styles/less/progress-bars.css +64 -0
  111. package/build/styles/styles/less/ring.css +55 -0
  112. package/build/styles/styles/less/select.css +99 -0
  113. package/build/styles/styles/less/sequences.css +855 -0
  114. package/build/styles/styles/less/table.css +446 -0
  115. package/build/styles/styles/less/tick.css +32 -0
  116. package/build/styles/styles/less/tooltip.css +160 -0
  117. package/build/styles/styles/less/utilities.css +145 -0
  118. package/build/styles/styles/less/wells.css +74 -0
  119. package/build/styles/styles/props/custom-media.css +11 -0
  120. package/build/styles/styles/props/legacy-custom-props.css +69 -0
  121. package/build/styles/styles/props/neptune-tokens.css +11 -0
  122. package/build/styles/styles/variables/legacy-variables.css +0 -0
  123. package/build/styles/styles/variables/neptune-tokens.css +0 -0
  124. package/build/styles/styles/variables/zindex.css +0 -0
  125. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  126. package/package.json +8 -4
  127. package/src/{DisabledComponents.story.tsx → DisabledComponents.test.story.tsx} +1 -1
  128. package/src/accordion/Accordion.less +3 -3
  129. package/src/actionButton/ActionButton.less +1 -1
  130. package/src/actionButton/ActionButton.story.tsx +11 -7
  131. package/src/actionButton/ActionButton.test.story.tsx +49 -0
  132. package/src/avatar/Avatar.less +3 -3
  133. package/src/avatarLayout/AvatarLayout.story.tsx +1 -105
  134. package/src/avatarLayout/AvatarLayout.test.story.tsx +117 -0
  135. package/src/avatarView/AvatarView.story.tsx +1 -104
  136. package/src/avatarView/AvatarView.test.story.tsx +114 -0
  137. package/src/badge/Badge.less +1 -1
  138. package/src/button/LegacyButton.less +1 -1
  139. package/src/button/LegacyButton.story.tsx +1 -26
  140. package/src/button/LegacyButton.test.story.tsx +37 -0
  141. package/src/button/_stories/Button.story.tsx +17 -41
  142. package/src/button/_stories/Button.test.story.tsx +30 -0
  143. package/src/card/Card.less +3 -3
  144. package/src/checkbox/Checkbox.story.tsx +1 -6
  145. package/src/checkbox/Checkbox.test.story.tsx +33 -0
  146. package/src/checkboxButton/CheckboxButton.less +2 -2
  147. package/src/chips/Chip.less +3 -3
  148. package/src/circularButton/CircularButton.story.tsx +0 -6
  149. package/src/circularButton/CircularButton.test.story.tsx +62 -1
  150. package/src/common/Option/Option.less +2 -2
  151. package/src/common/bottomSheet/BottomSheet.less +1 -1
  152. package/src/common/bottomSheet/BottomSheet.story.tsx +0 -55
  153. package/src/common/bottomSheet/BottomSheet.test.story.tsx +118 -2
  154. package/src/common/closeButton/CloseButton.less +1 -1
  155. package/src/common/panel/Panel.less +1 -1
  156. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
  157. package/src/dateLookup/DateLookup.less +1 -1
  158. package/src/dateLookup/DateLookup.story.tsx +0 -18
  159. package/src/dateLookup/DateLookup.test.story.tsx +51 -1
  160. package/src/dateLookup/dateTrigger/DateTrigger.less +2 -2
  161. package/src/decision/Decision.less +1 -1
  162. package/src/definitionList/DefinitionList.less +1 -1
  163. package/src/dimmer/Dimmer.less +2 -2
  164. package/src/divider/Divider.story.tsx +0 -1
  165. package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx +1 -1
  166. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +0 -9
  167. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +23 -0
  168. package/src/field/Field.story.tsx +1 -34
  169. package/src/field/Field.test.story.tsx +56 -0
  170. package/src/flowNavigation/FlowNavigation.less +1 -1
  171. package/src/flowNavigation/FlowNavigation.test.js +7 -0
  172. package/src/flowNavigation/FlowNavigation.tsx +5 -2
  173. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +2 -2
  174. package/src/header/Header.test.story.tsx +1 -1
  175. package/src/info/Info.less +1 -1
  176. package/src/info/Info.story.tsx +1 -34
  177. package/src/info/Info.test.story.tsx +53 -0
  178. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +0 -12
  179. package/src/inputWithDisplayFormat/InputWithDisplayFormat.test.story.tsx +33 -0
  180. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +1 -1
  181. package/src/inputs/SelectInput/Options/SelectInputOptions.less +1 -1
  182. package/src/inputs/SelectInput/SelectInput.less +1 -1
  183. package/src/inputs/_common.less +1 -1
  184. package/src/legacylistItem/LegacyListItem.test.story.tsx +1 -1
  185. package/src/link/Link.less +2 -2
  186. package/src/listItem/ListItem.less +1 -1
  187. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
  188. package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx +1 -1
  189. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
  190. package/src/listItem/_stories/ListItem.focus.test.story.tsx +1 -1
  191. package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
  192. package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +1 -1
  193. package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +1 -1
  194. package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +1 -1
  195. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  196. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +1 -1
  197. package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +1 -1
  198. package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +1 -1
  199. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  200. package/src/logo/Logo.story.tsx +0 -6
  201. package/src/logo/Logo.test.story.tsx +20 -0
  202. package/src/main.css +27004 -7
  203. package/src/main.less +2 -0
  204. package/src/modal/Modal.story.tsx +0 -26
  205. package/src/modal/Modal.test.story.tsx +125 -0
  206. package/src/moneyInput/MoneyInput.less +2 -2
  207. package/src/moneyInput/MoneyInput.test.story.tsx +1 -1
  208. package/src/navigationOption/NavigationOption.less +3 -3
  209. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  210. package/src/overlayHeader/OverlayHeader.less +1 -1
  211. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  212. package/src/popover/Popover.less +1 -1
  213. package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +0 -43
  214. package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +45 -1
  215. package/src/radioGroup/RadioGroup.test.story.tsx +1 -1
  216. package/src/select/Select.less +5 -5
  217. package/src/slidingPanel/SlidingPanel.less +2 -2
  218. package/src/snackbar/Snackbar.less +3 -3
  219. package/src/stepper/Stepper.less +3 -3
  220. package/src/stepper/Stepper.test.story.tsx +1 -1
  221. package/src/styles/fonts/TW-Averta-Bold.woff +0 -0
  222. package/src/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  223. package/src/styles/fonts/TW-Averta-Regular.woff +0 -0
  224. package/src/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  225. package/src/styles/fonts/TW-Averta-Semibold.woff +0 -0
  226. package/src/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  227. package/src/styles/fonts/TransferWise-IconFont.svg +81 -0
  228. package/src/styles/fonts/TransferWise-IconFont.woff +0 -0
  229. package/src/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  230. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  231. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  232. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  233. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  234. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  235. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  236. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  237. package/src/styles/img/bg-dark.svg +31 -0
  238. package/src/styles/img/bg-light.svg +26 -0
  239. package/src/styles/less/accordion.css +255 -0
  240. package/src/styles/less/accordion.less +15 -0
  241. package/src/styles/less/addons/_background-utilities.less +82 -0
  242. package/src/styles/less/addons/_border.less +3 -0
  243. package/src/styles/less/addons/_display-utilities.less +159 -0
  244. package/src/styles/less/addons/_spacing-utilities.less +73 -0
  245. package/src/styles/less/addons/_utilities.less +147 -0
  246. package/src/styles/less/alerts.css +751 -0
  247. package/src/styles/less/alerts.less +252 -0
  248. package/src/styles/less/background.css +20 -0
  249. package/src/styles/less/background.less +24 -0
  250. package/src/styles/less/badge.css +90 -0
  251. package/src/styles/less/badge.less +85 -0
  252. package/src/styles/less/border-radius.css +3 -0
  253. package/src/styles/less/border-radius.less +3 -0
  254. package/src/styles/less/breadcrumbs.css +20 -0
  255. package/src/styles/less/breadcrumbs.less +27 -0
  256. package/src/styles/less/button-groups.css +495 -0
  257. package/src/styles/less/button-groups.less +424 -0
  258. package/src/styles/less/buttons.css +1390 -0
  259. package/src/styles/less/buttons.less +738 -0
  260. package/src/styles/less/chevron.css +35 -0
  261. package/src/styles/less/chevron.less +39 -0
  262. package/src/styles/less/circles.css +248 -0
  263. package/src/styles/less/circles.less +233 -0
  264. package/src/styles/less/close.css +47 -0
  265. package/src/styles/less/close.less +48 -0
  266. package/src/styles/less/column-layout.css +164 -0
  267. package/src/styles/less/column-layout.less +167 -0
  268. package/src/styles/less/components/_component-animations.less +43 -0
  269. package/src/styles/less/core/_fonts.less +97 -0
  270. package/src/styles/less/core/_scaffolding.less +380 -0
  271. package/src/styles/less/core/_typography-utilities.less +255 -0
  272. package/src/styles/less/core/_typography.less +575 -0
  273. package/src/styles/less/core/viewport-themes.css +59 -0
  274. package/src/styles/less/core/viewport-themes.less +65 -0
  275. package/src/styles/less/currency-flags.css +46 -0
  276. package/src/styles/less/currency-flags.less +42 -0
  277. package/src/styles/less/decision.css +136 -0
  278. package/src/styles/less/decision.less +98 -0
  279. package/src/styles/less/dropdowns.css +472 -0
  280. package/src/styles/less/dropdowns.less +365 -0
  281. package/src/styles/less/droppable.css +221 -0
  282. package/src/styles/less/droppable.less +213 -0
  283. package/src/styles/less/flex.css +598 -0
  284. package/src/styles/less/flex.less +113 -0
  285. package/src/styles/less/footer.css +129 -0
  286. package/src/styles/less/footer.less +113 -0
  287. package/src/styles/less/forms/bootstrap-forms.css +2277 -0
  288. package/src/styles/less/forms/bootstrap-forms.less +1218 -0
  289. package/src/styles/less/forms/checkbox-radio.css +367 -0
  290. package/src/styles/less/forms/checkbox-radio.less +330 -0
  291. package/src/styles/less/grid.css +2369 -0
  292. package/src/styles/less/grid.less +187 -0
  293. package/src/styles/less/input-groups.css +2740 -0
  294. package/src/styles/less/input-groups.less +298 -0
  295. package/src/styles/less/link-callout.css +20 -0
  296. package/src/styles/less/link-callout.less +17 -0
  297. package/src/styles/less/list-group.css +350 -0
  298. package/src/styles/less/list-group.less +260 -0
  299. package/src/styles/less/loaders.css +76 -0
  300. package/src/styles/less/loaders.less +91 -0
  301. package/src/styles/less/media.css +74 -0
  302. package/src/styles/less/media.less +68 -0
  303. package/src/styles/less/mixins/_alerts.less +39 -0
  304. package/src/styles/less/mixins/_arrows.less +52 -0
  305. package/src/styles/less/mixins/_border-radius.less +11 -0
  306. package/src/styles/less/mixins/_buttons.less +82 -0
  307. package/src/styles/less/mixins/_center-block.less +7 -0
  308. package/src/styles/less/mixins/_clearfix.less +23 -0
  309. package/src/styles/less/mixins/_flex.less +105 -0
  310. package/src/styles/less/mixins/_forms.less +130 -0
  311. package/src/styles/less/mixins/_grid-framework.less +104 -0
  312. package/src/styles/less/mixins/_grid.less +158 -0
  313. package/src/styles/less/mixins/_hide-text.less +20 -0
  314. package/src/styles/less/mixins/_links.less +7 -0
  315. package/src/styles/less/mixins/_list-group.less +23 -0
  316. package/src/styles/less/mixins/_logical-properties-IE-friendly.less +381 -0
  317. package/src/styles/less/mixins/_logical-properties-modern-browsers.less +226 -0
  318. package/src/styles/less/mixins/_logical-properties.less +5 -0
  319. package/src/styles/less/mixins/_nav-divider.less +10 -0
  320. package/src/styles/less/mixins/_nav-vertical-align.less +10 -0
  321. package/src/styles/less/mixins/_panels.less +23 -0
  322. package/src/styles/less/mixins/_physical-properties.less +110 -0
  323. package/src/styles/less/mixins/_reset-text.less +22 -0
  324. package/src/styles/less/mixins/_sequence.less +203 -0
  325. package/src/styles/less/mixins/_spacing.less +122 -0
  326. package/src/styles/less/mixins/_tab-focus.less +5 -0
  327. package/src/styles/less/mixins/_table-row.less +47 -0
  328. package/src/styles/less/mixins/_text-emphasis.less +39 -0
  329. package/src/styles/less/mixins/_text-overflow.less +8 -0
  330. package/src/styles/less/mixins/_theming.less +7 -0
  331. package/src/styles/less/modals.css +185 -0
  332. package/src/styles/less/modals.less +239 -0
  333. package/src/styles/less/navbar.css +2406 -0
  334. package/src/styles/less/navbar.less +1442 -0
  335. package/src/styles/less/navs.css +296 -0
  336. package/src/styles/less/navs.less +339 -0
  337. package/src/styles/less/neptune-social-media.css +144 -0
  338. package/src/styles/less/neptune-social-media.less +84 -0
  339. package/src/styles/less/neptune.bundle.less +63 -0
  340. package/src/styles/less/neptune.css +25724 -0
  341. package/src/styles/less/panels.css +528 -0
  342. package/src/styles/less/panels.less +410 -0
  343. package/src/styles/less/popovers.css +661 -0
  344. package/src/styles/less/popovers.less +379 -0
  345. package/src/styles/less/process.css +483 -0
  346. package/src/styles/less/process.less +426 -0
  347. package/src/styles/less/progress-bars.css +64 -0
  348. package/src/styles/less/progress-bars.less +55 -0
  349. package/src/styles/less/ring.css +55 -0
  350. package/src/styles/less/ring.less +51 -0
  351. package/src/styles/less/select.css +99 -0
  352. package/src/styles/less/select.less +88 -0
  353. package/src/styles/less/sequences.css +855 -0
  354. package/src/styles/less/sequences.less +511 -0
  355. package/src/styles/less/table.css +446 -0
  356. package/src/styles/less/table.less +385 -0
  357. package/src/styles/less/tick.css +32 -0
  358. package/src/styles/less/tick.less +37 -0
  359. package/src/styles/less/tooltip.css +160 -0
  360. package/src/styles/less/tooltip.less +130 -0
  361. package/src/styles/less/utilities.css +145 -0
  362. package/src/styles/less/utilities.less +153 -0
  363. package/src/styles/less/wells.css +74 -0
  364. package/src/styles/less/wells.less +37 -0
  365. package/src/styles/props/custom-media.css +11 -0
  366. package/src/styles/props/legacy-custom-props.css +69 -0
  367. package/src/styles/props/neptune-tokens.css +11 -0
  368. package/src/styles/variables/legacy-variables.css +0 -0
  369. package/src/styles/variables/legacy-variables.less +1299 -0
  370. package/src/styles/variables/neptune-tokens.css +0 -0
  371. package/src/styles/variables/neptune-tokens.less +12 -0
  372. package/src/styles/variables/zindex.css +0 -0
  373. package/src/styles/variables/zindex.less +17 -0
  374. package/src/summary/Summary.less +1 -1
  375. package/src/summary/Summary.test.story.tsx +1 -1
  376. package/src/switch/Switch.less +4 -4
  377. package/src/table/Table.less +1 -1
  378. package/src/tabs/Tabs.less +4 -4
  379. package/src/tile/Tile.less +1 -1
  380. package/src/tooltip/Tooltip.less +1 -1
  381. package/src/tooltip/Tooltip.story.tsx +0 -21
  382. package/src/tooltip/Tooltip.test.story.tsx +42 -0
  383. package/src/typeahead/Typeahead.less +2 -2
  384. package/src/typeahead/Typeahead.story.tsx +0 -52
  385. package/src/typeahead/Typeahead.test.story.tsx +73 -0
  386. package/src/typeahead/typeaheadOption/TypeaheadOption.less +1 -1
  387. package/src/upload/Upload.less +1 -1
  388. package/src/uploadInput/UploadInput.less +2 -2
  389. package/src/uploadInput/uploadItem/UploadItem.less +1 -1
package/src/circularButton/CircularButton.test.story.tsx CHANGED
@@ -2,11 +2,14 @@ import { Freeze } from '@transferwise/icons';
2
2
 
3
3
  import { Meta, StoryObj } from '@storybook/react-webpack5';
4
4
  import CircularButton from './CircularButton';
5
+ import Title from '../title';
6
+ import Body from '../body';
7
+ import { withVariantConfig } from '../../.storybook/helpers';
5
8
 
6
9
  export default {
7
10
  component: CircularButton,
8
11
  title: 'Actions/CircularButton/Tests',
9
- tags: ['!manifest'],
12
+ tags: ['!autodocs', '!manifest'],
10
13
  } satisfies Meta<typeof CircularButton>;
11
14
 
12
15
  type Story = StoryObj<typeof CircularButton>;
@@ -22,3 +25,61 @@ export const CenteredText: Story = {
22
25
  );
23
26
  },
24
27
  };
28
+
29
+ const All: Story = {
30
+ args: {
31
+ children: 'Button text',
32
+ icon: <Freeze />,
33
+ className: 'm-r-2',
34
+ },
35
+ render: (props) => {
36
+ return (
37
+ <>
38
+ <Title type="title-subsection" className="m-y-2">
39
+ Default (Primary and secondary)
40
+ </Title>
41
+ <Body>
42
+ <CircularButton {...props} priority="primary" type="default" />
43
+ <CircularButton {...props} priority="secondary" type="default" />
44
+ <CircularButton {...props} priority="primary" type="default" disabled />
45
+ <CircularButton {...props} priority="secondary" type="default" disabled />
46
+ </Body>
47
+
48
+ <Title type="title-subsection" className="m-y-2">
49
+ Negative (Primary and secondary)
50
+ </Title>
51
+ <Body>
52
+ <CircularButton {...props} priority="primary" type="negative" />
53
+ <CircularButton {...props} priority="secondary" type="negative" />
54
+ <CircularButton {...props} priority="primary" type="negative" disabled />
55
+ <CircularButton {...props} priority="secondary" type="negative" disabled />
56
+ </Body>
57
+
58
+ <Title type="title-body" className="m-y-2">
59
+ Accent (Deprecated)
60
+ </Title>
61
+ <Body>
62
+ <CircularButton {...props} priority="primary" type="accent" />
63
+ <CircularButton {...props} priority="secondary" type="accent" />
64
+ <CircularButton {...props} priority="primary" type="accent" disabled />
65
+ <CircularButton {...props} priority="secondary" type="accent" disabled />
66
+ </Body>
67
+
68
+ <Title type="title-body" className="m-y-2">
69
+ Positive (Deprecated)
70
+ </Title>
71
+ <Body>
72
+ <CircularButton {...props} priority="primary" type="positive" />
73
+ <CircularButton {...props} priority="secondary" type="positive" />
74
+ <CircularButton {...props} priority="primary" type="positive" disabled />
75
+ <CircularButton {...props} priority="secondary" type="positive" disabled />
76
+ </Body>
77
+ </>
78
+ );
79
+ },
80
+ };
81
+
82
+ export const All400Zoom: Story = {
83
+ ...All,
84
+ ...withVariantConfig(['400%'], All),
85
+ };
package/src/common/Option/Option.less CHANGED
@@ -1,5 +1,5 @@
1
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
2
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
1
+ @import (reference) "../../styles/less/mixins/_logical-properties.less";
2
+ @import (reference) "../../styles/less/ring.less";
3
3
 
4
4
  .np-option {
5
5
  &:has(:focus-visible) {
package/src/common/bottomSheet/BottomSheet.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
1
+ @import (reference) "../../styles/less/mixins/_theming.less";
2
2
 
3
3
  .np-bottom-sheet {
4
4
  border-radius: 10px 10px 0 0;
package/src/common/bottomSheet/BottomSheet.story.tsx CHANGED
@@ -11,7 +11,6 @@ import Title from '../../title/Title';
11
11
  import { Typography } from '../propsValues/typography';
12
12
 
13
13
  import BottomSheet from './BottomSheet';
14
- import { withVariantConfig } from '../../../.storybook/helpers';
15
14
 
16
15
  export default {
17
16
  component: BottomSheet,
@@ -64,57 +63,3 @@ export const Basic: Story = {
64
63
  },
65
64
  },
66
65
  };
67
-
68
- export const BasicMobile: Story = {
69
- ...Basic,
70
- ...withVariantConfig(['mobile'], Basic),
71
- };
72
-
73
- export const WithOverflowContent: Story = {
74
- args: {
75
- children: (
76
- <>
77
- <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
78
- {lorem10}
79
- <NavigationOption
80
- title="Navigation option"
81
- content="Button and icon are vertically centered."
82
- media={<FastFlag size={24} />}
83
- />
84
- <NavigationOption
85
- title="Navigation option"
86
- content="Button and icon are vertically centered."
87
- media={<FastFlag size={24} />}
88
- isContainerAligned
89
- />
90
- {lorem500}
91
- <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
92
- </>
93
- ),
94
- },
95
- parameters: {
96
- chromatic: {
97
- delay: 1000,
98
- },
99
- },
100
- };
101
-
102
- export const WithOverflowContentMobile: Story = {
103
- ...WithOverflowContent,
104
- ...withVariantConfig(['mobile'], WithOverflowContent),
105
- };
106
-
107
- export const WithOverflowContentDark: Story = {
108
- ...WithOverflowContent,
109
- ...withVariantConfig(['dark'], WithOverflowContent),
110
- };
111
-
112
- export const WithOverflowContentDarkMobile: Story = {
113
- ...WithOverflowContent,
114
- ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
115
- };
116
-
117
- export const WithOverflowContentZoom400: Story = {
118
- ...WithOverflowContent,
119
- ...withVariantConfig(['400%'], WithOverflowContent),
120
- };
package/src/common/bottomSheet/BottomSheet.test.story.tsx CHANGED
@@ -1,13 +1,17 @@
1
+ import { action } from 'storybook/actions';
1
2
  import { useState } from 'react';
2
3
  import { Meta, StoryObj } from '@storybook/react-webpack5';
3
4
  import { fireEvent, within } from 'storybook/test';
4
- import { lorem100, lorem500 } from '../../test-utils';
5
+ import { FastFlag } from '@transferwise/icons';
6
+ import { lorem10, lorem100, lorem500 } from '../../test-utils';
5
7
  import { Typography } from '../propsValues/typography';
6
8
  import Alert from '../../alert';
7
9
  import Body from '../../body';
8
10
  import Button from '../../button';
11
+ import NavigationOption from '../../navigationOption';
9
12
  import Title from '../../title';
10
13
  import BottomSheet from './BottomSheet';
14
+ import { withVariantConfig } from '../../../.storybook/helpers';
11
15
 
12
16
  const wait = async (duration = 500) =>
13
17
  new Promise<void>((resolve) => {
@@ -16,7 +20,7 @@ const wait = async (duration = 500) =>
16
20
 
17
21
  export default {
18
22
  component: BottomSheet,
19
- title: 'Dialogs/BottomSheet/tests',
23
+ title: 'Dialogs/BottomSheet/Tests',
20
24
  tags: ['!autodocs'],
21
25
  args: {
22
26
  open: false,
@@ -96,3 +100,115 @@ export const SmoothScrollReset: Story = {
96
100
  );
97
101
  },
98
102
  };
103
+
104
+ const Basic: Story = {
105
+ args: {
106
+ children: (
107
+ <>
108
+ <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
109
+ {lorem10}
110
+ <br />
111
+ <br />
112
+ <NavigationOption
113
+ title="Navigation option"
114
+ content="Button and icon are vertically centered."
115
+ media={<FastFlag size={24} />}
116
+ isContainerAligned
117
+ />
118
+ </>
119
+ ),
120
+ },
121
+ parameters: {
122
+ chromatic: {
123
+ delay: 1000,
124
+ },
125
+ },
126
+ render: (args, { viewMode }) => {
127
+ const [open, setOpen] = useState(viewMode !== 'docs');
128
+
129
+ return (
130
+ <div>
131
+ <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
132
+ <BottomSheet
133
+ {...args}
134
+ open={open}
135
+ onClose={() => {
136
+ setOpen(false);
137
+ action('BottomSheet closed')();
138
+ }}
139
+ />
140
+ </div>
141
+ );
142
+ },
143
+ };
144
+
145
+ export const BasicMobile: Story = {
146
+ ...Basic,
147
+ ...withVariantConfig(['mobile'], Basic),
148
+ };
149
+
150
+ const WithOverflowContent: Story = {
151
+ args: {
152
+ children: (
153
+ <>
154
+ <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
155
+ {lorem10}
156
+ <NavigationOption
157
+ title="Navigation option"
158
+ content="Button and icon are vertically centered."
159
+ media={<FastFlag size={24} />}
160
+ />
161
+ <NavigationOption
162
+ title="Navigation option"
163
+ content="Button and icon are vertically centered."
164
+ media={<FastFlag size={24} />}
165
+ isContainerAligned
166
+ />
167
+ {lorem500}
168
+ <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
169
+ </>
170
+ ),
171
+ },
172
+ parameters: {
173
+ chromatic: {
174
+ delay: 1000,
175
+ },
176
+ },
177
+ render: (args, { viewMode }) => {
178
+ const [open, setOpen] = useState(viewMode !== 'docs');
179
+
180
+ return (
181
+ <div>
182
+ <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
183
+ <BottomSheet
184
+ {...args}
185
+ open={open}
186
+ onClose={() => {
187
+ setOpen(false);
188
+ action('BottomSheet closed')();
189
+ }}
190
+ />
191
+ </div>
192
+ );
193
+ },
194
+ };
195
+
196
+ export const WithOverflowContentMobile: Story = {
197
+ ...WithOverflowContent,
198
+ ...withVariantConfig(['mobile'], WithOverflowContent),
199
+ };
200
+
201
+ export const WithOverflowContentDark: Story = {
202
+ ...WithOverflowContent,
203
+ ...withVariantConfig(['dark'], WithOverflowContent),
204
+ };
205
+
206
+ export const WithOverflowContentDarkMobile: Story = {
207
+ ...WithOverflowContent,
208
+ ...withVariantConfig(['dark', 'mobile'], WithOverflowContent),
209
+ };
210
+
211
+ export const WithOverflowContentZoom400: Story = {
212
+ ...WithOverflowContent,
213
+ ...withVariantConfig(['400%'], WithOverflowContent),
214
+ };
package/src/common/closeButton/CloseButton.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/ring.less";
1
+ @import (reference) "../../styles/less/ring.less";
2
2
 
3
3
  .np-close-button {
4
4
  transition: color 0.15s ease-in-out;
package/src/common/panel/Panel.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
1
+ @import (reference) "../../styles/less/mixins/_theming.less";
2
2
 
3
3
  .np-panel {
4
4
  &__content {
package/src/criticalBanner/CriticalCommsBanner.test.story.tsx CHANGED
@@ -5,7 +5,7 @@ import { withVariantConfig } from '../../.storybook/helpers';
5
5
 
6
6
  export default {
7
7
  component: CriticalCommsBanner,
8
- title: 'Prompts/CriticalCommsBanner/tests',
8
+ title: 'Prompts/CriticalCommsBanner/Tests',
9
9
  tags: ['!autodocs'],
10
10
  } satisfies Meta<typeof CriticalCommsBanner>;
11
11
 
package/src/dateLookup/DateLookup.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
1
+ @import (reference) "./../styles/variables/neptune-tokens.less";
2
2
 
3
3
  .tw-date-lookup-menu {
4
4
  width: 400px;
package/src/dateLookup/DateLookup.story.tsx CHANGED
@@ -1,10 +1,8 @@
1
1
  import { useState } from 'react';
2
- import { userEvent } from 'storybook/test';
3
2
  import { StoryObj } from '@storybook/react-webpack5';
4
3
  import { Field } from '..';
5
4
  import { Size } from '../common';
6
5
  import DateLookup, { type DateLookupProps } from './DateLookup';
7
- import { withVariantConfig } from '../../.storybook/helpers';
8
6
 
9
7
  export default {
10
8
  component: DateLookup,
@@ -54,22 +52,6 @@ export const Basic: Story = {
54
52
  min: thePast,
55
53
  max: theFuture,
56
54
  },
57
- play: async () => {
58
- await userEvent.tab();
59
- await userEvent.keyboard(' ');
60
- },
61
- };
62
- export const Basic400Zoom: Story = {
63
- ...Basic,
64
-
65
- ...withVariantConfig(['400%'], {
66
- ...Basic,
67
- parameters: {
68
- chromatic: {
69
- delay: 2000,
70
- },
71
- },
72
- }),
73
55
  };
74
56
 
75
57
  export const WithField: Story = {
package/src/dateLookup/DateLookup.test.story.tsx CHANGED
@@ -1,9 +1,11 @@
1
- import { StoryFn } from '@storybook/react-webpack5';
1
+ import { StoryFn, StoryObj } from '@storybook/react-webpack5';
2
2
  import { expect, userEvent, within } from 'storybook/test';
3
3
  import { action } from 'storybook/actions';
4
4
  import { useState } from 'react';
5
5
 
6
6
  import DateLookup, { type DateLookupProps } from './DateLookup';
7
+ import { Size } from '../common';
8
+ import { withVariantConfig } from '../../.storybook/helpers';
7
9
 
8
10
  export default {
9
11
  component: DateLookup,
@@ -99,3 +101,51 @@ FocusOnFirstNonDisabledDate.play = async () => {
99
101
  await userEvent.tab();
100
102
  await userEvent.keyboard(' ');
101
103
  };
104
+
105
+ const epoch = new Date('2011-01-01');
106
+ const theFuture = new Date(epoch);
107
+ theFuture.setUTCDate(epoch.getUTCDate() + 10);
108
+ const thePast = new Date(epoch);
109
+ thePast.setUTCDate(epoch.getUTCDate() - 10);
110
+
111
+ const Basic: StoryObj<typeof DateLookup> = {
112
+ render: (args: DateLookupProps) => {
113
+ const [value, setValue] = useState<Date | null>(epoch);
114
+ return (
115
+ <DateLookup
116
+ {...args}
117
+ min={args.min ? new Date(args.min) : thePast}
118
+ max={args.max ? new Date(args.max) : theFuture}
119
+ value={value}
120
+ onChange={(v) => setValue(v)}
121
+ />
122
+ );
123
+ },
124
+ args: {
125
+ size: Size.MEDIUM,
126
+ disabled: false,
127
+ label: 'label',
128
+ monthFormat: 'long',
129
+ placeholder: 'placeholder',
130
+ id: 'date-lookup',
131
+ clearable: true,
132
+ min: thePast,
133
+ max: theFuture,
134
+ },
135
+ play: async () => {
136
+ await userEvent.tab();
137
+ await userEvent.keyboard(' ');
138
+ },
139
+ };
140
+
141
+ export const Basic400Zoom: StoryObj<typeof DateLookup> = {
142
+ ...Basic,
143
+ ...withVariantConfig(['400%'], {
144
+ ...Basic,
145
+ parameters: {
146
+ chromatic: {
147
+ delay: 2000,
148
+ },
149
+ },
150
+ }),
151
+ };
package/src/dateLookup/dateTrigger/DateTrigger.less CHANGED
@@ -1,5 +1,5 @@
1
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
2
- @import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
1
+ @import (reference) "../../styles/variables/neptune-tokens.less";
2
+ @import (reference) "../../styles/less/mixins/_logical-properties.less";
3
3
 
4
4
  .np-date-trigger {
5
5
  overflow: hidden;
package/src/decision/Decision.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
1
+ @import (reference) "./../styles/less/mixins/_logical-properties.less";
2
2
 
3
3
  .np-decision {
4
4
  .decision {
package/src/definitionList/DefinitionList.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
1
+ @import (reference) "./../styles/less/mixins/_logical-properties.less";
2
2
 
3
3
  .tw-definition-list {
4
4
  &__item dd {
package/src/dimmer/Dimmer.less CHANGED
@@ -1,5 +1,5 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";
2
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
1
+ @import (reference) "./../styles/variables/zindex.less";
2
+ @import (reference) "./../styles/less/mixins/_logical-properties.less";
3
3
 
4
4
  // Disables the scroll on the body
5
5
  // Note: might not work in some iOS Safari browsers
package/src/divider/Divider.story.tsx CHANGED
@@ -126,5 +126,4 @@ export const AllVariants: Story = {
126
126
  argTypes: {
127
127
  ...hideControls(['level', 'testId', 'className', 'isContent']),
128
128
  },
129
- tags: ['!autodocs'],
130
129
  };
package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
2
- import * as stories from './ExpressiveMoneyInput.story';
2
+ import * as stories from './ExpressiveMoneyInput.test.story';
3
3
 
4
4
  <Meta title="Forms/ExpressiveMoneyInput/Autofocus" />
5
5
 
package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx CHANGED
@@ -221,12 +221,3 @@ export const WithCustomCurrencySelector = {
221
221
  );
222
222
  },
223
223
  };
224
-
225
- export const WithAutofocus = {
226
- tags: ['!autodocs', '!dev'],
227
- args: {
228
- inlinePrompt: undefined,
229
- autoFocus: true,
230
- },
231
- render: (args: ExpressiveMoneyInputProps) => <ExpressiveMoneyInput {...args} />,
232
- };
package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import ExpressiveMoneyInput, { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
3
+
4
+ const meta: Meta<typeof ExpressiveMoneyInput> = {
5
+ component: ExpressiveMoneyInput,
6
+ tags: ['!autodocs', '!manifest'],
7
+ title: 'Forms/ExpressiveMoneyInput/Tests',
8
+ args: {
9
+ label: 'You send',
10
+ currency: 'GBP',
11
+ amount: 1234.56,
12
+ currencySelector: undefined,
13
+ },
14
+ };
15
+ export default meta;
16
+
17
+ type Story = StoryObj<ExpressiveMoneyInputProps>;
18
+
19
+ export const WithAutofocus: Story = {
20
+ args: {
21
+ autoFocus: true,
22
+ },
23
+ };
package/src/field/Field.story.tsx CHANGED
@@ -102,7 +102,7 @@ export const Basic = (args: FieldProps) => {
102
102
  );
103
103
  };
104
104
 
105
- export const WithStatusMessages = (args: FieldProps) => {
105
+ export const Messages = (args: FieldProps) => {
106
106
  const [value, setValue] = useState<string | undefined>('This is some text');
107
107
  return (
108
108
  <div>
@@ -145,39 +145,6 @@ export const WithStatusMessages = (args: FieldProps) => {
145
145
  >
146
146
  <Input value={value} onChange={({ target }) => setValue(target.value)} />
147
147
  </Field>
148
-
149
- {/* instance with deprecated `hint` prop */}
150
- <Field
151
- label="Text Input with deprecated `hint` prop"
152
- hint="This is a helpful message"
153
- sentiment={Sentiment.NEGATIVE}
154
- message="Validation error, please take a look"
155
- messageIconLabel={args.messageIconLabel}
156
- messageLoading={args.messageLoading}
157
- >
158
- <Input value={value} onChange={({ target }) => setValue(target.value)} />
159
- </Field>
160
-
161
- {/* instance with deprecated `error` & `hint` props */}
162
- <Field
163
- label="Text Input with deprecated `error` & `hint` props"
164
- hint="This is a helpful message"
165
- error="Validation error, please take a look"
166
- messageIconLabel={args.messageIconLabel}
167
- messageLoading={args.messageLoading}
168
- >
169
- <Input value={value} onChange={({ target }) => setValue(target.value)} />
170
- </Field>
171
-
172
- {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
173
- <Field
174
- label="Text Input with Info under the field"
175
- message="This is a helpful message"
176
- messageIconLabel={args.messageIconLabel}
177
- messageLoading={args.messageLoading}
178
- >
179
- <Input value={value} onChange={({ target }) => setValue(target.value)} />
180
- </Field>
181
148
  </div>
182
149
  );
183
150
  };
package/src/field/Field.test.story.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import { useState } from 'react';
2
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
3
+ import { Input } from '../inputs/Input';
4
+ import { Field, FieldProps } from './Field';
5
+ import { Sentiment } from '../common';
6
+
7
+ const meta: Meta<typeof Field> = {
8
+ component: Field,
9
+ tags: ['!autodocs', '!manifest'],
10
+ title: 'Forms/Field/Tests',
11
+ };
12
+ export default meta;
13
+
14
+ type Story = StoryObj<typeof Field>;
15
+
16
+ export const DeprecatedProps: Story = {
17
+ render: (args: FieldProps) => {
18
+ const [value, setValue] = useState<string | undefined>('This is some text');
19
+ return (
20
+ <div>
21
+ {/* instance with deprecated `hint` prop */}
22
+ <Field
23
+ label="Text Input with deprecated `hint` prop"
24
+ hint="This is a helpful message"
25
+ sentiment={Sentiment.NEGATIVE}
26
+ message="Validation error, please take a look"
27
+ messageIconLabel={args.messageIconLabel}
28
+ messageLoading={args.messageLoading}
29
+ >
30
+ <Input value={value} onChange={({ target }) => setValue(target.value)} />
31
+ </Field>
32
+
33
+ {/* instance with deprecated `error` & `hint` props */}
34
+ <Field
35
+ label="Text Input with deprecated `error` & `hint` props"
36
+ hint="This is a helpful message"
37
+ error="Validation error, please take a look"
38
+ messageIconLabel={args.messageIconLabel}
39
+ messageLoading={args.messageLoading}
40
+ >
41
+ <Input value={value} onChange={({ target }) => setValue(target.value)} />
42
+ </Field>
43
+
44
+ {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
45
+ <Field
46
+ label="Text Input with Info under the field"
47
+ message="This is a helpful message"
48
+ messageIconLabel={args.messageIconLabel}
49
+ messageLoading={args.messageLoading}
50
+ >
51
+ <Input value={value} onChange={({ target }) => setValue(target.value)} />
52
+ </Field>
53
+ </div>
54
+ );
55
+ },
56
+ };
package/src/flowNavigation/FlowNavigation.less CHANGED
@@ -1,4 +1,4 @@
1
- @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
1
+ @import (reference) "./../styles/less/addons/_spacing-utilities.less";
2
2
 
3
3
  .np-flow-navigation {
4
4
  width: 100%;
package/src/flowNavigation/FlowNavigation.test.js CHANGED
@@ -86,6 +86,13 @@ describe('FlowNavigation', () => {
86
86
  expect(container.querySelector('.np-flow-navigation__stepper')).not.toBeInTheDocument();
87
87
  });
88
88
 
89
+ it(`renders stepper placeholder when steps is empty`, () => {
90
+ const { container } = render(<FlowNavigation {...props} steps={[]} />);
91
+
92
+ expect(container.querySelector('.np-flow-navigation__stepper')).toBeInTheDocument();
93
+ expect(container.querySelector('.tw-stepper')).not.toBeInTheDocument();
94
+ });
95
+
89
96
  it(`hides label when done is true`, () => {
90
97
  const { rerender } = render(<FlowNavigation {...props} done={false} />);
91
98
 
package/src/flowNavigation/FlowNavigation.tsx CHANGED
@@ -95,13 +95,16 @@ const FlowNavigation = ({
95
95
  </div>
96
96
  }
97
97
  bottomContent={
98
- !done && (
98
+ !done &&
99
+ (steps.length > 0 ? (
99
100
  <Stepper
100
101
  activeStep={activeStep}
101
102
  steps={steps}
102
103
  className={clsx('np-flow-navigation__stepper')}
103
104
  />
104
- )
105
+ ) : (
106
+ <div className="np-flow-navigation__stepper" />
107
+ ))
105
108
  }
106
109
  layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
107
110
  />