@transferwise/components 46.133.1 → 46.134.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 (36) hide show
  1. package/build/main.css +43 -5
  2. package/build/moneyInput/MoneyInput.js +28 -12
  3. package/build/moneyInput/MoneyInput.js.map +1 -1
  4. package/build/moneyInput/MoneyInput.mjs +30 -14
  5. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  6. package/build/moneyInput/currencyFormatting.js +8 -2
  7. package/build/moneyInput/currencyFormatting.js.map +1 -1
  8. package/build/moneyInput/currencyFormatting.mjs +5 -4
  9. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  10. package/build/statusIcon/StatusIcon.js +1 -12
  11. package/build/statusIcon/StatusIcon.js.map +1 -1
  12. package/build/statusIcon/StatusIcon.mjs +1 -12
  13. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  14. package/build/styles/main.css +43 -5
  15. package/build/styles/sentimentSurface/SentimentSurface.css +1 -1
  16. package/build/styles/statusIcon/StatusIcon.css +35 -4
  17. package/build/types/moneyInput/MoneyInput.d.ts +6 -0
  18. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  19. package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
  20. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  21. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  22. package/package.json +6 -6
  23. package/src/main.css +43 -5
  24. package/src/moneyInput/MoneyInput.story.tsx +10 -1
  25. package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
  26. package/src/moneyInput/MoneyInput.test.tsx +45 -0
  27. package/src/moneyInput/MoneyInput.tsx +27 -3
  28. package/src/moneyInput/currencyFormatting.ts +11 -5
  29. package/src/sentimentSurface/SentimentSurface.css +1 -1
  30. package/src/sentimentSurface/SentimentSurface.less +1 -1
  31. package/src/statusIcon/StatusIcon.css +35 -4
  32. package/src/statusIcon/StatusIcon.less +35 -4
  33. package/src/statusIcon/StatusIcon.story.tsx +119 -79
  34. package/src/statusIcon/StatusIcon.test.story.tsx +125 -0
  35. package/src/statusIcon/StatusIcon.test.tsx +16 -23
  36. package/src/statusIcon/StatusIcon.tsx +2 -16
package/src/moneyInput/MoneyInput.test.story.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-webpack5';
2
- import { within, fireEvent } from 'storybook/test';
2
+ import { within, userEvent, fireEvent, expect } from 'storybook/test';
3
3
  import { allModes } from '../../.storybook/modes';
4
4
  import { lorem500 } from '../test-utils';
5
5
  import { Field } from '../field/Field';
@@ -102,3 +102,143 @@ export const SmoothScrollReset: Story = {
102
102
  },
103
103
  },
104
104
  };
