@transferwise/components 46.165.5 → 46.167.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (454) hide show
  1. package/build/Body/Body.js +2 -2
  2. package/build/Body/Body.js.map +1 -1
  3. package/build/Body/Body.mjs +2 -2
  4. package/build/Body/Body.mjs.map +1 -1
  5. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +1 -1
  6. package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
  7. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +1 -1
  8. package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
  9. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +1 -1
  10. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
  11. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +1 -1
  12. package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
  13. package/build/Calendar/TableLink/TableLink.js +1 -1
  14. package/build/Calendar/TableLink/TableLink.js.map +1 -1
  15. package/build/Calendar/TableLink/TableLink.mjs +1 -1
  16. package/build/Calendar/TableLink/TableLink.mjs.map +1 -1
  17. package/build/CardContainer/CardContainer.js +34 -0
  18. package/build/CardContainer/CardContainer.js.map +1 -0
  19. package/build/CardContainer/CardContainer.mjs +30 -0
  20. package/build/CardContainer/CardContainer.mjs.map +1 -0
  21. package/build/CardWidget/CardWidget.js +98 -0
  22. package/build/CardWidget/CardWidget.js.map +1 -0
  23. package/build/CardWidget/CardWidget.mjs +94 -0
  24. package/build/CardWidget/CardWidget.mjs.map +1 -0
  25. package/build/CardWidget/CardWidgetAction.js +73 -0
  26. package/build/CardWidget/CardWidgetAction.js.map +1 -0
  27. package/build/CardWidget/CardWidgetAction.mjs +68 -0
  28. package/build/CardWidget/CardWidgetAction.mjs.map +1 -0
  29. package/build/Display/Display.js +3 -1
  30. package/build/Display/Display.js.map +1 -1
  31. package/build/Display/Display.mjs +3 -1
  32. package/build/Display/Display.mjs.map +1 -1
  33. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +1 -1
  34. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
  35. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
  36. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
  37. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
  38. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
  39. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
  40. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
  41. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
  42. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
  43. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
  44. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
  45. package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
  46. package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
  47. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
  48. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
  49. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
  50. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
  51. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
  52. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
  53. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
  54. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
  55. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
  56. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
  57. package/build/Label/Label.js +1 -1
  58. package/build/Label/Label.js.map +1 -1
  59. package/build/Label/Label.mjs +1 -1
  60. package/build/Label/Label.mjs.map +1 -1
  61. package/build/ListItem/ListItem.js +2 -0
  62. package/build/ListItem/ListItem.js.map +1 -1
  63. package/build/ListItem/ListItem.mjs +2 -0
  64. package/build/ListItem/ListItem.mjs.map +1 -1
  65. package/build/Stepper/Stepper.js +3 -2
  66. package/build/Stepper/Stepper.js.map +1 -1
  67. package/build/Stepper/Stepper.mjs +3 -2
  68. package/build/Stepper/Stepper.mjs.map +1 -1
  69. package/build/Table/Header/TableHeader.js +1 -1
  70. package/build/Table/Header/TableHeader.js.map +1 -1
  71. package/build/Table/Header/TableHeader.mjs +1 -1
  72. package/build/Table/Header/TableHeader.mjs.map +1 -1
  73. package/build/Tabs/Tab/Tab.js +1 -1
  74. package/build/Tabs/Tab/Tab.js.map +1 -1
  75. package/build/Tabs/Tab/Tab.mjs +1 -1
  76. package/build/Tabs/Tab/Tab.mjs.map +1 -1
  77. package/build/Tag/Tag.js +1 -1
  78. package/build/Tag/Tag.js.map +1 -1
  79. package/build/Tag/Tag.mjs +1 -1
  80. package/build/Tag/Tag.mjs.map +1 -1
  81. package/build/Title/Title.js +2 -2
  82. package/build/Title/Title.js.map +1 -1
  83. package/build/Title/Title.mjs +2 -2
  84. package/build/Title/Title.mjs.map +1 -1
  85. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
  86. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
  87. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
  88. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
  89. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
  90. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
  91. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
  92. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
  93. package/build/_deprecated/ActionButton/ActionButton.js +1 -1
  94. package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
  95. package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
  96. package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
  97. package/build/_deprecated/Avatar/Avatar.js +1 -1
  98. package/build/_deprecated/Avatar/Avatar.js.map +1 -1
  99. package/build/_deprecated/Avatar/Avatar.mjs +1 -1
  100. package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
  101. package/build/_deprecated/Select/Select.js +2 -2
  102. package/build/_deprecated/Select/Select.js.map +1 -1
  103. package/build/_deprecated/Select/Select.mjs +2 -2
  104. package/build/_deprecated/Select/Select.mjs.map +1 -1
  105. package/build/common/PropsValues/typography.js +6 -0
  106. package/build/common/PropsValues/typography.js.map +1 -1
  107. package/build/common/PropsValues/typography.mjs +6 -0
  108. package/build/common/PropsValues/typography.mjs.map +1 -1
  109. package/build/index.js +4 -0
  110. package/build/index.js.map +1 -1
  111. package/build/index.mjs +2 -0
  112. package/build/index.mjs.map +1 -1
  113. package/build/main.css +9245 -1899
  114. package/build/styles/Accordion/Accordion.css +7 -6
  115. package/build/styles/Body/Body.css +2 -1
  116. package/build/styles/Calendar/Calendar.css +5 -4
  117. package/build/styles/Calendar/TableLink/TableLink.css +5 -4
  118. package/build/styles/CardContainer/CardContainer.css +108 -0
  119. package/build/styles/CardWidget/CardWidget.css +78 -0
  120. package/build/styles/Chips/Chip/Chip.css +5 -3
  121. package/build/styles/Decision/Decision.css +4 -3
  122. package/build/styles/Emphasis/Emphasis.css +1 -1
  123. package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  124. package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  125. package/build/styles/Inputs/Input/Input.css +98 -24
  126. package/build/styles/Inputs/TextArea/TextArea.css +98 -24
  127. package/build/styles/Label/Label.css +3 -0
  128. package/build/styles/ListItem/ListItem.css +8 -0
  129. package/build/styles/Markup/Markup.css +2 -2
  130. package/build/styles/MoneyInput/MoneyInput.css +9 -6
  131. package/build/styles/Nudge/Nudge.css +3 -3
  132. package/build/styles/Popover/Popover.css +30 -7
  133. package/build/styles/ProgressBar/ProgressBar.css +3 -2
  134. package/build/styles/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  135. package/build/styles/Snackbar/Snackbar.css +1 -1
  136. package/build/styles/Table/Table.css +18 -8
  137. package/build/styles/Tabs/Tabs.css +3 -3
  138. package/build/styles/Tag/Tag.css +1 -1
  139. package/build/styles/Tile/Tile.css +4 -3
  140. package/build/styles/Typeahead/Typeahead.css +4 -2
  141. package/build/styles/UploadInput/UploadInput.css +1 -1
  142. package/build/styles/_deprecated/ActionButton/ActionButton.css +3 -4
  143. package/build/styles/_deprecated/Avatar/Avatar.css +2 -2
  144. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  145. package/build/styles/_deprecated/Select/Select.css +49 -14
  146. package/build/styles/_deprecated/Summary/Summary.css +2 -2
  147. package/build/styles/common/Circle/Circle.css +1 -1
  148. package/build/styles/common/Option/Option.css +4 -4
  149. package/build/styles/css/accordion.css +53 -11
  150. package/build/styles/css/badge.css +2 -2
  151. package/build/styles/css/button-groups.css +29 -6
  152. package/build/styles/css/buttons.css +35 -11
  153. package/build/styles/css/decision.css +53 -11
  154. package/build/styles/css/dropdowns.css +65 -18
  155. package/build/styles/css/droppable.css +28 -6
  156. package/build/styles/css/footer.css +41 -10
  157. package/build/styles/css/input-groups.css +249 -117
  158. package/build/styles/css/list-group.css +28 -8
  159. package/build/styles/css/modals.css +1 -1
  160. package/build/styles/css/navbar.css +92 -45
  161. package/build/styles/css/navs.css +8 -8
  162. package/build/styles/css/neptune-addons.css +15 -0
  163. package/build/styles/css/neptune-core.css +6230 -525
  164. package/build/styles/css/neptune.css +8790 -1768
  165. package/build/styles/css/panels.css +2 -2
  166. package/build/styles/css/popovers.css +64 -20
  167. package/build/styles/css/progress-bars.css +2 -2
  168. package/build/styles/css/sequences.css +14 -9
  169. package/build/styles/css/table.css +7 -7
  170. package/build/styles/css/tooltip.css +28 -6
  171. package/build/styles/less/legacy-variables.less +3 -3
  172. package/build/styles/less/neptune-tokens.less +0 -48
  173. package/build/styles/main.css +9245 -1899
  174. package/build/styles/props/neptune-tokens.css +805 -3
  175. package/build/styles/styles/less/accordion.css +53 -11
  176. package/build/styles/styles/less/badge.css +2 -2
  177. package/build/styles/styles/less/button-groups.css +29 -6
  178. package/build/styles/styles/less/buttons.css +35 -11
  179. package/build/styles/styles/less/decision.css +53 -11
  180. package/build/styles/styles/less/dropdowns.css +65 -18
  181. package/build/styles/styles/less/droppable.css +28 -6
  182. package/build/styles/styles/less/footer.css +41 -10
  183. package/build/styles/styles/less/forms/bootstrap-forms.css +153 -100
  184. package/build/styles/styles/less/forms/checkbox-radio.css +3 -3
  185. package/build/styles/styles/less/input-groups.css +249 -117
  186. package/build/styles/styles/less/list-group.css +28 -8
  187. package/build/styles/styles/less/modals.css +1 -1
  188. package/build/styles/styles/less/navbar.css +92 -45
  189. package/build/styles/styles/less/navs.css +8 -8
  190. package/build/styles/styles/less/neptune-addons.css +15 -0
  191. package/build/styles/styles/less/neptune-core.css +6230 -525
  192. package/build/styles/styles/less/neptune.css +8790 -1768
  193. package/build/styles/styles/less/panels.css +2 -2
  194. package/build/styles/styles/less/popovers.css +64 -20
  195. package/build/styles/styles/less/progress-bars.css +2 -2
  196. package/build/styles/styles/less/sequences.css +14 -9
  197. package/build/styles/styles/less/table.css +7 -7
  198. package/build/styles/styles/less/tooltip.css +28 -6
  199. package/build/types/Body/Body.d.ts +2 -2
  200. package/build/types/Body/Body.d.ts.map +1 -1
  201. package/build/types/CardContainer/CardContainer.d.ts +8 -0
  202. package/build/types/CardContainer/CardContainer.d.ts.map +1 -0
  203. package/build/types/CardContainer/CardContainer.types.d.ts +55 -0
  204. package/build/types/CardContainer/CardContainer.types.d.ts.map +1 -0
  205. package/build/types/CardContainer/_stories/helpers.d.ts +3 -0
  206. package/build/types/CardContainer/_stories/helpers.d.ts.map +1 -0
  207. package/build/types/CardContainer/index.d.ts +3 -0
  208. package/build/types/CardContainer/index.d.ts.map +1 -0
  209. package/build/types/CardWidget/CardWidget.d.ts +10 -0
  210. package/build/types/CardWidget/CardWidget.d.ts.map +1 -0
  211. package/build/types/CardWidget/CardWidget.types.d.ts +55 -0
  212. package/build/types/CardWidget/CardWidget.types.d.ts.map +1 -0
  213. package/build/types/CardWidget/CardWidgetAction.d.ts +54 -0
  214. package/build/types/CardWidget/CardWidgetAction.d.ts.map +1 -0
  215. package/build/types/CardWidget/index.d.ts +4 -0
  216. package/build/types/CardWidget/index.d.ts.map +1 -0
  217. package/build/types/Display/Display.d.ts.map +1 -1
  218. package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
  219. package/build/types/IconButton/IconButton.d.ts +1 -1
  220. package/build/types/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -1
  221. package/build/types/Inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -1
  222. package/build/types/ListItem/ListItem.d.ts +1 -1
  223. package/build/types/ListItem/ListItem.d.ts.map +1 -1
  224. package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
  225. package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
  226. package/build/types/Stepper/Stepper.d.ts.map +1 -1
  227. package/build/types/Tabs/Tab/Tab.d.ts.map +1 -1
  228. package/build/types/Title/Title.d.ts +2 -2
  229. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
  230. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts.map +1 -1
  231. package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
  232. package/build/types/_deprecated/Select/Select.d.ts.map +1 -1
  233. package/build/types/common/PropsValues/typography.d.ts +13 -1
  234. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  235. package/build/types/index.d.ts +4 -0
  236. package/build/types/index.d.ts.map +1 -1
  237. package/package.json +4 -4
  238. package/src/Accordion/Accordion.css +7 -6
  239. package/src/Accordion/Accordion.less +7 -6
  240. package/src/Body/Body.css +2 -1
  241. package/src/Body/Body.less +2 -1
  242. package/src/Body/Body.test.tsx +13 -4
  243. package/src/Body/Body.tsx +4 -3
  244. package/src/Body/_stories/Body.test.story.tsx +42 -0
  245. package/src/Calendar/Calendar.css +5 -4
  246. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  247. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  248. package/src/Calendar/TableLink/TableLink.css +5 -4
  249. package/src/Calendar/TableLink/TableLink.less +5 -4
  250. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  251. package/src/Calendar/_stories/Calendar.test.story.tsx +33 -0
  252. package/src/CardContainer/CardContainer.css +108 -0
  253. package/src/CardContainer/CardContainer.less +171 -0
  254. package/src/CardContainer/CardContainer.test.tsx +150 -0
  255. package/src/CardContainer/CardContainer.tsx +51 -0
  256. package/src/CardContainer/CardContainer.types.ts +62 -0
  257. package/src/CardContainer/_stories/CardContainer.story.tsx +167 -0
  258. package/src/CardContainer/_stories/CardContainer.test.story.tsx +103 -0
  259. package/src/CardContainer/_stories/helpers.tsx +50 -0
  260. package/src/CardContainer/index.ts +6 -0
  261. package/src/CardWidget/CardWidget.css +78 -0
  262. package/src/CardWidget/CardWidget.less +107 -0
  263. package/src/CardWidget/CardWidget.test.tsx +221 -0
  264. package/src/CardWidget/CardWidget.tsx +78 -0
  265. package/src/CardWidget/CardWidget.types.ts +63 -0
  266. package/src/CardWidget/CardWidgetAction.tsx +128 -0
  267. package/src/CardWidget/_stories/CardWidget.story.tsx +238 -0
  268. package/src/CardWidget/_stories/CardWidget.test.story.tsx +350 -0
  269. package/src/CardWidget/index.ts +3 -0
  270. package/src/Chips/Chip/Chip.css +5 -3
  271. package/src/Chips/Chip/Chip.less +3 -2
  272. package/src/CircularButton/_stories/CircularButton.story.tsx +6 -16
  273. package/src/DateInput/_stories/DateInput.rtl.test.story.tsx +45 -0
  274. package/src/Decision/Decision.css +4 -3
  275. package/src/Decision/Decision.less +4 -3
  276. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  277. package/src/Display/Display.test.tsx +43 -0
  278. package/src/Display/Display.tsx +11 -1
  279. package/src/Display/_stories/Display.story.tsx +36 -21
  280. package/src/Display/_stories/Display.test.story.tsx +108 -0
  281. package/src/Emphasis/Emphasis.css +1 -1
  282. package/src/Emphasis/Emphasis.less +1 -1
  283. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  284. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less +2 -1
  285. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +1 -4
  286. package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  287. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  288. package/src/Inputs/Input/Input.css +98 -24
  289. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +4 -2
  290. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  291. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  292. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +6 -2
  293. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  294. package/src/Inputs/TextArea/TextArea.css +98 -24
  295. package/src/Inputs/_common.less +16 -10
  296. package/src/Label/Label.css +3 -0
  297. package/src/Label/Label.less +8 -0
  298. package/src/Label/Label.tsx +1 -1
  299. package/src/ListItem/ListItem.css +8 -0
  300. package/src/ListItem/ListItem.less +8 -0
  301. package/src/ListItem/ListItem.test.tsx +20 -0
  302. package/src/ListItem/ListItem.tsx +3 -1
  303. package/src/ListItem/_stories/ListItem.layout.test.story.tsx +1 -1
  304. package/src/ListItem/_stories/ListItem.story.tsx +1 -1
  305. package/src/Markup/Markup.css +2 -2
  306. package/src/Markup/Markup.less +2 -2
  307. package/src/MoneyInput/MoneyInput.css +9 -6
  308. package/src/MoneyInput/MoneyInput.less +10 -7
  309. package/src/Nudge/Nudge.css +3 -3
  310. package/src/Nudge/Nudge.less +3 -3
  311. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  312. package/src/Popover/Popover.css +30 -7
  313. package/src/Popover/Popover.less +2 -2
  314. package/src/ProgressBar/ProgressBar.css +3 -2
  315. package/src/ProgressBar/ProgressBar.less +12 -11
  316. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.docs.mdx +122 -0
  317. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +0 -2
  318. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  319. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +2 -1
  320. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  321. package/src/Snackbar/Snackbar.css +1 -1
  322. package/src/Snackbar/Snackbar.less +1 -1
  323. package/src/Stepper/Stepper.tsx +4 -2
  324. package/src/Table/Header/TableHeader.tsx +1 -1
  325. package/src/Table/StatusText/TableStatusText.test.tsx +20 -5
  326. package/src/Table/Table.css +18 -8
  327. package/src/Table/Table.less +20 -9
  328. package/src/Tabs/Tab/Tab.tsx +11 -5
  329. package/src/Tabs/Tabs.css +3 -3
  330. package/src/Tabs/Tabs.less +3 -3
  331. package/src/Tag/Tag.css +1 -1
  332. package/src/Tag/Tag.less +1 -1
  333. package/src/Tag/Tag.tsx +1 -1
  334. package/src/Tag/_stories/Tag.story.tsx +1 -1
  335. package/src/Tile/Tile.css +4 -3
  336. package/src/Tile/Tile.less +4 -3
  337. package/src/Title/Title.test.tsx +22 -3
  338. package/src/Title/Title.tsx +2 -2
  339. package/src/Typeahead/Typeahead.css +4 -2
  340. package/src/Typeahead/Typeahead.less +2 -1
  341. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  342. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +4 -2
  343. package/src/UploadInput/UploadInput.css +1 -1
  344. package/src/UploadInput/UploadInput.less +7 -4
  345. package/src/_deprecated/ActionButton/ActionButton.css +3 -4
  346. package/src/_deprecated/ActionButton/ActionButton.less +4 -5
  347. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  348. package/src/_deprecated/Avatar/Avatar.css +2 -2
  349. package/src/_deprecated/Avatar/Avatar.less +2 -2
  350. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  351. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  352. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +2 -1
  353. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  354. package/src/_deprecated/Select/Select.css +49 -14
  355. package/src/_deprecated/Select/Select.less +14 -10
  356. package/src/_deprecated/Select/Select.test.tsx +16 -0
  357. package/src/_deprecated/Select/Select.tsx +6 -1
  358. package/src/_deprecated/Summary/Summary.css +2 -2
  359. package/src/_deprecated/Summary/Summary.less +2 -2
  360. package/src/common/Circle/Circle.css +1 -1
  361. package/src/common/Circle/Circle.less +1 -1
  362. package/src/common/Option/Option.css +4 -4
  363. package/src/common/Option/Option.less +4 -4
  364. package/src/common/PropsValues/typography.ts +20 -1
  365. package/src/index.ts +13 -0
  366. package/src/main.css +9245 -1899
  367. package/src/main.less +5 -2
  368. package/src/styles/less/accordion.css +53 -11
  369. package/src/styles/less/addons/_background-utilities.less +5 -0
  370. package/src/styles/less/badge.css +2 -2
  371. package/src/styles/less/badge.less +2 -2
  372. package/src/styles/less/button-groups.css +29 -6
  373. package/src/styles/less/button-groups.less +3 -2
  374. package/src/styles/less/buttons.css +35 -11
  375. package/src/styles/less/buttons.less +7 -7
  376. package/src/styles/less/core/_fonts.less +7 -75
  377. package/src/styles/less/core/_scaffolding.less +4 -4
  378. package/src/styles/less/core/_typography-utilities.less +3 -3
  379. package/src/styles/less/core/_typography.less +91 -236
  380. package/src/styles/less/core/fonts/_fonts-ar.less +86 -0
  381. package/src/styles/less/core/fonts/_fonts-base.less +99 -0
  382. package/src/styles/less/core/fonts/_fonts-he.less +8 -0
  383. package/src/styles/less/core/fonts/_fonts-ja.less +4247 -0
  384. package/src/styles/less/core/fonts/_fonts-ko.less +1079 -0
  385. package/src/styles/less/core/fonts/_fonts-th.less +8 -0
  386. package/src/styles/less/core/fonts/_fonts-zh.less +872 -0
  387. package/src/styles/less/decision.css +53 -11
  388. package/src/styles/less/decision.less +2 -2
  389. package/src/styles/less/dropdowns.css +65 -18
  390. package/src/styles/less/dropdowns.less +8 -7
  391. package/src/styles/less/droppable.css +28 -6
  392. package/src/styles/less/droppable.less +4 -4
  393. package/src/styles/less/footer.css +41 -10
  394. package/src/styles/less/footer.less +4 -3
  395. package/src/styles/less/forms/bootstrap-forms.css +153 -100
  396. package/src/styles/less/forms/bootstrap-forms.less +85 -72
  397. package/src/styles/less/forms/checkbox-radio.css +3 -3
  398. package/src/styles/less/forms/checkbox-radio.less +3 -3
  399. package/src/styles/less/input-groups.css +249 -117
  400. package/src/styles/less/input-groups.less +23 -9
  401. package/src/styles/less/list-group.css +28 -8
  402. package/src/styles/less/list-group.less +8 -5
  403. package/src/styles/less/mixins/_reset-text.less +1 -1
  404. package/src/styles/less/mixins/_text-emphasis.less +7 -1
  405. package/src/styles/less/modals.css +1 -1
  406. package/src/styles/less/modals.less +1 -1
  407. package/src/styles/less/navbar.css +92 -45
  408. package/src/styles/less/navbar.less +19 -19
  409. package/src/styles/less/navs.css +8 -8
  410. package/src/styles/less/navs.less +8 -8
  411. package/src/styles/less/neptune-addons.css +15 -0
  412. package/src/styles/less/neptune-core.css +6230 -525
  413. package/src/styles/less/neptune.bundle.less +4 -0
  414. package/src/styles/less/neptune.css +8790 -1768
  415. package/src/styles/less/panels.css +2 -2
  416. package/src/styles/less/panels.less +2 -2
  417. package/src/styles/less/popovers.css +64 -20
  418. package/src/styles/less/popovers.less +7 -7
  419. package/src/styles/less/progress-bars.css +2 -2
  420. package/src/styles/less/progress-bars.less +2 -2
  421. package/src/styles/less/sequences.css +14 -9
  422. package/src/styles/less/sequences.less +15 -10
  423. package/src/styles/less/table.css +7 -7
  424. package/src/styles/less/table.less +7 -7
  425. package/src/styles/less/tooltip.css +28 -6
  426. package/src/styles/less/tooltip.less +1 -1
  427. package/src/styles/variables/legacy-variables.less +3 -3
  428. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  429. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  430. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  431. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  432. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  433. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  434. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  435. package/build/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  436. package/build/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  437. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  438. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  439. package/build/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  440. package/build/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
  441. package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx +0 -66
  442. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  443. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  444. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  445. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  446. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  447. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  448. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  449. package/src/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  450. package/src/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  451. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  452. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  453. package/src/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  454. package/src/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
