@transferwise/components 46.128.3 → 46.129.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 (59) hide show
  1. package/build/alert/Alert.js +1 -1
  2. package/build/alert/Alert.mjs +1 -1
  3. package/build/common/liveRegion/LiveRegion.js +42 -0
  4. package/build/common/liveRegion/LiveRegion.js.map +1 -0
  5. package/build/common/liveRegion/LiveRegion.mjs +40 -0
  6. package/build/common/liveRegion/LiveRegion.mjs.map +1 -0
  7. package/build/flowNavigation/FlowNavigation.js +1 -1
  8. package/build/flowNavigation/FlowNavigation.mjs +1 -1
  9. package/build/inputs/SelectInput.js +1 -1
  10. package/build/inputs/SelectInput.js.map +1 -1
  11. package/build/inputs/SelectInput.mjs +1 -1
  12. package/build/inputs/SelectInput.mjs.map +1 -1
  13. package/build/inputs/_ButtonInput.js +2 -2
  14. package/build/inputs/_ButtonInput.js.map +1 -1
  15. package/build/inputs/_ButtonInput.mjs +2 -2
  16. package/build/inputs/_ButtonInput.mjs.map +1 -1
  17. package/build/main.css +108 -100
  18. package/build/overlayHeader/OverlayHeader.js +1 -1
  19. package/build/overlayHeader/OverlayHeader.mjs +1 -1
  20. package/build/prompt/InfoPrompt/InfoPrompt.js +35 -29
  21. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  22. package/build/prompt/InfoPrompt/InfoPrompt.mjs +35 -29
  23. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  24. package/build/sentimentSurface/SentimentSurface.js +5 -1
  25. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  26. package/build/sentimentSurface/SentimentSurface.mjs +5 -1
  27. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  28. package/build/styles/inputs/SelectInput.css +8 -0
  29. package/build/styles/main.css +108 -100
  30. package/build/styles/sentimentSurface/SentimentSurface.css +100 -100
  31. package/build/types/common/index.d.ts +2 -0
  32. package/build/types/common/index.d.ts.map +1 -1
  33. package/build/types/common/liveRegion/LiveRegion.d.ts +23 -0
  34. package/build/types/common/liveRegion/LiveRegion.d.ts.map +1 -0
  35. package/build/types/common/liveRegion/index.d.ts +3 -0
  36. package/build/types/common/liveRegion/index.d.ts.map +1 -0
  37. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  38. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +11 -2
  39. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  40. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  41. package/package.json +1 -1
  42. package/src/common/index.ts +2 -0
  43. package/src/common/liveRegion/LiveRegion.test.tsx +56 -0
  44. package/src/common/liveRegion/LiveRegion.tsx +49 -0
  45. package/src/common/liveRegion/index.ts +2 -0
  46. package/src/inputs/SelectInput.css +8 -0
  47. package/src/inputs/SelectInput.story.tsx +2 -2
  48. package/src/inputs/SelectInput.test.story.tsx +57 -1
  49. package/src/inputs/SelectInput.test.tsx +33 -1
  50. package/src/inputs/SelectInput.tsx +2 -1
  51. package/src/inputs/_ButtonInput.less +8 -0
  52. package/src/inputs/_ButtonInput.tsx +1 -1
  53. package/src/main.css +108 -100
  54. package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +119 -0
  55. package/src/prompt/InfoPrompt/InfoPrompt.tsx +47 -34
  56. package/src/sentimentSurface/SentimentSurface.css +100 -100
  57. package/src/sentimentSurface/SentimentSurface.less +50 -50
  58. package/src/sentimentSurface/SentimentSurface.test.story.tsx +19 -0
  59. package/src/sentimentSurface/SentimentSurface.tsx +3 -0
package/src/prompt/InfoPrompt/InfoPrompt.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import { HTMLAttributes, ReactNode, useState } from 'react';
2
- import { Sentiment, Typography } from '../../common';
2
+ import { LiveRegion, Sentiment, Typography } from '../../common';
3
+ import type { AriaLive } from '../../common';
3
4
  import { GiftBox } from '@transferwise/icons';
4
5
  import type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';
5
6
  import StatusIcon from '../../statusIcon';
@@ -23,7 +24,7 @@ export type InfoPromptMedia = {
23
24
  asset: ReactNode;
24
25
  };
25
26
 
