@transferwise/components 0.0.0-experimental-14ff413 → 0.0.0-experimental-b79d3f4
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 +4 -42
- 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 +12 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +12 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/styles/main.css +4 -42
- package/build/styles/statusIcon/StatusIcon.css +4 -35
- 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 +1 -1
- package/src/main.css +4 -42
- package/src/moneyInput/MoneyInput.story.tsx +18 -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/statusIcon/StatusIcon.css +4 -35
- package/src/statusIcon/StatusIcon.less +4 -35
- package/src/statusIcon/StatusIcon.story.tsx +79 -119
- package/src/statusIcon/StatusIcon.test.tsx +23 -16
- package/src/statusIcon/StatusIcon.tsx +16 -2
- package/src/statusIcon/StatusIcon.test.story.tsx +0 -125
|
@@ -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":";;;;;AAMA;AACA,MAAMA,gBAAgB,GAA2B;AAC/CC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACN;AACA;AACAC,EAAAA,GAAG,EAAE,CAAC;AAENC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE,CAAC;AACNC,EAAAA,GAAG,EAAE;CACN;AAED,MAAMC,yBAAyB,GAAG,CAAC;AAEnC,SAASC,uBAAuBA,GAAA;EAC9B,MAAMC,MAAM,GAAG,IAAI;EACnB,MAAMC,YAAY,GAAGD,MAAM,CAACE,cAAc,IAAIF,MAAM,CAACE,cAAc,CAACC,oBAAc,CAAC;EACnF,OAAOF,YAAY,KAAK,OAAO;AACjC;AAEA,SAASG,cAAcA,CAACC,MAAc,EAAA;EACpC,IAAI;IACF,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;AAEnDC,IAAAA,IAAI,CAACC,YAAY,CAACH,kBAAkB,CAAC;AACrC,IAAA,OAAOA,kBAAkB;AAC3B,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAOH,oBAAc;AACvB,EAAA;AACF;AAEM,SAAUO,mBAAmBA,CAACC,QAAgB,EAAA;AAClD,EAAA,MAAMC,iBAAiB,GAAGD,QAAQ,CAACE,WAAW,EAAE;AAChD,EAAA,OAAOtC,gBAAgB,CAACqC,iBAAiB,CAAC,IAAId,yBAAyB;AACzE;AAEA,SAASgB,mBAAmBA,CAACT,MAAc,EAAA;AACzC,EAAA,OAAON,uBAAuB,EAAE,GAAI,GAAG,CAAEG,cAAc,CAACG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG;AAC1E;AAEM,SAAUU,WAAWA,CACzBf,MAAc,EACdW,QAAgB,EAChBN,MAAM,GAAGF,oBAAc,EACvBa,QAAiB,EAAA;AAEjB,EAAA,MAAMC,WAAW,GAAGb,cAAc,CAACC,MAAM,CAAC;AAE1C,EAAA,MAAMa,eAAe,GAAGR,mBAAmB,CAACC,QAAQ,CAAC;EACrD,MAAMQ,SAAS,GAAGD,eAAe,KAAK,CAAC,GAAG,CAAC,GAAIF,QAAQ,IAAIE,eAAgB;AAC3E,EAAA,MAAME,cAAc,GAAGrB,uBAAuB,EAAE,GAAI,KAAK,EAAEG,cAAc,CAACe,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG;AAC/F,EAAA,MAAMI,gBAAgB,GAAGP,mBAAmB,CAACG,WAAW,CAAC;AACzD,EAAA,MAAMK,kCAAkC,GAAG,CAACtB,MAAM,IAAI,EAAE,EACrDO,OAAO,CAAC,IAAIgB,MAAM,CAAC,KAAKH,cAAc,CAAA,CAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CACnDb,OAAO,CAAC,IAAIgB,MAAM,CAAC,CAAA,EAAA,EAAKF,gBAAgB,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CACtDd,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;AAC1B,EAAA,MAAMiB,YAAY,GAAGC,MAAM,CAACC,UAAU,CACpCD,MAAM,CAACC,UAAU,CAACJ,kCAAkC,CAAC,CAACK,OAAO,CAACR,SAAS,CAAC,CACzE;AACD,EAAA,OAAOS,IAAI,CAACC,GAAG,CAACL,YAAY,CAAC;AAC/B;;;;;;;;;;;;;"}
|
|
@@ -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,6 +5,7 @@ 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');
|
|
8
9
|
require('../common/theme.js');
|
|
9
10
|
require('../common/direction.js');
|
|
10
11
|
require('../common/propsValues/control.js');
|
|
@@ -82,15 +83,25 @@ const StatusIcon = ({
|
|
|
82
83
|
Icon,
|
|
83
84
|
defaultIconLabel
|
|
84
85
|
} = iconMetaBySentiment[sentiment$1];
|
|
86
|
+
const iconColor = sentiment$1 === 'warning' || sentiment$1 === 'pending' ? 'dark' : 'light';
|
|
85
87
|
const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
|
|
86
88
|
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
|
+
});
|
|
87
97
|
return /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
|
|
98
|
+
as: SentimentSurfaceSetting,
|
|
88
99
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
89
100
|
"data-testid": "status-icon",
|
|
90
101
|
className: clsx.clsx('status-circle', sentiment$1),
|
|
91
102
|
id: id,
|
|
92
103
|
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
93
|
-
className:
|
|
104
|
+
className: clsx.clsx('status-icon', iconColor),
|
|
94
105
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
95
106
|
})
|
|
96
107
|
});
|
|
@@ -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';\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
|
|
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';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\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 iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n // eslint-disable-next-line react/no-unstable-nested-components\n const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface\n as=\"span\"\n // @ts-expect-error sentiment and SentimentSurface types mismatch\n sentiment={\n sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n }\n {...props}\n />\n );\n return (\n <Circle\n as={SentimentSurfaceSetting}\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={clsx('status-icon', iconColor)}\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","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
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';
|
|
4
5
|
import '../common/theme.mjs';
|
|
5
6
|
import '../common/direction.mjs';
|
|
6
7
|
import '../common/propsValues/control.mjs';
|
|
@@ -78,15 +79,25 @@ const StatusIcon = ({
|
|
|
78
79
|
Icon,
|
|
79
80
|
defaultIconLabel
|
|
80
81
|
} = iconMetaBySentiment[sentiment];
|
|
82
|
+
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
81
83
|
const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
|
|
82
84
|
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
|
+
});
|
|
83
93
|
return /*#__PURE__*/jsx(Circle, {
|
|
94
|
+
as: SentimentSurfaceSetting,
|
|
84
95
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
85
96
|
"data-testid": "status-icon",
|
|
86
97
|
className: clsx('status-circle', sentiment),
|
|
87
98
|
id: id,
|
|
88
99
|
children: /*#__PURE__*/jsx(Icon, {
|
|
89
|
-
className:
|
|
100
|
+
className: clsx('status-icon', iconColor),
|
|
90
101
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
91
102
|
})
|
|
92
103
|
});
|
|
@@ -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';\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
|
|
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';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\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 iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n // eslint-disable-next-line react/no-unstable-nested-components\n const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface\n as=\"span\"\n // @ts-expect-error sentiment and SentimentSurface types mismatch\n sentiment={\n sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n }\n {...props}\n />\n );\n return (\n <Circle\n as={SentimentSurfaceSetting}\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={clsx('status-icon', iconColor)}\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","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
package/build/styles/main.css
CHANGED
|
@@ -32429,50 +32429,12 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32429
32429
|
}
|
|
32430
32430
|
}
|
|
32431
32431
|
|
|
32432
|
-
.status-circle
|
|
32433
|
-
|
|
32434
|
-
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
32432
|
+
.wds-sentiment-surface.status-circle {
|
|
32433
|
+
background-color: var(--color-sentiment-interactive-primary);
|
|
32435
32434
|
}
|
|
32436
32435
|
|
|
32437
|
-
.status-circle
|
|
32438
|
-
|
|
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));
|
|
32436
|
+
.wds-sentiment-surface.status-circle .status-icon {
|
|
32437
|
+
color: var(--color-sentiment-interactive-control);
|
|
32476
32438
|
}
|
|
32477
32439
|
|
|
32478
32440
|
.tw-stepper {
|
|
@@ -1,37 +1,6 @@
|
|
|
1
|
-
.status-circle
|
|
2
|
-
|
|
3
|
-
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
1
|
+
.wds-sentiment-surface.status-circle {
|
|
2
|
+
background-color: var(--color-sentiment-interactive-primary);
|
|
4
3
|
}
|
|
5
|
-
.status-circle
|
|
6
|
-
|
|
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));
|
|
4
|
+
.wds-sentiment-surface.status-circle .status-icon {
|
|
5
|
+
color: var(--color-sentiment-interactive-control);
|
|
37
6
|
}
|
|
@@ -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":"AAMA,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,gCA0EjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
package/src/main.css
CHANGED
|
@@ -32429,50 +32429,12 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32429
32429
|
}
|
|
32430
32430
|
}
|
|
32431
32431
|
|
|
32432
|
-
.status-circle
|
|
32433
|
-
|
|
32434
|
-
background-color: var(--color-sentiment-interactive-primary, var(--color-sentiment-negative));
|
|
32432
|
+
.wds-sentiment-surface.status-circle {
|
|
32433
|
+
background-color: var(--color-sentiment-interactive-primary);
|
|
32435
32434
|
}
|
|
32436
32435
|
|
|
32437
|
-
.status-circle
|
|
32438
|
-
|
|
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));
|
|
32436
|
+
.wds-sentiment-surface.status-circle .status-icon {
|
|
32437
|
+
color: var(--color-sentiment-interactive-control);
|
|
32476
32438
|
}
|
|
32477
32439
|
|
|
32478
32440
|
.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,23 @@ 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.5678,
|
|
164
|
+
},
|
|
165
|
+
play: async ({ canvas }) => {
|
|
166
|
+
const input = canvas.getByRole('textbox');
|
|
167
|
+
await expect(input).toHaveValue('1,234.5678');
|
|
168
|
+
await userEvent.clear(input);
|
|
169
|
+
await userEvent.type(input, '99.123456789');
|
|
170
|
+
await userEvent.tab();
|
|
171
|
+
await expect(input).toHaveValue('99.1235');
|
|
172
|
+
},
|
|
173
|
+
};
|
|
174
|
+
|
|
158
175
|
export const OpenedInput: Story = {
|
|
159
176
|
...MultipleCurrencies,
|
|
160
177
|
play: async ({ canvasElement }) => {
|
|
@@ -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());
|