@transferwise/components 46.165.5 → 46.166.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 (376) 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/Display/Display.js +3 -1
  18. package/build/Display/Display.js.map +1 -1
  19. package/build/Display/Display.mjs +3 -1
  20. package/build/Display/Display.mjs.map +1 -1
  21. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +1 -1
  22. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
  23. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
  24. package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
  25. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
  26. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
  27. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
  28. package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
  29. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
  30. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
  31. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
  32. package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
  33. package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
  34. package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
  35. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
  36. package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
  37. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
  38. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
  39. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
  40. package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
  41. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
  42. package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
  43. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
  44. package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
  45. package/build/Label/Label.js +1 -1
  46. package/build/Label/Label.js.map +1 -1
  47. package/build/Label/Label.mjs +1 -1
  48. package/build/Label/Label.mjs.map +1 -1
  49. package/build/Stepper/Stepper.js +3 -2
  50. package/build/Stepper/Stepper.js.map +1 -1
  51. package/build/Stepper/Stepper.mjs +3 -2
  52. package/build/Stepper/Stepper.mjs.map +1 -1
  53. package/build/Table/Header/TableHeader.js +1 -1
  54. package/build/Table/Header/TableHeader.js.map +1 -1
  55. package/build/Table/Header/TableHeader.mjs +1 -1
  56. package/build/Table/Header/TableHeader.mjs.map +1 -1
  57. package/build/Tabs/Tab/Tab.js +1 -1
  58. package/build/Tabs/Tab/Tab.js.map +1 -1
  59. package/build/Tabs/Tab/Tab.mjs +1 -1
  60. package/build/Tabs/Tab/Tab.mjs.map +1 -1
  61. package/build/Tag/Tag.js +1 -1
  62. package/build/Tag/Tag.js.map +1 -1
  63. package/build/Tag/Tag.mjs +1 -1
  64. package/build/Tag/Tag.mjs.map +1 -1
  65. package/build/Title/Title.js +2 -2
  66. package/build/Title/Title.js.map +1 -1
  67. package/build/Title/Title.mjs +2 -2
  68. package/build/Title/Title.mjs.map +1 -1
  69. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
  70. package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
  71. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
  72. package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
  73. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
  74. package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
  75. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
  76. package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
  77. package/build/_deprecated/ActionButton/ActionButton.js +1 -1
  78. package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
  79. package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
  80. package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
  81. package/build/_deprecated/Avatar/Avatar.js +1 -1
  82. package/build/_deprecated/Avatar/Avatar.js.map +1 -1
  83. package/build/_deprecated/Avatar/Avatar.mjs +1 -1
  84. package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
  85. package/build/_deprecated/Select/Select.js +2 -2
  86. package/build/_deprecated/Select/Select.js.map +1 -1
  87. package/build/_deprecated/Select/Select.mjs +2 -2
  88. package/build/_deprecated/Select/Select.mjs.map +1 -1
  89. package/build/common/PropsValues/typography.js +6 -0
  90. package/build/common/PropsValues/typography.js.map +1 -1
  91. package/build/common/PropsValues/typography.mjs +6 -0
  92. package/build/common/PropsValues/typography.mjs.map +1 -1
  93. package/build/main.css +9076 -1924
  94. package/build/styles/Accordion/Accordion.css +7 -6
  95. package/build/styles/Body/Body.css +2 -1
  96. package/build/styles/Calendar/Calendar.css +5 -4
  97. package/build/styles/Calendar/TableLink/TableLink.css +5 -4
  98. package/build/styles/Chips/Chip/Chip.css +5 -3
  99. package/build/styles/Decision/Decision.css +4 -3
  100. package/build/styles/Emphasis/Emphasis.css +1 -1
  101. package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  102. package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  103. package/build/styles/Inputs/Input/Input.css +98 -24
  104. package/build/styles/Inputs/TextArea/TextArea.css +98 -24
  105. package/build/styles/Label/Label.css +3 -0
  106. package/build/styles/Markup/Markup.css +2 -2
  107. package/build/styles/MoneyInput/MoneyInput.css +9 -6
  108. package/build/styles/Nudge/Nudge.css +3 -3
  109. package/build/styles/Popover/Popover.css +30 -7
  110. package/build/styles/ProgressBar/ProgressBar.css +3 -2
  111. package/build/styles/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  112. package/build/styles/Snackbar/Snackbar.css +1 -1
  113. package/build/styles/Table/Table.css +18 -8
  114. package/build/styles/Tabs/Tabs.css +3 -3
  115. package/build/styles/Tag/Tag.css +1 -1
  116. package/build/styles/Tile/Tile.css +4 -3
  117. package/build/styles/Typeahead/Typeahead.css +4 -2
  118. package/build/styles/UploadInput/UploadInput.css +1 -1
  119. package/build/styles/_deprecated/ActionButton/ActionButton.css +3 -4
  120. package/build/styles/_deprecated/Avatar/Avatar.css +2 -2
  121. package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  122. package/build/styles/_deprecated/Select/Select.css +49 -14
  123. package/build/styles/_deprecated/Summary/Summary.css +2 -2
  124. package/build/styles/common/Circle/Circle.css +1 -1
  125. package/build/styles/common/Option/Option.css +4 -4
  126. package/build/styles/css/accordion.css +53 -11
  127. package/build/styles/css/badge.css +2 -2
  128. package/build/styles/css/button-groups.css +29 -6
  129. package/build/styles/css/buttons.css +35 -11
  130. package/build/styles/css/decision.css +53 -11
  131. package/build/styles/css/dropdowns.css +65 -18
  132. package/build/styles/css/droppable.css +28 -6
  133. package/build/styles/css/footer.css +41 -10
  134. package/build/styles/css/input-groups.css +249 -117
  135. package/build/styles/css/list-group.css +28 -8
  136. package/build/styles/css/modals.css +1 -1
  137. package/build/styles/css/navbar.css +92 -45
  138. package/build/styles/css/navs.css +8 -8
  139. package/build/styles/css/neptune-addons.css +15 -0
  140. package/build/styles/css/neptune-core.css +6230 -525
  141. package/build/styles/css/neptune.css +8790 -1768
  142. package/build/styles/css/panels.css +2 -2
  143. package/build/styles/css/popovers.css +64 -20
  144. package/build/styles/css/progress-bars.css +2 -2
  145. package/build/styles/css/sequences.css +14 -9
  146. package/build/styles/css/table.css +7 -7
  147. package/build/styles/css/tooltip.css +28 -6
  148. package/build/styles/less/legacy-variables.less +3 -3
  149. package/build/styles/less/neptune-tokens.less +0 -48
  150. package/build/styles/main.css +9076 -1924
  151. package/build/styles/props/neptune-tokens.css +805 -3
  152. package/build/styles/styles/less/accordion.css +53 -11
  153. package/build/styles/styles/less/badge.css +2 -2
  154. package/build/styles/styles/less/button-groups.css +29 -6
  155. package/build/styles/styles/less/buttons.css +35 -11
  156. package/build/styles/styles/less/decision.css +53 -11
  157. package/build/styles/styles/less/dropdowns.css +65 -18
  158. package/build/styles/styles/less/droppable.css +28 -6
  159. package/build/styles/styles/less/footer.css +41 -10
  160. package/build/styles/styles/less/forms/bootstrap-forms.css +153 -100
  161. package/build/styles/styles/less/forms/checkbox-radio.css +3 -3
  162. package/build/styles/styles/less/input-groups.css +249 -117
  163. package/build/styles/styles/less/list-group.css +28 -8
  164. package/build/styles/styles/less/modals.css +1 -1
  165. package/build/styles/styles/less/navbar.css +92 -45
  166. package/build/styles/styles/less/navs.css +8 -8
  167. package/build/styles/styles/less/neptune-addons.css +15 -0
  168. package/build/styles/styles/less/neptune-core.css +6230 -525
  169. package/build/styles/styles/less/neptune.css +8790 -1768
  170. package/build/styles/styles/less/panels.css +2 -2
  171. package/build/styles/styles/less/popovers.css +64 -20
  172. package/build/styles/styles/less/progress-bars.css +2 -2
  173. package/build/styles/styles/less/sequences.css +14 -9
  174. package/build/styles/styles/less/table.css +7 -7
  175. package/build/styles/styles/less/tooltip.css +28 -6
  176. package/build/types/Body/Body.d.ts.map +1 -1
  177. package/build/types/Display/Display.d.ts.map +1 -1
  178. package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
  179. package/build/types/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -1
  180. package/build/types/Inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -1
  181. package/build/types/Stepper/Stepper.d.ts.map +1 -1
  182. package/build/types/Tabs/Tab/Tab.d.ts.map +1 -1
  183. package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts.map +1 -1
  184. package/build/types/_deprecated/Select/Select.d.ts.map +1 -1
  185. package/build/types/common/PropsValues/typography.d.ts +13 -1
  186. package/build/types/common/PropsValues/typography.d.ts.map +1 -1
  187. package/package.json +2 -2
  188. package/src/Accordion/Accordion.css +7 -6
  189. package/src/Accordion/Accordion.less +7 -6
  190. package/src/Body/Body.css +2 -1
  191. package/src/Body/Body.less +2 -1
  192. package/src/Body/Body.test.tsx +13 -4
  193. package/src/Body/Body.tsx +4 -3
  194. package/src/Body/_stories/Body.test.story.tsx +42 -0
  195. package/src/Calendar/Calendar.css +5 -4
  196. package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
  197. package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
  198. package/src/Calendar/TableLink/TableLink.css +5 -4
  199. package/src/Calendar/TableLink/TableLink.less +5 -4
  200. package/src/Calendar/TableLink/TableLink.tsx +1 -1
  201. package/src/Calendar/_stories/Calendar.test.story.tsx +33 -0
  202. package/src/Chips/Chip/Chip.css +5 -3
  203. package/src/Chips/Chip/Chip.less +3 -2
  204. package/src/CircularButton/_stories/CircularButton.story.tsx +6 -16
  205. package/src/DateInput/_stories/DateInput.rtl.test.story.tsx +45 -0
  206. package/src/Decision/Decision.css +4 -3
  207. package/src/Decision/Decision.less +4 -3
  208. package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
  209. package/src/Display/Display.test.tsx +43 -0
  210. package/src/Display/Display.tsx +11 -1
  211. package/src/Display/_stories/Display.story.tsx +36 -21
  212. package/src/Display/_stories/Display.test.story.tsx +108 -0
  213. package/src/Emphasis/Emphasis.css +1 -1
  214. package/src/Emphasis/Emphasis.less +1 -1
  215. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css +2 -1
  216. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less +2 -1
  217. package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +1 -4
  218. package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css +2 -1
  219. package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
  220. package/src/Inputs/Input/Input.css +98 -24
  221. package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +4 -2
  222. package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
  223. package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
  224. package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +6 -2
  225. package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
  226. package/src/Inputs/TextArea/TextArea.css +98 -24
  227. package/src/Inputs/_common.less +16 -10
  228. package/src/Label/Label.css +3 -0
  229. package/src/Label/Label.less +8 -0
  230. package/src/Label/Label.tsx +1 -1
  231. package/src/Markup/Markup.css +2 -2
  232. package/src/Markup/Markup.less +2 -2
  233. package/src/MoneyInput/MoneyInput.css +9 -6
  234. package/src/MoneyInput/MoneyInput.less +10 -7
  235. package/src/Nudge/Nudge.css +3 -3
  236. package/src/Nudge/Nudge.less +3 -3
  237. package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
  238. package/src/Popover/Popover.css +30 -7
  239. package/src/Popover/Popover.less +2 -2
  240. package/src/ProgressBar/ProgressBar.css +3 -2
  241. package/src/ProgressBar/ProgressBar.less +12 -11
  242. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css +2 -1
  243. package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +2 -1
  244. package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
  245. package/src/Snackbar/Snackbar.css +1 -1
  246. package/src/Snackbar/Snackbar.less +1 -1
  247. package/src/Stepper/Stepper.tsx +4 -2
  248. package/src/Table/Header/TableHeader.tsx +1 -1
  249. package/src/Table/StatusText/TableStatusText.test.tsx +20 -5
  250. package/src/Table/Table.css +18 -8
  251. package/src/Table/Table.less +20 -9
  252. package/src/Tabs/Tab/Tab.tsx +11 -5
  253. package/src/Tabs/Tabs.css +3 -3
  254. package/src/Tabs/Tabs.less +3 -3
  255. package/src/Tag/Tag.css +1 -1
  256. package/src/Tag/Tag.less +1 -1
  257. package/src/Tag/Tag.tsx +1 -1
  258. package/src/Tag/_stories/Tag.story.tsx +1 -1
  259. package/src/Tile/Tile.css +4 -3
  260. package/src/Tile/Tile.less +4 -3
  261. package/src/Title/Title.test.tsx +22 -3
  262. package/src/Title/Title.tsx +2 -2
  263. package/src/Typeahead/Typeahead.css +4 -2
  264. package/src/Typeahead/Typeahead.less +2 -1
  265. package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
  266. package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +4 -2
  267. package/src/UploadInput/UploadInput.css +1 -1
  268. package/src/UploadInput/UploadInput.less +7 -4
  269. package/src/_deprecated/ActionButton/ActionButton.css +3 -4
  270. package/src/_deprecated/ActionButton/ActionButton.less +4 -5
  271. package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
  272. package/src/_deprecated/Avatar/Avatar.css +2 -2
  273. package/src/_deprecated/Avatar/Avatar.less +2 -2
  274. package/src/_deprecated/Avatar/Avatar.tsx +1 -1
  275. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +2 -1
  276. package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +2 -1
  277. package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
  278. package/src/_deprecated/Select/Select.css +49 -14
  279. package/src/_deprecated/Select/Select.less +14 -10
  280. package/src/_deprecated/Select/Select.test.tsx +16 -0
  281. package/src/_deprecated/Select/Select.tsx +6 -1
  282. package/src/_deprecated/Summary/Summary.css +2 -2
  283. package/src/_deprecated/Summary/Summary.less +2 -2
  284. package/src/common/Circle/Circle.css +1 -1
  285. package/src/common/Circle/Circle.less +1 -1
  286. package/src/common/Option/Option.css +4 -4
  287. package/src/common/Option/Option.less +4 -4
  288. package/src/common/PropsValues/typography.ts +20 -1
  289. package/src/main.css +9076 -1924
  290. package/src/main.less +3 -2
  291. package/src/styles/less/accordion.css +53 -11
  292. package/src/styles/less/addons/_background-utilities.less +5 -0
  293. package/src/styles/less/badge.css +2 -2
  294. package/src/styles/less/badge.less +2 -2
  295. package/src/styles/less/button-groups.css +29 -6
  296. package/src/styles/less/button-groups.less +3 -2
  297. package/src/styles/less/buttons.css +35 -11
  298. package/src/styles/less/buttons.less +7 -7
  299. package/src/styles/less/core/_fonts.less +7 -75
  300. package/src/styles/less/core/_scaffolding.less +4 -4
  301. package/src/styles/less/core/_typography-utilities.less +3 -3
  302. package/src/styles/less/core/_typography.less +91 -236
  303. package/src/styles/less/core/fonts/_fonts-ar.less +86 -0
  304. package/src/styles/less/core/fonts/_fonts-base.less +99 -0
  305. package/src/styles/less/core/fonts/_fonts-he.less +8 -0
  306. package/src/styles/less/core/fonts/_fonts-ja.less +4247 -0
  307. package/src/styles/less/core/fonts/_fonts-ko.less +1079 -0
  308. package/src/styles/less/core/fonts/_fonts-th.less +8 -0
  309. package/src/styles/less/core/fonts/_fonts-zh.less +872 -0
  310. package/src/styles/less/decision.css +53 -11
  311. package/src/styles/less/decision.less +2 -2
  312. package/src/styles/less/dropdowns.css +65 -18
  313. package/src/styles/less/dropdowns.less +8 -7
  314. package/src/styles/less/droppable.css +28 -6
  315. package/src/styles/less/droppable.less +4 -4
  316. package/src/styles/less/footer.css +41 -10
  317. package/src/styles/less/footer.less +4 -3
  318. package/src/styles/less/forms/bootstrap-forms.css +153 -100
  319. package/src/styles/less/forms/bootstrap-forms.less +85 -72
  320. package/src/styles/less/forms/checkbox-radio.css +3 -3
  321. package/src/styles/less/forms/checkbox-radio.less +3 -3
  322. package/src/styles/less/input-groups.css +249 -117
  323. package/src/styles/less/input-groups.less +23 -9
  324. package/src/styles/less/list-group.css +28 -8
  325. package/src/styles/less/list-group.less +8 -5
  326. package/src/styles/less/mixins/_reset-text.less +1 -1
  327. package/src/styles/less/mixins/_text-emphasis.less +7 -1
  328. package/src/styles/less/modals.css +1 -1
  329. package/src/styles/less/modals.less +1 -1
  330. package/src/styles/less/navbar.css +92 -45
  331. package/src/styles/less/navbar.less +19 -19
  332. package/src/styles/less/navs.css +8 -8
  333. package/src/styles/less/navs.less +8 -8
  334. package/src/styles/less/neptune-addons.css +15 -0
  335. package/src/styles/less/neptune-core.css +6230 -525
  336. package/src/styles/less/neptune.bundle.less +4 -0
  337. package/src/styles/less/neptune.css +8790 -1768
  338. package/src/styles/less/panels.css +2 -2
  339. package/src/styles/less/panels.less +2 -2
  340. package/src/styles/less/popovers.css +64 -20
  341. package/src/styles/less/popovers.less +7 -7
  342. package/src/styles/less/progress-bars.css +2 -2
  343. package/src/styles/less/progress-bars.less +2 -2
  344. package/src/styles/less/sequences.css +14 -9
  345. package/src/styles/less/sequences.less +15 -10
  346. package/src/styles/less/table.css +7 -7
  347. package/src/styles/less/table.less +7 -7
  348. package/src/styles/less/tooltip.css +28 -6
  349. package/src/styles/less/tooltip.less +1 -1
  350. package/src/styles/variables/legacy-variables.less +3 -3
  351. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  352. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  353. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  354. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  355. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  356. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  357. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  358. package/build/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  359. package/build/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  360. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  361. package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  362. package/build/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  363. package/build/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
  364. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  365. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  366. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  367. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  368. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  369. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  370. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  371. package/src/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
  372. package/src/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
  373. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
  374. package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
  375. package/src/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
  376. package/src/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