26
- export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
27
+ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &
27
28
  Pick<PrimitivePromptProps, 'data-testid'> & {
28
29
  /**
29
30
  * The sentiment determines the colour scheme
@@ -53,6 +54,14 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
53
54
  */
54
55
  description: string;
55
56
  className?: string;
57
+ /**
58
+ * Sets the ARIA live region politeness level.
59
+ * - `'polite'` — announced after the current speech (default)
60
+ * - `'assertive'` — interrupts the current speech immediately
61
+ * - `'off'` — disables the live region entirely
62
+ * @default 'polite'
63
+ */
64
+ 'aria-live'?: AriaLive;
56
65
  };
57
66
 
58
67
  /**
@@ -72,6 +81,7 @@ export const InfoPrompt = ({
72
81
  title,
73
82
  description,
74
83
  className,
84
+ 'aria-live': ariaLive = 'polite',
75
85
  'data-testid': dataTestId,
76
86
  ...restProps
77
87
  }: InfoPromptProps) => {
@@ -112,39 +122,42 @@ export const InfoPrompt = ({
112
122
  return <StatusIcon size={24} sentiment={statusIconSentiment} />;
113
123
  };
114
124
 
125
+ // Render content directly in LiveRegion
115
126
  return (
116
- <PrimitivePrompt
117
- sentiment={sentiment}
118
- media={renderMedia()}
119
- data-testid={dataTestId}
120
- className={clsx('wds-info-prompt', className)}
121
- {...restProps}
122
- onTouchStart={handleTouchStart}
123
- onTouchEnd={handleTouchEnd}
124
- onTouchMove={handleTouchMove}
125
- onDismiss={onDismiss}
126
- >
127
- <div className="wds-info-prompt__content">
128
- {title && (
129
- <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
130
- {title}
127
+ <LiveRegion aria-live={ariaLive}>
128
+ <PrimitivePrompt
129
+ sentiment={sentiment}
130
+ media={renderMedia()}
131
+ data-testid={dataTestId}
132
+ className={clsx('wds-info-prompt', className)}
133
+ {...restProps}
134
+ onTouchStart={handleTouchStart}
135
+ onTouchEnd={handleTouchEnd}
136
+ onTouchMove={handleTouchMove}
137
+ onDismiss={onDismiss}
138
+ >
139
+ <div className="wds-info-prompt__content">
140
+ {title && (
141
+ <Body className="wds-info-prompt__title" type={Typography.BODY_LARGE_BOLD} as="span">
142
+ {title}
143
+ </Body>
144
+ )}
145
+ <Body as="span" className="wds-info-prompt__description">
146
+ {description}
131
147
  </Body>
132
- )}
133
- <Body as="span" className="wds-info-prompt__description">
134
- {description}
135
- </Body>
136
- {action && (
137
- <Link
138
- href={action.href}
139
- target={action.target}
140
- type={Typography.LINK_DEFAULT}
141
- className="wds-info-prompt__action"
142
- onClick={action.onClick}
143
- >
144
- {action.label}
145
- </Link>
146
- )}
147
- </div>
148
- </PrimitivePrompt>
148
+ {action && (
149
+ <Link
150
+ href={action.href}
151
+ target={action.target}
152
+ type={Typography.LINK_DEFAULT}
153
+ className="wds-info-prompt__action"
154
+ onClick={action.onClick}
155
+ >
156
+ {action.label}
157
+ </Link>
158
+ )}
159
+ </div>
160
+ </PrimitivePrompt>
161
+ </LiveRegion>
149
162
  );
150
163
  };
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -5,11 +5,11 @@
5
5
  background-color: var(--color-sentiment-background-surface);
6
6
  color: var(--color-sentiment-content-primary);
7
7
  }
8
- .np-theme-personal .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 {
8
+ .np-theme-personal.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 {
13
13
  --color-sentiment-content-primary: #CB272F;
14
14
  --color-sentiment-content-primary-hover: #B8232B;
15
15
  --color-sentiment-content-primary-active: #A72027;
@@ -29,11 +29,11 @@
29
29
  --color-sentiment-background-surface-hover: #F9E1E1;
30
30
  --color-sentiment-background-surface-active: #F8D8D8;
31
31
  }
32
- .np-theme-personal .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 {
32
+ .np-theme-personal.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 {
37
37
  --color-sentiment-content-primary: #FFFFFF;
38
38
  --color-sentiment-content-primary-hover: #F5CCCC;
39
39
  --color-sentiment-content-primary-active: #F1B7B7;
@@ -53,11 +53,11 @@
53
53
  --color-sentiment-background-surface-hover: #B8232B;
54
54
  --color-sentiment-background-surface-active: #A72027;
55
55
  }
56
- .np-theme-personal--dark .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 {
56
+ .np-theme-personal--dark.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 {
61
61
  --color-sentiment-content-primary: #FFA8AD;
62
62
  --color-sentiment-content-primary-hover: #FFBDC0;
63
63
  --color-sentiment-content-primary-active: #FFD1D3;
@@ -77,11 +77,11 @@
77
77
  --color-sentiment-background-surface-hover: #641115;
78
78
  --color-sentiment-background-surface-active: #761418;
79
79
  }
80
- .np-theme-personal--dark .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 {
80
+ .np-theme-personal--dark.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 {
85
85
  --color-sentiment-content-primary: #410B0D;
86
86
  --color-sentiment-content-primary-hover: #641115;
87
87
  --color-sentiment-content-primary-active: #761418;
@@ -101,11 +101,11 @@
101
101
  --color-sentiment-background-surface-hover: #FFBDC0;
102
102
  --color-sentiment-background-surface-active: #FFD1D3;
103
103
  }
104
- .np-theme-personal .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 {
104
+ .np-theme-personal.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 {
109
109
  --color-sentiment-content-primary: #4A3B1C;
110
110
  --color-sentiment-content-primary-hover: #302612;
111
111
  --color-sentiment-content-primary-active: #2C2311;
@@ -125,11 +125,11 @@
125
125
  --color-sentiment-background-surface-hover: #FFF0B2;
126
126
  --color-sentiment-background-surface-active: #FFE98F;
127
127
  }
128
- .np-theme-personal .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 {
128
+ .np-theme-personal.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 {
133
133
  --color-sentiment-content-primary: #4A3B1C;
134
134
  --color-sentiment-content-primary-hover: #302612;
135
135
  --color-sentiment-content-primary-active: #2C2311;
@@ -149,11 +149,11 @@
149
149
  --color-sentiment-background-surface-hover: #FFBF0F;
150
150
  --color-sentiment-background-surface-active: #FFBB00;
151
151
  }
152
- .np-theme-personal--dark .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 {
152
+ .np-theme-personal--dark.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 {
157
157
  --color-sentiment-content-primary: #FADC65;
158
158
  --color-sentiment-content-primary-hover: #F9D648;
159
159
  --color-sentiment-content-primary-active: #F8CD20;
@@ -173,11 +173,11 @@
173
173
  --color-sentiment-background-surface-hover: #504930;
174
174
  --color-sentiment-background-surface-active: #665D3D;
175
175
  }
176
- .np-theme-personal--dark .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 {
176
+ .np-theme-personal--dark.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 {
181
181
  --color-sentiment-content-primary: #3A3523;
182
182
  --color-sentiment-content-primary-hover: #504930;
183
183
  --color-sentiment-content-primary-active: #665D3D;
@@ -197,11 +197,11 @@
197
197
  --color-sentiment-background-surface-hover: #F9D648;
198
198
  --color-sentiment-background-surface-active: #F8CD20;
199
199
  }
200
- .np-theme-personal .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 {
200
+ .np-theme-personal.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 {
205
205
  --color-sentiment-content-primary: #054D28;
206
206
  --color-sentiment-content-primary-hover: #043A1E;
207
207
  --color-sentiment-content-primary-active: #022614;
@@ -221,11 +221,11 @@
221
221
  --color-sentiment-background-surface-hover: #D3F2C0;
222
222
  --color-sentiment-background-surface-active: #C5EDAB;
223
223
  }
224
- .np-theme-personal .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 {
224
+ .np-theme-personal.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 {
229
229
  --color-sentiment-content-primary: #E2F6D5;
230
230
  --color-sentiment-content-primary-hover: #D3F2C0;
231
231
  --color-sentiment-content-primary-active: #C5EDAB;
@@ -245,11 +245,11 @@
245
245
  --color-sentiment-background-surface-hover: #043A1E;
246
246
  --color-sentiment-background-surface-active: #022614;
247
247
  }
248
- .np-theme-personal--dark .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 {
248
+ .np-theme-personal--dark.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 {
253
253
  --color-sentiment-content-primary: #BAE5A0;
254
254
  --color-sentiment-content-primary-hover: #C8EAB3;
255
255
  --color-sentiment-content-primary-active: #D6F0C7;
@@ -269,11 +269,11 @@
269
269
  --color-sentiment-background-surface-hover: #323B2B;
270
270
  --color-sentiment-background-surface-active: #3E4A36;
271
271
  }
272
- .np-theme-personal--dark .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 {
272
+ .np-theme-personal--dark.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 {
277
277
  --color-sentiment-content-primary: #252C20;
278
278
  --color-sentiment-content-primary-hover: #323B2B;
279
279
  --color-sentiment-content-primary-active: #3E4A36;
@@ -293,11 +293,11 @@
293
293
  --color-sentiment-background-surface-hover: #C8EAB3;
294
294
  --color-sentiment-background-surface-active: #D6F0C7;
295
295
  }
296
- .np-theme-personal .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 {
296
+ .np-theme-personal.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 {
301
301
  --color-sentiment-content-primary: #454745;
302
302
  --color-sentiment-content-primary-hover: #353635;
303
303
  --color-sentiment-content-primary-active: #232423;
@@ -317,11 +317,11 @@
317
317
  --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
318
  --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
- .np-theme-personal .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 {
320
+ .np-theme-personal.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 {
325
325
  --color-sentiment-content-primary: #F1F1ED;
326
326
  --color-sentiment-content-primary-hover: #E7E7E1;
327
327
  --color-sentiment-content-primary-active: #DFDED5;
@@ -341,11 +341,11 @@
341
341
  --color-sentiment-background-surface-hover: #353635;
342
342
  --color-sentiment-background-surface-active: #232423;
343
343
  }
344
- .np-theme-personal--dark .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 {
344
+ .np-theme-personal--dark.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 {
349
349
  --color-sentiment-content-primary: #F1F1ED;
350
350
  --color-sentiment-content-primary-hover: #E7E7E1;
351
351
  --color-sentiment-content-primary-active: #DFDED5;
@@ -365,11 +365,11 @@
365
365
  --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
366
  --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
- .np-theme-personal--dark .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 {
368
+ .np-theme-personal--dark.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 {
373
373
  --color-sentiment-content-primary: #2A2C29;
374
374
  --color-sentiment-content-primary-hover: #414441;
375
375
  --color-sentiment-content-primary-active: #595B58;
@@ -389,11 +389,11 @@
389
389
  --color-sentiment-background-surface-hover: #E7E7E1;
390
390
  --color-sentiment-background-surface-active: #DFDED5;
391
391
  }
392
- .np-theme-personal .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 {
392
+ .np-theme-personal.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 {
397
397
  --color-sentiment-content-primary: #0E0F0C;
398
398
  --color-sentiment-content-primary-hover: #0A2826;
399
399
  --color-sentiment-content-primary-active: #074140;
@@ -413,11 +413,11 @@
413
413
  --color-sentiment-background-surface-hover: #CAF1F1;
414
414
  --color-sentiment-background-surface-active: #B6ECEC;
415
415
  }
416
- .np-theme-personal .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 {
416
+ .np-theme-personal.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 {
421
421
  --color-sentiment-content-primary: #FFFFFF;
422
422
  --color-sentiment-content-primary-hover: #EAF9F9;
423
423
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -437,11 +437,11 @@
437
437
  --color-sentiment-background-surface-hover: #043A3A;
438
438
  --color-sentiment-background-surface-active: #022626;
439
439
  }
440
- .np-theme-personal--dark .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 {
440
+ .np-theme-personal--dark.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 {
445
445
  --color-sentiment-content-primary: #FFFFFF;
446
446
  --color-sentiment-content-primary-hover: #EAF9F9;
447
447
  --color-sentiment-content-primary-active: #D5F4F4;
@@ -461,11 +461,11 @@
461
461
  --color-sentiment-background-surface-hover: #124F4C;
462
462
  --color-sentiment-background-surface-active: #176460;
463
463
  }
464
- .np-theme-personal--dark .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 {
464
+ .np-theme-personal--dark.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 {
469
469
  --color-sentiment-content-primary: #0E0F0C;
470
470
  --color-sentiment-content-primary-hover: #0A2826;
471
471
  --color-sentiment-content-primary-active: #074140;
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -5,11 +5,11 @@
5
5
  }
6
6
 
7
7
  &-negative {
8
- .np-theme-personal &,
9
- .np-theme-business &,
10
- .np-theme-platform &,
11
- .np-theme-personal--bright-green &,
12
- .np-theme-business--bright-green & {
8
+ .np-theme-personal&,
9
+ .np-theme-business&,
10
+ .np-theme-platform&,
11
+ .np-theme-personal--bright-green&,
12
+ .np-theme-business--bright-green& {
13
13
  &-base {
14
14
  .sentiment-surface-tokens(
15
15
  #CB272F, #B8232B, #A72027,
@@ -32,11 +32,11 @@
32
32
  }
33
33
  }
34
34
 
35
- .np-theme-personal--dark &,
36
- .np-theme-business--dark &,
37
- .np-theme-personal--forest-green &,
38
- .np-theme-business--forest-green &,
39
- .np-theme-platform--forest-green & {
35
+ .np-theme-personal--dark&,
36
+ .np-theme-business--dark&,
37
+ .np-theme-personal--forest-green&,
38
+ .np-theme-business--forest-green&,
39
+ .np-theme-platform--forest-green& {
40
40
  &-base {
41
41
  .sentiment-surface-tokens(
42
42
  #FFA8AD, #FFBDC0, #FFD1D3,
@@ -61,11 +61,11 @@
61
61
  }
62
62
 
63
63
  &-warning {
64
- .np-theme-personal &,
65
- .np-theme-business &,
66
- .np-theme-platform &,
67
- .np-theme-personal--bright-green &,
68
- .np-theme-business--bright-green & {
64
+ .np-theme-personal&,
65
+ .np-theme-business&,
66
+ .np-theme-platform&,
67
+ .np-theme-personal--bright-green&,
68
+ .np-theme-business--bright-green& {
69
69
  &-base {
70
70
  .sentiment-surface-tokens(
71
71
  #4A3B1C, #302612, #2C2311, // content-primary (default, hover, active)
@@ -88,11 +88,11 @@
88
88
  }
89
89
  }
90
90
 
91
- .np-theme-personal--dark &,
92
- .np-theme-business--dark &,
93
- .np-theme-personal--forest-green &,
94
- .np-theme-business--forest-green &,
95
- .np-theme-platform--forest-green & {
91
+ .np-theme-personal--dark&,
92
+ .np-theme-business--dark&,
93
+ .np-theme-personal--forest-green&,
94
+ .np-theme-business--forest-green&,
95
+ .np-theme-platform--forest-green& {
96
96
  &-base {
97
97
  .sentiment-surface-tokens(
98
98
  #FADC65, #F9D648, #F8CD20, // content-primary
@@ -116,11 +116,11 @@
116
116
  }
117
117
  }
118
118
  &-success {
119
- .np-theme-personal &,
120
- .np-theme-business &,
121
- .np-theme-platform &,
122
- .np-theme-personal--bright-green &,
123
- .np-theme-business--bright-green & {
119
+ .np-theme-personal&,
120
+ .np-theme-business&,
121
+ .np-theme-platform&,
122
+ .np-theme-personal--bright-green&,
123
+ .np-theme-business--bright-green& {
124
124
  &-base {
125
125
  .sentiment-surface-tokens(
126
126
  #054D28, #043A1E, #022614, // content-primary (default, hover, active)
@@ -143,11 +143,11 @@
143
143
  }
144
144
  }
145
145
 
146
- .np-theme-personal--dark &,
147
- .np-theme-business--dark &,
148
- .np-theme-personal--forest-green &,
149
- .np-theme-business--forest-green &,
150
- .np-theme-platform--forest-green & {
146
+ .np-theme-personal--dark&,
147
+ .np-theme-business--dark&,
148
+ .np-theme-personal--forest-green&,
149
+ .np-theme-business--forest-green&,
150
+ .np-theme-platform--forest-green& {
151
151
  &-base {
152
152
  .sentiment-surface-tokens(
153
153
  #BAE5A0, #C8EAB3, #D6F0C7, // content-primary
@@ -171,11 +171,11 @@
171
171
  }
172
172
  }
173
173
  &-neutral {
174
- .np-theme-personal &,
175
- .np-theme-business &,
176
- .np-theme-platform &,
177
- .np-theme-personal--bright-green &,
178
- .np-theme-business--bright-green & {
174
+ .np-theme-personal&,
175
+ .np-theme-business&,
176
+ .np-theme-platform&,
177
+ .np-theme-personal--bright-green&,
178
+ .np-theme-business--bright-green& {
179
179
  &-base {
180
180
  .sentiment-surface-tokens(
181
181
  #454745, #353635, #232423, // content-primary (default, hover, active)
@@ -198,11 +198,11 @@
198
198
  }
199
199
  }
200
200
 
201
- .np-theme-personal--dark &,
202
- .np-theme-business--dark &,
203
- .np-theme-personal--forest-green &,
204
- .np-theme-business--forest-green &,
205
- .np-theme-platform--forest-green & {
201
+ .np-theme-personal--dark&,
202
+ .np-theme-business--dark&,
203
+ .np-theme-personal--forest-green&,
204
+ .np-theme-business--forest-green&,
205
+ .np-theme-platform--forest-green& {
206
206
  &-base {
207
207
  .sentiment-surface-tokens(
208
208
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
@@ -226,11 +226,11 @@
226
226
  }
227
227
  }
228
228
  &-proposition {
229
- .np-theme-personal &,
230
- .np-theme-business &,
231
- .np-theme-platform &,
232
- .np-theme-personal--bright-green &,
233
- .np-theme-business--bright-green & {
229
+ .np-theme-personal&,
230
+ .np-theme-business&,
231
+ .np-theme-platform&,
232
+ .np-theme-personal--bright-green&,
233
+ .np-theme-business--bright-green& {
234
234
  &-base {
235
235
  .sentiment-surface-tokens(
236
236
  #0E0F0C, #0A2826, #074140, // content-primary (default, hover, active)
@@ -253,11 +253,11 @@
253
253
  }
254
254
  }
255
255
 
256
- .np-theme-personal--dark &,
257
- .np-theme-business--dark &,
258
- .np-theme-personal--forest-green &,
259
- .np-theme-business--forest-green &,
260
- .np-theme-platform--forest-green & {
256
+ .np-theme-personal--dark&,
257
+ .np-theme-business--dark&,
258
+ .np-theme-personal--forest-green&,
259
+ .np-theme-business--forest-green&,
260
+ .np-theme-platform--forest-green& {
261
261
  &-base {
262
262
  .sentiment-surface-tokens(
263
263
  #FFFFFF, #EAF9F9, #D5F4F4, // content-primary
package/src/sentimentSurface/SentimentSurface.test.story.tsx CHANGED
@@ -56,6 +56,25 @@ export const NestedSentiments: Story = {
56
56
  ),
57
57
  };
58
58
 
59
+ export const NestedThemes: Story = {
60
+ render: () => (
61
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
62
+ <ThemeProvider theme="forest-green" className="p-a-4">
63
+ Page is in Personal Forest Green Theme
64
+ <SentimentSurface sentiment="success" className="p-a-4">
65
+ Some Component with Success Sentiment
66
+ </SentimentSurface>
67
+ <ThemeProvider theme="personal" screenMode="light" className="p-a-4">
68
+ Island of Personal Light Theme
69
+ <SentimentSurface sentiment="success" className="p-a-4">
70
+ Some Component with Success Sentiment
71
+ </SentimentSurface>
72
+ </ThemeProvider>
73
+ </ThemeProvider>
74
+ </div>
75
+ ),
76
+ };
77
+
59
78
  const ButtonsGrid = () => (
60
79
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
61
80
  {emphasisLevels.map((emphasis) =>
package/src/sentimentSurface/SentimentSurface.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  SentimentSurfaceComponentProps,
6
6
  SentimentSurfaceComponent,
7
7
  } from './SentimentSurface.types';
8
+ import { useTheme } from '@wise/components-theming';
8
9
 
9
10
  /**
10
11
  * SentimentSurface is a polymorphic container component that exposes and, optionally, applies
@@ -53,7 +54,9 @@ const SentimentSurface: SentimentSurfaceComponent = forwardRef(function Sentimen
53
54
  ) {
54
55
  const Element = as ?? 'div';
55
56
  const BASE_CLASS = 'wds-sentiment-surface';
57
+ const { className: closestBrandTheme } = useTheme();
56
58
  const classNames = clsx(
59
+ closestBrandTheme,
57
60
  BASE_CLASS,
58
61
  `${BASE_CLASS}-${sentiment}-${emphasis}`,
59
62
  hasBaseStyles && `${BASE_CLASS}--hasBaseStyles`,