@transferwise/components 46.117.0 → 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 (25) hide show
  1. package/build/main.css +85 -25
  2. package/build/styles/button/Button.css +5 -5
  3. package/build/styles/button/Button.vars.css +5 -5
  4. package/build/styles/main.css +85 -25
  5. package/build/styles/sentimentSurface/SentimentSurface.css +80 -20
  6. package/build/types/button/_stories/helpers.d.ts +11 -0
  7. package/build/types/button/_stories/helpers.d.ts.map +1 -0
  8. package/build/types/test-utils/story-config.d.ts +1 -1
  9. package/build/types/test-utils/story-config.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/src/button/Button.css +5 -5
  12. package/src/button/Button.vars.css +5 -5
  13. package/src/button/Button.vars.less +5 -5
  14. package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} +1 -1
  15. package/src/button/_stories/Button.brightGreen.tests.story.tsx +31 -0
  16. package/src/button/_stories/Button.dark.tests.story.tsx +25 -0
  17. package/src/button/_stories/Button.default.tests.story.tsx +25 -0
  18. package/src/button/_stories/Button.forestGreen.tests.story.tsx +28 -0
  19. package/src/button/{Button.story.tsx → _stories/Button.story.tsx} +6 -6
  20. package/src/button/{Button.tests.story.tsx → _stories/Button.tests.story.tsx} +5 -82
  21. package/src/button/_stories/helpers.tsx +118 -0
  22. package/src/main.css +85 -25
  23. package/src/sentimentSurface/SentimentSurface.css +80 -20
  24. package/src/sentimentSurface/SentimentSurface.less +40 -10
  25. package/src/test-utils/story-config.ts +5 -0
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -6,7 +6,10 @@
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
8
  .np-theme-personal .wds-sentiment-surface-negative-base,
9
- .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 {
10
13
  --color-sentiment-content-primary: #CB272F;
11
14
  --color-sentiment-content-primary-hover: #B8232B;
12
15
  --color-sentiment-content-primary-active: #A72027;
@@ -27,7 +30,10 @@
27
30
  --color-sentiment-background-surface-active: #F8D8D8;
28
31
  }
29
32
  .np-theme-personal .wds-sentiment-surface-negative-elevated,
30
- .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 {
31
37
  --color-sentiment-content-primary: #FFFFFF;
32
38
  --color-sentiment-content-primary-hover: #F5CCCC;
33
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -48,7 +54,10 @@
48
54
  --color-sentiment-background-surface-active: #A72027;
49
55
  }
50
56
  .np-theme-personal--dark .wds-sentiment-surface-negative-base,
51
- .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 {
52
61
  --color-sentiment-content-primary: #FFA8AD;
53
62
  --color-sentiment-content-primary-hover: #FFBDC0;
54
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -69,7 +78,10 @@
69
78
  --color-sentiment-background-surface-active: #761418;
70
79
  }
71
80
  .np-theme-personal--dark .wds-sentiment-surface-negative-elevated,
72
- .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 {
73
85
  --color-sentiment-content-primary: #410B0D;
74
86
  --color-sentiment-content-primary-hover: #641115;
75
87
  --color-sentiment-content-primary-active: #761418;
@@ -90,7 +102,10 @@
90
102
  --color-sentiment-background-surface-active: #FFD1D3;
91
103
  }
92
104
  .np-theme-personal .wds-sentiment-surface-warning-base,
93
- .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 {
94
109
  --color-sentiment-content-primary: #4A3B1C;
95
110
  --color-sentiment-content-primary-hover: #302612;
96
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -111,7 +126,10 @@
111
126
  --color-sentiment-background-surface-active: #FFE98F;
112
127
  }
113
128
  .np-theme-personal .wds-sentiment-surface-warning-elevated,
114
- .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 {
115
133
  --color-sentiment-content-primary: #4A3B1C;
116
134
  --color-sentiment-content-primary-hover: #302612;
117
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -132,7 +150,10 @@
132
150
  --color-sentiment-background-surface-active: #FFBB00;
133
151
  }
