@transferwise/components 46.116.1 → 46.117.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 (68) hide show
  1. package/build/main.css +145 -156
  2. package/build/prompt/InlinePrompt/InlinePrompt.js +14 -8
  3. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  4. package/build/prompt/InlinePrompt/InlinePrompt.mjs +15 -9
  5. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  6. package/build/sentimentSurface/SentimentSurface.js +6 -5
  7. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  8. package/build/sentimentSurface/SentimentSurface.mjs +6 -5
  9. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  10. package/build/styles/button/Button.css +22 -22
  11. package/build/styles/button/Button.vars.css +21 -21
  12. package/build/styles/iconButton/IconButton.css +8 -8
  13. package/build/styles/link/Link.css +1 -0
  14. package/build/styles/main.css +145 -156
  15. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +26 -105
  16. package/build/styles/sentimentSurface/SentimentSurface.css +88 -21
  17. package/build/types/button/_stories/helpers.d.ts +11 -0
  18. package/build/types/button/_stories/helpers.d.ts.map +1 -0
  19. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +19 -3
  20. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  21. package/build/types/sentimentSurface/SentimentSurface.d.ts +5 -4
  22. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  23. package/build/types/sentimentSurface/SentimentSurface.types.d.ts +4 -16
  24. package/build/types/sentimentSurface/SentimentSurface.types.d.ts.map +1 -1
  25. package/build/types/test-utils/story-config.d.ts +25 -1
  26. package/build/types/test-utils/story-config.d.ts.map +1 -1
  27. package/package.json +13 -12
  28. package/src/button/Button.css +22 -22
  29. package/src/button/Button.less +1 -1
  30. package/src/button/Button.vars.css +21 -21
  31. package/src/button/Button.vars.less +63 -23
  32. package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} +1 -1
  33. package/src/button/_stories/Button.brightGreen.tests.story.tsx +31 -0
  34. package/src/button/_stories/Button.dark.tests.story.tsx +25 -0
  35. package/src/button/_stories/Button.default.tests.story.tsx +25 -0
  36. package/src/button/_stories/Button.forestGreen.tests.story.tsx +28 -0
  37. package/src/button/{Button.story.tsx → _stories/Button.story.tsx} +78 -113
  38. package/src/button/_stories/Button.tests.story.tsx +139 -0
  39. package/src/button/_stories/helpers.tsx +118 -0
  40. package/src/iconButton/IconButton.css +8 -8
  41. package/src/iconButton/IconButton.less +35 -4
  42. package/src/iconButton/IconButton.story.tsx +72 -3
  43. package/src/link/Link.css +1 -0
  44. package/src/link/Link.less +1 -0
  45. package/src/link/Link.story.tsx +28 -0
  46. package/src/main.css +145 -156
  47. package/src/prompt/InlinePrompt/InlinePrompt.css +26 -105
  48. package/src/prompt/InlinePrompt/InlinePrompt.less +31 -119
  49. package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +87 -29
  50. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +223 -31
  51. package/src/prompt/InlinePrompt/InlinePrompt.tsx +42 -11
  52. package/src/sentimentSurface/SentimentSurface.css +88 -21
  53. package/src/sentimentSurface/SentimentSurface.docs.mdx +32 -495
  54. package/src/sentimentSurface/SentimentSurface.less +151 -114
  55. package/src/sentimentSurface/SentimentSurface.spec.tsx +31 -11
  56. package/src/sentimentSurface/SentimentSurface.story.tsx +323 -108
  57. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +90 -40
  58. package/src/sentimentSurface/SentimentSurface.tsx +16 -9
  59. package/src/sentimentSurface/SentimentSurface.types.ts +5 -20
  60. package/src/test-utils/story-config.ts +5 -1
  61. package/build/sentimentSurface/classMap.js +0 -17
  62. package/build/sentimentSurface/classMap.js.map +0 -1
  63. package/build/sentimentSurface/classMap.mjs +0 -14
  64. package/build/sentimentSurface/classMap.mjs.map +0 -1
  65. package/build/types/sentimentSurface/classMap.d.ts +0 -4
  66. package/build/types/sentimentSurface/classMap.d.ts.map +0 -1
  67. package/src/button/Button.tests.story.tsx +0 -27
  68. package/src/sentimentSurface/classMap.ts +0 -15
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -1,5 +1,15 @@
1
+ .wds-sentiment-surface {
2
+ --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
+ }
4
+ .wds-sentiment-surface--hasBaseStyles {
5
+ background-color: var(--color-sentiment-background-surface);
6
+ color: var(--color-sentiment-content-primary);
7
+ }
1
8
  .np-theme-personal .wds-sentiment-surface-negative-base,