package/src/CardWidget/_stories/CardWidget.story.tsx ADDED
@@ -0,0 +1,238 @@
1
+ import { Plus, Settings } from '@transferwise/icons';
2
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
3
+
4
+ import {
5
+ createSandboxStory,
6
+ globalScope,
7
+ } from '../../../.storybook/components/sandbox/SandboxEditor';
8
+ import Body from '../../Body';
9
+ import type { CardContainerSpotlight } from '../../CardContainer';
10
+ import { CardsList, SampleContent } from '../../CardContainer/_stories/helpers';
11
+ import { Typography } from '../../common';
12
+ import CardWidget from '..';
13
+
14
+ /**
15
+ * A `CardContainer` with an optional header above its content. The `header` prop takes a `title`,
16
+ * a `titleAction` that turns the title into a link, and up to two actions.
17
+ */
18
+ const meta: Meta<typeof CardWidget> = {
19
+ component: CardWidget,
20
+ title: 'Layouts/CardWidget',
21
+ tags: ['early-access'],
22
+ argTypes: {
23
+ header: {
24
+ control: 'object',
25
+ table: { type: { summary: 'CardWidgetHeader' } },
26
+ },
27
+ spotlight: {
28
+ control: 'radio',
29
+ options: [undefined, 'active', 'inactive'],
30
+ table: {
31
+ defaultValue: { summary: 'undefined' },
32
+ type: { summary: 'CardContainerSpotlight' },
33
+ },
34
+ },
35
+ as: {
36
+ control: 'radio',
37
+ options: ['div', 'section', 'article'],
38
+ table: { defaultValue: { summary: "'div'" }, type: { summary: 'string' } },
39
+ },
40
+ children: {
41
+ control: false,
42
+ table: { type: { summary: 'ReactNode' } },
43
+ },
44
+ className: { control: 'text', table: { type: { summary: 'string' } } },
45
+ 'data-testid': { control: 'text', table: { type: { summary: 'string' } } },
46
+ },
47
+ args: {
48
+ spotlight: 'active',
49
+ as: 'div',
50
+ header: {
51
+ title: 'Cards',
52
+ titleAction: { href: '#cards' },
53
+ action: { label: 'Order card' },
54
+ },
55
+ },
56
+ };
57
+
58
+ export default meta;
59
+
60
+ type Story = StoryObj<typeof CardWidget>;
61
+
62
+ /** Experiment with the widget's props. */
63
+ export const Playground: Story = {
64
+ render: (args) => (
65
+ <div style={{ maxWidth: '480px' }}>
66
+ <CardWidget {...args}>
67
+ <SampleContent />
68
+ </CardWidget>
69
+ </div>
70
+ ),
71
+ };
72
+
73
+ export const Sandbox = createSandboxStory({
74
+ code: `<CardWidget
75
+ spotlight="active"
76
+ header={{
77
+ title: 'Cards',
78
+ titleAction: { href: '#cards' },
79
+ action: { label: 'Order card' },
80
+ }}
81
+ >
82
+ <Body>Your virtual card is ready to use.</Body>
83
+ <Body>Spend in 40+ currencies with the real exchange rate.</Body>
84
+ </CardWidget>`,
85
+ scope: { ...globalScope, CardWidget },
86
+ });
87
+
88
+ /** `titleAction` turns the title into a link to the widget's own screen and appends a chevron. */
89
+ export const TitleLink: Story = {
90
+ parameters: { controls: { disable: true } },
91
+ render: () => (
92
+ <CardWidget header={{ title: 'Cards', titleAction: { href: '#cards' } }}>
93
+ <SampleContent />
94
+ </CardWidget>
95
+ ),
96
+ };
97
+
98
+ /**
99
+ * An action object with a `label` renders a small button, and one with only an `icon` a 32px icon
100
+ * button, which requires an `aria-label`. `actionSecondary` renders before `action` at a lower
101
+ * emphasis; two actions is the maximum, to keep the title legible. When the header is 360px wide
102
+ * or narrower, the actions move under a title that doesn't fit beside them on one line.
103
+ */
104
+ export const Actions: Story = {
105
+ parameters: { controls: { disable: true } },
106
+ render: () => {
107
+ const header = {
108
+ title: 'Cards',
109
+ titleAction: { href: '#cards' },
110
+ action: { label: 'Order card', icon: <Plus size={16} /> },
111
+ actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
112
+ };
113
+ return (
114
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
115
+ <CardWidget header={header}>
116
+ <SampleContent />
117
+ </CardWidget>
118
+
119
+ <div style={{ width: '320px' }}>
120
+ <CardWidget header={header}>
121
+ <SampleContent />
122
+ </CardWidget>
123
+ </div>
124
+ </div>
125
+ );
126
+ },
127
+ };
128
+
129
+ /** A title too long for its line wraps. A linked title keeps its chevron after its last word. */
130
+ export const LongTitle: Story = {
131
+ parameters: { controls: { disable: true } },
132
+ render: () => (
133
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
134
+ <CardWidget header={{ title: 'Cards, accounts and everything else you hold with us' }}>
135
+ <SampleContent />
136
+ </CardWidget>
137
+
138
+ <CardWidget
139
+ header={{
140
+ title: 'Cards, accounts and everything else you hold with us',
141
+ titleAction: { href: '#cards' },
142
+ action: { label: 'Order card', icon: <Plus size={16} /> },
143
+ actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
144
+ }}
145
+ >
146
+ <SampleContent />
147
+ </CardWidget>
148
+ </div>
149
+ ),
150
+ };
151
+
152
+ /** The action slots also take any node, for content the button actions do not cover. */
153
+ export const CustomAction: Story = {
154
+ parameters: { controls: { disable: true } },
155
+ render: () => (
156
+ <CardWidget
157
+ header={{
158
+ title: 'Balance',
159
+ action: (
160
+ <Body as="span" type={Typography.BODY_DEFAULT_BOLD}>
161
+ £1,240.00
162
+ </Body>
163
+ ),
164
+ }}
165
+ >
166
+ <SampleContent />
167
+ </CardWidget>
168
+ ),
169
+ };
170
+
171
+ /** A header followed by a list, as in a dashboard's cards module. */
172
+ export const WithList: Story = {
173
+ parameters: { controls: { disable: true } },
174
+ render: () => (
175
+ <CardWidget
176
+ header={{
177
+ title: 'Cards',
178
+ titleAction: { href: '#cards' },
179
+ action: { label: 'New card', icon: <Plus size={16} /> },
180
+ }}
181
+ >
182
+ <CardsList />
183
+ </CardWidget>
184
+ ),
185
+ };
186
+
187
+ /**
188
+ * The card shows as hovered or pressed while the title link is, and as hovered while the link has
189
+ * keyboard focus. Hovering or pressing the rest of
190
+ * the card, or its actions, leaves it at rest.
191
+ */
192
+ export const Interactive: Story = {
193
+ parameters: { controls: { disable: true } },
194
+ render: () => (
195
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
196
+ {([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
197
+ (spotlight) => (
198
+ <CardWidget
199
+ key={spotlight ?? 'none'}
200
+ spotlight={spotlight}
201
+ header={{
202
+ title: `Spotlight: ${spotlight ?? 'not set'}`,
203
+ titleAction: { href: '#cards' },
204
+ action: { label: 'Order card', icon: <Plus size={16} /> },
205
+ actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
206
+ }}
207
+ >
208
+ <Body>Your virtual card is ready to use.</Body>
209
+ </CardWidget>
210
+ ),
211
+ )}
212
+ </div>
213
+ ),
214
+ };
215
+
216
+ /** The same header on each spotlight. */
217
+ export const Spotlight: Story = {
218
+ parameters: { controls: { disable: true } },
219
+ render: () => (
220
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
221
+ {([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
222
+ (spotlight) => (
223
+ <CardWidget
224
+ key={spotlight ?? 'none'}
225
+ spotlight={spotlight}
226
+ header={{
227
+ title: `Spotlight: ${spotlight ?? 'not set'}`,
228
+ titleAction: { href: '#cards' },
229
+ action: { label: 'Order card', icon: <Plus size={16} /> },
230
+ }}
231
+ >
232
+ <SampleContent />
233
+ </CardWidget>
234
+ ),
235
+ )}
236
+ </div>
237
+ ),
238
+ };
package/src/CardWidget/_stories/CardWidget.test.story.tsx ADDED
@@ -0,0 +1,350 @@
1
+ import { Card, Jar, Plus, Settings, Travel } from '@transferwise/icons';
2
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
3
+ import { useTheme } from '@wise/components-theming';
4
+
5
+ import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
6
+ import { withVariantConfig } from '../../../.storybook/helpers';
7
+ import Body from '../../Body';
8
+ import type { CardContainerSpotlight } from '../../CardContainer';
9
+ import List from '../../List';
10
+ import ListItem from '../../ListItem';
11
+ import type { ListItemProps } from '../../ListItem';
12
+ import Title from '../../Title';
13
+ import CardWidget from '..';
14
+ import type { CardWidgetProps } from '..';
15
+
16
+ const meta: Meta<typeof CardWidget> = {
17
+ component: CardWidget,
18
+ tags: ['!autodocs', '!manifest'],
19
+ title: 'Layouts/CardWidget/Tests',
20
+ };
21
+ export default meta;
22
+ type Story = StoryObj<CardWidgetProps>;
23
+
24
+ const SPOTLIGHTS: (CardContainerSpotlight | undefined)[] = [undefined, 'active', 'inactive'];
25
+
26
+ const ACTIONS = {
27
+ action: { label: 'Order card', icon: <Plus size={16} /> },
28
+ actionSecondary: { 'aria-label': 'Settings', icon: <Settings size={16} /> },
29
+ };
30
+
31
+ const ThemeTitle = () => {
32
+ const { theme, screenMode } = useTheme();
33
+ return (
34
+ <Title type="title-subsection">
35
+ {theme} / {screenMode}
36
+ </Title>
37
+ );
38
+ };
39
+
40
+ /** A full header on every spotlight against every theme. */
41
+ export const AllVariants: Story = {
42
+ ...withVariantConfig([
43
+ 'default',
44
+ 'dark',
45
+ 'bright-green',
46
+ 'forest-green',
47
+ 'business',
48
+ 'business--bright-green',
49
+ 'business--forest-green',
50
+ 'platform',
51
+ 'platform--forest-green',
52
+ ]),
53
+ render: () => (
54
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
55
+ <ThemeTitle />
56
+ {SPOTLIGHTS.map((spotlight) => (
57
+ <CardWidget
58
+ key={spotlight ?? 'none'}
59
+ spotlight={spotlight}
60
+ header={{
61
+ title: `Spotlight: ${spotlight ?? 'not set'}`,
62
+ titleAction: { href: '#target' },
63
+ ...ACTIONS,
64
+ }}
65
+ >
66
+ <Body>First line of content.</Body>
67
+ <Body>Second line, to show the content stacks flush.</Body>
68
+ </CardWidget>
69
+ ))}
70
+ </div>
71
+ ),
72
+ };
73
+
74
+ /** Every combination of title link and the two action slots. */
75
+ export const HeaderCombinations: Story = {
76
+ render: () => (
77
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
78
+ <CardWidget header={{ title: 'Title only' }}>
79
+ <Body>Content</Body>
80
+ </CardWidget>
81
+
82
+ <CardWidget header={{ title: 'Title as link', titleAction: { href: '#target' } }}>
83
+ <Body>Content</Body>
84
+ </CardWidget>
85
+
86
+ <CardWidget
87
+ header={{
88
+ title:
89
+ 'A title link long enough to wrap onto a second line, with its chevron after the last word',
90
+ titleAction: { href: '#target' },
91
+ }}
92
+ >
93
+ <Body>Content</Body>
94
+ </CardWidget>
95
+
96
+ <CardWidget header={{ title: 'Leading action only', action: { label: 'Order card' } }}>
97
+ <Body>Content</Body>
98
+ </CardWidget>
99
+
100
+ <CardWidget header={{ title: 'Secondary action only', actionSecondary: { label: 'Manage' } }}>
101
+ <Body>Content</Body>
102
+ </CardWidget>
103
+
104
+ <CardWidget
105
+ header={{
106
+ title: 'Both actions, icon only',
107
+ action: { 'aria-label': 'Add', icon: <Plus size={16} /> },
108
+ actionSecondary: ACTIONS.actionSecondary,
109
+ }}
110
+ >
111
+ <Body>Content</Body>
112
+ </CardWidget>
113
+
114
+ <CardWidget
115
+ header={{
116
+ title: 'A title long enough to wrap onto more than a single line next to its actions',
117
+ titleAction: { href: '#target' },
118
+ ...ACTIONS,
119
+ }}
120
+ >
121
+ <Body>Content</Body>
122
+ </CardWidget>
123
+
124
+ <CardWidget header={{ title: 'Header only', action: { label: 'Order card' } }} />
125
+
126
+ <CardWidget>
127
+ <Body>No header — the content starts at the card&apos;s top padding.</Body>
128
+ </CardWidget>
129
+ </div>
130
+ ),
131
+ };
132
+
133
+ const LIST_ITEMS = [
134
+ { title: '•••• 1582', subtitle: 'Current account', icon: <Card /> },
135
+ { title: '•••• 9982', subtitle: 'Jar', icon: <Jar /> },
136
+ { title: '•••• 5507', subtitle: 'Travel', icon: <Travel /> },
137
+ ];
138
+
139
+ const CardListItem = ({
140
+ index,
141
+ spotlight,
142
+ }: {
143
+ index: number;
144
+ spotlight?: ListItemProps['spotlight'];
145
+ }) => {
146
+ const { title, subtitle, icon } = LIST_ITEMS[index];
147
+ return (
148
+ <ListItem
149
+ title={title}
150
+ subtitle={subtitle}
151
+ spotlight={spotlight}
152
+ media={<ListItem.AvatarView>{icon}</ListItem.AvatarView>}
153
+ control={<ListItem.Navigation href={`#item-${index}`} />}
154
+ />
155
+ );
156
+ };
157
+
158
+ /**
159
+ * A `List` with every mix of spotlight and non-spotlight items. Non-spotlight items draw their
160
+ * hover and focus backgrounds 8px out of bounds, into the card's padding.
161
+ */
162
+ export const ListCombinations: Story = {
163
+ render: () => (
164
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
165
+ <CardWidget header={{ title: 'Non-spotlight items', titleAction: { href: '#target' } }}>
166
+ <List>
167
+ <CardListItem index={0} />
168
+ <CardListItem index={1} />
169
+ <CardListItem index={2} />
170
+ </List>
171
+ </CardWidget>
172
+
173
+ <CardWidget header={{ title: 'Active spotlight items' }}>
174
+ <List>
175
+ <CardListItem index={0} spotlight="active" />
176
+ <CardListItem index={1} spotlight="active" />
177
+ </List>
178
+ </CardWidget>
179
+
180
+ <CardWidget header={{ title: 'Inactive spotlight items' }}>
181
+ <List>
182
+ <CardListItem index={0} spotlight="inactive" />
183
+ <CardListItem index={1} spotlight="inactive" />
184
+ </List>
185
+ </CardWidget>
186
+
187
+ <CardWidget header={{ title: 'Active and inactive spotlight items' }}>
188
+ <List>
189
+ <CardListItem index={0} spotlight="active" />
190
+ <CardListItem index={1} spotlight="inactive" />
191
+ </List>
192
+ </CardWidget>
193
+
194
+ <CardWidget header={{ title: 'Spotlight and non-spotlight items', action: ACTIONS.action }}>
195
+ <List>
196
+ <CardListItem index={0} spotlight="active" />
197
+ <CardListItem index={1} />
198
+ <CardListItem index={2} />
199
+ </List>
200
+ </CardWidget>
201
+
202
+ <CardWidget
203
+ spotlight="active"
204
+ header={{ title: 'Single non-spotlight item in an active card' }}
205
+ >
206
+ <List>
207
+ <CardListItem index={0} />
208
+ </List>
209
+ </CardWidget>
210
+
211
+ <CardWidget
212
+ spotlight="inactive"
213
+ header={{ title: 'Single spotlight item in an inactive card' }}
214
+ >
215
+ <List>
216
+ <CardListItem index={0} spotlight="active" />
217
+ </List>
218
+ </CardWidget>
219
+
220
+ <CardWidget>
221
+ <List>
222
+ <CardListItem index={0} />
223
+ <CardListItem index={1} />
224
+ </List>
225
+ </CardWidget>
226
+ </div>
227
+ ),
228
+ };
229
+
230
+ /**
231
+ * Two spotlighted widgets side by side: one with a title-only header and text, the other with
232
+ * action buttons and a `List`. Each header is at least as tall as the 32px action buttons, so the
233
+ * first line of content starts at the same height in both.
234
+ */
235
+ export const SideBySide: Story = {
236
+ render: () => (
237
+ <div style={{ display: 'flex', gap: '24px', maxWidth: '900px' }}>
238
+ <div style={{ flex: 1 }}>
239
+ <CardWidget spotlight="active" header={{ title: 'Balance' }}>
240
+ <Body>Your virtual card is ready to use.</Body>
241
+ <Body>Spend in 40+ currencies with the real exchange rate.</Body>
242
+ </CardWidget>
243
+ </div>
244
+ <div style={{ flex: 1 }}>
245
+ <CardWidget
246
+ spotlight="active"
247
+ header={{ title: 'Cards', titleAction: { href: '#target' }, ...ACTIONS }}
248
+ >
249
+ <List>
250
+ <CardListItem index={0} />
251
+ <CardListItem index={1} />
252
+ <CardListItem index={2} />
253
+ </List>
254
+ </CardWidget>
255
+ </div>
256
+ </div>
257
+ ),
258
+ };
259
+
260
+ /**
261
+ * When the header is 360px wide or narrower, its action corner stays beside a title that fits on
262
+ * one line next to it, and moves under a longer title. Above that width, a long title wraps beside
263
+ * the actions instead.
264
+ */
265
+ export const NarrowHeader: Story = {
266
+ render: () => (
267
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
268
+ {[320, 394, 420].map((width) => (
269
+ <div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width }}>
270
+ {['Cards', `A longer title in a card ${width}px wide`].map((title) => (
271
+ <CardWidget
272
+ key={title}
273
+ spotlight="active"
274
+ header={{ title, titleAction: { href: '#target' }, ...ACTIONS }}
275
+ >
276
+ <Body>Content</Body>
277
+ </CardWidget>
278
+ ))}
279
+ </div>
280
+ ))}
281
+ </div>
282
+ ),
283
+ };
284
+
285
+ /**
286
+ * In RTL the action cluster should move to the left and the title's trailing chevron should point
287
+ * left. The `actionSecondary` slot must stay on the inline-start side of `action` in both
288
+ * directions.
289
+ *
290
+ * Every widget is rendered wide (480px, actions beside the title) and narrow (320px). At 320px the
291
+ * short titles keep their actions beside them, and the long title's actions stack under it,
292
+ * aligned to the inline end. The long title wraps, so its chevron should follow the last word on
293
+ * the inline-end side in both directions.
294
+ */
295
+ export const RTLDiff: Story = {
296
+ render: () => {
297
+ const i18n = useRtlDiffI18n();
298
+ const actions = {
299
+ action: { label: i18n.orderCard, icon: <Plus size={16} /> },
300
+ actionSecondary: { 'aria-label': i18n.settings, icon: <Settings size={16} /> },
301
+ };
302
+ const widgets = (
303
+ <>
304
+ <CardWidget header={{ title: i18n.cards, titleAction: { href: '#target' } }}>
305
+ <Body>{i18n.content}</Body>
306
+ </CardWidget>
307
+
308
+ <CardWidget header={{ title: i18n.cards, ...actions }}>
309
+ <Body>{i18n.content}</Body>
310
+ </CardWidget>
311
+
312
+ <CardWidget
313
+ spotlight="active"
314
+ header={{ title: i18n.longTitle, titleAction: { href: '#target' }, ...actions }}
315
+ >
316
+ <Body>{i18n.content}</Body>
317
+ </CardWidget>
318
+
319
+ <CardWidget spotlight="inactive" header={{ title: i18n.cards }}>
320
+ <Body>{i18n.content}</Body>
321
+ </CardWidget>
322
+ </>
323
+ );
324
+
325
+ return (
326
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
327
+ {[480, 320].map((width) => (
328
+ <div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '24px', width }}>
329
+ {widgets}
330
+ </div>
331
+ ))}
332
+ </div>
333
+ );
334
+ },
335
+ ...withRTLDiff({
336
+ i18n: {
337
+ cards: { en: 'Cards', ar: 'البطاقات' },
338
+ content: {
339
+ en: 'Your virtual card is ready to use.',
340
+ ar: 'بطاقتك الافتراضية جاهزة للاستخدام.',
341
+ },
342
+ orderCard: { en: 'Order card', ar: 'اطلب بطاقة' },
343
+ settings: { en: 'Card settings', ar: 'إعدادات البطاقة' },
344
+ longTitle: {
345
+ en: 'Cards, accounts and everything else you hold with us',
346
+ ar: 'البطاقات والحسابات وكل ما تحتفظ به لدينا',
347
+ },
348
+ },
349
+ }),
350
+ };
package/src/CardWidget/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default } from './CardWidget';
2
+ export type { CardWidgetProps, CardWidgetHeader, CardWidgetTitleAction } from './CardWidget.types';
3
+ export type { CardWidgetActionButton } from './CardWidgetAction';
package/src/Chips/Chip/Chip.css CHANGED
@@ -70,7 +70,7 @@
70
70
  border-color: var(--color-sentiment-negative-active) !important;