134
152
  .np-theme-personal--dark .wds-sentiment-surface-warning-base,
135
- .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 {
136
157
  --color-sentiment-content-primary: #FADC65;
137
158
  --color-sentiment-content-primary-hover: #F9D648;
138
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -153,7 +174,10 @@
153
174
  --color-sentiment-background-surface-active: #665D3D;
154
175
  }
155
176
  .np-theme-personal--dark .wds-sentiment-surface-warning-elevated,
156
- .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 {
157
181
  --color-sentiment-content-primary: #3A3523;
158
182
  --color-sentiment-content-primary-hover: #504930;
159
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -174,7 +198,10 @@
174
198
  --color-sentiment-background-surface-active: #F8CD20;
175
199
  }
176
200
  .np-theme-personal .wds-sentiment-surface-success-base,
177
- .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 {
178
205
  --color-sentiment-content-primary: #054D28;
179
206
  --color-sentiment-content-primary-hover: #043A1E;
180
207
  --color-sentiment-content-primary-active: #022614;
@@ -195,7 +222,10 @@
195
222
  --color-sentiment-background-surface-active: #C5EDAB;
196
223
  }
197
224
  .np-theme-personal .wds-sentiment-surface-success-elevated,
198
- .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 {
199
229
  --color-sentiment-content-primary: #E2F6D5;
200
230
  --color-sentiment-content-primary-hover: #D3F2C0;
201
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -216,7 +246,10 @@
216
246
  --color-sentiment-background-surface-active: #022614;
217
247
  }
218
248
  .np-theme-personal--dark .wds-sentiment-surface-success-base,
219
- .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 {
220
253
  --color-sentiment-content-primary: #BAE5A0;
221
254
  --color-sentiment-content-primary-hover: #C8EAB3;
222
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -237,7 +270,10 @@
237
270
  --color-sentiment-background-surface-active: #3E4A36;
238
271
  }
239
272
  .np-theme-personal--dark .wds-sentiment-surface-success-elevated,
240
- .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 {
241
277
  --color-sentiment-content-primary: #252C20;
242
278
  --color-sentiment-content-primary-hover: #323B2B;
243
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -258,7 +294,10 @@
258
294
  --color-sentiment-background-surface-active: #D6F0C7;
259
295
  }
260
296
  .np-theme-personal .wds-sentiment-surface-neutral-base,
261
- .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 {
262
301
  --color-sentiment-content-primary: #454745;
263
302
  --color-sentiment-content-primary-hover: #353635;
264
303
  --color-sentiment-content-primary-active: #232423;
@@ -279,7 +318,10 @@
279
318
  --color-sentiment-background-surface-active: #DFDED5;
280
319
  }
281
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
282
- .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 {
283
325
  --color-sentiment-content-primary: #F1F1ED;
284
326
  --color-sentiment-content-primary-hover: #E7E7E1;
285
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -300,7 +342,10 @@
300
342
  --color-sentiment-background-surface-active: #232423;
301
343
  }
302
344
  .np-theme-personal--dark .wds-sentiment-surface-neutral-base,
303
- .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 {
304
349
  --color-sentiment-content-primary: #F1F1ED;
305
350
  --color-sentiment-content-primary-hover: #E7E7E1;
306
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -321,7 +366,10 @@
321
366
  --color-sentiment-background-surface-active: #595B58;
322
367
  }
323
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
324
- .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 {
325
373
  --color-sentiment-content-primary: #2A2C29;
326
374
  --color-sentiment-content-primary-hover: #414441;
327
375
  --color-sentiment-content-primary-active: #595B58;
@@ -342,7 +390,10 @@
342
390
  --color-sentiment-background-surface-active: #DFDED5;
343
391
  }
344
392
  .np-theme-personal .wds-sentiment-surface-proposition-base,
345
- .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 {
346
397
  --color-sentiment-content-primary: #0E0F0C;
347
398
  --color-sentiment-content-primary-hover: #0A2826;
348
399
  --color-sentiment-content-primary-active: #074140;
@@ -363,7 +414,10 @@
363
414
  --color-sentiment-background-surface-active: #B6ECEC;
364
415
  }