package/src/Body/_stories/Body.test.story.tsx CHANGED
@@ -5,6 +5,7 @@ import Container from '../../Container';
5
5
  import Title from '../../Title';
6
6
  import { Typography } from '../../common/PropsValues/typography';
7
7
  import { withVariantConfig } from '../../../.storybook/helpers';
8
+ import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
8
9
 
9
10
  export default {
10
11
  title: 'Typography/Body/Tests',
@@ -88,3 +89,44 @@ export const HyphenationMobile: Story = {
88
89
  ...HyphenationTest,
89
90
  ...withVariantConfig(['mobile'], HyphenationTest),
90
91
  };
92
+
93
+ const rtlDiffBodyLarge = withRTLDiff({
94
+ i18n: {
95
+ secondParagraph: {
96
+ en: "Set up a transfer in a few minutes from your phone or computer. We'll keep you updated at every step, so you always know where your money is.",
97
+ ar: 'أعدّ تحويلك في بضع دقائق من هاتفك أو حاسوبك. سنبقيك على اطلاع في كل خطوة، لتعرف دائمًا أين أموالك.',
98
+ he: 'הגדירו העברה תוך כמה דקות מהטלפון או מהמחשב. נעדכן אתכם בכל שלב, כך שתמיד תדעו איפה הכסף שלכם.',
99
+ },
100
+ paragraph: {
101
+ en: "Send money abroad at the real exchange rate, with low, transparent fees. You'll always see what you pay upfront, and your recipient gets the money quickly and securely.",
102
+ ar: 'أرسل الأموال إلى الخارج بسعر الصرف الحقيقي ومع رسوم منخفضة وشفافة. سترى دائمًا ما تدفعه مقدمًا، ويحصل المستلم على أمواله بسرعة وأمان.',
103
+ he: 'שלחו כסף לחו״ל בשער החליפין האמיתי, עם עמלות נמוכות ושקופות. תמיד תראו מראש כמה אתם משלמים, והנמען יקבל את הכסף במהירות ובבטחה.',
104
+ },
105
+ },
106
+ });
107
+
108
+ /**
109
+ * Two body large paragraphs in RTL and LTR, for the RTL Typography docs page.
110
+ * Hidden from the sidebar, tests and Chromatic.
111
+ */
112
+ export const RTLDiffBodyLarge: Story = {
113
+ tags: ['!dev', '!test'],
114
+ render: function Render() {
115
+ const i18n = useRtlDiffI18n();
116
+ return (
117
+ <>
118
+ <Body as="p" type={Typography.BODY_LARGE}>
119
+ {i18n.paragraph}
120
+ </Body>
121
+ <Body as="p" type={Typography.BODY_LARGE}>
122
+ {i18n.secondParagraph}
123
+ </Body>
124
+ </>
125
+ );
126
+ },
127
+ ...rtlDiffBodyLarge,
128
+ parameters: {
129
+ ...rtlDiffBodyLarge.parameters,
130
+ chromatic: { ...rtlDiffBodyLarge.parameters.chromatic, disableSnapshot: true },
131
+ },
132
+ };
package/src/Calendar/Calendar.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border: transparent;
8
8
  border-radius: var(--radius-small);
9
9
  background-color: transparent;
10
- font-weight: var(--font-weight-semi-bold);
10
+ font-weight: var(--wds-font-weight-title-screen);
11
11
  color: var(--color-content-primary);
12
12
  }
