@transferwise/components 46.160.0 → 46.160.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/build/ExpressiveMoneyInput/Chevron/Chevron.js +10 -2
  2. package/build/ExpressiveMoneyInput/Chevron/Chevron.js.map +1 -1
  3. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs +11 -3
  4. package/build/ExpressiveMoneyInput/Chevron/Chevron.mjs.map +1 -1
  5. package/build/ProcessIndicator/ProcessIndicator.js +1 -1
  6. package/build/ProcessIndicator/ProcessIndicator.js.map +1 -1
  7. package/build/ProcessIndicator/ProcessIndicator.mjs +1 -1
  8. package/build/ProcessIndicator/ProcessIndicator.mjs.map +1 -1
  9. package/build/Prompt/CriticalBanner/CriticalBanner.js +10 -1
  10. package/build/Prompt/CriticalBanner/CriticalBanner.js.map +1 -1
  11. package/build/Prompt/CriticalBanner/CriticalBanner.mjs +10 -1
  12. package/build/Prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
  13. package/build/common/Panel/Panel.js +13 -25
  14. package/build/common/Panel/Panel.js.map +1 -1
  15. package/build/common/Panel/Panel.mjs +10 -22
  16. package/build/common/Panel/Panel.mjs.map +1 -1
  17. package/build/common/Panel/Panel.positionUtils.js +68 -0
  18. package/build/common/Panel/Panel.positionUtils.js.map +1 -0
  19. package/build/common/Panel/Panel.positionUtils.mjs +63 -0
  20. package/build/common/Panel/Panel.positionUtils.mjs.map +1 -0
  21. package/build/common/PropsValues/position.js +0 -25
  22. package/build/common/PropsValues/position.js.map +1 -1
  23. package/build/common/PropsValues/position.mjs +1 -24
  24. package/build/common/PropsValues/position.mjs.map +1 -1
  25. package/build/main.css +102 -68
  26. package/build/styles/AvatarView/AvatarView.css +8 -0
  27. package/build/styles/AvatarView/Dot/Dot.css +8 -0
  28. package/build/styles/CheckboxButton/CheckboxButton.css +3 -0
  29. package/build/styles/Nudge/Nudge.css +4 -38
  30. package/build/styles/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  31. package/build/styles/SlidingPanel/SlidingPanel.css +8 -0
  32. package/build/styles/UploadInput/UploadItem/UploadItem.css +4 -5
  33. package/build/styles/_deprecated/Badge/Badge.css +4 -2
  34. package/build/styles/common/Panel/Panel.css +12 -4
  35. package/build/styles/css/accordion.css +3 -0
  36. package/build/styles/css/buttons.css +1 -7
  37. package/build/styles/css/chevron.css +3 -0
  38. package/build/styles/css/neptune.css +25 -19
  39. package/build/styles/css/process.css +15 -9
  40. package/build/styles/css/tick.css +6 -3
  41. package/build/styles/main.css +102 -68
  42. package/build/styles/styles/less/accordion.css +3 -0
  43. package/build/styles/styles/less/buttons.css +1 -7
  44. package/build/styles/styles/less/chevron.css +3 -0
  45. package/build/styles/styles/less/neptune.css +25 -19
  46. package/build/styles/styles/less/process.css +15 -9
  47. package/build/styles/styles/less/tick.css +6 -3
  48. package/build/types/ExpressiveMoneyInput/Chevron/Chevron.d.ts.map +1 -1
  49. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts +6 -1
  50. package/build/types/Prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
  51. package/build/types/common/Panel/Panel.d.ts +1 -1
  52. package/build/types/common/Panel/Panel.d.ts.map +1 -1
  53. package/build/types/common/Panel/Panel.positionUtils.d.ts +7 -0
  54. package/build/types/common/Panel/Panel.positionUtils.d.ts.map +1 -0
  55. package/build/types/common/PropsValues/position.d.ts +0 -13
  56. package/build/types/common/PropsValues/position.d.ts.map +1 -1
  57. package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts +1 -1
  58. package/package.json +5 -5
  59. package/src/AvatarView/AvatarView.css +8 -0
  60. package/src/AvatarView/Dot/Dot.css +8 -0
  61. package/src/AvatarView/Dot/Dot.less +7 -1
  62. package/src/Button/_stories/Button.test.story.tsx +1 -1
  63. package/src/Checkbox/_stories/Checkbox.story.tsx +1 -1
  64. package/src/Checkbox/_stories/Checkbox.test.story.tsx +3 -2
  65. package/src/CheckboxButton/CheckboxButton.css +3 -0
  66. package/src/CheckboxButton/CheckboxButton.less +4 -0
  67. package/src/Chevron/_stories/Chevron.test.story.tsx +2 -2
  68. package/src/ExpressiveMoneyInput/Chevron/Chevron.tsx +8 -3
  69. package/src/Header/_stories/Header.test.story.tsx +1 -1
  70. package/src/Info/_stories/Info.rtl.test.story.tsx +35 -10
  71. package/src/Info/_stories/Info.story.tsx +1 -1
  72. package/src/Inputs/SelectInput/_stories/SelectInput.test.story.tsx +1 -1
  73. package/src/ListItem/_stories/subcomponents.tsx +1 -1
  74. package/src/Loader/_stories/Loader.test.story.tsx +23 -0
  75. package/src/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx +1 -1
  76. package/src/Nudge/Nudge.css +4 -38
  77. package/src/Nudge/Nudge.less +4 -4
  78. package/src/Nudge/_stories/Nudge.test.story.tsx +29 -12
  79. package/src/PhoneNumberInput/_stories/{PhoneNumberInput.test.story.tsx → PhoneNumberInput.rtl.test.story.tsx} +18 -10
  80. package/src/ProcessIndicator/ProcessIndicator.tsx +1 -1
  81. package/src/ProcessIndicator/_stories/ProcessIndicator.test.story.tsx +32 -0
  82. package/src/ProgressBar/_stories/ProgressBar.test.story.tsx +33 -19
  83. package/src/Prompt/CriticalBanner/CriticalBanner.css +34 -0
  84. package/src/Prompt/CriticalBanner/CriticalBanner.less +45 -0
  85. package/src/Prompt/CriticalBanner/CriticalBanner.test.tsx +26 -3
  86. package/src/Prompt/CriticalBanner/CriticalBanner.tsx +15 -1
  87. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.accessibility.docs.mdx +4 -1
  88. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.story.tsx +52 -0
  89. package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx +22 -1
  90. package/src/SlidingPanel/SlidingPanel.css +8 -0
  91. package/src/SlidingPanel/SlidingPanel.less +8 -0
  92. package/src/SlidingPanel/_stories/SlidingPanel.rtl.test.story.tsx +4 -3
  93. package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx +14 -16
  94. package/src/Snackbar/_stories/Snackbar.story.tsx +1 -1
  95. package/src/Snackbar/_stories/Snackbar.test.story.tsx +1 -1
  96. package/src/StatusIcon/_stories/StatusIcon.test.story.tsx +12 -4
  97. package/src/UploadInput/UploadItem/UploadItem.css +4 -5
  98. package/src/UploadInput/UploadItem/UploadItem.less +7 -6
  99. package/src/UploadInput/_stories/UploadInput.test.story.tsx +1 -1
  100. package/src/_deprecated/Badge/Badge.css +4 -2
  101. package/src/_deprecated/Badge/Badge.less +7 -14
  102. package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx +0 -16
  103. package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx +15 -0
  104. package/src/common/Panel/Panel.css +12 -4
  105. package/src/common/Panel/Panel.less +27 -9
  106. package/src/common/Panel/Panel.positionUtils.ts +79 -0
  107. package/src/common/Panel/Panel.test.tsx +40 -0
  108. package/src/common/Panel/Panel.tsx +13 -24
  109. package/src/common/Panel/_stories/Panel.rtl.test.story.tsx +110 -0
  110. package/src/common/PropsValues/position.ts +0 -50
  111. package/src/main.css +102 -68
  112. package/src/styles/less/accordion.css +3 -0
  113. package/src/styles/less/buttons.css +1 -7
  114. package/src/styles/less/buttons.less +3 -11
  115. package/src/styles/less/chevron.css +3 -0
  116. package/src/styles/less/chevron.less +4 -0
  117. package/src/styles/less/neptune.css +25 -19
  118. package/src/styles/less/process.css +15 -9
  119. package/src/styles/less/process.less +13 -6
  120. package/src/styles/less/tick.css +6 -3
  121. package/src/styles/less/tick.less +7 -3
