@transferwise/components 46.103.1 → 46.105.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 (250) hide show
  1. package/build/header/Header.js +60 -43
  2. package/build/header/Header.js.map +1 -1
  3. package/build/header/Header.mjs +57 -43
  4. package/build/header/Header.mjs.map +1 -1
  5. package/build/i18n/cs.json +2 -0
  6. package/build/i18n/cs.json.js +2 -0
  7. package/build/i18n/cs.json.js.map +1 -1
  8. package/build/i18n/cs.json.mjs +2 -0
  9. package/build/i18n/cs.json.mjs.map +1 -1
  10. package/build/i18n/es.json +2 -0
  11. package/build/i18n/es.json.js +2 -0
  12. package/build/i18n/es.json.js.map +1 -1
  13. package/build/i18n/es.json.mjs +2 -0
  14. package/build/i18n/es.json.mjs.map +1 -1
  15. package/build/i18n/th.json +2 -0
  16. package/build/i18n/th.json.js +2 -0
  17. package/build/i18n/th.json.js.map +1 -1
  18. package/build/i18n/th.json.mjs +2 -0
  19. package/build/i18n/th.json.mjs.map +1 -1
  20. package/build/index.js +3 -1
  21. package/build/index.js.map +1 -1
  22. package/build/index.mjs +2 -1
  23. package/build/index.mjs.map +1 -1
  24. package/build/inputs/SelectInput.js +1 -1
  25. package/build/inputs/SelectInput.js.map +1 -1
  26. package/build/inputs/SelectInput.mjs +1 -1
  27. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +56 -0
  28. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -0
  29. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +54 -0
  30. package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -0
  31. package/build/listItem/AvatarLayout/ListItemAvatarLayout.js +23 -0
  32. package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map +1 -0
  33. package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs +21 -0
  34. package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map +1 -0
  35. package/build/listItem/AvatarView/ListItemAvatarView.js +23 -0
  36. package/build/listItem/AvatarView/ListItemAvatarView.js.map +1 -0
  37. package/build/listItem/AvatarView/ListItemAvatarView.mjs +21 -0
  38. package/build/listItem/AvatarView/ListItemAvatarView.mjs.map +1 -0
  39. package/build/listItem/Button/ListItemButton.js +43 -0
  40. package/build/listItem/Button/ListItemButton.js.map +1 -0
  41. package/build/listItem/Button/ListItemButton.mjs +41 -0
  42. package/build/listItem/Button/ListItemButton.mjs.map +1 -0
  43. package/build/listItem/Checkbox/ListItemCheckbox.js +30 -0
  44. package/build/listItem/Checkbox/ListItemCheckbox.js.map +1 -0
  45. package/build/listItem/Checkbox/ListItemCheckbox.mjs +28 -0
  46. package/build/listItem/Checkbox/ListItemCheckbox.mjs.map +1 -0
  47. package/build/listItem/IconButton/ListItemIconButton.js +56 -0
  48. package/build/listItem/IconButton/ListItemIconButton.js.map +1 -0
  49. package/build/listItem/IconButton/ListItemIconButton.mjs +54 -0
  50. package/build/listItem/IconButton/ListItemIconButton.mjs.map +1 -0
  51. package/build/listItem/Image/ListItemImage.js +31 -0
  52. package/build/listItem/Image/ListItemImage.js.map +1 -0
  53. package/build/listItem/Image/ListItemImage.mjs +29 -0
  54. package/build/listItem/Image/ListItemImage.mjs.map +1 -0
  55. package/build/listItem/ListItem.js +311 -0
  56. package/build/listItem/ListItem.js.map +1 -0
  57. package/build/listItem/ListItem.mjs +306 -0
  58. package/build/listItem/ListItem.mjs.map +1 -0
  59. package/build/listItem/ListItemContext.js +8 -0
  60. package/build/listItem/ListItemContext.js.map +1 -0
  61. package/build/listItem/ListItemContext.mjs +6 -0
  62. package/build/listItem/ListItemContext.mjs.map +1 -0
  63. package/build/listItem/Navigation/ListItemNavigation.js +44 -0
  64. package/build/listItem/Navigation/ListItemNavigation.js.map +1 -0
  65. package/build/listItem/Navigation/ListItemNavigation.mjs +42 -0
  66. package/build/listItem/Navigation/ListItemNavigation.mjs.map +1 -0
  67. package/build/listItem/Prompt/ListItemPrompt.js +59 -0
  68. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -0
  69. package/build/listItem/Prompt/ListItemPrompt.mjs +54 -0
  70. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -0
  71. package/build/listItem/Radio/ListItemRadio.js +30 -0
  72. package/build/listItem/Radio/ListItemRadio.js.map +1 -0
  73. package/build/listItem/Radio/ListItemRadio.mjs +28 -0
  74. package/build/listItem/Radio/ListItemRadio.mjs.map +1 -0
  75. package/build/listItem/Switch/ListItemSwitch.js +30 -0
  76. package/build/listItem/Switch/ListItemSwitch.js.map +1 -0
  77. package/build/listItem/Switch/ListItemSwitch.mjs +28 -0
  78. package/build/listItem/Switch/ListItemSwitch.mjs.map +1 -0
  79. package/build/listItem/useListItemControl.js +22 -0
  80. package/build/listItem/useListItemControl.js.map +1 -0
  81. package/build/listItem/useListItemControl.mjs +20 -0
  82. package/build/listItem/useListItemControl.mjs.map +1 -0
  83. package/build/listItem/useListItemMedia.js +21 -0
  84. package/build/listItem/useListItemMedia.js.map +1 -0
  85. package/build/listItem/useListItemMedia.mjs +19 -0
  86. package/build/listItem/useListItemMedia.mjs.map +1 -0
  87. package/build/main.css +794 -14
  88. package/build/styles/header/Header.css +21 -14
  89. package/build/styles/listItem/ListItem.css +773 -0
  90. package/build/styles/listItem/ListItem.grid.css +370 -0
  91. package/build/styles/listItem/Prompt/ListItemPrompt.css +157 -0
  92. package/build/styles/main.css +794 -14
  93. package/build/title/Title.js +10 -4
  94. package/build/title/Title.js.map +1 -1
  95. package/build/title/Title.mjs +6 -4
  96. package/build/title/Title.mjs.map +1 -1
  97. package/build/types/header/Header.d.ts +27 -11
  98. package/build/types/header/Header.d.ts.map +1 -1
  99. package/build/types/header/index.d.ts +1 -0
  100. package/build/types/header/index.d.ts.map +1 -1
  101. package/build/types/index.d.ts +3 -0
  102. package/build/types/index.d.ts.map +1 -1
  103. package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts +15 -0
  104. package/build/types/listItem/AdditionalInfo/ListItemAdditionalInfo.d.ts.map +1 -0
  105. package/build/types/listItem/AdditionalInfo/index.d.ts +3 -0
  106. package/build/types/listItem/AdditionalInfo/index.d.ts.map +1 -0
  107. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts +18 -0
  108. package/build/types/listItem/AvatarLayout/ListItemAvatarLayout.d.ts.map +1 -0
  109. package/build/types/listItem/AvatarLayout/index.d.ts +3 -0
  110. package/build/types/listItem/AvatarLayout/index.d.ts.map +1 -0
  111. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts +16 -0
  112. package/build/types/listItem/AvatarView/ListItemAvatarView.d.ts.map +1 -0
  113. package/build/types/listItem/AvatarView/index.d.ts +3 -0
  114. package/build/types/listItem/AvatarView/index.d.ts.map +1 -0
  115. package/build/types/listItem/Button/ListItemButton.d.ts +20 -0
  116. package/build/types/listItem/Button/ListItemButton.d.ts.map +1 -0
  117. package/build/types/listItem/Button/index.d.ts +3 -0
  118. package/build/types/listItem/Button/index.d.ts.map +1 -0
  119. package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts +14 -0
  120. package/build/types/listItem/Checkbox/ListItemCheckbox.d.ts.map +1 -0
  121. package/build/types/listItem/Checkbox/index.d.ts +3 -0
  122. package/build/types/listItem/Checkbox/index.d.ts.map +1 -0
  123. package/build/types/listItem/IconButton/ListItemIconButton.d.ts +18 -0
  124. package/build/types/listItem/IconButton/ListItemIconButton.d.ts.map +1 -0
  125. package/build/types/listItem/IconButton/index.d.ts +3 -0
  126. package/build/types/listItem/IconButton/index.d.ts.map +1 -0
  127. package/build/types/listItem/Image/ListItemImage.d.ts +25 -0
  128. package/build/types/listItem/Image/ListItemImage.d.ts.map +1 -0
  129. package/build/types/listItem/Image/index.d.ts +3 -0
  130. package/build/types/listItem/Image/index.d.ts.map +1 -0
  131. package/build/types/listItem/ListItem.d.ts +111 -0
  132. package/build/types/listItem/ListItem.d.ts.map +1 -0
  133. package/build/types/listItem/ListItemContext.d.ts +21 -0
  134. package/build/types/listItem/ListItemContext.d.ts.map +1 -0
  135. package/build/types/listItem/Navigation/ListItemNavigation.d.ts +15 -0
  136. package/build/types/listItem/Navigation/ListItemNavigation.d.ts.map +1 -0
  137. package/build/types/listItem/Navigation/index.d.ts +3 -0
  138. package/build/types/listItem/Navigation/index.d.ts.map +1 -0
  139. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +16 -0
  140. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -0
  141. package/build/types/listItem/Prompt/index.d.ts +3 -0
  142. package/build/types/listItem/Prompt/index.d.ts.map +1 -0
  143. package/build/types/listItem/Radio/ListItemRadio.d.ts +14 -0
  144. package/build/types/listItem/Radio/ListItemRadio.d.ts.map +1 -0
  145. package/build/types/listItem/Radio/index.d.ts +3 -0
  146. package/build/types/listItem/Radio/index.d.ts.map +1 -0
  147. package/build/types/listItem/Switch/ListItemSwitch.d.ts +14 -0
  148. package/build/types/listItem/Switch/ListItemSwitch.d.ts.map +1 -0
  149. package/build/types/listItem/Switch/index.d.ts +3 -0
  150. package/build/types/listItem/Switch/index.d.ts.map +1 -0
  151. package/build/types/listItem/_stories/helpers.d.ts +27 -0
  152. package/build/types/listItem/_stories/helpers.d.ts.map +1 -0
  153. package/build/types/listItem/_stories/subcomponents.d.ts +18 -0
  154. package/build/types/listItem/_stories/subcomponents.d.ts.map +1 -0
  155. package/build/types/listItem/index.d.ts +14 -0
  156. package/build/types/listItem/index.d.ts.map +1 -0
  157. package/build/types/listItem/test-utils.d.ts +7 -0
  158. package/build/types/listItem/test-utils.d.ts.map +1 -0
  159. package/build/types/listItem/useListItemControl.d.ts +5 -0
  160. package/build/types/listItem/useListItemControl.d.ts.map +1 -0
  161. package/build/types/listItem/useListItemMedia.d.ts +6 -0
  162. package/build/types/listItem/useListItemMedia.d.ts.map +1 -0
  163. package/build/types/title/Title.d.ts +4 -5
  164. package/build/types/title/Title.d.ts.map +1 -1
  165. package/package.json +3 -3
  166. package/src/button/Button.spec.tsx +25 -1
  167. package/src/button/Button.story.tsx +1 -0
  168. package/src/header/Header.accessibility.docs.mdx +85 -0
  169. package/src/header/Header.css +21 -14
  170. package/src/header/Header.less +17 -10
  171. package/src/header/Header.spec.tsx +68 -50
  172. package/src/header/Header.story.tsx +190 -36
  173. package/src/header/Header.tsx +96 -65
  174. package/src/header/index.ts +1 -0
  175. package/src/i18n/cs.json +2 -0
  176. package/src/i18n/es.json +2 -0
  177. package/src/i18n/th.json +2 -0
  178. package/src/iconButton/iconButton.spec.tsx +31 -0
  179. package/src/index.ts +16 -0
  180. package/src/legacylistItem/LegacyListItem.story.tsx +1 -1
  181. package/src/legacylistItem/LegacyListItem.tests.story.tsx +2 -1
  182. package/src/list/List.story.tsx +13 -3
  183. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.spec.tsx +56 -0
  184. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.story.tsx +198 -0
  185. package/src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx +36 -0
  186. package/src/listItem/AdditionalInfo/index.ts +2 -0
  187. package/src/listItem/AvatarLayout/ListItemAvatarLayout.spec.tsx +59 -0
  188. package/src/listItem/AvatarLayout/ListItemAvatarLayout.story.tsx +124 -0
  189. package/src/listItem/AvatarLayout/ListItemAvatarLayout.tsx +27 -0
  190. package/src/listItem/AvatarLayout/index.ts +2 -0
  191. package/src/listItem/AvatarView/ListItemAvatarView.spec.tsx +75 -0
  192. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +339 -0
  193. package/src/listItem/AvatarView/ListItemAvatarView.tsx +27 -0
  194. package/src/listItem/AvatarView/index.ts +2 -0
  195. package/src/listItem/Button/ListItemButton.spec.tsx +90 -0
  196. package/src/listItem/Button/ListItemButton.story.tsx +473 -0
  197. package/src/listItem/Button/ListItemButton.tsx +56 -0
  198. package/src/listItem/Button/index.ts +2 -0
  199. package/src/listItem/Checkbox/ListItemCheckbox.spec.tsx +82 -0
  200. package/src/listItem/Checkbox/ListItemCheckbox.story.tsx +128 -0
  201. package/src/listItem/Checkbox/ListItemCheckbox.tsx +33 -0
  202. package/src/listItem/Checkbox/index.ts +2 -0
  203. package/src/listItem/IconButton/ListItemIconButton.spec.tsx +131 -0
  204. package/src/listItem/IconButton/ListItemIconButton.story.tsx +284 -0
  205. package/src/listItem/IconButton/ListItemIconButton.tsx +73 -0
  206. package/src/listItem/IconButton/index.ts +2 -0
  207. package/src/listItem/Image/ListItemImage.spec.tsx +30 -0
  208. package/src/listItem/Image/ListItemImage.story.tsx +80 -0
  209. package/src/listItem/Image/ListItemImage.tsx +46 -0
  210. package/src/listItem/Image/index.ts +2 -0
  211. package/src/listItem/ListItem.css +773 -0
  212. package/src/listItem/ListItem.grid.css +370 -0
  213. package/src/listItem/ListItem.grid.less +622 -0
  214. package/src/listItem/ListItem.less +291 -0
  215. package/src/listItem/ListItem.spec.tsx +1511 -0
  216. package/src/listItem/ListItem.tsx +440 -0
  217. package/src/listItem/ListItemContext.tsx +26 -0
  218. package/src/listItem/Navigation/ListItemNavigation.spec.tsx +67 -0
  219. package/src/listItem/Navigation/ListItemNavigation.story.tsx +114 -0
  220. package/src/listItem/Navigation/ListItemNavigation.tsx +39 -0
  221. package/src/listItem/Navigation/index.ts +2 -0
  222. package/src/listItem/Prompt/ListItemPrompt.css +157 -0
  223. package/src/listItem/Prompt/ListItemPrompt.less +134 -0
  224. package/src/listItem/Prompt/ListItemPrompt.spec.tsx +36 -0
  225. package/src/listItem/Prompt/ListItemPrompt.story.tsx +204 -0
  226. package/src/listItem/Prompt/ListItemPrompt.tsx +32 -0
  227. package/src/listItem/Prompt/index.ts +2 -0
  228. package/src/listItem/Radio/ListItemRadio.spec.tsx +66 -0
  229. package/src/listItem/Radio/ListItemRadio.story.tsx +111 -0
  230. package/src/listItem/Radio/ListItemRadio.tsx +33 -0
  231. package/src/listItem/Radio/index.ts +2 -0
  232. package/src/listItem/Switch/ListItemSwitch.spec.tsx +47 -0
  233. package/src/listItem/Switch/ListItemSwitch.story.tsx +79 -0
  234. package/src/listItem/Switch/ListItemSwitch.tsx +33 -0
  235. package/src/listItem/Switch/index.ts +2 -0
  236. package/src/listItem/_stories/ListItem.focus.test.story.tsx +265 -0
  237. package/src/listItem/_stories/ListItem.layout.test.story.tsx +374 -0
  238. package/src/listItem/_stories/ListItem.scenarios.story.tsx +228 -0
  239. package/src/listItem/_stories/ListItem.story.tsx +774 -0
  240. package/src/listItem/_stories/ListItem.variants.test.story.tsx +274 -0
  241. package/src/listItem/_stories/helpers.tsx +53 -0
  242. package/src/listItem/_stories/subcomponents.tsx +141 -0
  243. package/src/listItem/index.ts +14 -0
  244. package/src/listItem/test-utils.tsx +33 -0
  245. package/src/listItem/useListItemControl.tsx +18 -0
  246. package/src/listItem/useListItemMedia.tsx +16 -0
  247. package/src/main.css +794 -14
  248. package/src/main.less +1 -0
  249. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +15 -4
  250. package/src/title/Title.tsx +25 -12
