playbook_ui 14.9.0.pre.rc.13 → 14.9.0.pre.rc.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9a1afef0874b1b8e11f757bd69b5b3eb03a40de207d702658be6f27b8446905
-  data.tar.gz: da40d6dd98f5860f78d9184bfb8346d4988a751d0c3c7b483cc88afed226fd92
+  metadata.gz: 8ee54941bb50fe5db82758b22e7c4eca40d0f496811f037b6cf1890713aff74d
+  data.tar.gz: 2eaa719d2791eb9b7e5aa56c9fe425a4e42bb5e2709b9748236e183a4958ccdb
 SHA512:
-  metadata.gz: 3db5cfd68277e4703cf0579481a76e20a67f1953e9a74aa6bc13acba3224c035fa910e44bae07ddb3278283d9c0c9f773af00f223c3e1dae16e6cd7c6c7f8268
-  data.tar.gz: 6396e1fa11a67ea33a27ec3aa866b9f2cf348da51ccffba14a3c554bd6a6c464578890b6af05d92bf26c772248a536a2c3c30c0a39d110f09b4fad09a4129c50
+  metadata.gz: b96f4fb4f7349860713cef69e2d0ceba3212af67c7e766399242e4fdb8510ad00cca37effefe0f41c841b7ab904074a85f6cb8cfb47bd32e28157f3e37931d08
+  data.tar.gz: 77fd05368a6f7f3367ad5456a0bba5bec35a3ba6d38f9e1cdec54b14ebb60fb9c0295cd9771eebef303f668a89831f4487aafca7b7486fa7895d99f5ddfede82

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'