playbook_ui 14.9.0.pre.alpha.play1742globalheightfixes4766 → 14.9.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b11194d151b3e24db52c214a1e3dcad53c2a70fa66202a339f52208baea87636
-  data.tar.gz: bc9bcfd9149d3501e2ad32a85e5f20c49d0b9a24366a3432cbd1af254a32a8f4
+  metadata.gz: 47520ce9398f8aa52de58407b61451e364bb6ea6c79ef2f69b0489568423ba48
+  data.tar.gz: eef14ed7518ad125404d5e12def9432bf114f68d6aebf28441b3bb0be0289e9b
 SHA512:
-  metadata.gz: 05141da61222882833c06a7e264cab818552acf7ee1624a77196a3103c8942ae867d353d012680db35d702676c933cb125f91e51c7db966fec51b96d8b84a723
-  data.tar.gz: be4d849aaac1e5ae95a43d1714b7cde01235d586f9eaf871e55d399fda9291bc26b45c4a590460147364001d872e0835dc9e3518e1a18ace66bbd97d9e0cd242
+  metadata.gz: 3152f44d47e293ce8b18149179592c917a13d4053512cc035155444b7a4f3d9548393cdda692bd79578a4bf41a8d54361d287e36a0e05a4e960025ab00cb7875
+  data.tar.gz: bb56a8669a4faa58aa4749294711c92b28facf23439af23f628d13720d01484f2e7fc9bcf399d266b9a7d50377b04f87cd0b9be026bd0b9de7928d76d3c8bbc1

data/app/pb_kits/playbook/_playbook.scss

@@ -111,7 +111,6 @@
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';
-@import 'utilities/width';
 @import 'utilities/min_width';
 @import 'utilities/max_width';
 @import 'utilities/positioning';
@@ -127,4 +126,3 @@
 @import 'utilities/overflow';
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
-@import 'utilities/height';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -7,7 +7,6 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   Row,
   useReactTable,
@@ -26,7 +25,6 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
 import { TableBody } from "./SubKits/TableBody"
-import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -44,8 +42,6 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
-  pagination?: boolean,
-  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
@@ -71,8 +67,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    pagination = false,
-    paginationProps,
     responsive = "scroll",
     sortControl,
     tableData,
@@ -183,17 +177,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }
 
-  const paginationInitializer = pagination ? {
-    getPaginationRowModel: getPaginationRowModel(),
-    paginateExpandedRows: false,
-    initialState: {
-        pagination: {
-            pageIndex: paginationProps?.pageIndex ?? 0,
-            pageSize: paginationProps?.pageSize ??  20,
-        },
-    },
-} : {}
-
 //initialize table
   const table = useReactTable({
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
@@ -206,7 +189,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     enableSortingRemoval: false,
     sortDescFirst: true,
     ...expandAndSortState(),
-    ... paginationInitializer,
     ...tableOptions,
   })
 
@@ -245,10 +227,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className
   )
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -272,45 +250,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             toggleExpansionIcon,
           }}
       >
-        <>
-          {pagination &&
-              <Pagination
-                  current={table.getState().pagination.pageIndex + 1}
-                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
-                  marginBottom="xs"
-                  onChange={onPageChange}
-                  range={paginationProps?.range ? paginationProps?.range : 5}
-                  total={table.getPageCount()}
-                  />
-          }
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
-                onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
-            />
-          }
-        </>
+        <Table
+            className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
+            dataTable
+            numberSpacing="tabular"
+            responsive="none"
+            {...tableProps}
+        >
+          {children ? (
+            children
+          ) : (
+            <>
+              <TableHeader />
+              <TableBody />
+            </>
+          )}
+        </Table>
       </AdvancedTableContext.Provider>
     </div>
   )

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions }) %>
+<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -55,5 +55,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -3,7 +3,6 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
-  - advanced_table_custom_cell_rails: Custom Components for Cells
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -18,5 +17,3 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_pagination: Pagination
-  - advanced_table_pagination_with_props: Pagination Props

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

@@ -10,5 +10,3 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
-export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
-export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -11,9 +11,7 @@
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
+                                <% if index.zero? %>
                                     <% if object.depth.zero? %>
                                         <%= object.row[column[:accessor].to_sym] %>
                                     <% else %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -26,21 +26,6 @@ module Playbook
 
     private
 
-      def custom_renderer_value(column, index)
-        if index.zero?
-          if depth.zero?
-            row[column[:accessor].to_sym]
-          else
-            depth_accessors.each_with_index do |item, accessor_index|
-              key = item.to_sym
-              return row[key] if depth - 1 == accessor_index
-            end
-          end
-        else
-          row[column[:accessor].to_sym]
-        end
-      end
-
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
@@ -145,12 +145,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     } : {})
   };
 
-  const dynamicInlineProps = globalInlineProps(props);
-  const combinedStyles = {
-    ...backgroundStyle,
-    ...dynamicInlineProps
-  };
-
   const Tag: React.ReactElement | any = `${tag}`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -164,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
-        style={combinedStyles}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -77,12 +77,6 @@ $pb_button_sizes: (
   &[class*=_loading]  {
     @include pb_button_loading(true);
   }
-
-  // Danger ===================
-  &[class*=_danger] {
-    @include pb_button_danger;
-  }
-
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -37,7 +37,7 @@ type ButtonPropTypes = {
   type?: 'inline' | null,
   htmlType?: 'submit' | 'reset' | 'button' | undefined,
   value?: string | null,
-  variant?: 'primary' | 'secondary' | 'link'| 'danger' | 'reaction',
+  variant?: 'primary' | 'secondary' | 'link'| 'reaction',
   wrapperClass?: string,
 } & GlobalProps
 
@@ -206,6 +206,8 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
               <Icon icon={icon ? icon : "face-smile-plus"} />
             )
           }