13
13
  @media (max-width: 320px) {
@@ -89,10 +89,11 @@
89
89
  text-decoration-color: var(--color-content-tertiary);
90
90
  }
91
91
  .wds-Calendar__option--day {
92
- block-size: var(--size-40);
92
+ --circleSize: var(--size-40);
93
+ block-size: var(--circleSize);
94
+ line-height: var(--circleSize);
95
+ inline-size: var(--circleSize);
93
96
  border-radius: var(--radius-full);
94
- line-height: var(--size-40);
95
- inline-size: var(--size-40);
96
97
  padding: 0;
97
98
  display: inline-flex;
98
99
  align-items: center;
package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx CHANGED
@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
134
134
  key={day}
135
135
  className={
136
136
  index > 4
137
- ? 'text-xs-center np-text-body-default'
138
- : 'text-xs-center np-text-body-default-bold'
137
+ ? 'text-xs-center np-text-body-default wds-text-body-default'
138
+ : 'text-xs-center np-text-body-default-bold wds-text-body-default-bold'
139
139
  }
140
140
  >
141
141
  <span className="hidden-xs">
package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx CHANGED
@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
76
76
  })();
77
77
 
78
78
  return (
79
- <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
79
+ <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold wds-text-body-default-bold m-b-0">
80
80
  <thead className="sr-only">
81
81
  <tr>
82
82
  <th colSpan={COLS}>{placeholder}</th>
package/src/Calendar/TableLink/TableLink.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border: transparent;
8
8
  border-radius: var(--radius-small);
9
9
  background-color: transparent;
10
- font-weight: var(--font-weight-semi-bold);
10
+ font-weight: var(--wds-font-weight-title-screen);
11
11
  color: var(--color-content-primary);
12
12
  }
