diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx index 110808c547..d77b6d3289 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx +++ b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx @@ -90,20 +90,20 @@ const Currency = (props: CurrencyProps): React.ReactElement => { return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : '' } - const getMatchingDecimalAmount = decimals === "matching" ? amount : whole, - getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}` + const getMatchingDecimalAmount = decimals === "matching" ? amount : whole + const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}` const formatAmount = (amount: string) => { if (!commaSeparator) return amount; - const [whole, decimal = '00'] = amount.split('.'); - const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(whole)); - return `${formattedWhole}.${decimal}`; + const [wholePart, decimalPart] = amount.split('.'); + const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart)); + return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole; } - const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount), - getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null, - getDecimalValue = abbreviate ? '' : getMatchingDecimalValue + const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount) + const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null + const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue return (
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx new file mode 100644 index 0000000000..851cf52a10 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx @@ -0,0 +1,18 @@ +import React from "react" + +import Currency from "../_currency" + +const CurrencyCommaSeparator = (props) => { + return ( + + ) +} + +export default CurrencyCommaSeparator diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb index 5524a9bcc9..707889e038 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb @@ -1,24 +1,24 @@ <%= pb_rails("currency", props: { amount: "372.12", - decimals: "matching", label: "Small", margin_bottom: "md", size: "sm", unit: "/day", + decimals: "matching", }) %> <%= pb_rails("currency", props: { amount: "30,327.43", - decimals: "matching", label: "Medium", margin_bottom: "md", size: "md", symbol: "€", + decimals: "matching", }) %> <%= pb_rails("currency", props: { amount: "621,953.99", - decimals: "matching", label: "Large", size: "lg", + decimals: "matching", }) %> diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx index b2541d9343..6a4dffd3dd 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx @@ -7,7 +7,6 @@ const CurrencyMatchingDecimals = (props) => { <> { /> { /> { variant="bold" {...props} /> - - ) } diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml index a8354bce15..8568c2a514 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/example.yml @@ -8,7 +8,8 @@ examples: - currency_abbreviated: Abbreviate Larger Amounts - currency_matching_decimals: Matching Decimals - currency_unstyled: Unstyled - + - currency_comma_separator: Comma Separator + react: - currency_variants: Variants - currency_size: Size @@ -17,6 +18,7 @@ examples: - currency_abbreviated: Abbreviate Larger Amounts - currency_matching_decimals: Matching Decimals - currency_unstyled: Unstyled + - currency_comma_separator: Comma Separator swift: - currency_size_swift: Size diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js index e0ab2b0b99..86ae571909 100644 --- a/playbook/app/pb_kits/playbook/pb_currency/docs/index.js +++ b/playbook/app/pb_kits/playbook/pb_currency/docs/index.js @@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx' export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx' export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx' export { default as CurrencyUnstyled } from './_currency_unstyled.jsx' +export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'