Initial Commit

playbook/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -26,6 +26,7 @@ type CurrencyProps = {
   variant?: 'default' | 'light' | 'bold',
   unit?: string,
   unstyled?: boolean,
+  commaSeparator?: boolean,
 }
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -53,6 +54,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variant = 'default',
     dark = false,
     unstyled = false,
+    commaSeparator = false,
   } = props
 
   const emphasizedClass = emphasized ? '' : '_deemphasized'
@@ -74,7 +76,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     className
   )
 
-  const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
+  const getFormattedNumber = (input: number | string) => new Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
   }).format(input)
@@ -91,7 +93,15 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
   const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
     getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
+  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 getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount),
     getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
     getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 

playbook/app/pb_kits/playbook/pb_currency/currency.rb

@@ -43,6 +43,9 @@ class Currency < Playbook::KitBase
       prop :unstyled, type: Playbook::Props::Boolean,
                       default: false
 
+      prop :comma_separator, type: Playbook::Props::Boolean,
+                             default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -98,7 +101,8 @@ def variant_class
       def whole_value
         return amount if decimals == "matching"
 
-        amount.split(".").first.to_s
+        value = amount.split(".").first.to_s
+        comma_separator ? number_with_delimiter(value) : value
       end
 
       def abbreviated_value(index = 0..-2)

playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -30,6 +30,15 @@ const CurrencyVariants = (props) => {
           variant="bold"
           {...props}
       />
+
+      <Currency
+          amount="1234567.89"
+          commaSeparator
+          label="Comma Separator"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
     </>
   )
 }