71
71
  }
72
72
  .np-theme-personal .np-chip {
73
- font-weight: var(--font-weight-semi-bold);
73
+ font-weight: var(--wds-font-weight-body-bold);
74
74
  color: var(--color-interactive-primary);
75
75
  padding-block: 0;
76
76
  padding-inline: var(--size-16);
@@ -114,11 +114,13 @@
114
114
  .np-theme-personal .np-chip.np-chip--removable {
115
115
  position: relative;
116
116
  }
117
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
117
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
118
+ .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
118
119
  padding-inline-end: var(--size-24);
119
120
  }
120
121
  @media (max-width: 320px) {
121
- .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
122
+ .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
123
+ .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
122
124
  padding-inline-end: var(--size-48);
123
125
  }
124
126
  }
package/src/Chips/Chip/Chip.less CHANGED
@@ -90,7 +90,7 @@
90
90
  }
91
91
 
92
92
  .np-theme-personal & {
93
- font-weight: var(--font-weight-semi-bold);
93
+ font-weight: var(--wds-font-weight-body-bold);
94
94
  color: var(--color-interactive-primary);
95
95
  padding: 0 var(--size-16);
96
96
  border-color: var(--color-interactive-secondary);
@@ -137,7 +137,8 @@
137
137
  &.np-chip--removable {
138
138
  position: relative;
139
139
 
140
- .np-text-body-default-bold {
140
+ .np-text-body-default-bold,
141
+ .wds-text-body-default-bold {
141
142
  padding-right: var(--size-24);
142
143
 
143
144
  @media (--screen-400-zoom) {
package/src/CircularButton/_stories/CircularButton.story.tsx CHANGED
@@ -232,13 +232,8 @@ export const SentimentAwareness: Story = {
232
232
  style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
233
233
  >
234
234
  <div
235
- style={{
236
- width: '120px',
237
- fontSize: '11px',
238
- fontWeight: 'bold',
239
- textAlign: 'left',
240
- paddingLeft: '8px',
241
- }}
235
+ className="wds-text-body-default-bold p-l-1 text-align-left"
236
+ style={{ width: '12ch' }}
242
237
  >
243
238
  {sentiment} (base)
244
239
  </div>
@@ -246,7 +241,7 @@ export const SentimentAwareness: Story = {
246
241
  <div
247
242
  key={button.label}
248
243
  style={{
249
- width: '100px',
244
+ width: '13ch',
250
245
  display: 'flex',
251
246
  justifyContent: 'center',
252
247
  }}
@@ -270,13 +265,8 @@ export const SentimentAwareness: Story = {
270
265
  style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
271
266
  >
272
267
  <div
273
- style={{
274
- width: '120px',
275
- fontSize: '11px',
276
- fontWeight: 'bold',
277
- textAlign: 'left',
278
- paddingLeft: '8px',
279
- }}
268
+ className="wds-text-body-default-bold p-l-1 text-align-left"
269
+ style={{ width: '12ch' }}
280
270
  >
281
271
  {sentiment} (elevated)
282
272
  </div>
@@ -284,7 +274,7 @@ export const SentimentAwareness: Story = {
284
274
  <div
285
275
  key={button.label}
286
276
  style={{
287
- width: '100px',
277
+ width: '13ch',
288
278
  display: 'flex',
289
279
  justifyContent: 'center',
290
280
  }}