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'