365
416
  .np-theme-personal .wds-sentiment-surface-proposition-elevated,
366
- .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 {
367
421
  --color-sentiment-content-primary: #FFFFFF;
368
422
  --color-sentiment-content-primary-hover: #EAF9F9;
369
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -384,7 +438,10 @@
384
438
  --color-sentiment-background-surface-active: #022626;
385
439
  }
386
440
  .np-theme-personal--dark .wds-sentiment-surface-proposition-base,
387
- .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 {
388
445
  --color-sentiment-content-primary: #FFFFFF;
389
446
  --color-sentiment-content-primary-hover: #EAF9F9;
390
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -405,7 +462,10 @@
405
462
  --color-sentiment-background-surface-active: #176460;
406
463
  }
407
464
  .np-theme-personal--dark .wds-sentiment-surface-proposition-elevated,
408
- .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 {
409
469
  --color-sentiment-content-primary: #0E0F0C;
410
470
  --color-sentiment-content-primary-hover: #0A2826;
411
471
  --color-sentiment-content-primary-active: #074140;
package/build/types/button/_stories/helpers.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ interface GenerateSurfaceVariantProps {
2
+ theme?: 'forest-green' | 'bright-green' | 'dark';
3
+ sentiment: 'success' | 'warning' | 'negative' | 'neutral' | 'proposition';
4
+ }
5
+ export declare const generateSurfaceVariant: ({ theme, sentiment }: GenerateSurfaceVariantProps) => {
6
+ storyName: string;
7
+ render: () => import("react").JSX.Element;
8
+ decorators: ((Story: React.ComponentType) => import("react").JSX.Element)[];
9
+ };
10
+ export {};
11
+ //# sourceMappingURL=helpers.d.ts.map
package/build/types/button/_stories/helpers.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/button/_stories/helpers.tsx"],"names":[],"mappings":"AAOA,UAAU,2BAA2B;IACnC,KAAK,CAAC,EAAE,cAAc,GAAG,cAAc,GAAG,MAAM,CAAC;IACjD,SAAS,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;CAC3E;AACD,eAAO,MAAM,sBAAsB,GAAI,sBAAsB,2BAA2B;;;yBAoG5E,KAAK,CAAC,aAAa;CAM7B,CAAC"}
package/build/types/test-utils/story-config.d.ts CHANGED
@@ -55,7 +55,7 @@ export interface StoryConfig {
55
55
  *
56
56
  * @default undefined
57
57
  */
58
- variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'rtl' | 'mobile' | '400%')[];
58
+ variants?: ('default' | 'light' | 'dark' | 'bright-green' | 'forest-green' | 'business' | 'business--forest-green' | 'business--bright-green' | 'platform' | 'platform--forest-green' | 'rtl' | 'mobile' | '400%')[];
59
59
  }