package/src/styles/less/process.less CHANGED
@@ -84,6 +84,11 @@
84
84
  width: 50%;
85
85
  left: 25%;
86
86
  top: 25%;
87
+
88
+ // Icon is purely decorative — keep physical positioning in RTL
89
+ [dir="rtl"] & {
90
+ transform: rotate(45deg) scaleX(-1);
91
+ }
87
92
  }
88
93
 
89
94
  .process-icon-horizontal,
@@ -231,7 +236,7 @@
231
236
  }
232
237
  }
233
238
  .process-size(
234
- xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
239
+ xxs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
235
240
  );
236
241
  .process-size(
237
242
  xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
@@ -244,6 +249,10 @@
244
249
  );
245
250
 
246
251
  .process-xxs {
252
+ .process-icon-container {
253
+ display: none;
254
+ }
255
+
247
256
  .process-circle {
248
257
  animation-name: process-chase-circle-xxs;
249
258
  }
@@ -379,11 +388,9 @@
379
388
  }
380
389
 
381
390
  .btn .process:first-child {
382
- .margin(left, -12px);
383
-
384
- .margin(right, 12px);
385
-
386
- .float(left);
391
+ margin-left: -12px;
392
+ margin-right: 12px;
393
+ float: left;
387
394
  }
388
395
 
389
396
  .btn-block .process:first-child {
package/src/styles/less/tick.css CHANGED
@@ -10,10 +10,13 @@
10
10
  position: absolute;
11
11
  background: #ffffff;
12
12
  background: var(--color-background-screen);
13
- transform: translateX(0.5px) rotate(-45deg);
13
+ transform: translateX(-1.5px) rotate(-45deg);
14
14
  transform-origin: left bottom;
15
- inset-inline-start: 8px;
16
- inset-inline-start: var(--size-8);
15
+ }
16
+ [dir="rtl"] .tw-checkbox-check::before,
17
+ [dir="rtl"] .tw-checkbox-check::after {
18
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
19
+ transform-origin: right bottom;
17
20
  }
18
21
  .tw-checkbox-check .has-error::before,
19
22
  .tw-checkbox-check .has-error::after {
package/src/styles/less/tick.less CHANGED
@@ -11,9 +11,13 @@
11
11
  content: "";
12
12
  position: absolute;
13
13
  background: var(--color-background-screen);
14
- transform: translateX(0.5px) rotate(-45deg);
14
+ transform: translateX(-1.5px) rotate(-45deg);
15
15
  transform-origin: left bottom;
16
- left: var(--size-8);
16
+
17
+ [dir="rtl"] & {
18
+ transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
19
+ transform-origin: right bottom;
20
+ }
17
21
  }
18
22
 
19
23
  .has-error {
@@ -34,4 +38,4 @@
34
38
  height: 2px;
35
39
  width: 11px;
36
40
  }
37
- }
41
+ }