playbook_ui 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 812d2e45c7e96028eaeffc295b95e211ef31593f7d071f1c41cfd152c0a5a49a
-  data.tar.gz: 2e90a81e4ad4e4c638f684cd055b28731e24553b657d2d972a6d5e0b9decd809
+  metadata.gz: fcd203ca2c6c310aa95e818199272a8730eba2c3cdc237405bf8b4426678be78
+  data.tar.gz: fb7eae7c6e74ceec237f663fd4c3f7706effff2009b79edbc9d6372319aa2b64
 SHA512:
-  metadata.gz: f1cee9f26756ed55d5dbdfaa1cad5d10253793a245304f97b63f19ac974555a6c453f877f2e2d57709c8804451ea42590f96b19dafa8f5e64341862871e412f7
-  data.tar.gz: 4b9e7036a3f96f5886a0649e2acfb5c4c0788b05f3a621980de41a643e4215f3643c46a92e6e5b3b1118f7746457c5aa6db605f33a07685b7ad79bc266174453
+  metadata.gz: 9bda1d76401b97c07eeeccb14e887f02b08a8e69ab256021756e7b4ad6488797d8a3523eaad710782b1c29b8727a5017f1926cbdd7b800a791dca57ba9273ea7
+  data.tar.gz: 12dfb9cd054c39b94936fdd71de6d2a92e9c920121fbf4f8a9bdc39d871ef19e7608063ac306c67577776c3edaab974d78c66ace6af6076b577f6bec97d531ac

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -97,7 +98,6 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_time_picker/time_picker';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_timeline/timeline';

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

@@ -63,11 +63,10 @@ const TableCellRenderer = ({
 
         const { column } = cell;
 
-        // Find the "owning" colDefinition by accessor. Needed for multi column logic
+        // 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 cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 
@@ -89,7 +88,7 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
-                  backgroundColor: cellBackgroundColor || (i === 0 && customRowStyle?.backgroundColor),
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
                   color: cellFontColor || customRowStyle?.fontColor,
             }}
           >

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