package/build/styles/header/Header.css CHANGED
@@ -1,26 +1,33 @@
1
1
  .np-header {
2
- display: flex;
3
- justify-content: space-between;
4
- align-items: flex-end;
2
+ display: grid;
3
+ grid-template-columns: 1fr auto;
4
+ grid-column-gap: 24px;
5
+ grid-column-gap: var(--size-24);
6
+ -moz-column-gap: 24px;
7
+ column-gap: 24px;
8
+ -moz-column-gap: var(--size-24);
9
+ column-gap: var(--size-24);
10
+ align-items: center;
11
+ margin-bottom: 8px;
12
+ margin-bottom: var(--size-8);
5
13
  max-width: 100%;
6
14
  padding: 8px 0;
7
15
  padding: var(--size-8) 0;
16
+ width: 100%;
17
+ }
18
+ .np-header--group {
19
+ align-items: flex-end;
8
20
  border-bottom: 1px solid rgba(0,0,0,0.10196);
9
21
  border-bottom: 1px solid var(--color-border-neutral);
10
- margin-bottom: 8px;
11
- margin-bottom: var(--size-8);
12
- -moz-column-gap: 24px;
13
- column-gap: 24px;
14
- -moz-column-gap: var(--size-24);
15
- column-gap: var(--size-24);
16
22
  }
17
23
  .np-header__title {
18
24
  color: #5d7079;
19
25
  color: var(--color-content-secondary);
26
+ margin: 0;
20
27
  }
21
- .np-header__button {
22
- margin-inline: calc(16px * -1);
23
- margin-inline: calc(var(--size-16) * -1);
24
- margin-bottom: calc(4px * -1);
25
- margin-bottom: calc(var(--size-4) * -1);
28
+ .np-header__action {
29
+ margin: 0;
30
+ height: 20px;
31
+ display: flex;
32
+ align-items: center;
26
33
  }