60
60
  /**
61
61
  * Utility function for creating variants of a CSFv3 story.
package/build/types/test-utils/story-config.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAkBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}
1
+ {"version":3,"file":"story-config.d.ts","sourceRoot":"","sources":["../../../src/test-utils/story-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAarB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,CACP,SAAS,GACT,OAAO,GACP,MAAM,GACN,cAAc,GACd,cAAc,GACd,UAAU,GACV,wBAAwB,GACxB,wBAAwB,GACxB,UAAU,GACV,wBAAwB,GACxB,KAAK,GACL,QAAQ,GACR,MAAM,CACT,EAAE,CAAC;CACL;AAkBD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,IAAI,EAC9B,aAAa,QAAQ,CAAC,IAAI,CAAC,EAC3B,cAAc,WAAW,KACxB,QAAQ,CAAC,IAAI,CAuBf,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.117.0",
3
+ "version": "46.117.1",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -85,9 +85,9 @@
85
85
  "storybook-addon-tag-badges": "^3.0.4",
86
86
  "storybook-addon-test-codegen": "^3.0.1",
87
87
  "@transferwise/less-config": "3.1.2",
88
- "@transferwise/neptune-css": "14.26.0",
88
+ "@wise/wds-configs": "0.0.0",
89
89
  "@wise/components-theming": "1.9.1",
90
- "@wise/wds-configs": "0.0.0"
90
+ "@transferwise/neptune-css": "14.26.0"
91
91
  },
92
92
  "peerDependencies": {
93
93
  "@transferwise/icons": "^3 || ^4",
package/src/button/Button.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/src/button/Button.vars.css CHANGED
@@ -24,11 +24,11 @@
24
24
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
25
25
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
26
26
  --Button-tertiary-background: transparent;
27
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
28
- --Button-tertiary-background-active: var(--color-background-screen-active);
29
- --Button-tertiary-color: var(--color-interactive-primary);
30
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
31
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
27
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
28
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
29
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
30
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
31
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
34
34
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/src/button/Button.vars.less CHANGED
@@ -71,11 +71,11 @@
71
71
  );
72
72
 
73
73
  --Button-tertiary-background: transparent;
74
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
75
- --Button-tertiary-background-active: var(--color-background-screen-active);
76
- --Button-tertiary-color: var(--color-interactive-primary);
77
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
78
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
74
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
75
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
76
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
77
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
78
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
79
79
 
80
80
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
81
81
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} RENAMED
@@ -1,6 +1,6 @@
1
1
  import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
2
- import { NavigationOption } from '..';
3
2
  import { Bulb } from '@transferwise/icons';
3
+ import { NavigationOption } from '../../navigationOption/NavigationOption';
4
4
  import * as stories from './Button.story';
5
5
 
6
6
  <Meta title="Actions/Button/Accessibility" />
package/src/button/_stories/Button.brightGreen.tests.story.tsx ADDED
@@ -0,0 +1,31 @@
1
+ import { Meta } from '@storybook/react-webpack5';
2
+ import Button from '../Button.resolver';
3
+ import { generateSurfaceVariant } from './helpers';
4
+
5
+ const meta: Meta<typeof Button> = {
6
+ component: Button,
7
+ title: 'Actions/Button/Tests/theme: bright green',
8
+ tags: ['!autodocs'],
9
+ };
10
+ export default meta;
11
+
12
+ export const Success = generateSurfaceVariant({
13
+ sentiment: 'success',
14
+ theme: 'bright-green',
15
+ });
16
+ Success.storyName = 'Sentiment awareness: success';
17
+
18
+ export const Warning = generateSurfaceVariant({ sentiment: 'warning', theme: 'bright-green' });
19
+ Warning.storyName = 'Sentiment awareness: warning';
20
+
21
+ export const Negative = generateSurfaceVariant({ sentiment: 'negative', theme: 'bright-green' });
22
+ Negative.storyName = 'Sentiment awareness: negative';
23
+
24
+ export const Neutral = generateSurfaceVariant({ sentiment: 'neutral', theme: 'bright-green' });
25
+ Neutral.storyName = 'Sentiment awareness: neutral';
26
+
27
+ export const Proposition = generateSurfaceVariant({
28
+ sentiment: 'proposition',
29
+ theme: 'bright-green',
30
+ });
31
+ Proposition.storyName = 'Sentiment awareness: proposition';
package/src/button/_stories/Button.dark.tests.story.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { Meta } from '@storybook/react-webpack5';
2
+ import Button from '../Button.resolver';
3
+ import { generateSurfaceVariant } from './helpers';
4
+
5
+ const meta: Meta<typeof Button> = {
6
+ component: Button,
7
+ title: 'Actions/Button/Tests/theme: dark mode',
8
+ tags: ['!autodocs'],
9
+ };
10
+ export default meta;
11
+
12
+ export const Success = generateSurfaceVariant({ theme: 'dark', sentiment: 'success' });
13
+ Success.storyName = 'Sentiment awareness: success';
14
+
15
+ export const Warning = generateSurfaceVariant({ theme: 'dark', sentiment: 'warning' });
16
+ Warning.storyName = 'Sentiment awareness: warning';
17
+
18
+ export const Negative = generateSurfaceVariant({ theme: 'dark', sentiment: 'negative' });
19
+ Negative.storyName = 'Sentiment awareness: negative';
20
+
21
+ export const Neutral = generateSurfaceVariant({ theme: 'dark', sentiment: 'neutral' });
22
+ Neutral.storyName = 'Sentiment awareness: neutral';
23
+
24
+ export const Proposition = generateSurfaceVariant({ theme: 'dark', sentiment: 'proposition' });
25
+ Proposition.storyName = 'Sentiment awareness: proposition';
package/src/button/_stories/Button.default.tests.story.tsx ADDED
@@ -0,0 +1,25 @@
1
+ import { Meta } from '@storybook/react-webpack5';
2
+ import Button from '../Button.resolver';
3
+ import { generateSurfaceVariant } from './helpers';
4
+
5
+ const meta: Meta<typeof Button> = {
6
+ component: Button,
7
+ title: 'Actions/Button/Tests/theme: default',
8
+ tags: ['!autodocs'],
9
+ };
10
+ export default meta;
11
+
12
+ export const Success = generateSurfaceVariant({ sentiment: 'success' });
13
+ Success.storyName = 'Sentiment awareness: success';
14
+
15
+ export const Warning = generateSurfaceVariant({ sentiment: 'warning' });
16
+ Warning.storyName = 'Sentiment awareness: warning';
17
+
18
+ export const Negative = generateSurfaceVariant({ sentiment: 'negative' });
19
+ Negative.storyName = 'Sentiment awareness: negative';
20
+
21
+ export const Neutral = generateSurfaceVariant({ sentiment: 'neutral' });
22
+ Neutral.storyName = 'Sentiment awareness: neutral';
23
+
24
+ export const Proposition = generateSurfaceVariant({ sentiment: 'proposition' });
25
+ Proposition.storyName = 'Sentiment awareness: proposition';
package/src/button/_stories/Button.forestGreen.tests.story.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import { Meta } from '@storybook/react-webpack5';
2
+ import Button from '../Button.resolver';
3
+ import { generateSurfaceVariant } from './helpers';
4
+
5
+ const meta: Meta<typeof Button> = {
6
+ component: Button,
7
+ title: 'Actions/Button/Tests/theme: forest green',
8
+ tags: ['!autodocs'],
9
+ };
10
+ export default meta;
11
+
12
+ export const Success = generateSurfaceVariant({ sentiment: 'success', theme: 'forest-green' });
13
+ Success.storyName = 'Sentiment awareness: success';
14
+
15
+ export const Warning = generateSurfaceVariant({ sentiment: 'warning', theme: 'forest-green' });
16
+ Warning.storyName = 'Sentiment awareness: warning';
17
+
18
+ export const Negative = generateSurfaceVariant({ sentiment: 'negative', theme: 'forest-green' });
19
+ Negative.storyName = 'Sentiment awareness: negative';
20
+
21
+ export const Neutral = generateSurfaceVariant({ sentiment: 'neutral', theme: 'forest-green' });
22
+ Neutral.storyName = 'Sentiment awareness: neutral';
23
+
24
+ export const Proposition = generateSurfaceVariant({
25
+ sentiment: 'proposition',
26
+ theme: 'forest-green',
27
+ });
28
+ Proposition.storyName = 'Sentiment awareness: proposition';
package/src/button/{Button.story.tsx → _stories/Button.story.tsx} RENAMED
@@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
2
  import { fn } from 'storybook/test';
3
3
  import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
4
4
  import { Flag } from '@wise/art';
5
- import Button from './Button.resolver';
6
- import type { ButtonProps, ButtonPriority } from './Button.types';
7
- import { lorem10, lorem20, storyConfig } from '../test-utils';
8
- import SentimentSurface from '../sentimentSurface';
5
+ import { lorem10, lorem20 } from '../../test-utils';
6
+ import SentimentSurface from '../../sentimentSurface';
7
+ import type { ButtonProps } from '../Button.types';
8
+ import Button from '../Button.resolver';
9
9
 
10
10
  const withContainer = (Story: any) => (
11
11
  <div style={{ display: 'flex', justifyContent: 'center' }}>
@@ -801,8 +801,8 @@ export const AccessibilityAddons: Story = {
801
801
  };
802
802
 
803
803
  /**
804
- * `Button` is sentiment-aware and will automatically adjust its
805
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
804
+ * `Button` is sentiment-aware and will automatically adjust its colours if wrapped inside
805
+ * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
806
806
  */