2
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-base {
9
+ .np-theme-business .wds-sentiment-surface-negative-base,
10
+ .np-theme-platform .wds-sentiment-surface-negative-base,
11
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-base,
12
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-base {
3
13
  --color-sentiment-content-primary: #CB272F;
4
14
  --color-sentiment-content-primary-hover: #B8232B;
5
15
  --color-sentiment-content-primary-active: #A72027;
@@ -20,7 +30,10 @@
20
30
  --color-sentiment-background-surface-active: #F8D8D8;
21
31
  }
22
32
  .np-theme-personal .wds-sentiment-surface-negative-elevated,
23
- .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated {
33
+ .np-theme-business .wds-sentiment-surface-negative-elevated,
34
+ .np-theme-platform .wds-sentiment-surface-negative-elevated,
35
+ .np-theme-personal--bright-green .wds-sentiment-surface-negative-elevated,
36
+ .np-theme-business--bright-green .wds-sentiment-surface-negative-elevated {
24
37
  --color-sentiment-content-primary: #FFFFFF;
25
38
  --color-sentiment-content-primary-hover: #F5CCCC;
26
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -32,7 +45,7 @@
32
45
  --color-sentiment-interactive-secondary-active: #A72027;
33
46
  --color-sentiment-interactive-secondary-neutral: #9B141B;
34
47
  --color-sentiment-interactive-secondary-neutral-hover: #831116;
35
- --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
48
+ --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
36
49
  --color-sentiment-interactive-control: #CB272F;
37
50
  --color-sentiment-interactive-control-hover: #B8232B;
38
51
  --color-sentiment-interactive-control-active: #A72027;
@@ -41,7 +54,10 @@
41
54
  --color-sentiment-background-surface-active: #A72027;
42
55
  }
43
56
  .np-theme-personal--dark .wds-sentiment-surface-negative-base,
44
- .np-theme-personal--forest-green .wds-sentiment-surface-negative-base {
57
+ .np-theme-business--dark .wds-sentiment-surface-negative-base,
58
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-base,
59
+ .np-theme-business--forest-green .wds-sentiment-surface-negative-base,
60
+ .np-theme-platform--forest-green .wds-sentiment-surface-negative-base {
45
61
  --color-sentiment-content-primary: #FFA8AD;
46
62
  --color-sentiment-content-primary-hover: #FFBDC0;
47
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -62,7 +78,10 @@
62
78
  --color-sentiment-background-surface-active: #761418;
63
79
  }
64
80
  .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
65
- .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated {
81
+ .np-theme-business--dark .wds-sentiment-surface-negative-elevated,
82
+ .np-theme-personal--forest-green .wds-sentiment-surface-negative-elevated,
83
+ .np-theme-business--forest-green .wds-sentiment-surface-negative-elevated,
84
+ .np-theme-platform--forest-green .wds-sentiment-surface-negative-elevated {
66
85
  --color-sentiment-content-primary: #410B0D;
67
86
  --color-sentiment-content-primary-hover: #641115;
68
87
  --color-sentiment-content-primary-active: #761418;
@@ -83,7 +102,10 @@
83
102
  --color-sentiment-background-surface-active: #FFD1D3;
84
103
  }
85
104
  .np-theme-personal .wds-sentiment-surface-warning-base,
86
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-base {
105
+ .np-theme-business .wds-sentiment-surface-warning-base,
106
+ .np-theme-platform .wds-sentiment-surface-warning-base,
107
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-base,
108
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-base {
87
109
  --color-sentiment-content-primary: #4A3B1C;
88
110
  --color-sentiment-content-primary-hover: #302612;
89
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -104,7 +126,10 @@
104
126
  --color-sentiment-background-surface-active: #FFE98F;
105
127
  }
106
128
  .np-theme-personal .wds-sentiment-surface-warning-elevated,
107
- .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated {
129
+ .np-theme-business .wds-sentiment-surface-warning-elevated,
130
+ .np-theme-platform .wds-sentiment-surface-warning-elevated,
131
+ .np-theme-personal--bright-green .wds-sentiment-surface-warning-elevated,
132
+ .np-theme-business--bright-green .wds-sentiment-surface-warning-elevated {
108
133
  --color-sentiment-content-primary: #4A3B1C;
109
134
  --color-sentiment-content-primary-hover: #302612;
110
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -125,7 +150,10 @@
125
150
  --color-sentiment-background-surface-active: #FFBB00;
126
151
  }
127
152
  .np-theme-personal--dark .wds-sentiment-surface-warning-base,
128
- .np-theme-personal--forest-green .wds-sentiment-surface-warning-base {
153
+ .np-theme-business--dark .wds-sentiment-surface-warning-base,
154
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-base,
155
+ .np-theme-business--forest-green .wds-sentiment-surface-warning-base,
156
+ .np-theme-platform--forest-green .wds-sentiment-surface-warning-base {
129
157
  --color-sentiment-content-primary: #FADC65;
130
158
  --color-sentiment-content-primary-hover: #F9D648;
131
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -146,7 +174,10 @@
146
174
  --color-sentiment-background-surface-active: #665D3D;
147
175
  }
148
176
  .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
149
- .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated {
177
+ .np-theme-business--dark .wds-sentiment-surface-warning-elevated,
178
+ .np-theme-personal--forest-green .wds-sentiment-surface-warning-elevated,
179
+ .np-theme-business--forest-green .wds-sentiment-surface-warning-elevated,
180
+ .np-theme-platform--forest-green .wds-sentiment-surface-warning-elevated {
150
181
  --color-sentiment-content-primary: #3A3523;
151
182
  --color-sentiment-content-primary-hover: #504930;
152
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -167,7 +198,10 @@
167
198
  --color-sentiment-background-surface-active: #F8CD20;
168
199
  }
169
200
  .np-theme-personal .wds-sentiment-surface-success-base,
170
- .np-theme-personal--bright-green .wds-sentiment-surface-success-base {
201
+ .np-theme-business .wds-sentiment-surface-success-base,
202
+ .np-theme-platform .wds-sentiment-surface-success-base,
203
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-base,
204
+ .np-theme-business--bright-green .wds-sentiment-surface-success-base {
171
205
  --color-sentiment-content-primary: #054D28;
172
206
  --color-sentiment-content-primary-hover: #043A1E;
173
207
  --color-sentiment-content-primary-active: #022614;
@@ -188,7 +222,10 @@
188
222
  --color-sentiment-background-surface-active: #C5EDAB;
189
223
  }
190
224
  .np-theme-personal .wds-sentiment-surface-success-elevated,
191
- .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated {
225
+ .np-theme-business .wds-sentiment-surface-success-elevated,
226
+ .np-theme-platform .wds-sentiment-surface-success-elevated,
227
+ .np-theme-personal--bright-green .wds-sentiment-surface-success-elevated,
228
+ .np-theme-business--bright-green .wds-sentiment-surface-success-elevated {
192
229
  --color-sentiment-content-primary: #E2F6D5;
193
230
  --color-sentiment-content-primary-hover: #D3F2C0;
194
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -209,7 +246,10 @@
209
246
  --color-sentiment-background-surface-active: #022614;
210
247
  }
211
248
  .np-theme-personal--dark .wds-sentiment-surface-success-base,
212
- .np-theme-personal--forest-green .wds-sentiment-surface-success-base {
249
+ .np-theme-business--dark .wds-sentiment-surface-success-base,
250
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-base,
251
+ .np-theme-business--forest-green .wds-sentiment-surface-success-base,
252
+ .np-theme-platform--forest-green .wds-sentiment-surface-success-base {
213
253
  --color-sentiment-content-primary: #BAE5A0;
214
254
  --color-sentiment-content-primary-hover: #C8EAB3;
215
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -230,7 +270,10 @@
230
270
  --color-sentiment-background-surface-active: #3E4A36;
231
271
  }
232
272
  .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
233
- .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated {
273
+ .np-theme-business--dark .wds-sentiment-surface-success-elevated,
274
+ .np-theme-personal--forest-green .wds-sentiment-surface-success-elevated,
275
+ .np-theme-business--forest-green .wds-sentiment-surface-success-elevated,
276
+ .np-theme-platform--forest-green .wds-sentiment-surface-success-elevated {
234
277
  --color-sentiment-content-primary: #252C20;
235
278
  --color-sentiment-content-primary-hover: #323B2B;
236
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -251,7 +294,10 @@
251
294
  --color-sentiment-background-surface-active: #D6F0C7;
252
295
  }
253
296
  .np-theme-personal .wds-sentiment-surface-neutral-base,
254
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base {
297
+ .np-theme-business .wds-sentiment-surface-neutral-base,
298
+ .np-theme-platform .wds-sentiment-surface-neutral-base,
299
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-base,
300
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-base {
255
301
  --color-sentiment-content-primary: #454745;
256
302
  --color-sentiment-content-primary-hover: #353635;
257
303
  --color-sentiment-content-primary-active: #232423;
@@ -272,7 +318,10 @@
272
318
  --color-sentiment-background-surface-active: #DFDED5;
273
319
  }
274
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
275
- .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated {
321
+ .np-theme-business .wds-sentiment-surface-neutral-elevated,
322
+ .np-theme-platform .wds-sentiment-surface-neutral-elevated,
323
+ .np-theme-personal--bright-green .wds-sentiment-surface-neutral-elevated,
324
+ .np-theme-business--bright-green .wds-sentiment-surface-neutral-elevated {
276
325
  --color-sentiment-content-primary: #F1F1ED;
277
326
  --color-sentiment-content-primary-hover: #E7E7E1;
278
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -293,7 +342,10 @@
293
342
  --color-sentiment-background-surface-active: #232423;
294
343
  }
295
344
  .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
296
- .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base {
345
+ .np-theme-business--dark .wds-sentiment-surface-neutral-base,
346
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-base,
347
+ .np-theme-business--forest-green .wds-sentiment-surface-neutral-base,
348
+ .np-theme-platform--forest-green .wds-sentiment-surface-neutral-base {
297
349
  --color-sentiment-content-primary: #F1F1ED;
298
350
  --color-sentiment-content-primary-hover: #E7E7E1;
299
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -314,7 +366,10 @@
314
366
  --color-sentiment-background-surface-active: #595B58;
315
367
  }
316
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
317
- .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated {
369
+ .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
370
+ .np-theme-personal--forest-green .wds-sentiment-surface-neutral-elevated,
371
+ .np-theme-business--forest-green .wds-sentiment-surface-neutral-elevated,
372
+ .np-theme-platform--forest-green .wds-sentiment-surface-neutral-elevated {
318
373
  --color-sentiment-content-primary: #2A2C29;
319
374
  --color-sentiment-content-primary-hover: #414441;
320
375
  --color-sentiment-content-primary-active: #595B58;
@@ -335,7 +390,10 @@
335
390
  --color-sentiment-background-surface-active: #DFDED5;
336
391
  }
337
392
  .np-theme-personal .wds-sentiment-surface-proposition-base,
338
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base {
393
+ .np-theme-business .wds-sentiment-surface-proposition-base,
394
+ .np-theme-platform .wds-sentiment-surface-proposition-base,
395
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-base,
396
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-base {
339
397
  --color-sentiment-content-primary: #0E0F0C;
340
398
  --color-sentiment-content-primary-hover: #0A2826;
341
399
  --color-sentiment-content-primary-active: #074140;
@@ -356,7 +414,10 @@
356
414
  --color-sentiment-background-surface-active: #B6ECEC;
357
415
  }
358
416
  .np-theme-personal .wds-sentiment-surface-proposition-elevated,
359
- .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated {
417
+ .np-theme-business .wds-sentiment-surface-proposition-elevated,
418
+ .np-theme-platform .wds-sentiment-surface-proposition-elevated,
419
+ .np-theme-personal--bright-green .wds-sentiment-surface-proposition-elevated,
420
+ .np-theme-business--bright-green .wds-sentiment-surface-proposition-elevated {
360
421
  --color-sentiment-content-primary: #FFFFFF;
361
422
  --color-sentiment-content-primary-hover: #EAF9F9;
362
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -377,7 +438,10 @@
377
438
  --color-sentiment-background-surface-active: #022626;
378
439
  }
379
440
  .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
380
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base {
441
+ .np-theme-business--dark .wds-sentiment-surface-proposition-base,
442
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-base,
443
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-base,
444
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-base {
381
445
  --color-sentiment-content-primary: #FFFFFF;
382
446
  --color-sentiment-content-primary-hover: #EAF9F9;
383
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -398,7 +462,10 @@
398
462
  --color-sentiment-background-surface-active: #176460;
399
463
  }
400
464
  .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
401
- .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated {
465
+ .np-theme-business--dark .wds-sentiment-surface-proposition-elevated,
466
+ .np-theme-personal--forest-green .wds-sentiment-surface-proposition-elevated,
467
+ .np-theme-business--forest-green .wds-sentiment-surface-proposition-elevated,
468
+ .np-theme-platform--forest-green .wds-sentiment-surface-proposition-elevated {
402
469
  --color-sentiment-content-primary: #0E0F0C;
403
470
  --color-sentiment-content-primary-hover: #0A2826;
404
471
  --color-sentiment-content-primary-active: #074140;