playbook_ui 14.9.0.pre.rc.13 → 14.9.0.pre.rc.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9a1afef0874b1b8e11f757bd69b5b3eb03a40de207d702658be6f27b8446905
-  data.tar.gz: da40d6dd98f5860f78d9184bfb8346d4988a751d0c3c7b483cc88afed226fd92
+  metadata.gz: bab858e0ef86e0536cb3f24891e4be7ca0dbcb4a07edd29232784114fdd8fb38
+  data.tar.gz: 5ab99e6d31b1124ecca558cc0908e3179c3cb83ddb4015acfed8f0815af462bd
 SHA512:
-  metadata.gz: 3db5cfd68277e4703cf0579481a76e20a67f1953e9a74aa6bc13acba3224c035fa910e44bae07ddb3278283d9c0c9f773af00f223c3e1dae16e6cd7c6c7f8268
-  data.tar.gz: 6396e1fa11a67ea33a27ec3aa866b9f2cf348da51ccffba14a3c554bd6a6c464578890b6af05d92bf26c772248a536a2c3c30c0a39d110f09b4fad09a4129c50
+  metadata.gz: 002d3f1e386098d7c1d8100cd751b4a63733bc4f17da06aefefce51b60ebbbf24f092ed9fe94ba91d80ef6521a24896c7ed70b82f8b9cbe9e44ddd935ecb3b4e
+  data.tar.gz: 75cf8ddd05525230a2f814419375d7929e0960f2a9d1568918751b3f5ecf348be1db3c542f438f818cf943c0c39ae9bde2ce7f14075df6b7268570c7722b809b

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

@@ -101,7 +101,11 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const swapNegative = size === "sm" && symbol !== ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
+  const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
+  const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
+  const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
   const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
   const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
@@ -118,7 +122,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           <>
-            <div>{symbol}</div>
+            <div>{handleNegative}{symbol}</div>
             <div>{getAmount}</div>
             <div>
               {getAbbreviation}
@@ -132,7 +136,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              {symbol}
+              {handleNegative}{symbol}
             </Body>
 
             <Title

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -3,12 +3,12 @@
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.symbol %></div>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
       <div><%= object.title_props[:text] %></div>
       <div><%= object.body_props[:text] %></div>
     <% else %>
       <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.symbol %>
+        <%= object.negative_sign %><%= object.symbol %>
       <% end %>
       <%= pb_rails("title", props: object.title_props) %>
       <%= pb_rails("body", props: object.body_props) %>

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

@@ -68,12 +68,20 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : formatted_amount,
+          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
           classname: "pb_currency_value",
           dark: dark,
         }
       end
 
+      def abbr_or_format_amount
+        abbreviate ? abbreviated_value : formatted_amount
+      end
+
+      def negative_sign
+        amount.starts_with?("-") && swap_negative ? "-" : ""
+      end
+
       def body_props
         {
           text: units_element,
@@ -159,6 +167,14 @@ module Playbook
           whole_value
         end
       end
+
+      def absolute_amount(amount_string)
+        amount_string.sub(/^-/, "")
+      end
+
+      def swap_negative
+        size == "sm" && symbol != ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -65,7 +65,7 @@ test('decimals default prop returns decimals as body text', () => {
 
 test('commaSeparator prop returns comma separated amount', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890"
         commaSeparator
         data={{ testid: 'comma-test' }}
@@ -76,7 +76,7 @@ test('commaSeparator prop returns comma separated amount', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals' }}
@@ -87,7 +87,7 @@ test('commaSeparator prop returns comma separated amount with decimals', () => {
 
 test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
   render(
-    <Currency 
+    <Currency
         amount="1234567890.12"
         commaSeparator
         data={{ testid: 'comma-test-decimals-matching' }}
@@ -96,3 +96,40 @@ test('commaSeparator prop returns comma separated amount with decimals="matching
   )
   expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
 })
+
+test('handles negative amounts correctly', () => {
+  render(
+    <>
+      <Currency
+          amount="-320"
+          data={{ testid: 'test-negative-default' }}
+      />
+      <Currency
+          abbreviate
+          amount="-3200000"
+          data={{ testid: 'test-negative-millions' }}
+      />
+      <Currency
+          amount="-123456.78"
+          commaSeparator
+          data={{ testid: 'test-negative-comma-decimals' }}
+      />
+      <Currency
+          amount="-400.50"
+          data={{ testid: 'test-negative-no-symbol' }}
+          symbol=""
+      />
+      <Currency
+          amount="-500.55"
+          data={{ testid: 'test-negative-medium-size' }}
+          size="md"
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-negative-default')).toHaveTextContent('-$320')
+  expect(screen.getByTestId('test-negative-millions')).toHaveTextContent('-$3.2M')
+  expect(screen.getByTestId('test-negative-comma-decimals')).toHaveTextContent('-$123,456.78')
+  expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
+  expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "sm",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyNegative = (props) => {
+  return (
+    <>
+      <Currency
+          amount="-2,000.50"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNegative

data/app/pb_kits/playbook/pb_currency/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
   
   react:
   - currency_variants: Variants
@@ -19,6 +20,7 @@ examples:
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
+  - currency_negative: Negative
 
   swift:
   - currency_size_swift: Size

data/app/pb_kits/playbook/pb_currency/docs/index.js

@@ -6,3 +6,4 @@ 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'
+export { default as CurrencyNegative } from './_currency_negative.jsx'