playbook_ui 15.3.0.pre.alpha.play2541phonenumberkitvalidation12084 → 15.3.0.pre.alpha.play199912019

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a2b8cf9c37f01a2d2aed6fba947a7b981f2953cf405c747b05a4ff8d6c014ce
-  data.tar.gz: ecbc438f4a2df675e214dc49470538c246e621a2a8ff46a73c8b870dddee616d
+  metadata.gz: 388214df2dc5b88974e4f1828638e5c89e1b8212be4d4410e14a0aa32fcaa1fc
+  data.tar.gz: 3e3a56e4740c4eb97d7e2cc3b9876db5a9225ffab834f1a0ecc376f0b3b80d9f
 SHA512:
-  metadata.gz: 8c79cd5742a9ba46ea88bff370d16a9f2722e17c6ef3c72465c5b4933a7fb77433f29c5bef0c3567b2a667feb97a59360a93ede054b07d31e7d76d8d66ba166c
-  data.tar.gz: 2e436919a7289d438582fd112a8c243479118adc029cdcfc9e4f3b0f3c52d18ca50bc43283031b619553844a7a0e3373d9a8fa99aff55cf2f4c2061f244be2a1
+  metadata.gz: ee8599340aa8e11f95157d225b52348bb40cd9204734cea8eeac72be58156e544ae8cf6eb1152ed65c01ec6e84892bb53431f673db7f59831c3de5d8ea42279e
+  data.tar.gz: 8b655b10ab1cc172c7211ba6d08ba6591e8dc5eed375187855806cb999ddbbc48e10cd4a639e66bde17610f8a6bac9bd66488415e8ac1c9b36c70770a6cc0da2

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/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

@@ -25,6 +25,7 @@ type BadgeProps = {
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
+  tabIndex?: number,
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
@@ -39,6 +40,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     removeIcon = false,
     removeOnClick,
     rounded = false,
+    tabIndex,
     text,
     variant = 'neutral',
   } = props
@@ -61,6 +63,7 @@ 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,3 +112,16 @@ 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"

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

@@ -17,7 +17,8 @@ module Playbook
       prop :symbol, type: Playbook::Props::String,
                     default: "$"
 
-      prop :amount, required: true
+      prop :amount, type: Playbook::Props::String,
+                    required: true
 
       prop :unit, type: Playbook::Props::String,
                   required: false
@@ -91,7 +92,7 @@ module Playbook
       end
 
       def negative_sign
-        currency_amount.starts_with?("-") && swap_negative ? "-" : ""
+        amount.starts_with?("-") && swap_negative ? "-" : ""
       end
 
       def body_props
@@ -116,32 +117,10 @@ module Playbook
         end
       end
 
-      def currency_amount
-        @currency_amount ||= convert_amount(amount)
-      end
-
     private
 
-      # Convert numeric input to string format
-      def convert_amount(input)
-        if input.is_a?(Numeric)
-          if input.zero? && null_display.nil?
-            ""
-          else
-            format("%.2f", input)
-          end
-        # Handle string representations of zero
-        elsif input.to_s.strip.match?(/^-?0+(\.0+)?$/) && null_display.nil?
-          ""
-        else
-          input.to_s
-        end
-      end
-
       def whole_value
-        return "" if currency_amount.blank?
-
-        value = currency_amount.split(".").first
+        value = amount.split(".").first
         if comma_separator
           number_with_delimiter(value.gsub(",", ""))
         else
@@ -150,9 +129,7 @@ module Playbook
       end
 
       def decimal_value
-        return "00" if currency_amount.blank?
-
-        currency_amount.split(".")[1] || "00"
+        amount.split(".")[1] || "00"
       end
 
       def units_element
@@ -170,9 +147,7 @@ module Playbook
       end
 
       def abbreviated_value(index = 0..-2)
-        return "" if currency_amount.blank?
-
-        value = currency_amount.split(".").first.gsub(",", "").to_i
+        value = amount.split(".").first.gsub(",", "").to_i
         abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
         abbreviated_num[index]
       end
@@ -199,11 +174,9 @@ module Playbook
 
         if decimals == "matching"
           if comma_separator
-            return "" if currency_amount.blank?
-
-            number_with_delimiter(currency_amount.gsub(",", ""))
+            number_with_delimiter(amount.gsub(",", ""))
           else
-            currency_amount
+            amount
           end
         else
           whole_value

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

@@ -133,50 +133,3 @@ test('handles negative amounts correctly', () => {
   expect(screen.getByTestId('test-negative-no-symbol')).toHaveTextContent('-400.50')
   expect(screen.getByTestId('test-negative-medium-size')).toHaveTextContent('$-500.55')
 })