105
+
106
+ export const WithDecimals: Story = {
107
+ args: {
108
+ currencies: [],
109
+ decimals: 4,
110
+ amount: 1234.5678,
111
+ },
112
+ play: async ({ canvas }) => {
113
+ const input = canvas.getByRole('textbox');
114
+ await expect(input).toHaveValue('1,234.5678');
115
+ await userEvent.clear(input);
116
+ await userEvent.type(input, '99.123456789');
117
+ await userEvent.tab();
118
+ await expect(input).toHaveValue('99.1235');
119
+ },
120
+ };
121
+
122
+ const eur = {
123
+ value: 'EUR',
124
+ label: 'EUR',
125
+ note: 'Euro',
126
+ currency: 'eur',
127
+ } as const;
128
+
129
+ const bhd = {
130
+ value: 'BHD',
131
+ label: 'BHD',
132
+ note: 'Bahraini dinar',
133
+ currency: 'bhd',
134
+ } as const;
135
+
136
+ const jpy = {
137
+ value: 'JPY',
138
+ label: 'JPY',
139
+ note: 'Japanese yen',
140
+ currency: 'jpy',
141
+ } as const;
142
+
143
+ const sharedProps = {
144
+ currencies: [],
145
+ onAmountChange: () => {},
146
+ onCurrencyChange: () => {},
147
+ } as const;
148
+
149
+ function Row({
150
+ label,
151
+ amount,
152
+ currency,
153
+ decimals,
154
+ }: {
155
+ label: string;
156
+ amount: number;
157
+ currency: { value: string; label: string; note: string; currency: string };
158
+ decimals: number;
159
+ }) {
160
+ return (
161
+ <div
162
+ style={{
163
+ display: 'grid',
164
+ gridTemplateColumns: '240px 1fr 1fr',
165
+ gap: 12,
166
+ alignItems: 'center',
167
+ }}
168
+ >
169
+ <Body as="span" style={{ fontSize: 13, color: '#6b7280' }}>
170
+ {label}
171
+ </Body>
172
+ <Field label={`No decimals prop (${currency.value})`}>
173
+ <MoneyInput {...sharedProps} selectedCurrency={currency} amount={amount} />
174
+ </Field>
175
+ <Field label={`decimals={${decimals}} (${currency.value})`}>
176
+ <MoneyInput
177
+ {...sharedProps}
178
+ selectedCurrency={currency}
179
+ amount={amount}
180
+ decimals={decimals}
181
+ />
182
+ </Field>
183
+ </div>
184
+ );
185
+ }
186
+
187
+ /**
188
+ * Side-by-side comparison of formatAmount (no decimals prop) vs formatNumber (with decimals prop)
189
+ * when decimals matches the currency default. Differences indicate a formatting parity issue.
190
+ *
191
+ * Problem 1: Trailing zero stripping — formatAmount strips ".00" for whole numbers,
192
+ * formatNumber always pads to the requested precision.
193
+ *
194
+ * Problem 2: BHD decimal count — formatAmount renders 2 fractional digits for BHD,
195
+ * but the currencyDecimals map says BHD has 3. formatNumber with decimals=3 shows 3.
196
+ */
197
+ export const DecimalsFormatParity: Story = {
198
+ render: () => (
199
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
200
+ <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
201
+ EUR — whole numbers (trailing zero stripping)
202
+ </Body>
203
+ <Row label="amount=0" amount={0} currency={eur} decimals={2} />
204
+ <Row label="amount=1" amount={1} currency={eur} decimals={2} />
205
+ <Row label="amount=42" amount={42} currency={eur} decimals={2} />
206
+ <Row label="amount=100" amount={100} currency={eur} decimals={2} />
207
+ <Row label="amount=1000" amount={1000} currency={eur} decimals={2} />
208
+ <Row label="amount=9999999" amount={9999999} currency={eur} decimals={2} />
209
+
210
+ <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
211
+ EUR — fractional amounts (should match)
212
+ </Body>
213
+ <Row label="amount=0.01" amount={0.01} currency={eur} decimals={2} />
214
+ <Row label="amount=0.1" amount={0.1} currency={eur} decimals={2} />
215
+ <Row label="amount=99.9" amount={99.9} currency={eur} decimals={2} />
216
+ <Row label="amount=1234567.89" amount={1234567.89} currency={eur} decimals={2} />
217
+
218
+ <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
219
+ BHD — all amounts (formatAmount uses 2 digits, formatNumber uses 3)
220
+ </Body>
221
+ <Row label="amount=0" amount={0} currency={bhd} decimals={3} />
222
+ <Row label="amount=0.001" amount={0.001} currency={bhd} decimals={3} />
223
+ <Row label="amount=0.01" amount={0.01} currency={bhd} decimals={3} />
224
+ <Row label="amount=0.1" amount={0.1} currency={bhd} decimals={3} />
225
+ <Row label="amount=42" amount={42} currency={bhd} decimals={3} />
226
+ <Row label="amount=99.9" amount={99.9} currency={bhd} decimals={3} />
227
+ <Row label="amount=999.99" amount={999.99} currency={bhd} decimals={3} />
228
+ <Row label="amount=1234567.89" amount={1234567.89} currency={bhd} decimals={3} />
229
+
230
+ <Body as="p" style={{ fontWeight: 600, marginTop: 8 }}>
231
+ JPY — zero-decimal currency (should always match)
232
+ </Body>
233
+ <Row label="amount=0" amount={0} currency={jpy} decimals={0} />
234
+ <Row label="amount=1" amount={1} currency={jpy} decimals={0} />
235
+ <Row label="amount=1000" amount={1000} currency={jpy} decimals={0} />
236
+ <Row label="amount=1234567" amount={1234567} currency={jpy} decimals={0} />
237
+ </div>
238
+ ),
239
+ parameters: {
240
+ chromatic: {
241
+ disableSnapshot: true,
242
+ },
243
+ },
244
+ };
package/src/moneyInput/MoneyInput.test.tsx CHANGED
@@ -253,6 +253,45 @@ describe('Money Input', () => {
253
253
  await userEvent.tab();
254
254
  expect(input).toHaveValue('1,234,567.65');
255
255
  });
