From 4e408e896af1bae3a2e648c644ca300ef07ec675 Mon Sep 17 00:00:00 2001
From: Jasper <jasperfurniss@gmail.com>
Date: Mon, 21 Oct 2024 11:01:10 -0400
Subject: [PATCH] Initial Commit

---
 .github/workflows/github-actions-check-labels.yml  |  0
 .../app/pb_kits/playbook/pb_currency/_currency.tsx | 14 ++++++++++++--
 .../app/pb_kits/playbook/pb_currency/currency.rb   |  6 +++++-
 .../pb_currency/docs/_currency_variants.jsx        |  9 +++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 .github/workflows/github-actions-check-labels.yml

diff --git a/.github/workflows/github-actions-check-labels.yml b/.github/workflows/github-actions-check-labels.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx b/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
index f0673c777b..110808c547 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/_currency.tsx
+++ b/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
 
diff --git a/playbook/app/pb_kits/playbook/pb_currency/currency.rb b/playbook/app/pb_kits/playbook/pb_currency/currency.rb
index 32959ba8e7..475dfcc248 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/currency.rb
+++ b/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)
diff --git a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx b/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
index 30b357f970..9d99289ae2 100644
--- a/playbook/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx
+++ b/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}
+      />
     </>
   )
 }