@transferwise/components 46.117.0 → 46.118.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 (50) hide show
  1. package/build/index.js +4 -0
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs +2 -0
  4. package/build/index.mjs.map +1 -1
  5. package/build/main.css +85 -25
  6. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  7. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  8. package/build/styles/button/Button.css +5 -5
  9. package/build/styles/button/Button.vars.css +5 -5
  10. package/build/styles/main.css +85 -25
  11. package/build/styles/sentimentSurface/SentimentSurface.css +80 -20
  12. package/build/types/button/_stories/helpers.d.ts +11 -0
  13. package/build/types/button/_stories/helpers.d.ts.map +1 -0
  14. package/build/types/index.d.ts +4 -0
  15. package/build/types/index.d.ts.map +1 -1
  16. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +3 -1
  17. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  18. package/build/types/test-utils/story-config.d.ts +1 -1
  19. package/build/types/test-utils/story-config.d.ts.map +1 -1
  20. package/package.json +1 -1
  21. package/src/alert/Alert.story.tsx +1 -1
  22. package/src/alert/Alert.tests.story.tsx +1 -1
  23. package/src/button/Button.css +5 -5
  24. package/src/button/Button.vars.css +5 -5
  25. package/src/button/Button.vars.less +28 -7
  26. package/src/button/{Button.accessibility.docs.mdx → _stories/Button.accessibility.docs.mdx} +1 -1
  27. package/src/button/_stories/Button.brightGreen.tests.story.tsx +31 -0
  28. package/src/button/_stories/Button.dark.tests.story.tsx +25 -0
  29. package/src/button/_stories/Button.default.tests.story.tsx +25 -0
  30. package/src/button/_stories/Button.forestGreen.tests.story.tsx +28 -0
  31. package/src/button/{Button.story.tsx → _stories/Button.story.tsx} +6 -6
  32. package/src/button/{Button.tests.story.tsx → _stories/Button.tests.story.tsx} +5 -82
  33. package/src/button/_stories/helpers.tsx +118 -0
  34. package/src/criticalBanner/CriticalCommsBanner.story.tsx +1 -1
  35. package/src/iconButton/IconButton.story.tsx +2 -2
  36. package/src/index.ts +4 -0
  37. package/src/inlineAlert/InlineAlert.story.tsx +1 -1
  38. package/src/link/Link.story.tsx +2 -2
  39. package/src/main.css +85 -25
  40. package/src/nudge/Nudge.story.tsx +1 -1
  41. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +41 -2
  42. package/src/prompt/InlinePrompt/InlinePrompt.tsx +3 -1
  43. package/src/provider/theme/ThemeProvider.story.tsx +1 -1
  44. package/src/sentimentSurface/SentimentSurface.css +80 -20
  45. package/src/sentimentSurface/SentimentSurface.less +40 -10
  46. package/src/sentimentSurface/SentimentSurface.story.tsx +163 -102
  47. package/src/sentimentSurface/SentimentSurface.tests.story.tsx +6 -2
  48. package/src/test-utils/story-config.ts +5 -0
  49. package/src/{neptune-css/NeptuneCSS.story.tsx → tokens/tokens.story.tsx} +2 -2
  50. package/src/withId/withId.story.tsx +1 -0
package/src/main.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;
@@ -1219,11 +1279,11 @@
1219
1279
  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
1220
1280
  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
1221
1281
  --Button-tertiary-background: transparent;
1222
- --Button-tertiary-background-hover: var(--color-background-screen-hover);
1223
- --Button-tertiary-background-active: var(--color-background-screen-active);
1224
- --Button-tertiary-color: var(--color-interactive-primary);
1225
- --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
1226
- --Button-tertiary-color-active: var(--color-interactive-primary-active);
1282
+ --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
1283
+ --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
1284
+ --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1285
+ --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
1286
+ --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
1227
1287
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
1228
1288
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
1229
1289
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/src/nudge/Nudge.story.tsx CHANGED
@@ -5,7 +5,7 @@ import { Nudge } from '..';
5
5
 