256
+
257
+ it('uses custom decimals when specified', async () => {
258
+ customRender({ decimals: 4 });
259
+ const input = getInput();
260
+ await userEvent.clear(input);
261
+ await userEvent.type(input, '1234.56789');
262
+ await userEvent.tab();
263
+ expect(input).toHaveValue('1,234.5679');
264
+ });
265
+
266
+ it('uses custom decimals of 0', async () => {
267
+ customRender({ decimals: 0 });
268
+ const input = getInput();
269
+ await userEvent.clear(input);
270
+ await userEvent.type(input, '1234.56');
271
+ await userEvent.tab();
272
+ expect(input).toHaveValue('1,235');
273
+ });
274
+
275
+ it('ignores custom decimals override for zero-decimal currencies like JPY', async () => {
276
+ const jpyCurrency: CurrencyOptionItem = {
277
+ value: 'JPY',
278
+ label: 'JPY',
279
+ note: 'Japanese yen',
280
+ currency: 'jpy',
281
+ };
282
+ customRender({
283
+ decimals: 4,
284
+ selectedCurrency: jpyCurrency,
285
+ currencies: [jpyCurrency],
286
+ amount: 1234,
287
+ });
288
+ const input = getInput();
289
+ expect(input).toHaveValue('1,234');
290
+ await userEvent.clear(input);
291
+ await userEvent.type(input, '5678.9999');
292
+ await userEvent.tab();
293
+ expect(input).toHaveValue('5,679');
294
+ });
256
295
  });
257
296
 
258
297
  it('calls onAmountChange with parsed and formatted value', async () => {
@@ -263,6 +302,12 @@ describe('Money Input', () => {
263
302
  expect(initialProps.onAmountChange).toHaveBeenCalledWith(1000.65);
264
303
  });
265
304
 
305
+ it('calls onAmountChange with value rounded to custom decimals', async () => {
306
+ customRender({ decimals: 4, amount: null });
307
+ await userEvent.type(getInput(), '12.34567');
308
+ expect(initialProps.onAmountChange).toHaveBeenCalledWith(12.3457);
309
+ });
310
+
266
311
  it('calls onAmountChange when input value is empty', async () => {
267
312
  customRender();
268
313
  await userEvent.clear(getInput());
package/src/moneyInput/MoneyInput.tsx CHANGED
@@ -24,7 +24,7 @@ import {
24
24
  import Title from '../title';
25
25
 
26
26
  import messages from './MoneyInput.messages';
27
- import { formatAmount, parseAmount } from './currencyFormatting';
27
+ import { formatAmount, formatNumber, getCurrencyDecimals, parseAmount } from './currencyFormatting';
28
28
  import withId from '../withId';
29
29
 
30
30
  export interface CurrencyOptionItem {
@@ -48,24 +48,34 @@ const formatAmountIfSet = ({
48
48
  amount,
49
49
  currency,
50
50
  locale,
51
+ decimals,
51
52
  }: {
52
53
  amount: number | null | undefined;
53
54
  currency: string;
54
55
  locale: string;
56
+ decimals?: number;
55
57
  }) => {
56
- return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
58
+ if (typeof amount !== 'number') {
59
+ return '';
60
+ }
61
+ if (decimals != null && getCurrencyDecimals(currency) !== 0) {
62
+ return formatNumber(amount, locale, decimals);
63
+ }
64
+ return formatAmount(amount, currency, locale);
57
65
  };
58
66
 
59
67
  const parseNumber = ({
60
68
  amount,
61
69
  currency,
62
70
  locale,
71
+ decimals,
63
72
  }: {
64
73
  amount: string;
65
74
  currency: string;
66
75
  locale: string;
76
+ decimals?: number;
67
77
  }) => {
68
- return parseAmount(amount, currency, locale);
78
+ return parseAmount(amount, currency, locale, decimals);
69
79
  };
70
80
 
71
81
  const allowedInputKeys = new Set([
@@ -102,6 +112,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
102
112
  onCustomAction?: () => void;
103
113
  classNames?: Record<string, string>;
104
114
  selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
115
+ /**
116
+ * Specify the number of decimal places to format the amount. When not specified, the number of
117
+ * decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
118
+ * This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
119
+ */
120
+ decimals?: number;
105
121
  }
106
122
 
107
123
  export type MoneyInputPropsWithInputAttributes = MoneyInputProps &
@@ -133,6 +149,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
133
149
  amount: props.amount,
134
150
  currency: props.selectedCurrency.currency,
135
151
  locale: props.intl.locale,
152
+ decimals: props.decimals,
136
153
  }),
137
154
  locale: props.intl.locale,
138
155
  };
@@ -147,6 +164,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
147
164
  amount: nextProps.amount,
148
165
  currency: nextProps.selectedCurrency.currency,
149
166
  locale: nextProps.intl.locale,
167
+ decimals: nextProps.decimals,
150
168
  }),
151
169
  });