13
13
  @media (max-width: 320px) {
@@ -89,10 +89,11 @@
89
89
  text-decoration-color: var(--color-content-tertiary);
90
90
  }
91
91
  .wds-Calendar__option--day {
92
- block-size: var(--size-40);
92
+ --circleSize: var(--size-40);
93
+ block-size: var(--circleSize);
94
+ line-height: var(--circleSize);
95
+ inline-size: var(--circleSize);
93
96
  border-radius: var(--radius-full);
94
- line-height: var(--size-40);
95
- inline-size: var(--size-40);
96
97
  padding: 0;
97
98
  display: inline-flex;
98
99
  align-items: center;
package/src/Calendar/TableLink/TableLink.less CHANGED
@@ -11,7 +11,7 @@
11
11
  border: transparent;
12
12
  border-radius: var(--radius-small);
13
13
  background-color: transparent;
14
- font-weight: var(--font-weight-semi-bold);
14
+ font-weight: var(--wds-font-weight-title-screen);
15
15
  color: var(--color-content-primary);
16
16
 
17
17
  &:focus {
@@ -51,10 +51,11 @@
51
51
  }
52
52
 
53
53
  .wds-Calendar__option--day {
54
- height: var(--size-40);
54
+ --circleSize: var(--size-40);
55
+ height: var(--circleSize);
56
+ line-height: var(--circleSize);
57
+ width: var(--circleSize);
55
58
  border-radius: var(--radius-full);
56
- line-height: var(--size-40);
57
- width: var(--size-40);
58
59
  padding: 0;
59
60
  display: inline-flex;
60
61
  align-items: center;
package/src/Calendar/TableLink/TableLink.tsx CHANGED
@@ -96,7 +96,7 @@ const TableLink = ({
96
96
  aria-pressed={active}
97
97
  className={clsx(
98
98
  `wds-Calendar__option--${type}`,
99
- `tw-date-lookup-${type}-option np-text-body-default-bold`,
99
+ `tw-date-lookup-${type}-option np-text-body-default-bold wds-text-body-default-bold`,
100
100
  { active: !!active },
101
101
  { today: !!today },
102
102
  { disabled: !!isUnavailable },
package/src/Calendar/_stories/Calendar.test.story.tsx CHANGED
@@ -175,3 +175,36 @@ export const RTLDiff: Story = {
175
175
  },
176
176
  }),
177
177
  };
178
+
179
+ const rtlDiffDayView = withRTLDiff({
180
+ i18n: {
181
+ disabledReason: {
182
+ en: 'Weekends and specific dates are unavailable.',
183
+ ar: 'عطلات نهاية الأسبوع وتواريخ محددة غير متاحة.',
184
+ },
185
+ },
186
+ });
187
+
188
+ /**
189
+ * Day view only, for the RTL Layout docs page. Hidden from the sidebar, tests and Chromatic,
190
+ * as `RTLDiff` already covers it.
191
+ */
192
+ export const RTLDiffDayView: Story = {
193
+ tags: ['!dev', '!test'],
194
+ render: () => {
195
+ const i18n = useRtlDiffI18n();
196
+ return (
197
+ <Calendar
198
+ value={selectedDate}
199
+ min={minDate}
200
+ max={maxDate}
201
+ disabledRules={{ ...disabledRulesRtl, reason: i18n.disabledReason }}
202
+ />
203
+ );
204
+ },
205
+ ...rtlDiffDayView,
206
+ parameters: {
207
+ ...rtlDiffDayView.parameters,
208
+ chromatic: { ...rtlDiffDayView.parameters.chromatic, disableSnapshot: true },
209
+ },
210
+ };
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
  }}
package/src/DateInput/_stories/DateInput.rtl.test.story.tsx CHANGED
@@ -57,6 +57,51 @@ export const Sizes: Story = {
57
57
  },
58
58
  }),