807
807
  export const SentimentAwareness: Story = {
808
808
  render: (args) => {
package/src/button/{Button.tests.story.tsx → _stories/Button.tests.story.tsx} RENAMED
@@ -1,15 +1,14 @@
1
1
  import { Meta } from '@storybook/react-webpack5';
2
- import Button from './Button.resolver';
3
- import { expect, userEvent, within } from 'storybook/test';
4
- import { storyConfig } from '../test-utils';
5
- import { ButtonPriority } from './Button.types';
6
2
  import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
7
- import SentimentSurface from '../sentimentSurface';
8
- import { Flag } from '@wise/art';
3
+ import { expect, userEvent, within } from 'storybook/test';
4
+ import { storyConfig } from '../../test-utils';
5
+ import Button from '../Button.resolver';
6
+ import { ButtonPriority } from '../Button.types';
9
7
 
10
8
  const meta: Meta<typeof Button> = {
11
9
  component: Button,
12
10
  title: 'Actions/Button/Tests',
11
+ tags: ['!autodocs'],
13
12
  };
14
13
  export default meta;
15
14
 
@@ -138,79 +137,3 @@ export const AllVariants = storyConfig(
138
137
  },
139
138
  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
140
139
  );
141
-
142
- export const SentimentAwareness = storyConfig(
143
- {
144
- render: () => {
145
- const PERMUTATIONS = {
146
- emphasis: ['base', 'elevated'] as const,
147
- sentiment: ['success', 'warning', 'negative', 'neutral', 'proposition'] as const,
148
- disabled: [false, true] as const,
149
- others: [
150
- {
151
- addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
152
- addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
153
- },
154
- {
155
- addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
156
- },
157
- {
158
- addonStart: {
159
- type: 'avatar' as const,
160
- value: [
161
- {
162
- asset: <Flag code="gb" />,
163
- },
164
- { asset: <Freeze /> },
165
- ],
166
- },
167
- },
168
- {
169
- loading: true,
170
- },
171
- ],
172
- priority: ['primary', 'secondary', 'secondary-neutral'] as const,
173
- };
174
-
175
- return (
176
- <>
177
- {PERMUTATIONS.emphasis.map((emphasis) =>
178
- PERMUTATIONS.sentiment.map((sentiment) => (
179
- <SentimentSurface
180
- key={`${emphasis}-${sentiment}`}
181
- sentiment={sentiment}
182
- emphasis={emphasis}
183
- style={{
184
- padding: 'var(--size-8)',
185
- display: 'grid',
186
- gridTemplateColumns: 'repeat(3, min-content)',
187
- gap: 'var(--size-8)',
188
- }}
189
- >
190
- {PERMUTATIONS.disabled.map((disabled) =>
191
- PERMUTATIONS.others.map((media, mediaVariant) =>
192
- PERMUTATIONS.priority.map((priority) => (
193
- <div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
194
- <Button v2 size="md" disabled={disabled} priority={priority} {...media}>
195
- {priority}
196
- </Button>
197
- </div>
198
- )),
199
- ),
200
- )}
201
- </SentimentSurface>
202
- )),
203
- )}
204
- </>
205
- );
206
- },
207
- decorators: [
208
- (Story: React.ComponentType) => (
209
- <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
210
- <Story />
211
- </div>
212
- ),
213
- ],
214
- },
215
- {},
216
- );