152
170
  }
@@ -174,6 +192,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
174
192
  amount: paste,
175
193
  currency: this.props.selectedCurrency.currency,
176
194
  locale,
195
+ decimals: this.props.decimals,
177
196
  });
178
197
 
179
198
  if (isNumberOrNull(parsed)) {
@@ -182,6 +201,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
182
201
  amount: parsed,
183
202
  currency: this.props.selectedCurrency.currency,
184
203
  locale,
204
+ decimals: this.props.decimals,
185
205
  }),
186
206
  });
187
207
  this.props.onAmountChange?.(parsed);
@@ -201,6 +221,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
201
221
  amount: value,
202
222
  currency: this.props.selectedCurrency.currency,
203
223
  locale: this.state.locale,
224
+ decimals: this.props.decimals,
204
225
  });
205
226
  if (isNumberOrNull(parsed)) {
206
227
  this.props.onAmountChange?.(parsed);
@@ -248,6 +269,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
248
269
  amount: previousState.formattedAmount,
249
270
  currency: this.props.selectedCurrency.currency,
250
271
  locale: previousState.locale,
272
+ decimals: this.props.decimals,
251
273
  });
252
274
  if (!isNumberOrNull(parsed)) {
253
275
  return {
@@ -259,6 +281,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
259
281
  amount: parsed,
260
282
  currency: this.props.selectedCurrency.currency,
261
283
  locale: previousState.locale,
284
+ decimals: this.props.decimals,
262
285
  }),
263
286
  };
264
287
  });
@@ -340,6 +363,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
340
363
  amount: this.props.placeholder,
341
364
  currency: this.props.selectedCurrency.currency,
342
365
  locale: this.state.locale,
366
+ decimals: this.props.decimals,
343
367
  })}
344
368
  autoComplete="off"
345
369
  aria-describedby={selectedCurrencyElementId}
package/src/moneyInput/currencyFormatting.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { formatAmount } from '@transferwise/formatting';
1
+ import { formatAmount, formatNumber } from '@transferwise/formatting';
2
2
 
3
3
  import { DEFAULT_LOCALE } from '../common/locale';
4
4
 
5
- export { formatAmount };
5
+ export { formatAmount, formatNumber };
6
6
 
7
7
  // TODO: do not duplicate this between formatting and components
8
8
  const currencyDecimals: Record<string, number> = {
@@ -52,7 +52,7 @@ function getValidLocale(locale: string) {
52
52
  }
53
53
  }
54
54
 