59
59
  };
60
+ export const MobileSizes: Story = {
61
+ render: () => {
62
+ const i18n = useRtlDiffI18n();
63
+ return (
64
+ <>
65
+ <DateInput
66
+ size="sm"
67
+ dayLabel={i18n.dayLabel}
68
+ monthLabel={i18n.monthLabel}
69
+ yearLabel={i18n.yearLabel}
70
+ onChange={fn()}
71
+ />
72
+ <DateInput
73
+ size="md"
74
+ dayLabel={i18n.dayLabel}
75
+ monthLabel={i18n.monthLabel}
76
+ yearLabel={i18n.yearLabel}
77
+ onChange={fn()}
78
+ />
79
+ <DateInput
80
+ size="lg"
81
+ dayLabel={i18n.dayLabel}
82
+ monthLabel={i18n.monthLabel}
83
+ yearLabel={i18n.yearLabel}
84
+ onChange={fn()}
85
+ />
86
+ <DateInput
87
+ mode="month-year"
88
+ monthLabel={i18n.monthLabel}
89
+ yearLabel={i18n.yearLabel}
90
+ onChange={fn()}
91
+ />
92
+ </>
93
+ );
94
+ },
95
+ ...withRTLDiff({
96
+ viewport: 'smallMobile',
97
+ fixedRows: { heights: [13, 16, 21] },
98
+ i18n: {
99
+ dayLabel: { en: 'Day', ar: 'اليوم' },
100
+ monthLabel: { en: 'Month', ar: 'الشهر' },
101
+ yearLabel: { en: 'Year', ar: 'السنة' },
102
+ },
103
+ }),
104
+ };
60
105
 