@@ -90,8 +90,6 @@ export const TableHeaderCell = ({
    : undefined
 
  const headerAlignment =   colDef?.columnStyling?.headerAlignment ?? colDef?.columnStyling?.headerAligment
- const headerBackgroundColor = colDef?.columnStyling?.headerBackgroundColor
- const headerFontColor = colDef?.columnStyling?.headerFontColor
 
   const isLeafColumn =
   header?.column.getLeafColumns().length === 1 &&
@@ -196,8 +194,6 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
-          backgroundColor: headerBackgroundColor,
-          color: headerFontColor,
           left: isPinnedLeft
             ? header?.index === 1 //Accounting for set min-width for first column
               ? '180px'

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

@@ -888,98 +888,3 @@ test("Sort icon renders with enableSort on individual columns", () => {
   expect(sortButton).toBeInTheDocument();
 });
 
-test("columnStyling.backgroundColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        cellBackgroundColor: colors.error_subtle,
-      },
-    },
-    {
-      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({ backgroundColor: colors.error_subtle });
-});
-
-test("columnStyling.headerBackgroundColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        headerBackgroundColor: colors.error_subtle,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
-  expect(firstEnrollmentHeader).toHaveStyle({ backgroundColor: colors.error_subtle });
-});
-
-test("columnStyling.headerFontColor works as excpected", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling: { 
-        headerFontColor: colors.white,
-      },
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
-  expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});

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

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
-      column_styling: { 
-        cell_background_color: "info_subtle",
-      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
-      column_styling: { 
-        cell_background_color: "info",
-        header_background_color: "info",
-        header_font_color: "white",
-        font_color: "white"
-      }
     },
     {
       accessor: "completedClasses",
@@ -36,6 +26,10 @@
     {
       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,7 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
-
-1)  `cell_background_color`:  use this to control the background color of all cells in the given column
-2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
-3) `header_background_color`: use this to control the background color of the column header
-4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
+`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.

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

@@ -26,8 +26,7 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
-export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

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

@@ -5,8 +5,8 @@
         <%= object.render_select_all_header %>
       <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
-        <% header_component = object.header_component_info(cell, cell_index, row_index) %>
-        <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
+        <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
+        <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>

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

@@ -119,59 +119,6 @@ module Playbook
         end
       end
 
-      # Get header background color from column styling
-      def header_background_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_background_color)
-      end
-
-      # Get header font color from column styling
-      def header_font_color(cell)
-        original_def = find_original_column_def_for_cell(cell)
-        return nil unless original_def
-
-        original_def.dig(:column_styling, :header_font_color)
-      end
-
-      # Check if header has custom background color
-      def has_custom_header_background_color?(cell)
-        cell[:header_background_color].present?
-      end
-
-      # Returns component info for header cell (uses background kit if custom bg color)
-      def header_component_info(cell, cell_index, row_index)
-        header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}"
-        classname = [th_classname(is_first_column: cell_index.zero?), ("last-header-cell" if cell[:is_last_in_group] && cell_index != 0)].compact.join(" ")
-
-        if has_custom_header_background_color?(cell)
-          component_name = "background"
-          component_props = {
-            background_color: cell[:header_background_color],
-            tag: "th",
-            classname: classname,
-          }
-          component_props[:html_options] = {
-            id: header_id,
-            colspan: cell[:colspan],
-            style: { color: cell[:header_font_color] },
-          }
-          component_props[:html_options][:style].delete(:color) unless cell[:header_font_color].present?
-        else
-          component_name = "table/table_header"
-          component_props = {
-            id: header_id,
-            colspan: cell[:colspan],
-            classname: classname,
-            sort_menu: cell[:accessor] ? cell[:sort_menu] : nil,
-          }
-          component_props[:html_options] = { style: { color: cell[:header_font_color] } } if cell[:header_font_color].present?
-        end
-
-        { name: component_name, props: component_props }
-      end
-
     private
 
       # Find the original column definition for a cell
@@ -216,8 +163,6 @@ module Playbook
           else
             raw_styling = col[:column_styling] || {}
             header_alignment = raw_styling[:header_alignment]
-            header_background_color = raw_styling[:header_background_color]
-            header_font_color = raw_styling[:header_font_color]
 
             colspan = 1
             cell_hash = {
@@ -227,8 +172,6 @@ module Playbook
               sort_menu: col[:sort_menu],
               is_last_in_group: is_last && current_depth.positive?,
               header_alignment: header_alignment,
-              header_background_color: header_background_color,
-              header_font_color: header_font_color,
             }
             cell_hash[:id] = col[:id] if col[:id].present?
             rows[current_depth] << cell_hash

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -173,11 +172,6 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
-    useEffect(() => {
-    // Warn about deprecated kit
-    deprecatedKitWarning('BarGraph', 'Please use "PbBarGraph" instead.');
-  }, []);
-  
   return (
     <HighchartsReact
         containerProps={{

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
-import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import Highcharts from "highcharts";
 
@@ -185,11 +184,6 @@ const CircleChart = ({
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
-    useEffect(() => {
-      // Warn about deprecated kit
-      deprecatedKitWarning('CircleChart', 'Please use "PbCircleChart" instead.');
-    }, []);
-    
 
   return (
     <>

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -61,9 +61,7 @@ type ContactProps = {
   data?: { [key: string]: string }
   dark?: boolean
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  iconEnabled?: boolean
   id?: string
-  unstyled?: boolean
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -76,9 +74,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
     data = {},
     dark = false,
     htmlOptions = {},
-    iconEnabled = true,
     id,
-    unstyled = false,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -89,51 +85,6 @@ const Contact = (props: ContactProps): React.ReactElement => {
     className
   )
 
-  const formattedValue = formatContact(contactValue, contactType)
-  const content = (
-    <>
-      {iconEnabled && (contactType === 'email' ? (
-        <Icon 
-            className="svg-inline--fa envelope"
-            customIcon={envelopeIcon} 
-            dark={dark} 
-            fixedWidth 
-        />
-      ) : (
-        <Icon
-            dark={dark}
-            fixedWidth
-            icon={contactTypeMap[contactType] || 'phone'}
-        />
-      ))}
-      {iconEnabled ? ` ${formattedValue} ` : formattedValue}
-      {contactDetail && (
-        <Caption
-            dark={dark}
-            size="xs"
-            tag="span"
-            text={contactDetail}
-        />
-      )}
-    </>
-  )
-
-  // When unstyled, render just the content without Body wrapper
-  if (unstyled) {
-    return (
-      <span
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-      >
-        {content}
-      </span>
-    )
-  }
-
-  // Default styled mode with Body wrapper
   return (
     <div
         {...ariaProps}
@@ -144,11 +95,33 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color="light" 
+          color={"light"} 
           dark={dark}
           tag="span"
       >
-        {content}
+          {contactType === 'email' ? (
+            <Icon 
+                className="svg-inline--fa envelope"
+                customIcon={envelopeIcon} 
+                dark={dark} 
+                fixedWidth 
+            />
+          ) : (
+            <Icon
+                dark={dark}
+                fixedWidth
+                icon={contactTypeMap[contactType] || 'phone'}
+            />
+          )}
+        {` ${formatContact(contactValue, contactType)} `}
+        {contactDetail && (
+          <Caption
+              dark={dark}
+              size="xs"
+              tag="span"
+              text={contactDetail}
+          />
+        )}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,23 +1,24 @@
-<% if object.unstyled %>
-  <%= content_tag :span, class: object.classname, id: object.id, data: object.data, aria: object.aria, **object.html_options do %>
-    <% if icon_enabled %>
-      <% if contact_type == "email" %>
-        <%= pb_rails("icon", props: { 
-              custom_icon: Playbook::Engine::root.join(envelope_path),
-              fixed_width: true,
-              dark: object.dark
-        }) %>
-      <% else %>
-        <%= pb_rails("icon", props: { 
-              icon: object.contact_icon, 
-              fixed_width: true,
-              dark: object.dark
-        }) %>
-      <% end %>
-      <%= " #{object.formatted_contact_value}" if object.contact_value %>
+<%= pb_content_tag do %>
+  <%= pb_rails("body", props: { 
+        tag: "span", 
+        classname: "pb_contact_kit", 
+        color: "light",
+        dark: object.dark
+  }) do %>
+    <% if contact_type == "email" %>
+      <%= pb_rails("icon", props: { 
+            custom_icon: Playbook::Engine::root.join(envelope_path),
+            fixed_width: true,
+            dark: object.dark
+      }) %>
     <% else %>
-      <%= object.formatted_contact_value if object.contact_value %>
+      <%= pb_rails("icon", props: { 
+            icon: object.contact_icon, 
+            fixed_width: true,
+            dark: object.dark
+      }) %>
     <% end %>
+    <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
@@ -26,39 +27,4 @@
           dark: object.dark
         }) if object.contact_detail %>
   <% end %>
-<% else %>
-  <%= pb_content_tag do %>
-    <%= pb_rails("body", props: { 
-          tag: "span", 
-          classname: "pb_contact_kit", 
-          color: "light",
-          dark: object.dark
-    }) do %>
-      <% if icon_enabled %>
-        <% if contact_type == "email" %>
-          <%= pb_rails("icon", props: { 
-                custom_icon: Playbook::Engine::root.join(envelope_path),
-                fixed_width: true,
-                dark: object.dark
-          }) %>
-        <% else %>
-          <%= pb_rails("icon", props: { 
-                icon: object.contact_icon, 
-                fixed_width: true,
-                dark: object.dark
-          }) %>
-        <% end %>
-        <%= " #{object.formatted_contact_value}" if object.contact_value %>
-      <% else %>
-        <%= object.formatted_contact_value if object.contact_value %>
-      <% end %>
-
-      <%= pb_rails("caption", props: { 
-            text: object.contact_detail, 
-            tag: 'span', 
-            size: 'xs',
-            dark: object.dark
-          }) if object.contact_detail %>
-    <% end %>
-  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -8,8 +8,6 @@ module Playbook
       prop :contact_type
       prop :contact_value
       prop :contact_detail
-      prop :icon_enabled, type: Playbook::Props::Boolean, default: true
-      prop :unstyled, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_contact_kit")
@@ -46,15 +44,7 @@ module Playbook
         elsif contact_type == "international"
           contact_value
         else
-          # Check if number has leading 1 (US country code)
-          # Format like "+1 (212) 555-1234"
-          intl_code = ""
-          cleaned_number = formatted_value
-          if cleaned_number.length == 11 && cleaned_number.start_with?("1")
-            intl_code = "+1 "
-            cleaned_number = cleaned_number.sub(/^1/, "")
-          end
-          "#{intl_code}#{number_to_phone(cleaned_number, area_code: true)}"
+          number_to_phone(formatted_value, area_code: true)
         end
       end
 

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -149,79 +149,3 @@ test('international contact type preserves original format', () => {
   const kit = screen.getByTestId('test-international-format')
   expect(kit).toHaveTextContent('+44 20 7946 0958')
 })
-
-test('iconEnabled prop hides icon when false', () => {
-  render(
-    <>
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-with-icon' }}
-          iconEnabled
-      />
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-without-icon' }}
-          iconEnabled={false}
-      />
-    </>
-  )
-
-  // With icon enabled, should have icon
-  expect(screen.getByTestId('test-with-icon').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  
-  // Without icon, should not have icon
-  expect(screen.getByTestId('test-without-icon').querySelector('.pb_custom_icon')).not.toBeInTheDocument()
-  
-  // But should still have the formatted phone number
-  expect(screen.getByTestId('test-without-icon')).toHaveTextContent('(212) 555-1234')
-})
-
-test('unstyled prop renders without Body wrapper', () => {
-  render(
-    <>
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-styled' }}
-      />
-      <Contact
-          contactType="home"
-          contactValue="2125551234"
-          data={{ testid: 'test-unstyled' }}
-          unstyled
-      />
-    </>
-  )
-
-  // Styled version should have Body wrapper with pb_contact_kit class
-  const styled = screen.getByTestId('test-styled')
-  const styledBody = styled.querySelector('span.pb_contact_kit')
-  expect(styledBody).toBeInTheDocument()
-  expect(styledBody).toHaveTextContent('(212) 555-1234')
-
-  // Unstyled version should be a span without Body wrapper
-  const unstyled = screen.getByTestId('test-unstyled')
-  expect(unstyled.tagName).toBe('SPAN')
-  expect(unstyled.querySelector('span.pb_contact_kit')).not.toBeInTheDocument()
-  expect(unstyled).toHaveTextContent('(212) 555-1234')
-})
-
-test('unstyled and iconEnabled work together', () => {
-  render(
-    <Contact
-        contactType="home"
-        contactValue="2125551234"
-        data={{ testid: 'test-unstyled-no-icon' }}
-        iconEnabled={false}
-        unstyled
-    />
-  )
-
-  const kit = screen.getByTestId('test-unstyled-no-icon')
-  expect(kit.tagName).toBe('SPAN')
-  expect(kit.querySelector('.pb_custom_icon')).not.toBeInTheDocument()
-  expect(kit.querySelector('.pb_body_kit')).not.toBeInTheDocument()
-  expect(kit).toHaveTextContent('(212) 555-1234')
-})