playbook_ui 15.3.0.pre.alpha.PLAY2630fctearlyautoClose12133 → 15.3.0.pre.alpha.PLAY258611978

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7192248df5f0637ad12e46b7b132649b32b33307a6ff4f8dccad0ca9f63f6a7a
-  data.tar.gz: 827cf7efed9c7bfd05213a2836fb6260a249a9044e93cd5a788fe9e519588400
+  metadata.gz: a1a62cafaa16e4da926d69ebca037e59cce874784adfe55e1650cd94f7152f08
+  data.tar.gz: c3689d869441ef31917edf4c5e124e0a0a1b42f66d9753fea748897b15a20d2e
 SHA512:
-  metadata.gz: d892a19d229008fd10343d7e37058830db0a06ed7082487781c4499b16906d631c77e451b18bd5d43ec5fd92b4dca7cf0bd7f4872ada3fe6c1155d918d6e428c
-  data.tar.gz: 1de75fec52872b94288ded06092f1fe94004e9de66ae74b82879524eb80d2e3256ac476e1120743c730770d5080130a7530ff25dab2ccb4e151a1de9adc5a344
+  metadata.gz: f1274d98903345d89ebb1ab7cf7aa5d07f138aa90fd36e6f5d6fdee3ce3ca242999a02b4f97bfc338408d1f33628c01c0d0277a266ce1abe50b8518c7d298eb7
+  data.tar.gz: be5e89b4822ed1af5030fa5abcc219e36c6cb97fd95b6b414ac91c2e4814686ad834e7b8dca0da3cdaaf0e7ba27abb27911b5247ce54381bf5385f199fb34c81

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,7 +66,6 @@ const TableCellRenderer = ({
         // Find the “owning” colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        const cellFontColor = colDef?.columnStyling?.fontColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     : `${column.getStart("left")}px`
                   : undefined,
                   backgroundColor: i === 0 && customRowStyle?.backgroundColor,
-                  color: cellFontColor || customRowStyle?.fontColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -740,69 +740,6 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
-test("columnStyling.fontColor sets cell font color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { fontColor: colors.category_1 },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.category_1 });
-});
-
-test("columnStyling.fontColor works with background color", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        cellBackgroundColor: (row) => row.newEnrollments > 20 ? "success_secondary" : "warning_secondary",
-        fontColor: colors.white 
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ color: colors.white });
-});
-
 test("renders virtualized table rows and header", () => {
   render(
     <AdvancedTable

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

@@ -26,10 +26,6 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      column_styling: { 
-        cell_background_color: "category_1",
-        font_color: "white"
-      }
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md

@@ -1 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,8 +1,7 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
-
 const AdvancedTableColumnStyling = (props) => {
   const columnDefinitions = [
     {
@@ -35,7 +34,6 @@ const AdvancedTableColumnStyling = (props) => {
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      columnStyling:{fontColor: colors.data_8},
     },
   ]
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md

@@ -4,6 +4,4 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 2) `cellAlignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `fontColor`: This will allow you to control the font color for a given column.
-
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

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

@@ -29,7 +29,6 @@
     {
       accessor: "graduatedStudents",
       label: "Graduated Students",
-      column_styling: { font_color: "red" }
     }
 ] %>
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md

@@ -4,6 +4,4 @@ The `column_styling` prop is an optional item that can be used within `column_de
 
 2) `cell_alignment`: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to `left`, `right` or `center`.
 
-3) `font_color`: This will allow you to control the font color for a given column.
-
 `column_styling` can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx

@@ -22,6 +22,7 @@ const AdvancedTablePaddingControl = (props) => {
          {value}
         </Background>
       ), 
+
     },
     {
       accessor: "scheduledMeetings",
@@ -38,15 +39,6 @@ const AdvancedTablePaddingControl = (props) => {
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      columnStyling:{cellPadding: "none", fontColor: "white"},
-      customRenderer: (row, value) => (
-        <Background 
-            backgroundColor={"category_1"}
-            padding="xs" 
-        >
-         {value}
-        </Background>
-      ), 
     },
     {
       accessor: "graduatedStudents",

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md

@@ -1,3 +1,3 @@
 `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.  
 
-This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. Use `fontColor` to achieve better contrast between cell content and background for darker backgrounds.
+This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx

@@ -76,22 +76,6 @@ const columnDefinitions = [
         {
           label: "Attendance",
           id: "attendance",
-          header: () => (
-            <Flex alignItems="center" 
-                justifyContent="center"
-            >
-              <Caption marginRight="xs">Attendance</Caption>
-              <Tooltip placement="top" 
-                  text="Whoa. I'm a Tooltip Too!" 
-                  zIndex={10}
-              >
-                <Icon cursor="pointer" 
-                    icon="info"
-                    size="xs" 
-                />
-              </Tooltip>
-            </Flex>
-          ),  
           columns: [
             {
               accessor: "attendanceRate",

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

@@ -12,7 +12,7 @@
         capture do
           pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
             pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
-            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs", cursor: "pointer" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
             pb_rails("tooltip", props: {
               trigger_element_id: "tooltip-interact",
               tooltip_id: "example-custom-tooltip",

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

@@ -11,7 +11,6 @@ examples:
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_with_custom_header_rails: Custom Header Cell
-  - advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders

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

@@ -82,62 +82,32 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering by accessor
+      # Get original column definition for custom rendering
       def find_original_column_def(accessor)
         find_column_def_by_accessor(column_definitions, accessor)
       end
 
-      # Get original column definition for custom rendering by id
-      def find_original_column_def_by_id(id)
-        find_column_def_by_id(column_definitions, id)
-      end
-
       # Check if a header cell has a custom renderer
       def has_header_renderer?(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        original_def&.dig(:header).present?
-      rescue
-        false
+        return false unless cell[:accessor].present?
+
+        original_def = find_original_column_def(cell[:accessor])
+        original_def && original_def[:header].present?
       end
 
       # Render custom header content
       def render_header(cell)
         return cell[:label] unless has_header_renderer?(cell)
 
-        original_def = find_original_column_def_for_cell(cell)
-        return cell[:label] unless original_def
-
+        original_def = find_original_column_def(cell[:accessor])
         custom_renderer = original_def[:header]
-        return cell[:label] unless custom_renderer
 
         # Call the custom renderer with the cell data and label
-        begin
-          result = custom_renderer.call(cell, cell[:label])
-          result.present? ? result.to_s : cell[:label]
-        rescue
-          cell[:label]
-        end
+        custom_renderer.call(cell, cell[:label])
       end
 
     private
 
-      # Find the original column definition for a cell
-      def find_original_column_def_for_cell(cell)
-        # Try accessor first (for leaf columns)
-        if cell[:accessor].present?
-          found = find_original_column_def(cell[:accessor])
-          return found if found
-        end
-
-        # Try id if accessor lookup didn't find it (for grouped columns or leaf columns with id)
-        if cell[:id].present?
-          found = find_original_column_def_by_id(cell[:id])
-          return found if found
-        end
-
-        nil
-      end
-
       def compute_max_depth(columns)
         columns.map do |col|
           col[:columns] ? 1 + compute_max_depth(col[:columns]) : 1
@@ -148,24 +118,21 @@ module Playbook
         total_columns = columns.size
         columns.each_with_index do |col, index|
           is_last = index == total_columns - 1
-          nested_columns = col[:columns]
-          if nested_columns
-            colspan = compute_leaf_columns(nested_columns)
-            cell_hash = {
+          if col[:columns]
+            colspan = compute_leaf_columns(col[:columns])
+            rows[current_depth] << {
               label: col[:label],
               colspan: colspan,
               is_last_in_group: is_last && current_depth.positive?,
             }
-            cell_hash[:id] = col[:id] if col[:id].present?
-            rows[current_depth] << cell_hash
 
-            process_columns(nested_columns, rows, current_depth + 1, max_depth)
+            process_columns(col[:columns], rows, current_depth + 1, max_depth)
           else
-            raw_styling = col[:column_styling] || {}
-            header_alignment = raw_styling[:header_alignment]
+            raw_styling       = col[:column_styling] || {}
+            header_alignment  = raw_styling[:header_alignment]
 
             colspan = 1
-            cell_hash = {
+            rows[current_depth] << {
               label: col[:label],
               colspan: colspan,
               accessor: col[:accessor],
@@ -173,8 +140,6 @@ module Playbook
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
             }
-            cell_hash[:id] = col[:id] if col[:id].present?
-            rows[current_depth] << cell_hash
           end
         end
       end
@@ -189,15 +154,11 @@ module Playbook
         max_depth = compute_max_depth(column_definitions)
 
         column_definitions.map do |col|
-          if col[:columns]
-            nested_columns = col[:columns]
-            wrapped = {
+          if col.key?(:columns)
+            {
               label: col[:label],
-              columns: wrap_leaf_columns(nested_columns),
+              columns: wrap_leaf_columns(col[:columns]),
             }
-            wrapped[:id] = col[:id] if col[:id].present?
-            wrapped[:header] = col[:header] if col[:header].present?
-            wrapped
           else
             # For leaf columns, wrap with empty labels up to max depth to get proper structure
             wrap_leaf_column(col, max_depth)
@@ -212,7 +173,6 @@ module Playbook
           sort_menu: col[:sort_menu] || nil,
           column_styling: col[:column_styling] || {},
         }
-        wrapped[:id] = col[:id] if col[:id].present?
         (max_depth - 1).times do
           wrapped = { label: "", columns: [wrapped] }
         end
@@ -220,41 +180,11 @@ module Playbook
       end
 
       def find_column_def_by_accessor(defs, target_accessor)
-        return nil if target_accessor.blank?
-
         defs.each do |col|
-          col_accessor = col[:accessor]
-          next if col_accessor.blank?
-
-          return col if col_accessor.to_s == target_accessor.to_s
-
-          nested_columns = col[:columns]
-          if nested_columns.is_a?(Array)
-            found = find_column_def_by_accessor(nested_columns, target_accessor)
-            return found if found
-          end
-        end
-        nil
-      end
-
-      def find_column_def_by_id(defs, target_id)
-        return nil if target_id.blank?
-
-        defs.each do |col|
-          col_id = col[:id]
-
-          return col if col_id.present? && col_id.to_s == target_id.to_s
-
-          # Recursively search nested columns, even if current col has no id or doesn't match
-          nested_columns = col[:columns]
-
-          next unless nested_columns.present?
-
-          # Convert to array if needed (for edge cases where is_a?(Array) might fail)
-          array_columns = Array(nested_columns)
+          return col if col[:accessor] == target_accessor
 
-          if array_columns.any?
-            found = find_column_def_by_id(array_columns, target_id)
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
             return found if found
           end
         end

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

@@ -79,44 +79,15 @@ module Playbook
         cell_background_color(column).present?
       end
 
-      def cell_font_color(column)
-        return nil unless column[:accessor].present?
-
-        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
-        if orig_def && orig_def[:column_styling].is_a?(Hash) && orig_def[:column_styling][:font_color].present?
-          font_color = orig_def[:column_styling][:font_color]
-          if font_color.respond_to?(:call)
-            font_color.call(row)
-          else
-            font_color
-          end
-        end
-      end
-
       # Uses a regular table/table_cell component if there is no custom background color; if there is a cell_background_color uses a background component with tag "td"
       def cell_component_info(column, index, bg_color, font_color)
-        column_font_color = cell_font_color(column)
-        effective_font_color = column_font_color || font_color
-
         if has_custom_background_color?(column)
           custom_bg_color = cell_background_color(column)
           component_name = "background"
-          component_props = {
-            background_color: custom_bg_color,
-            tag: "td",
-            classname: td_classname(column, index),
-          }
-          component_props[:html_options] = { style: { color: effective_font_color } } if effective_font_color.present?
+          component_props = { background_color: custom_bg_color, tag: "td", classname: td_classname(column, index) }
         else
           component_name = "table/table_cell"
-          style_hash = { "background-color": bg_color }
-          style_hash[:color] = effective_font_color if effective_font_color.present?
-          component_props = {
-            html_options: {
-              style: style_hash,
-            },
-            classname: td_classname(column, index),
-          }
+          component_props = { html_options: { style: { "background-color": bg_color, color: font_color } }, classname: td_classname(column, index) }
         end
 
         { name: component_name, props: component_props }

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,11 +1,3 @@
-<% 
-  html_options_style = ""
-  if object.html_options[:style].is_a?(Hash)
-    html_options_style = object.html_options[:style].map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
-  elsif object.html_options[:style].is_a?(String)
-    html_options_style = object.html_options[:style]
-  end
-%>
 <% if object.image_url.present? %>
   <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
@@ -17,8 +9,8 @@
   <% end %>
 <% else %>
   <%= pb_content_tag(object.tag,
-      style: "#{object.custom_background_color}#{html_options_style.present? ? "; #{html_options_style}" : ""}"
+      style: object.custom_background_color
   ) do %>
     <%= content.presence %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -20,12 +20,11 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((event: any) => void) | any},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
-  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -40,7 +39,6 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
-    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -63,7 +61,6 @@ const Badge = (props: BadgeProps): React.ReactElement => {
         {...htmlProps}
         className={css}
         id={id}
-        tabIndex={tabIndex}
     >
       <span>
         {text}

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -112,16 +112,3 @@ test('displays notification variants', () => {
     cleanup()
   })
 })
-
-test('should allow tabIndex to be set', () => {
-  render(
-    <Badge
-        data={{ testid: testId }}
-        tabIndex={0}
-        text="+1"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveAttribute('tabIndex', '0')
-})

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

@@ -11,7 +11,7 @@ import Title from '../pb_title/_title'
 type CurrencyProps = {
   abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
-  amount: string | number,
+  amount: string,
   aria?: {[key:string]:string},
   className?: string,
   dark?: boolean,
@@ -59,19 +59,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     commaSeparator = false,
   } = props
 
-  // Convert numeric input to string format
-  const convertAmount = (input: string | number): string => {
-    if (typeof input === 'number') {
-      if (input === 0 && !nullDisplay) {
-        return ""
-      }
-      return input.toFixed(2)
-    }
-    return input
-  }
-
-  const currencyAmount = convertAmount(amount)
-
   const emphasizedClass = emphasized ? '' : '_deemphasized'
 
   let variantClass
@@ -81,7 +68,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     variantClass = '_bold'
   }
 
-  const [whole, decimal = '00'] = currencyAmount.split('.')
+  const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -105,19 +92,19 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
 
-  const getMatchingDecimalAmount = decimals === "matching" ? currencyAmount : whole
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
   const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
 
   const formatAmount = (amount: string) => {
     if (!commaSeparator) return amount;
-
+    
     const [wholePart, decimalPart] = amount.split('.');
     const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
     return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
   }
 
   const swapNegative = size === "sm" && symbol !== ""
-  const handleNegative = currencyAmount.startsWith("-") && swapNegative ? "-" : ""
+  const handleNegative = amount.startsWith("-") && swapNegative ? "-" : ""
   const getAbsoluteAmount = (amountString: string) => amountString.replace(/^-/,'')
   const getAbbrOrFormatAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
   const getAmount = swapNegative ? getAbsoluteAmount(getAbbrOrFormatAmount) : getAbbrOrFormatAmount
@@ -165,7 +152,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {handleNegative}{symbol}
               </Body>
-
+      
               <Title
                   className="pb_currency_value"
                   dark={dark}
@@ -173,7 +160,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
               >
                 {getAmount}
               </Title>
-
+      
               <Body
                   className="unit"
                   color="light"