Rails & React Working

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 (
     <div

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

@@ -68,7 +68,7 @@ def caption_props
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: abbreviate ? abbreviated_value : formatted_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -99,29 +99,38 @@ def variant_class
     private
 
       def whole_value
-        return amount if decimals == "matching"
-
-        value = amount.split(".").first.to_s
-        comma_separator ? number_with_delimiter(value) : value
+        value = amount.split(".").first
+        if comma_separator
+          number_with_delimiter(value.gsub(",", ""))
+        else
+          value # Keep original formatting if comma_separator is false
+        end
       end
 
-      def abbreviated_value(index = 0..-2)
-        value = amount.split(".").first.split(",").join("")
-        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
-        abbreviated_num[index]
+      def decimal_value
+        amount.split(".")[1] || "00"
       end
 
       def units_element
         return "" if decimals == "matching" && !abbreviate && !unit
 
-        _, decimal_part = amount.split(".")
-        if unit.nil? && abbreviate == false
-          decimal_part.nil? ? ".00" : ".#{decimal_part}"
+        if unit.nil? && !abbreviate
+          if decimals == "matching"
+            ""
+          else
+            ".#{decimal_value}"
+          end
         else
           abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.gsub(",", "").to_i
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
+        abbreviated_num[index]
+      end
+
       def size_value
         case size
         when "lg"
@@ -136,6 +145,20 @@ def size_value
       def dark_class
         dark ? "dark" : nil
       end
+
+      def formatted_amount
+        return abbreviated_value if abbreviate
+
+        if decimals == "matching"
+          if comma_separator
+            number_with_delimiter(amount.gsub(",", ""))
+          else
+            amount # Keep original formatting if comma_separator is false
+          end
+        else
+          whole_value
+        end
+      end
     end
   end
 end

playbook/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>

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 (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator

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",
 }) %>

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

@@ -7,7 +7,6 @@ const CurrencyMatchingDecimals = (props) => {
     <>
       <Currency
           amount="372.12"
-          decimals="matching"
           label="Small"
           marginBottom="md"
           size="sm"
@@ -16,7 +15,6 @@ const CurrencyMatchingDecimals = (props) => {
       />
       <Currency
           amount="30,327.43"
-          decimals="matching"
           label="Medium"
           marginBottom="md"
           size="md"
@@ -25,7 +23,6 @@ const CurrencyMatchingDecimals = (props) => {
       />
       <Currency
           amount="621,953.99"
-          decimals="matching"
           label="Large"
           size="lg"
           {...props}

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

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

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

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'