6
6
  export default {
7
7
  component: Nudge,
8
- title: 'Feedback/Nudge',
8
+ title: 'Prompts/Nudge',
9
9
  };
10
10
 
11
11
  export const Default = () => {
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ReactElement } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react-webpack5';
3
+ import { action } from 'storybook/actions';
3
4
  import { Taxi, Travel } from '@transferwise/icons';
4
5
  import { lorem5 } from '../../test-utils';
5
6
  import Link from '../../link';
@@ -22,8 +23,9 @@ const withComponentGrid =
22
23
  );
23
24
 
24
25
  export default {
25
- title: 'Internal/InlinePrompt',
26
+ title: 'Prompts/InlinePrompt',
26
27
  component: InlinePrompt,
28
+ tags: ['new'],
27
29
  args: {
28
30
  loading: false,
29
31
  muted: false,
@@ -158,6 +160,39 @@ export const Loading: StoryObj<PreviewStoryArgs> = {
158
160
  },
159
161
  };
160
162
 
163
+ /**
164
+ * `InlinePrompt` can include a single instance of the `Link` component, which can be rendered as
165
+ * either HTML anchor or button. That element will spread across the whole surface of the Prompt
166
+ * so it's more accessible for motor–impaired and touch devices users.
167
+ *
168
+ * > ⚠️ For that reason it's crucial to only include **one** interactive element inside a prompt.
169
+ */
170
+ export const Interactivity: StoryObj<PreviewStoryArgs> = {
171
+ argTypes: previewArgTypes,
172
+ args: {
173
+ muted: true,
174
+ previewMedia: false,
175
+ },
176
+ render: (args: PreviewStoryArgs) => (
177
+ <>
178
+ <InlinePrompt sentiment={args.sentiment}>
179
+ This prompt includes a{' '}
180
+ <Link href="https://wise.com" target="_blank" rel="noreferrer">
181
+ link to some resource
182
+ </Link>{' '}
183
+ to help the user in their journey.
184
+ </InlinePrompt>
185
+
186
+ <InlinePrompt sentiment={args.sentiment}>
187
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
188
+ This prompt includes an <Link onClick={action('inline button')}>inline button</Link> than
189
+ can e.g. trigger a modal.
190
+ </InlinePrompt>
191
+ </>
192
+ ),
193
+ decorators: [withComponentGrid()],
194
+ };
195
+
161
196
  /**
162
197
  * Inline prompt is usually associated with a different component, such as `Input` or `ListItem`.
163
198
  * When those components are disabled, the prompt is often used to communicate to the user why they
@@ -174,7 +209,11 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
174
209
  },
175
210
  render: (args: PreviewStoryArgs) => {
176
211
  const [props, previewProps] = getPropsForPreview(args);
177
- return <InlinePrompt {...props} {...previewProps} />;
212
+ return (
213
+ <InlinePrompt {...props} {...previewProps}>
214
+ Please <Link href="#">confirm your residential address</Link> to activate this feature.
215
+ </InlinePrompt>
216
+ );
178
217
  },
179
218
  };
180
219
 
package/src/prompt/InlinePrompt/InlinePrompt.tsx CHANGED
@@ -36,7 +36,9 @@ export type InlinePromptProps = {
36
36
 
37
37
  /**
38
38
  * Inline prompts appear alongside a specific component on the screen. They help the user stay
39
- * informed, fix something, or get more out of what they're doing.
39
+ * informed, fix something, or get more out of what they're doing. <br />
40
+ *
41
+ * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
40
42
  */
41
43
  export const InlinePrompt = ({
42
44
  sentiment = Sentiment.POSITIVE,
package/src/provider/theme/ThemeProvider.story.tsx CHANGED
@@ -22,7 +22,7 @@ function ThemeProvider(props: ThemeProviderProps) {
22
22
 
23
23
  export default {
24
24
  component: ThemeProvider,
25
- title: 'Other/ThemeProvider',
25
+ title: 'Foundations/ThemeProvider',
26
26
  } satisfies Meta<typeof ThemeProvider>;
27
27
 
28
28
  type Story = StoryObj<typeof ThemeProvider>;
package/src/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;