61
106
  export const OpenDropdown: Story = {
62
107
  render: () => {
package/src/Decision/Decision.css CHANGED
@@ -1,9 +1,10 @@
1
1
  .np-decision .decision {
2
2
  display: flex;
3
3
  }
4
- .np-decision__tile--small .np-text-title-subsection {
5
- font-size: var(--font-size-16);
6
- line-height: var(--line-height-title);
4
+ .np-decision__tile--small .np-text-title-subsection,
5
+ .np-decision__tile--small .wds-text-title-subsection {
6
+ font-size: var(--wds-font-size-body-large);
7
+ line-height: var(--wds-line-height-body-large);
7
8
  }
8
9
  .np-decision:not(.flex-column) {
9
10
  gap: var(--size-24);
package/src/Decision/Decision.less CHANGED
@@ -4,9 +4,10 @@
4
4
  }
5
5
 
6
6
  &__tile--small {
7
- .np-text-title-subsection {
8
- font-size: var(--font-size-16);
9
- line-height: var(--line-height-title);
7
+ .np-text-title-subsection,
8
+ .wds-text-title-subsection {
9
+ font-size: var(--wds-font-size-body-large);
10
+ line-height: var(--wds-line-height-body-large);
10
11
  }
11
12
  }
12
13
 
package/src/DefinitionList/_stories/DefinitionList.story.tsx CHANGED
@@ -32,7 +32,7 @@ const definitions = [
32
32
  },
33
33
  {
34
34
  title: 'Use wrapper elements to style',
35
- value: <span className="np-text-title-subsection">89.45GBP</span>,
35
+ value: <span className="wds-text-title-subsection">89.45GBP</span>,
36
36
  key: 'second',
37
37
  },
38
38
  {
package/src/Display/Display.test.tsx ADDED
@@ -0,0 +1,43 @@
1
+ import { Typography } from '../common';
2
+ import { render, screen } from '../test-utils';
3
+
4
+ import Display from '.';
5
+
6
+ describe('Display', () => {
7
+ it('testing default state', () => {
8
+ render(<Display>Test</Display>);
9
+ const copy = screen.getByText('Test');
10
+ expect(copy.tagName).toBe('H1');
11
+ expect(copy).toHaveClass(
12
+ 'np-display',
13
+ `np-text-${Typography.DISPLAY_LARGE}`,
14
+ `wds-text-${Typography.DISPLAY_LARGE}`,
15
+ );
16
+ });
17
+
18
+ it('renders both typography classes for the given type', () => {
19
+ render(<Display type={Typography.DISPLAY_NUMBER_MEDIUM}>Test</Display>);
20
+ expect(screen.getByText('Test')).toHaveClass(
21
+ `np-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
22
+ `wds-text-${Typography.DISPLAY_NUMBER_MEDIUM}`,
23
+ );
24
+ });
25
+
26
+ it('renders only the legacy class for display-extra-large, which has no locale-aware style', () => {
27
+ render(<Display type={Typography.DISPLAY_EXTRA_LARGE}>Test</Display>);
28
+ const copy = screen.getByText('Test');
29
+ expect(copy).toHaveClass(`np-text-${Typography.DISPLAY_EXTRA_LARGE}`);
30
+ expect(copy).not.toHaveClass(`wds-text-${Typography.DISPLAY_EXTRA_LARGE}`);
31
+ });
32
+
33
+ it('enforces tag via `as` prop and merges `className`', () => {
34
+ render(
35
+ <Display as="h3" className="custom">
36
+ Test
37
+ </Display>,
38
+ );
39
+ const copy = screen.getByText('Test');
40
+ expect(copy.tagName).toBe('H3');
41
+ expect(copy).toHaveClass('custom', `wds-text-${Typography.DISPLAY_LARGE}`);
42
+ });
43
+ });
package/src/Display/Display.tsx CHANGED
@@ -18,7 +18,17 @@ function Display({
18
18
  id,
19
19
  }: DisplayProps) {
20
20
  return (
21
- <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
21
+ <Heading
22
+ id={id}
23
+ className={clsx(
24
+ 'np-display',
25
+ `np-text-${type}`,
26
+ // display-extra-large has no locale-aware equivalent
27
+ type !== Typography.DISPLAY_EXTRA_LARGE && `wds-text-${type}`,
28
+ 'text-primary',
29
+ className,
30
+ )}
31
+ >
22
32
  {children}
23
33
  </Heading>
24
34
  );
package/src/Display/_stories/Display.story.tsx CHANGED
@@ -118,27 +118,42 @@ export const Basic = () => {
118
118
  export const Numbers = () => {
119
119
  return (
120
120
  <>
121
- <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
122
- <hr />
123
- <Display type={Typography.DISPLAY_NUMBER}>
124
- <Money amount={1050.6} currency="UAH" />
125
- </Display>
126
- <hr />
127
- <Display type={Typography.DISPLAY_NUMBER}>
128
- <Money amount={10.17} currency="JPY" />
129
- </Display>
130
- <hr />
131
- <Display type={Typography.DISPLAY_NUMBER}>
132
- <Money amount={0.01} currency="EUR" />
133
- </Display>
134
- <hr />
135
- <Display type={Typography.DISPLAY_NUMBER}>
136
- <Money amount={1000000} currency="EUR" />
137
- </Display>
138
- <hr />
139
- <Display type={Typography.DISPLAY_NUMBER}>
140
- <Money amount={1000000} currency="GBP" />
141
- </Display>
121
+ <section className="m-b-2">
122
+ <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
123
+ <Display type={Typography.DISPLAY_NUMBER_SMALL}>
124
+ <Money amount={1050.6} currency="UAH" />
125
+ </Display>
126
+ <Display type={Typography.DISPLAY_NUMBER_SMALL}>
127
+ <Money amount={10.17} currency="JPY" />
128
+ </Display>
129
+ </section>
130
+
131
+ <section className="m-b-2">
132
+ <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
133
+ <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
134
+ <Money amount={0.01} currency="EUR" />
135
+ </Display>
136
+ <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
137
+ <Money amount={1000000} currency="EUR" />
138
+ </Display>
139
+ </section>
140
+
141
+ <section className="m-b-2">
142
+ <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
143
+ <Display type={Typography.DISPLAY_NUMBER_LARGE}>
144
+ <Money amount={1000000} currency="GBP" />
145
+ </Display>
146
+ <Display type={Typography.DISPLAY_NUMBER_LARGE}>
147
+ <Money amount={1050.6} currency="UAH" />
148
+ </Display>
149
+ </section>
150
+
151
+ <section className="m-b-2">
152
+ <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
153
+ <Display type={Typography.DISPLAY_NUMBER}>
154
+ <Money amount={1050.6} currency="UAH" />
155
+ </Display>
156
+ </section>
142
157
  </>
143
158
  );
144
159
  };
package/src/Display/_stories/Display.test.story.tsx ADDED
@@ -0,0 +1,108 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+ import { IntlProvider } from 'react-intl';
3
+ import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
4
+ import { getDirectionFromLocale, Typography } from '../../common';
5
+ import type { DisplayTypes } from '../../common/PropsValues/typography';
6
+ import Money from '../../Money/Money';
7
+ import Title from '../../Title/Title';
8
+ import Display from '../Display';
9
+
10
+ const meta: Meta<typeof Display> = {
11
+ component: Display,
12
+ tags: ['!autodocs', '!manifest'],
13
+ title: 'Typography/Display/Tests',
14
+ };
15
+ export default meta;
16
+ type Story = StoryObj<typeof Display>;
17
+
18
+ export const RTLDiff: Story = {
19
+ render: () => {
20
+ return (
21
+ <>
22
+ <section className="m-b-2">
23
+ <Title type={Typography.TITLE_BODY}>Display Number Small</Title>
24
+ <Display type={Typography.DISPLAY_NUMBER_SMALL}>
25
+ <Money amount={1050.6} currency="UAH" />
26
+ </Display>
27
+ <Display type={Typography.DISPLAY_NUMBER_SMALL}>
28
+ <Money amount={10.17} currency="JPY" />
29
+ </Display>
30
+ </section>
31
+
32
+ <section className="m-b-2">
33
+ <Title type={Typography.TITLE_BODY}>Display Number Medium</Title>
34
+ <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
35
+ <Money amount={0.01} currency="EUR" />
36
+ </Display>
37
+ <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
38
+ <Money amount={1000000} currency="EUR" />
39
+ </Display>
40
+ </section>
41
+
42
+ <section className="m-b-2">
43
+ <Title type={Typography.TITLE_BODY}>Display Number Large</Title>
44
+ <Display type={Typography.DISPLAY_NUMBER_LARGE}>
45
+ <Money amount={123456} currency="GBP" />
46
+ </Display>
47
+ <Display type={Typography.DISPLAY_NUMBER_LARGE}>
48
+ <Money amount={1010.6} currency="UAH" />
49
+ </Display>
50
+ </section>
51
+
52
+ <section className="m-b-2">
53
+ <Title type={Typography.TITLE_BODY}>Display Number (Deprecated)</Title>
54
+ <Display type={Typography.DISPLAY_NUMBER}>
55
+ <Money amount={1050.6} currency="UAH" />
56
+ </Display>
57
+ </section>
58
+ </>
59
+ );
60
+ },
61
+ ...withRTLDiff({ fixedRows: { heights: 'auto' } }),
62
+ };
63
+
64
+ const LOCALES = [
65
+ { value: 'fr', label: 'Other Latin' },
66
+ { value: 'ru', label: 'Cyrillic' },
67
+ { value: 'el', label: 'Greek' },
68
+ { value: 'ja', label: 'Japanese' },
69
+ { value: 'ko', label: 'Korean' },
70
+ { value: 'th', label: 'Thai' },
71
+ { value: 'zh-CN', label: 'Chinese' },
72
+ { value: 'ar', label: 'Arabic' },
73
+ { value: 'he', label: 'Hebrew' },
74
+ ];
75
+
76
+ // `lang` picks the locale's typography tokens, IntlProvider the locale's number formatting
77
+ const renderAllLocales = (type: DisplayTypes) => (
78
+ <>
79
+ {LOCALES.map(({ value, label }) => (
80
+ <section key={value} className="m-b-2">
81
+ <Title type={Typography.TITLE_BODY}>{label}</Title>
82
+ <div lang={value} dir={getDirectionFromLocale(value)}>
83
+ <IntlProvider locale={value} messages={{}}>
84
+ <Display type={type}>
85
+ <Money amount={1235.56} currency="GBP" />
86
+ </Display>
87
+ </IntlProvider>
88
+ </div>
89
+ </section>
90
+ ))}
91
+ </>
92
+ );
93
+
94
+ export const DisplayNumberSmallLocales: Story = {
95
+ render: () => renderAllLocales(Typography.DISPLAY_NUMBER_SMALL),
96
+ };
97
+
98
+ export const DisplayNumberMediumLocales: Story = {
99
+ render: () => renderAllLocales(Typography.DISPLAY_NUMBER_MEDIUM),
100
+ };
101
+
102
+ export const DisplayNumberLargeLocales: Story = {
103
+ render: () => renderAllLocales(Typography.DISPLAY_NUMBER_LARGE),
104
+ };
105
+
106
+ export const DisplayNumberDeprecatedLocales: Story = {
107
+ render: () => renderAllLocales(Typography.DISPLAY_NUMBER),
108
+ };
package/src/Emphasis/Emphasis.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .emphasis {
2
- font-weight: var(--font-weight-semi-bold);
2
+ font-weight: var(--wds-font-weight-body-bold);
3
3
  font-style: normal;
4
4
  }
5
5
  .emphasis--important {
package/src/Emphasis/Emphasis.less CHANGED
@@ -1,5 +1,5 @@
1
1
  .emphasis {
2
- font-weight: var(--font-weight-semi-bold);
2
+ font-weight: var(--wds-font-weight-body-bold);
3
3
  font-style: normal;
4
4
  }
5
5
 
package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css CHANGED
@@ -2,6 +2,7 @@
2
2
  inline-size: 100%;
3
3
  }
4
4
  .wds-amount-input-input-container {
5
+ font-family: var(--wds-font-family-display-number);
5
6
  display: flex;
6
7
  justify-content: right;
7
8
  inline-size: 100%;
@@ -36,5 +37,5 @@
36
37
  flex-grow: 0;
37
38
  display: flex;
38
39
  align-items: center;
39
- line-height: inherit;
40
+ line-height: 1em;
40
41
  }
package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less CHANGED
@@ -4,6 +4,7 @@
4
4
  }
5
5
 
6
6
  &-input-container {
7
+ font-family: var(--wds-font-family-display-number);
7
8
  display: flex;
8
9
  justify-content: right;
9
10
  width: 100%;
@@ -47,6 +48,6 @@
47
48
  flex-grow: 0;
48
49
  display: flex;
49
50
  align-items: center;
50
- line-height: inherit;
51
+ line-height: 1em;
51
52
  }
52
53
  }