@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.
- package/build/main.css +43 -5
- package/build/moneyInput/MoneyInput.js +28 -12
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +30 -14
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/moneyInput/currencyFormatting.js +8 -2
- package/build/moneyInput/currencyFormatting.js.map +1 -1
- package/build/moneyInput/currencyFormatting.mjs +5 -4
- package/build/moneyInput/currencyFormatting.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +1 -12
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +1 -12
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/styles/main.css +43 -5
- package/build/styles/sentimentSurface/SentimentSurface.css +1 -1
- package/build/styles/statusIcon/StatusIcon.css +35 -4
- package/build/types/moneyInput/MoneyInput.d.ts +6 -0
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
- package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/main.css +43 -5
- package/src/moneyInput/MoneyInput.story.tsx +10 -1
- package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
- package/src/moneyInput/MoneyInput.test.tsx +45 -0
- package/src/moneyInput/MoneyInput.tsx +27 -3
- package/src/moneyInput/currencyFormatting.ts +11 -5
- package/src/sentimentSurface/SentimentSurface.css +1 -1
- package/src/sentimentSurface/SentimentSurface.less +1 -1
- package/src/statusIcon/StatusIcon.css +35 -4
- package/src/statusIcon/StatusIcon.less +35 -4
- package/src/statusIcon/StatusIcon.story.tsx +119 -79
- package/src/statusIcon/StatusIcon.test.story.tsx +125 -0
- package/src/statusIcon/StatusIcon.test.tsx +16 -23
- package/src/statusIcon/StatusIcon.tsx +2 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currencyFormatting.js","sources":["../../src/moneyInput/currencyFormatting.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\n\nimport { DEFAULT_LOCALE } from '../common/locale';\n\nexport { formatAmount };\n\n// TODO: do not duplicate this between formatting and components\nconst currencyDecimals: Record<string, number> = {\n BIF: 0,\n BYR: 0,\n CLP: 0,\n DJF: 0,\n GNF: 0,\n JPY: 0,\n KMF: 0,\n KRW: 0,\n MGA: 0,\n PYG: 0,\n RWF: 0,\n VND: 0,\n VUV: 0,\n XAF: 0,\n XOF: 0,\n XPF: 0,\n // technically HUF does have decimals, but due to the exchange rate banks\n // do not accept decimal amounts\n HUF: 0,\n\n BHD: 3,\n JOD: 3,\n KWD: 3,\n OMR: 3,\n TND: 3,\n};\n\nconst DEFAULT_CURRENCY_DECIMALS = 2;\n\nfunction isNumberLocaleSupported() {\n const number = 1234;\n const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);\n return numberString === '1,234';\n}\n\nfunction getValidLocale(locale: string) {\n try {\n const noUnderscoreLocale = locale.replace(/_/, '-');\n\n Intl.NumberFormat(noUnderscoreLocale);\n return noUnderscoreLocale;\n } catch {\n return DEFAULT_LOCALE;\n }\n}\n\
|
|
1
|
+
{"version":3,"file":"currencyFormatting.js","sources":["../../src/moneyInput/currencyFormatting.ts"],"sourcesContent":["import { formatAmount, formatNumber } from '@transferwise/formatting';\n\nimport { DEFAULT_LOCALE } from '../common/locale';\n\nexport { formatAmount, formatNumber };\n\n// TODO: do not duplicate this between formatting and components\nconst currencyDecimals: Record<string, number> = {\n BIF: 0,\n BYR: 0,\n CLP: 0,\n DJF: 0,\n GNF: 0,\n JPY: 0,\n KMF: 0,\n KRW: 0,\n MGA: 0,\n PYG: 0,\n RWF: 0,\n VND: 0,\n VUV: 0,\n XAF: 0,\n XOF: 0,\n XPF: 0,\n // technically HUF does have decimals, but due to the exchange rate banks\n // do not accept decimal amounts\n HUF: 0,\n\n BHD: 3,\n JOD: 3,\n KWD: 3,\n OMR: 3,\n TND: 3,\n};\n\nconst DEFAULT_CURRENCY_DECIMALS = 2;\n\nfunction isNumberLocaleSupported() {\n const number = 1234;\n const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);\n return numberString === '1,234';\n}\n\nfunction getValidLocale(locale: string) {\n try {\n const noUnderscoreLocale = locale.replace(/_/, '-');\n\n Intl.NumberFormat(noUnderscoreLocale);\n return noUnderscoreLocale;\n } catch {\n return DEFAULT_LOCALE;\n }\n}\n\nexport function getCurrencyDecimals(currency: string) {\n const upperCaseCurrency = currency.toUpperCase();\n return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;\n}\n\nfunction getDecimalSeparator(locale: string) {\n return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';\n}\n\nexport function parseAmount(\n number: string,\n currency: string,\n locale = DEFAULT_LOCALE,\n decimals?: number,\n) {\n const validLocale = getValidLocale(locale);\n\n const currencyDefault = getCurrencyDecimals(currency);\n const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);\n const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';\n const decimalSeparator = getDecimalSeparator(validLocale);\n const numberWithStandardDecimalSeparator = (number || '')\n .replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n .replace(new RegExp(`\\\\${decimalSeparator}`, 'g'), '.')\n .replace(/[^0-9.]/g, '');\n const parsedAmount = Number.parseFloat(\n Number.parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),\n );\n return Math.abs(parsedAmount);\n}\n"],"names":["currencyDecimals","BIF","BYR","CLP","DJF","GNF","JPY","KMF","KRW","MGA","PYG","RWF","VND","VUV","XAF","XOF","XPF","HUF","BHD","JOD","KWD","OMR","TND","DEFAULT_CURRENCY_DECIMALS","isNumberLocaleSupported","number","numberString","toLocaleString","DEFAULT_LOCALE","getValidLocale","locale","noUnderscoreLocale","replace","Intl","NumberFormat","getCurrencyDecimals","currency","upperCaseCurrency","toUpperCase","getDecimalSeparator","parseAmount","decimals","validLocale","currencyDefault","precision","groupSeparator","decimalSeparator","numberWithStandardDecimalSeparator","RegExp","parsedAmount","Number","parseFloat","toFixed","Math","abs"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { formatAmount } from '@transferwise/formatting';
|
|
1
|
+
export { formatAmount, formatNumber } from '@transferwise/formatting';
|
|
2
2
|
import { DEFAULT_LOCALE } from '../common/locale/index.mjs';
|
|
3
3
|
|
|
4
4
|
// TODO: do not duplicate this between formatting and components
|
|
@@ -50,9 +50,10 @@ function getCurrencyDecimals(currency) {
|
|
|
50
50
|
function getDecimalSeparator(locale) {
|
|
51
51
|
return isNumberLocaleSupported() ? 1.1.toLocaleString(locale)[1] : '.';
|
|
52
52
|
}
|
|
53
|
-
function parseAmount(number, currency, locale = DEFAULT_LOCALE) {
|
|
53
|
+
function parseAmount(number, currency, locale = DEFAULT_LOCALE, decimals) {
|
|
54
54
|
const validLocale = getValidLocale(locale);
|
|
55
|
-
const
|
|
55
|
+
const currencyDefault = getCurrencyDecimals(currency);
|
|
56
|
+
const precision = currencyDefault === 0 ? 0 : decimals ?? currencyDefault;
|
|
56
57
|
const groupSeparator = isNumberLocaleSupported() ? 10000 .toLocaleString(validLocale)[2] : ',';
|
|
57
58
|
const decimalSeparator = getDecimalSeparator(validLocale);
|
|
58
59
|
const numberWithStandardDecimalSeparator = (number || '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '').replace(new RegExp(`\\${decimalSeparator}`, 'g'), '.').replace(/[^0-9.]/g, '');
|
|
@@ -60,5 +61,5 @@ function parseAmount(number, currency, locale = DEFAULT_LOCALE) {
|
|
|
60
61
|
return Math.abs(parsedAmount);
|
|
61
62
|
}
|
|
62
63
|
|
|
63
|
-
export { parseAmount };
|
|
64
|
+
export { getCurrencyDecimals, parseAmount };
|
|
64
65
|
//# sourceMappingURL=currencyFormatting.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currencyFormatting.mjs","sources":["../../src/moneyInput/currencyFormatting.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\n\nimport { DEFAULT_LOCALE } from '../common/locale';\n\nexport { formatAmount };\n\n// TODO: do not duplicate this between formatting and components\nconst currencyDecimals: Record<string, number> = {\n BIF: 0,\n BYR: 0,\n CLP: 0,\n DJF: 0,\n GNF: 0,\n JPY: 0,\n KMF: 0,\n KRW: 0,\n MGA: 0,\n PYG: 0,\n RWF: 0,\n VND: 0,\n VUV: 0,\n XAF: 0,\n XOF: 0,\n XPF: 0,\n // technically HUF does have decimals, but due to the exchange rate banks\n // do not accept decimal amounts\n HUF: 0,\n\n BHD: 3,\n JOD: 3,\n KWD: 3,\n OMR: 3,\n TND: 3,\n};\n\nconst DEFAULT_CURRENCY_DECIMALS = 2;\n\nfunction isNumberLocaleSupported() {\n const number = 1234;\n const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);\n return numberString === '1,234';\n}\n\nfunction getValidLocale(locale: string) {\n try {\n const noUnderscoreLocale = locale.replace(/_/, '-');\n\n Intl.NumberFormat(noUnderscoreLocale);\n return noUnderscoreLocale;\n } catch {\n return DEFAULT_LOCALE;\n }\n}\n\
|
|
1
|
+
{"version":3,"file":"currencyFormatting.mjs","sources":["../../src/moneyInput/currencyFormatting.ts"],"sourcesContent":["import { formatAmount, formatNumber } from '@transferwise/formatting';\n\nimport { DEFAULT_LOCALE } from '../common/locale';\n\nexport { formatAmount, formatNumber };\n\n// TODO: do not duplicate this between formatting and components\nconst currencyDecimals: Record<string, number> = {\n BIF: 0,\n BYR: 0,\n CLP: 0,\n DJF: 0,\n GNF: 0,\n JPY: 0,\n KMF: 0,\n KRW: 0,\n MGA: 0,\n PYG: 0,\n RWF: 0,\n VND: 0,\n VUV: 0,\n XAF: 0,\n XOF: 0,\n XPF: 0,\n // technically HUF does have decimals, but due to the exchange rate banks\n // do not accept decimal amounts\n HUF: 0,\n\n BHD: 3,\n JOD: 3,\n KWD: 3,\n OMR: 3,\n TND: 3,\n};\n\nconst DEFAULT_CURRENCY_DECIMALS = 2;\n\nfunction isNumberLocaleSupported() {\n const number = 1234;\n const numberString = number.toLocaleString && number.toLocaleString(DEFAULT_LOCALE);\n return numberString === '1,234';\n}\n\nfunction getValidLocale(locale: string) {\n try {\n const noUnderscoreLocale = locale.replace(/_/, '-');\n\n Intl.NumberFormat(noUnderscoreLocale);\n return noUnderscoreLocale;\n } catch {\n return DEFAULT_LOCALE;\n }\n}\n\nexport function getCurrencyDecimals(currency: string) {\n const upperCaseCurrency = currency.toUpperCase();\n return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;\n}\n\nfunction getDecimalSeparator(locale: string) {\n return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';\n}\n\nexport function parseAmount(\n number: string,\n currency: string,\n locale = DEFAULT_LOCALE,\n decimals?: number,\n) {\n const validLocale = getValidLocale(locale);\n\n const currencyDefault = getCurrencyDecimals(currency);\n const precision = currencyDefault === 0 ? 0 : (decimals ?? currencyDefault);\n const groupSeparator = isNumberLocaleSupported() ? (10000).toLocaleString(validLocale)[2] : ',';\n const decimalSeparator = getDecimalSeparator(validLocale);\n const numberWithStandardDecimalSeparator = (number || '')\n .replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n .replace(new RegExp(`\\\\${decimalSeparator}`, 'g'), '.')\n .replace(/[^0-9.]/g, '');\n const parsedAmount = Number.parseFloat(\n Number.parseFloat(numberWithStandardDecimalSeparator).toFixed(precision),\n );\n return Math.abs(parsedAmount);\n}\n"],"names":["currencyDecimals","BIF","BYR","CLP","DJF","GNF","JPY","KMF","KRW","MGA","PYG","RWF","VND","VUV","XAF","XOF","XPF","HUF","BHD","JOD","KWD","OMR","TND","DEFAULT_CURRENCY_DECIMALS","isNumberLocaleSupported","number","numberString","toLocaleString","DEFAULT_LOCALE","getValidLocale","locale","noUnderscoreLocale","replace","Intl","NumberFormat","getCurrencyDecimals","currency","upperCaseCurrency","toUpperCase","getDecimalSeparator","parseAmount","decimals","validLocale","currencyDefault","precision","groupSeparator","decimalSeparator","numberWithStandardDecimalSeparator","RegExp","parsedAmount","Number","parseFloat","toFixed","Math","abs"],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var icons = require('@transferwise/icons');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var reactIntl = require('react-intl');
|
|
8
|
-
var SentimentSurface = require('../sentimentSurface/SentimentSurface.js');
|
|
9
8
|
require('../common/theme.js');
|
|
10
9
|
require('../common/direction.js');
|
|
11
10
|
require('../common/propsValues/control.js');
|
|
@@ -83,25 +82,15 @@ const StatusIcon = ({
|
|
|
83
82
|
Icon,
|
|
84
83
|
defaultIconLabel
|
|
85
84
|
} = iconMetaBySentiment[sentiment$1];
|
|
86
|
-
const iconColor = sentiment$1 === 'warning' || sentiment$1 === 'pending' ? 'dark' : 'light';
|
|
87
85
|
const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
|
|
88
86
|
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
89
|
-
// eslint-disable-next-line react/no-unstable-nested-components
|
|
90
|
-
const SentimentSurfaceSetting = props => /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
|
|
91
|
-
as: "span"
|
|
92
|
-
// @ts-expect-error sentiment and SentimentSurface types mismatch
|
|
93
|
-
,
|
|
94
|
-
sentiment: sentiment$1 === 'positive' ? 'success' : sentiment$1 === 'pending' ? 'warning' : sentiment$1,
|
|
95
|
-
...props
|
|
96
|
-
});
|
|
97
87
|
return /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
|
|
98
|
-
as: SentimentSurfaceSetting,
|
|
99
88
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
100
89
|
"data-testid": "status-icon",
|
|
101
90
|
className: clsx.clsx('status-circle', sentiment$1),
|
|
102
91
|
id: id,
|
|
103
92
|
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
104
|
-
className:
|
|
93
|
+
className: "status-icon",
|
|
105
94
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
106
95
|
})
|
|
107
96
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\
|
|
1
|
+
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n id?: string;\n /** @default 'neutral' */\n sentiment?: `${StatusIconSentiment}`;\n /** @default 40 */\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /**\n * Override for the sentiment's-derived, default, accessible\n * name announced by the screen readers. <br />\n * Using `null` will render the icon purely presentational.\n * */\n iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n id,\n sentiment = 'neutral',\n size: sizeProp = 40,\n iconLabel,\n}: StatusIconProps) => {\n const intl = useIntl();\n\n const iconMetaBySentiment: Record<\n `${Sentiment}` | Status.PENDING,\n {\n Icon: React.ElementType;\n defaultIconLabel: string;\n }\n > = {\n [Sentiment.NEGATIVE]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.POSITIVE]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n [Sentiment.WARNING]: {\n Icon: Alert,\n defaultIconLabel: intl.formatMessage(messages.warningLabel),\n },\n [Status.PENDING]: {\n Icon: ClockBorderless,\n defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n },\n [Sentiment.NEUTRAL]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n // deprecated\n [Sentiment.ERROR]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.INFO]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n [Sentiment.SUCCESS]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n };\n const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n return (\n <Circle\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n id={id}\n >\n <Icon\n className=\"status-icon\"\n title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Check, Info, Cross, ClockBorderless, Alert } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useIntl } from 'react-intl';
|
|
4
|
-
import SentimentSurface from '../sentimentSurface/SentimentSurface.mjs';
|
|
5
4
|
import '../common/theme.mjs';
|
|
6
5
|
import '../common/direction.mjs';
|
|
7
6
|
import '../common/propsValues/control.mjs';
|
|
@@ -79,25 +78,15 @@ const StatusIcon = ({
|
|
|
79
78
|
Icon,
|
|
80
79
|
defaultIconLabel
|
|
81
80
|
} = iconMetaBySentiment[sentiment];
|
|
82
|
-
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
83
81
|
const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
|
|
84
82
|
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
85
|
-
// eslint-disable-next-line react/no-unstable-nested-components
|
|
86
|
-
const SentimentSurfaceSetting = props => /*#__PURE__*/jsx(SentimentSurface, {
|
|
87
|
-
as: "span"
|
|
88
|
-
// @ts-expect-error sentiment and SentimentSurface types mismatch
|
|
89
|
-
,
|
|
90
|
-
sentiment: sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment,
|
|
91
|
-
...props
|
|
92
|
-
});
|
|
93
83
|
return /*#__PURE__*/jsx(Circle, {
|
|
94
|
-
as: SentimentSurfaceSetting,
|
|
95
84
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
96
85
|
"data-testid": "status-icon",
|
|
97
86
|
className: clsx('status-circle', sentiment),
|
|
98
87
|
id: id,
|
|
99
88
|
children: /*#__PURE__*/jsx(Icon, {
|
|
100
|
-
className:
|
|
89
|
+
className: "status-icon",
|
|
101
90
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
102
91
|
})
|
|
103
92
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\
|
|
1
|
+
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n id?: string;\n /** @default 'neutral' */\n sentiment?: `${StatusIconSentiment}`;\n /** @default 40 */\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /**\n * Override for the sentiment's-derived, default, accessible\n * name announced by the screen readers. <br />\n * Using `null` will render the icon purely presentational.\n * */\n iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n id,\n sentiment = 'neutral',\n size: sizeProp = 40,\n iconLabel,\n}: StatusIconProps) => {\n const intl = useIntl();\n\n const iconMetaBySentiment: Record<\n `${Sentiment}` | Status.PENDING,\n {\n Icon: React.ElementType;\n defaultIconLabel: string;\n }\n > = {\n [Sentiment.NEGATIVE]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.POSITIVE]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n [Sentiment.WARNING]: {\n Icon: Alert,\n defaultIconLabel: intl.formatMessage(messages.warningLabel),\n },\n [Status.PENDING]: {\n Icon: ClockBorderless,\n defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n },\n [Sentiment.NEUTRAL]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n // deprecated\n [Sentiment.ERROR]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.INFO]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n [Sentiment.SUCCESS]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n };\n const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n return (\n <Circle\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n id={id}\n >\n <Icon\n className=\"status-icon\"\n title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
package/build/styles/main.css
CHANGED
|
@@ -25824,7 +25824,7 @@ a[data-toggle="tooltip"] {
|
|
|
25824
25824
|
--color-sentiment-interactive-control: #CB272F;
|
|
25825
25825
|
--color-sentiment-interactive-control-hover: #B8232B;
|
|
25826
25826
|
--color-sentiment-interactive-control-active: #A72027;
|
|
25827
|
-
--color-sentiment-background-surface: #
|
|
25827
|
+
--color-sentiment-background-surface: #CB272F;
|
|
25828
25828
|
--color-sentiment-background-surface-hover: #B8232B;
|
|
25829
25829
|
--color-sentiment-background-surface-active: #A72027;
|
|
25830
25830
|
}
|
|
@@ -32429,12 +32429,50 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32429
32429
|
}
|
|
32430
32430
|
}
|
|
32431
32431
|
|
|
32432
|
-
.
|
|
32433
|
-
|
|
32432
|
+
.status-circle.negative,
|
|
32433
|
+
.status-circle.error {
|
|
32434
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
32434
32435
|
}
|
|
32435
32436
|
|
|
32436
|
-
.
|
|
32437
|
-
|
|
32437
|
+
.status-circle.negative .status-icon,
|
|
32438
|
+
.status-circle.error .status-icon {
|
|
32439
|
+
color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
|
|
32440
|
+
}
|
|
32441
|
+
|
|
32442
|
+
.status-circle.positive,
|
|
32443
|
+
.status-circle.success {
|
|
32444
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
|
|
32445
|
+
}
|
|
32446
|
+
|
|
32447
|
+
.status-circle.positive .status-icon,
|
|
32448
|
+
.status-circle.success .status-icon {
|
|
32449
|
+
color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
|
|
32450
|
+
}
|
|
32451
|
+
|
|
32452
|
+
.status-circle.warning,
|
|
32453
|
+
.status-circle.pending {
|
|
32454
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
|
|
32455
|
+
}
|
|
32456
|
+
|
|
32457
|
+
.status-circle.warning .status-icon,
|
|
32458
|
+
.status-circle.pending .status-icon {
|
|
32459
|
+
color: var(--color-sentiment-interactive-control, var(--color-dark));
|
|
32460
|
+
}
|
|
32461
|
+
|
|
32462
|
+
.status-circle.neutral,
|
|
32463
|
+
.status-circle.info {
|
|
32464
|
+
background-color: #5d7079;
|
|
32465
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
|
|
32466
|
+
}
|
|
32467
|
+
|
|
32468
|
+
.status-circle.neutral .status-icon,
|
|
32469
|
+
.status-circle.info .status-icon {
|
|
32470
|
+
color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
|
|
32471
|
+
}
|
|
32472
|
+
|
|
32473
|
+
.np-theme-personal--bright-green .status-circle.neutral .status-icon,
|
|
32474
|
+
.np-theme-personal--bright-green .status-circle.info .status-icon {
|
|
32475
|
+
color: var(--color-sentiment-interactive-control, var(--color-white));
|
|
32438
32476
|
}
|
|
32439
32477
|
|
|
32440
32478
|
.tw-stepper {
|
|
@@ -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: #
|
|
52
|
+
--color-sentiment-background-surface: #CB272F;
|
|
53
53
|
--color-sentiment-background-surface-hover: #B8232B;
|
|
54
54
|
--color-sentiment-background-surface-active: #A72027;
|
|
55
55
|
}
|
|
@@ -1,6 +1,37 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
1
|
+
.status-circle.negative,
|
|
2
|
+
.status-circle.error {
|
|
3
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
3
4
|
}
|
|
4
|
-
.
|
|
5
|
-
|
|
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
|
}
|
|
@@ -37,6 +37,12 @@ export interface MoneyInputProps extends WrappedComponentProps {
|
|
|
37
37
|
onCustomAction?: () => void;
|
|
38
38
|
classNames?: Record<string, string>;
|
|
39
39
|
selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
|
|
40
|
+
/**
|
|
41
|
+
* Specify the number of decimal places to format the amount. When not specified, the number of
|
|
42
|
+
* decimals is determined by the selected currency (e.g. 2 for EUR, 0 for JPY, 3 for BHD).
|
|
43
|
+
* This override is ignored for zero-decimal currencies (e.g. JPY, KRW, HUF), which always use 0.
|
|
44
|
+
*/
|
|
45
|
+
decimals?: number;
|
|
40
46
|
}
|
|
41
47
|
export type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
|
|
42
48
|
declare const _default: import("react").FC<import("react-intl").WithIntlProps<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes"> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAE/D,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AACnB,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAoDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kCAAkC,GAAG,eAAe,GAC9D,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;;;;;AAoapC,wBAA2F"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { formatAmount } from '@transferwise/formatting';
|
|
2
|
-
export { formatAmount };
|
|
3
|
-
export declare function
|
|
1
|
+
import { formatAmount, formatNumber } from '@transferwise/formatting';
|
|
2
|
+
export { formatAmount, formatNumber };
|
|
3
|
+
export declare function getCurrencyDecimals(currency: string): number;
|
|
4
|
+
export declare function parseAmount(number: string, currency: string, locale?: string, decimals?: number): number;
|
|
4
5
|
//# sourceMappingURL=currencyFormatting.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currencyFormatting.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/currencyFormatting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"currencyFormatting.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/currencyFormatting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAItE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAkDtC,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,UAGnD;AAMD,wBAAgB,WAAW,CACzB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,MAAM,SAAiB,EACvB,QAAQ,CAAC,EAAE,MAAM,UAgBlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yBAAyB;IACzB,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,kBAAkB;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,+CAKjB,eAAe,gCA8DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.134.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -49,11 +49,11 @@
|
|
|
49
49
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
50
50
|
"@rollup/plugin-typescript": "^12.3.0",
|
|
51
51
|
"@rollup/plugin-url": "^8.0.2",
|
|
52
|
-
"@storybook/addon-a11y": "^10.3.
|
|
53
|
-
"@storybook/addon-docs": "^10.3.
|
|
52
|
+
"@storybook/addon-a11y": "^10.3.3",
|
|
53
|
+
"@storybook/addon-docs": "^10.3.3",
|
|
54
54
|
"@storybook/addon-mcp": "^0.4.1",
|
|
55
55
|
"@storybook/addon-webpack5-compiler-babel": "^4.0.0",
|
|
56
|
-
"@storybook/react-webpack5": "^10.3.
|
|
56
|
+
"@storybook/react-webpack5": "^10.3.3",
|
|
57
57
|
"@testing-library/dom": "^10.4.1",
|
|
58
58
|
"@testing-library/jest-dom": "^6.9.1",
|
|
59
59
|
"@testing-library/react": "^16.3.2",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"@wise/eslint-config": "^13.3.0",
|
|
74
74
|
"babel-plugin-formatjs": "^10.5.41",
|
|
75
75
|
"eslint": "^9.39.4",
|
|
76
|
-
"eslint-plugin-storybook": "^10.3.
|
|
76
|
+
"eslint-plugin-storybook": "^10.3.3",
|
|
77
77
|
"gulp": "^5.0.1",
|
|
78
78
|
"jest": "^30.3.0",
|
|
79
79
|
"jest-environment-jsdom": "^29.7.0",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"react-intl": "^7.1.14",
|
|
84
84
|
"rollup": "^4.57.1",
|
|
85
85
|
"rollup-preserve-directives": "^1.1.3",
|
|
86
|
-
"storybook": "^10.3.
|
|
86
|
+
"storybook": "^10.3.3",
|
|
87
87
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
package/src/main.css
CHANGED
|
@@ -25824,7 +25824,7 @@ a[data-toggle="tooltip"] {
|
|
|
25824
25824
|
--color-sentiment-interactive-control: #CB272F;
|
|
25825
25825
|
--color-sentiment-interactive-control-hover: #B8232B;
|
|
25826
25826
|
--color-sentiment-interactive-control-active: #A72027;
|
|
25827
|
-
--color-sentiment-background-surface: #
|
|
25827
|
+
--color-sentiment-background-surface: #CB272F;
|
|
25828
25828
|
--color-sentiment-background-surface-hover: #B8232B;
|
|
25829
25829
|
--color-sentiment-background-surface-active: #A72027;
|
|
25830
25830
|
}
|
|
@@ -32429,12 +32429,50 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32429
32429
|
}
|
|
32430
32430
|
}
|
|
32431
32431
|
|
|
32432
|
-
.
|
|
32433
|
-
|
|
32432
|
+
.status-circle.negative,
|
|
32433
|
+
.status-circle.error {
|
|
32434
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
32434
32435
|
}
|
|
32435
32436
|
|
|
32436
|
-
.
|
|
32437
|
-
|
|
32437
|
+
.status-circle.negative .status-icon,
|
|
32438
|
+
.status-circle.error .status-icon {
|
|
32439
|
+
color: var(--color-sentiment-interactive-control, var(--color-sentiment-negative-secondary));
|
|
32440
|
+
}
|
|
32441
|
+
|
|
32442
|
+
.status-circle.positive,
|
|
32443
|
+
.status-circle.success {
|
|
32444
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-positive));
|
|
32445
|
+
}
|
|
32446
|
+
|
|
32447
|
+
.status-circle.positive .status-icon,
|
|
32448
|
+
.status-circle.success .status-icon {
|
|
32449
|
+
color: var(--color-sentiment-interactive-control, var(--color-sentiment-positive-secondary));
|
|
32450
|
+
}
|
|
32451
|
+
|
|
32452
|
+
.status-circle.warning,
|
|
32453
|
+
.status-circle.pending {
|
|
32454
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-warning));
|
|
32455
|
+
}
|
|
32456
|
+
|
|
32457
|
+
.status-circle.warning .status-icon,
|
|
32458
|
+
.status-circle.pending .status-icon {
|
|
32459
|
+
color: var(--color-sentiment-interactive-control, var(--color-dark));
|
|
32460
|
+
}
|
|
32461
|
+
|
|
32462
|
+
.status-circle.neutral,
|
|
32463
|
+
.status-circle.info {
|
|
32464
|
+
background-color: #5d7079;
|
|
32465
|
+
background-color: var(--color-sentiment-interactive-primary, var(--color-content-secondary));
|
|
32466
|
+
}
|
|
32467
|
+
|
|
32468
|
+
.status-circle.neutral .status-icon,
|
|
32469
|
+
.status-circle.info .status-icon {
|
|
32470
|
+
color: var(--color-sentiment-interactive-control, var(--color-contrast-overlay));
|
|
32471
|
+
}
|
|
32472
|
+
|
|
32473
|
+
.np-theme-personal--bright-green .status-circle.neutral .status-icon,
|
|
32474
|
+
.np-theme-personal--bright-green .status-circle.info .status-icon {
|
|
32475
|
+
color: var(--color-sentiment-interactive-control, var(--color-white));
|
|
32438
32476
|
}
|
|
32439
32477
|
|
|
32440
32478
|
.tw-stepper {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import { within, userEvent } from 'storybook/test';
|
|
2
|
+
import { within, userEvent, expect } from 'storybook/test';
|
|
3
3
|
import { Lock } from '@transferwise/icons';
|
|
4
4
|
import { useState } from 'react';
|
|
5
5
|
|
|
@@ -155,6 +155,15 @@ export const BalanceCurrencies: Story = {
|
|
|
155
155
|
},
|
|
156
156
|
};
|
|
157
157
|
|
|
158
|
+
export const WithDecimals: Story = {
|
|
159
|
+
args: {
|
|
160
|
+
currencies: [],
|
|
161
|
+
selectedCurrency: exampleCurrency.eur,
|
|
162
|
+
decimals: 4,
|
|
163
|
+
amount: 1234.1412,
|
|
164
|
+
},
|
|
165
|
+
};
|
|
166
|
+
|
|
158
167
|
export const OpenedInput: Story = {
|
|
159
168
|
...MultipleCurrencies,
|
|
160
169
|
play: async ({ canvasElement }) => {
|