-
-test('handles numeric amounts correctly', () => {
-  render(
-    <>
-      <Currency
-          amount={320}
-          data={{ testid: 'test-numeric-default' }}
-      />
-      <Currency
-          abbreviate
-          amount={3200000}
-          data={{ testid: 'test-numeric-millions' }}
-      />
-      <Currency
-          amount={123456.78}
-          commaSeparator
-          data={{ testid: 'test-numeric-comma-decimals' }}
-      />
-      <Currency
-          amount={400.50}
-          data={{ testid: 'test-numeric-no-symbol' }}
-          symbol=""
-      />
-      <Currency
-          amount={500.55}
-          data={{ testid: 'test-numeric-medium-size' }}
-          size="md"
-      />
-      <Currency
-          amount={-600.70}
-          data={{ testid: 'test-numeric-negative' }}
-      />
-      <Currency
-          amount={0.00}
-          data={{ testid: 'test-numeric-null' }}
-      />
-    </>
-  )
-
-  expect(screen.getByTestId('test-numeric-default')).toHaveTextContent('$320')
-  expect(screen.getByTestId('test-numeric-millions')).toHaveTextContent('$3.2M')
-  expect(screen.getByTestId('test-numeric-comma-decimals')).toHaveTextContent('$123,456.78')
-  expect(screen.getByTestId('test-numeric-no-symbol')).toHaveTextContent('400.50')
-  expect(screen.getByTestId('test-numeric-medium-size')).toHaveTextContent('$500.55')
-  expect(screen.getByTestId('test-numeric-negative')).toHaveTextContent('-$600.70')
-  expect(screen.getByTestId('test-numeric-null')).toHaveTextContent('$.00')
-})

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

@@ -7,7 +7,7 @@
 }) %>
 
 <%= pb_rails("currency", props: {
-  amount: 342,
+  amount: "342",
   label: "Light",
   margin_bottom: "md",
   size: "sm",

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

@@ -14,7 +14,7 @@ const CurrencyVariants = (props) => {
           {...props}
       />
       <Currency
-          amount={342}
+          amount="342"
           label="Light"
           marginBottom="md"
           size="sm"

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -8,13 +8,13 @@ const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
 // Validation selectors
 const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
 const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
-const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
   'valid',
   'invalid',
 ]
+
 class PbFormValidation extends PbEnhancedElement {
   static get selector() {
     return FORM_SELECTOR
@@ -22,27 +22,12 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
-      // Skip phone number inputs - they handle their own validation
-      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
-      if (isPhoneNumberInput) return
-
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
-
-    // Add event listener to check for phone number validation errors
-    this.element.addEventListener('submit', (event) => {
-      // Use setTimeout to ensure React state updates have completed
-      setTimeout(() => {
-        if (this.hasPhoneNumberValidationErrors()) {
-          event.preventDefault()
-          return false
-        }
-      }, 0)
-    })
   }
 
   validateFormField(event) {
@@ -60,58 +45,40 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-
-    // FIX: Add null check for kitElement
-    if (!kitElement) return
-
-    // Check if this is a phone number input
-    const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    kitElement.classList.add('error')
+    parentElement.closest(KIT_SELECTOR).classList.add('error')
 
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
-      // set the error message element
-      const errorMessageContainer = this.errorMessageContainer
+    // set the error message element
+    const errorMessageContainer = this.errorMessageContainer
 
-      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
 
-      errorMessageContainer.innerHTML = target.validationMessage
+    errorMessageContainer.innerHTML = target.validationMessage
 
-      // add the error message element to the dom tree
-      parentElement.appendChild(errorMessageContainer)
-    }
+    // add the error message element to the dom tree
+    parentElement.appendChild(errorMessageContainer)
   }
 
   clearError(target) {
     const { parentElement } = target
-    const kitElement = parentElement.closest(KIT_SELECTOR)
-    // Remove error class from kit element
-    if (kitElement) kitElement.classList.remove('error')
-    // Remove error message from parent element
+    parentElement.closest(KIT_SELECTOR).classList.remove('error')
     const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR)
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
-  // Check if there are phone number input errors
-  hasPhoneNumberValidationErrors() {
-    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
-    return phoneNumberErrors.length > 0
-  }
-
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')
     errorContainer.classList.add(kitClassName)
     return errorContainer
   }
+
   get formValidationFields() {
     return this._formValidationFields =
       this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR)
   }
 }
 
-window.PbFormValidation = PbFormValidation
+window.PbFormValidation = PbFormValidation