@transferwise/components 46.128.2 → 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 (65) 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/index.js +4 -4
  10. package/build/inputs/SelectInput.js +1 -1
  11. package/build/inputs/SelectInput.js.map +1 -1
  12. package/build/inputs/SelectInput.mjs +2 -2
  13. package/build/inputs/SelectInput.mjs.map +1 -1
  14. package/build/inputs/_ButtonInput.js +2 -2
  15. package/build/inputs/_ButtonInput.js.map +1 -1
  16. package/build/inputs/_ButtonInput.mjs +2 -2
  17. package/build/inputs/_ButtonInput.mjs.map +1 -1
  18. package/build/main.css +108 -100
  19. package/build/overlayHeader/OverlayHeader.js +1 -1
  20. package/build/overlayHeader/OverlayHeader.mjs +1 -1
  21. package/build/popover/Popover.mjs +1 -1
  22. package/build/promoCard/PromoCardContext.mjs +1 -1
  23. package/build/prompt/ActionPrompt/ActionPrompt.js +0 -3
  24. package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
  25. package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -1
  26. package/build/prompt/InfoPrompt/InfoPrompt.js +35 -29
  27. package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
  28. package/build/prompt/InfoPrompt/InfoPrompt.mjs +35 -29
  29. package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
  30. package/build/sentimentSurface/SentimentSurface.js +5 -1
  31. package/build/sentimentSurface/SentimentSurface.js.map +1 -1
  32. package/build/sentimentSurface/SentimentSurface.mjs +5 -1
  33. package/build/sentimentSurface/SentimentSurface.mjs.map +1 -1
  34. package/build/styles/inputs/SelectInput.css +8 -0
  35. package/build/styles/main.css +108 -100
  36. package/build/styles/sentimentSurface/SentimentSurface.css +100 -100
  37. package/build/types/common/index.d.ts +2 -0
  38. package/build/types/common/index.d.ts.map +1 -1
  39. package/build/types/common/liveRegion/LiveRegion.d.ts +23 -0
  40. package/build/types/common/liveRegion/LiveRegion.d.ts.map +1 -0
  41. package/build/types/common/liveRegion/index.d.ts +3 -0
  42. package/build/types/common/liveRegion/index.d.ts.map +1 -0
  43. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  44. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +11 -2
  45. package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
  46. package/build/types/sentimentSurface/SentimentSurface.d.ts.map +1 -1
  47. package/package.json +26 -26
  48. package/src/common/index.ts +2 -0
  49. package/src/common/liveRegion/LiveRegion.test.tsx +56 -0
  50. package/src/common/liveRegion/LiveRegion.tsx +49 -0
  51. package/src/common/liveRegion/index.ts +2 -0
  52. package/src/inputs/SelectInput.css +8 -0
  53. package/src/inputs/SelectInput.story.tsx +2 -2
  54. package/src/inputs/SelectInput.test.story.tsx +57 -1
  55. package/src/inputs/SelectInput.test.tsx +33 -1
  56. package/src/inputs/SelectInput.tsx +2 -1
  57. package/src/inputs/_ButtonInput.less +8 -0
  58. package/src/inputs/_ButtonInput.tsx +1 -1
  59. package/src/main.css +108 -100
  60. package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +119 -0
  61. package/src/prompt/InfoPrompt/InfoPrompt.tsx +47 -34
  62. package/src/sentimentSurface/SentimentSurface.css +100 -100
  63. package/src/sentimentSurface/SentimentSurface.less +50 -50
  64. package/src/sentimentSurface/SentimentSurface.test.story.tsx +19 -0
  65. package/src/sentimentSurface/SentimentSurface.tsx +3 -0
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`,