55
- function getCurrencyDecimals(currency: string) {
55
+ export function getCurrencyDecimals(currency: string) {
56
56
  const upperCaseCurrency = currency.toUpperCase();
57
57
  return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
58
58
  }
@@ -61,10 +61,16 @@ function getDecimalSeparator(locale: string) {
61
61
  return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
62
62
  }
63
63
 
64
- export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
64
+ export function parseAmount(
65
+ number: string,
66
+ currency: string,
67
+ locale = DEFAULT_LOCALE,
68
+ decimals?: number,
69
+ ) {
65
70
  const validLocale = getValidLocale(locale);
66
71
 
67
- const precision = getCurrencyDecimals(currency);
72
+ const currencyDefault = getCurrencyDecimals(currency);
73
+ const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);
68
74
  const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';
69
75
  const decimalSeparator = getDecimalSeparator(validLocale);
70
76
  const numberWithStandardDecimalSeparator = (number || '')
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -49,7 +49,7 @@
49
49
  --color-sentiment-interactive-control: #CB272F;
50
50
  --color-sentiment-interactive-control-hover: #B8232B;
51
51
  --color-sentiment-interactive-control-active: #A72027;
52
- --color-sentiment-background-surface: #90000D;
52
+ --color-sentiment-background-surface: #CB272F;
53
53
  --color-sentiment-background-surface-hover: #B8232B;
54
54
  --color-sentiment-background-surface-active: #A72027;
55
55
  }
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -27,7 +27,7 @@
27
27
  #CB272F, #B8232B, #A72027,
28
28
  #9B141B, #831116, #6D0e13,
29
29
  #CB272F, #B8232B, #A72027,
30
- #90000D, #B8232B, #A72027
30
+ #CB272F, #B8232B, #A72027
31
31
  );
32
32
  }
33
33
  }
package/src/statusIcon/StatusIcon.css CHANGED
@@ -1,6 +1,37 @@
1
- .wds-sentiment-surface.status-circle {
2
- background-color: var(--color-sentiment-interactive-primary);
1
+ .status-circle.negative,
2
+ .status-circle.error {
3
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
3
4
  }
4
- .wds-sentiment-surface.status-circle .status-icon {
5
- color: var(--color-sentiment-interactive-control);
5
+ .status-circle.negative .status-icon,
6
+ .status-circle.error .status-icon {
7
+ color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
8
+ }
9
+ .status-circle.positive,
10
+ .status-circle.success {
11
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
12
+ }
13
+ .status-circle.positive .status-icon,
14
+ .status-circle.success .status-icon {
15
+ color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
16
+ }
17
+ .status-circle.warning,
18
+ .status-circle.pending {
19
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
20
+ }
21
+ .status-circle.warning .status-icon,
22
+ .status-circle.pending .status-icon {
23
+ color: var(--color-sentiment-interactive-control, var(--color-dark));
24
+ }
25
+ .status-circle.neutral,
26
+ .status-circle.info {
27
+ background-color: #5d7079;
28
+ background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
29
+ }
30
+ .status-circle.neutral .status-icon,
31
+ .status-circle.info .status-icon {
32
+ color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
33
+ }
34
+ .np-theme-personal--bright-green .status-circle.neutral .status-icon,
35
+ .np-theme-personal--bright-green .status-circle.info .status-icon {
36
+ color: var(--color-sentiment-interactive-control, var(--color-white));
6
37
  }
package/src/statusIcon/StatusIcon.less CHANGED
@@ -1,6 +1,37 @@
1
- .wds-sentiment-surface.status-circle {
2
- background-color: var(--color-sentiment-interactive-primary);
3
- .status-icon {
4
- color: var(--color-sentiment-interactive-control);
1
+ .status-circle {
2
+ &.negative,
3
+ &.error {
4
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
5
+ .status-icon {
6
+ color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
7
+ }
8
+ }
9
+
10
+ &.positive,
11
+ &.success {
12
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
13
+ .status-icon {
14
+ color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
15
+ }
16
+ }
17
+
18
+ &.warning,
19
+ &.pending {
20
+ background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
21
+ .status-icon {
22
+ color: var(--color-sentiment-interactive-control, var(--color-dark));
23
+ }
24
+ }
25
+
26
+ &.neutral,
27
+ &.info {
28
+ background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
29
+ .status-icon {
30
+ color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
31
+
32
+ .np-theme-personal--bright-green & {
33
+ color: var(--color-sentiment-interactive-control, var(--color-white));
34
+ }
35
+ }
5
36
  }
6
37
  }