+
+        
         </button>
       );
     } else {

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -167,21 +167,6 @@ $pb_button_border_width: 0px;
   }
 }
 
-// Danger ======================
-@mixin pb_button_danger {
-  @include pb_button_variant($error, $text_dk_default, transparent);
-
-  @media (hover:hover) {
-    &:hover {
-      @include pb_button_hover($bg: darken($error, $pb_button_hover_darken));
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($error);
-    }
-  }
-}
-
 // Dark Primary =================
 @mixin pb_button_primary_dark{
   @include pb_button_variant($primary_action);

data/app/pb_kits/playbook/pb_button/button.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[primary secondary link danger reaction],
+                     values: %w[primary secondary link reaction],
                      default: "primary"
       prop :count, type: Playbook::Props::Number
       prop :highlight, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -2,5 +2,4 @@
 <%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
 <%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button Danger", variant: "danger", margin_right: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -34,14 +34,6 @@ const ButtonDefault = (props) => (
         text='Button Disabled'
         {...props}
     />
-    <Button
-        marginRight='lg'
-        onClick={() => alert("button clicked!")}
-        tabIndex={0}
-        text='Button Danger'
-        variant='danger'
-        {...props}
-    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.md

@@ -1 +1 @@
-The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button. Danger buttons are used to indicate destructive actions such as deleting.
+The primary button is used for the most important button on the page. Secondary buttons can be used for actions that are less important. Button links can be helpful for buttons that do not need a lot of attention drawn to them. Disabled buttons are used when you don't want the user to click the button.

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -6,12 +6,12 @@
                 ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
+    <span class="pb_checkbox_indeterminate">
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
     </span>
   <% else %>
-    <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
+    <span class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
       <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,6 +18,10 @@ module Playbook
       prop :form_spacing, type: Playbook::Props::Boolean,
                           default: false
 
+      def checked_html
+        checked ? "checked='true'" : nil
+      end
+
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,84 +1,7 @@
-<% checkboxes = [
-  { name: 'Coffee', id: 'coffee', checked: false },
-  { name: 'Ice Cream', id: 'ice-cream', checked: false },
-  { name: 'Chocolate', id: 'chocolate', checked: true }
-] %>
-
-<%= pb_rails("table", props: { container: false, size: "md" }) do %>
-  <thead>
-    <tr>
-      <th>
-        <%= pb_rails("checkbox", props: {
-          checked: true,
-          text: "Uncheck All",
-          value: "checkbox-value",
-          name: "main-checkbox",
-          indeterminate: true,
-          id: "indeterminate-checkbox"
-        }) %>
-      </th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% checkboxes.each do |checkbox| %>
-      <tr>
-        <td>
-          <%= pb_rails("checkbox", props: {
-            checked: checkbox[:checked],
-            text: checkbox[:name],
-            value: checkbox[:id],
-            name: "#{checkbox[:id]}-indeterminate-checkbox",
-            id: "#{checkbox[:id]}-indeterminate-checkbox",
-          }) %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-<% end %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
-    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
-    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
-
-    const updateMainCheckbox = () => {
-      // Count the number of checked child checkboxes
-      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
-      // Determine if the main checkbox should be in an indeterminate state
-      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
-      
-      // Set the main checkbox states
-      mainCheckbox.indeterminate = indeterminate;
-      mainCheckbox.checked = checkedCount > 0;
-
-      // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
-
-      // Determine the icon class to add and remove based on the number of checked checkboxes
-      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
-      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
-
-      // Update main checkbox label
-      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
-      
-      // Add and remove the icon class to the main checkbox wrapper
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
-      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
-      
-      // Toggle the visibility of the checkbox icon based on the indeterminate state
-      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
-      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
-    };
-
-    mainCheckbox.addEventListener('change', function() {
-      childCheckboxes.forEach(cb => cb.checked = this.checked);
-      updateMainCheckbox();
-    });
-
-    childCheckboxes.forEach(cb => {
-      cb.addEventListener('change', updateMainCheckbox);
-    });
-  });
-</script>
+<%= pb_rails("checkbox" , props: {
+  text: "Select ",
+  value: "checkbox-value",
+  name: "main",
+  indeterminate: true,
+  id: "test-indeterminate-js"
+}) %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -75,7 +75,6 @@ const Collapsible = ({
     globalProps(props),
     className
   )
-  const dynamicInlineProps = globalInlineProps(props)
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
       <div
@@ -84,7 +83,6 @@ const Collapsible = ({
           {...htmlProps}
           className={classes}
           id={id}
-          style={dynamicInlineProps}
       >
         {Main ? (
           <CollapsibleMain {...mainProps}>

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

@@ -101,11 +101,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
-  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 getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
   const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
 
@@ -122,7 +118,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           <>
-            <div>{handleNegative}{symbol}</div>
+            <div>{symbol}</div>
             <div>{getAmount}</div>
             <div>
               {getAbbreviation}
@@ -136,7 +132,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
                 color="light"
                 dark={dark}
             >
-              {handleNegative}{symbol}
+              {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.negative_sign %><%= object.symbol %></div>
+      <div><%= 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.negative_sign %><%= object.symbol %>
+        <%= 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,20 +68,12 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: abbreviate ? abbreviated_value : formatted_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,
@@ -167,14 +159,6 @@ 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,40 +96,3 @@ 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')
-})