playbook_ui 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315 → 14.10.0.pre.alpha.play1465attempt25272

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d831ea1668e3d8737ab65525cbc8e9cf1821bf37cd0bc5f7ac21da4bf049c110
-  data.tar.gz: 8571c5d7c96e9a05db14b3a535617759561836bea6539435180c6f99d5f81d4e
+  metadata.gz: c93b9ff47768d50c0d18d31f265545696ab20026a354c4ce1902bf708a97e276
+  data.tar.gz: ec50794f12461ba77cca8a805a20512ee641c0dc5c74168240ad79f071b87958
 SHA512:
-  metadata.gz: 742d5c8b4dba2f302ab7707cc0407dd01b07f8de4655c15ce64f0dc44dea35e5f363be517275216513011e7269d1d123ebeb3eaa7d4e9a8a1a8fb4d415637825
-  data.tar.gz: 10d053fe355c15c75fbe0364a701e6bad06506d2bf1ee1587fde7ecaec4533674bc847d6b3911d1e6ca28d75532bfef9c55a82a21e0b76de5902550db0e264a4
+  metadata.gz: 676259bf2c4b7eadd6ca71fad89f4182a2a4a297e3531d0390681353605ca5a07367114596288292d42c48ad0d45bc051c68fc3ade51fe22e8924c24b226ca48
+  data.tar.gz: 0c40167b772c7e4125ef170e13bce0426751a658c8e987bce7fa1a89d0ddd7045f7848565560fe95f9c09c0347a5af19ab5f79d28a99e95078feee1fd1106e32

data/app/pb_kits/playbook/_playbook.scss

@@ -128,4 +128,3 @@
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
 @import 'utilities/height';
-@import 'utilities/gap';

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

@@ -36,5 +36,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: "test_table", 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/_advanced_table_beta_subrow_headers.md

@@ -1,3 +1,3 @@
 `subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,7 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  - advanced_table_beta_subrow_headers: SubRow Headers
+  # - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells

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

@@ -65,7 +65,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         if (!dataContent) {
           return;
         }
-        // Split the dataContent to get all ancestor IDs, check against ExpandedRows
+
+        // Split the dataContent to get all ancestor IDs, check against simpleExpandedRows
         const ancestorIds = dataContent.split("-").slice(0, -1);
 
         const prefixedAncestorIds = ancestorIds.map(
@@ -75,22 +76,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
           PbAdvancedTable.expandedRows.has(id)
         );
 
-        const checkIfParentIsExpanded = () => {
-          if (dataContent.endsWith("sr")) {
-            const parentRowId = childRow.dataset.rowParent;
-            const isParentVisible =
-              childRow.previousElementSibling.classList.contains("is-visible");
-            if (parentRowId) {
-              const isInSet = PbAdvancedTable.expandedRows.has(parentRowId);
-              if (isInSet && isParentVisible) {
-                return true;
-              }
-            }
-          }
-          return false;
-        };
-
-        if (allAncestorsExpanded || checkIfParentIsExpanded()) {
+        if (allAncestorsExpanded) {
           childRow.style.display = "table-row";
           childRow.classList.add("is-visible");
         } else {
@@ -157,7 +143,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
   static handleToggleAllHeaders(element) {
     const table = element.closest(".pb_table");
     const firstLevelButtons = table.querySelectorAll(
-      ".pb_advanced_table_body > .pb_table_tr[data-row-depth='0'] [data-advanced-table]"
+      ".pb_advanced_table_body > .pb_table_tr [data-advanced-table]"
     );
 
     const allExpanded = Array.from(firstLevelButtons).every(
@@ -189,43 +175,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     }
   }
 
-  static handleToggleAllSubRows(element, rowDepth) {
-    const table = element.closest(".pb_table");
-    const parentRow = element.closest("tr");
-    if (!parentRow) {
-      return;
-    }
-    const rowParentId = parentRow.dataset.rowParent;
-    // Select all buttons that for subrows at that depth and with same rowParent
-    const subRowButtons = table.querySelectorAll(
-      `.pb_advanced_table_body > .pb_table_tr[data-row-depth='${rowDepth}'].pb_table_tr[data-row-parent='${rowParentId}'] [data-advanced-table]`
-    );
-
-    const allExpanded = Array.from(subRowButtons).every(
-      (button) =>
-        button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block"
-    );
-
-    if (allExpanded) {
-      subRowButtons.forEach((button) => {
-        button.click();
-        PbAdvancedTable.expandedRows.delete(button.id);
-      });
-    } else {
-      subRowButtons.forEach((button) => {
-        if (!PbAdvancedTable.expandedRows.has(button.id)) {
-          button.click();
-          PbAdvancedTable.expandedRows.add(button.id);
-        }
-      });
-    }
-  }
+  // static handleToggleAllSubRows(element, rowDepth) {}
 }
 
 window.expandAllRows = (element) => {
   PbAdvancedTable.handleToggleAllHeaders(element);
 };
-
-window.expandAllSubRows = (element, rowDepth) => {
-  PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+// window.expandAllSubRows = (element, rowDepth) => {
+//   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
+// };

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

@@ -31,7 +31,7 @@ module Playbook
         end.compact
       end
 
-      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil, additional_classes: "", table_data_attributes: {})
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child, ancestor_ids = [], top_parent_id = nil)
         top_parent_id ||= row.object_id
         new_ancestor_ids = ancestor_ids + [row.object_id]
         leaf_columns = flatten_columns(column_definitions)
@@ -39,35 +39,30 @@ module Playbook
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        subrow_ancestor_ids = ancestor_ids + ["#{row.object_id}sr"]
-        subrow_data_attributes = {
-          advanced_table_content: subrow_ancestor_ids.join("-"),
-          row_depth: current_depth,
-          row_parent: "#{id}_#{ancestor_ids.last}",
-        }
-        # Subrow header if applicable
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
-
-        # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes })
+        # Pass only leaf_columns to table_row to account for multiple nested columns
+        output << pb_rails("advanced_table/table_row", props: {
+                             id: id,
+                             row: row,
+                             column_definitions: leaf_columns,
+                             depth: current_depth,
+                             collapsible_trail: collapsible_trail,
+                           })
 
         if row[:children].present?
-          row[:children].each do |child_row|
+          output << row[:children].map do |child_row|
             is_first_child = row[:children].first == child_row
+
+            child_output = render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id)
+
             immediate_parent_id = row.object_id
+            top_parent = top_parent_id
+            # Combine ancestor_ids to build the content id
             data_content = new_ancestor_ids.join("-") + "-#{child_row.object_id}"
 
-            child_data_attributes = {
-              top_parent: "#{id}_#{top_parent_id}",
-              row_depth: current_depth + 1,
-              row_parent: "#{id}_#{immediate_parent_id}",
-              advanced_table_content: data_content,
-            }
-
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1, is_first_child, new_ancestor_ids, top_parent_id, additional_classes: "toggle-content", table_data_attributes: child_data_attributes)
-          end
+            child_output.to_str.sub("<tr", %(<tr class="toggle-content" data-top-parent="#{id}_#{top_parent}" data-row-depth="#{current_depth}" data-row-parent="#{id}_#{immediate_parent_id}" data-advanced-table-content="#{data_content}"))
+          end.join.html_safe
         end
 
         output

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

@@ -11,12 +11,6 @@ module Playbook
       prop :depth
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
-      prop :table_data_attributes, type: Playbook::Props::HashProp,
-                                   default: {}
-
-      def data
-        Hash(prop(:data)).merge(table_data_attributes)
-      end
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

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

@@ -1,6 +1,6 @@
-<%= pb_content_tag(:tr) do %>
+<%= pb_content_tag(:div) do %>
         <% object.column_definitions.each_with_index do |column, index| %>
-            <%= pb_rails("table/table_cell", props: { classname: "id-cell chrome-styles"}) do %>
+            <%= pb_rails("table/table_cell", props: { classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>

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

@@ -14,15 +14,13 @@ module Playbook
                            default: ""
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
-      prop :subrow_data_attributes, type: Playbook::Props::HashProp,
-                                    default: {}
 
-      def data
-        Hash(prop(:data)).merge(subrow_data_attributes)
+      def classname
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
       end
 
-      def classname
-        generate_classname("pb_table_tr", "bg-silver", "pb_subrow_header", subrow_depth_classname, separator: " ")
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
       end
 
     private

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,10 +9,8 @@ import type { Callback } from '../types'
 import Body from '../pb_body/_body'
 import Card from '../pb_card/_card'
 
-import { isEmpty } from '../utilities/object'
-
 type FileUploadProps = {
-  accept?: Record<string, string[]>,
+  accept?: string[],
   className?: string,
   customMessage?: string,
   dark?: boolean,
@@ -21,7 +19,7 @@ type FileUploadProps = {
   acceptedFilesDescription?: string,
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
-  onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
+  onFilesRejected: (error: string, files: File[]) => void,
 }
 
 const getFormattedFileSize = (fileSize: number): string => {
@@ -30,7 +28,7 @@ const getFormattedFileSize = (fileSize: number): string => {
 
 const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
-    accept = {},
+    accept = null,
     acceptedFilesDescription = '',
     className,
     customMessage,
@@ -50,37 +48,30 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     getRootProps: () => DropzoneRootProps & any;
     getInputProps: () => DropzoneInputProps & any;
     isDragActive: boolean;
-    fileRejections: readonly FileRejection[];
+    rejectedFiles: File[];
   }
 
-  const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
 
-  const prevRejected = useRef<readonly FileRejection[] | null>(null);
+  const prevRejected = useRef<File[] | null>(null);
 
-  let maxFileSizeText = ''
-  if (maxSize !== undefined) {
-    maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
-  }
+  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
 
   useEffect(() => {
-    if (fileRejections === prevRejected.current) return
-    const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
+    if (rejectedFiles === prevRejected.current) return
+    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
     if (isFileTooLarge) {
-      onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
     }
-    prevRejected.current = fileRejections
-  }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
+    prevRejected.current = rejectedFiles
+  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
 
   const acceptedFileTypes = () => {
-    if (!accept) {
-      return []
-    }
-
-    return Object.keys(accept).map((fileType) => {
+    return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
         return fileType.replace('image/', ' ')
       } else {
@@ -95,7 +86,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const getDescription = () => {
     return customMessage
       ? customMessage
-      : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
+      : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
   }
 
   return (

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -28,9 +28,7 @@ const FileUploadAccept = (props) => {
           {...props}
       />
       <FileUpload
-          accept={{
-            "image/svg+xml": [".svg", ".xml"],
-          }}
+          accept={['image/svg+xml']}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -25,10 +25,7 @@ const FileUploadCustomDescription = (props) => {
           {...props}
       />
       <FileUpload
-          accept={{
-            "application/pdf": [".pdf"],
-            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-          }}
+          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
           acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
           onFilesAccepted={handleOnFilesAccepted}
           {...props}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
 const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
-      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
+      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
     ))}
   </List>
 )

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -69,7 +69,6 @@ const Table = (props: TableProps): React.ReactElement => {
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
     const dynamicInlineProps = globalInlineProps(props)
-    const stickyRightColumnReversed = stickyRightColumn.reverse()
 
     const classNames = classnames(
         'pb_table',
@@ -149,7 +148,7 @@ const Table = (props: TableProps): React.ReactElement => {
             if (!stickyRightColumn.length) return;
             let accumulatedWidth = 0;
 
-            stickyRightColumnReversed.forEach((colId, index) => {
+            stickyRightColumn.reverse().forEach((colId, index) => {
                 const isLastColumn = index === stickyRightColumn.length - 1;
                 const header = document.querySelector(`th[id="${colId}"]`);
                 const cells = document.querySelectorAll(`td[id="${colId}"]`);
@@ -187,12 +186,6 @@ const Table = (props: TableProps): React.ReactElement => {
         setTimeout(() => {
             handleStickyRightColumns();
         }, 10);
-
-        window.addEventListener('resize', handleStickyRightColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyRightColumns);
-        };
     }, [stickyRightColumn]);
 
     useEffect(() => {

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

@@ -35,8 +35,6 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
-    - table_sticky_right_columns: Sticky Right Column
-    - table_sticky_columns: Sticky Left and Right Columns
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

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

@@ -26,8 +26,6 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
-export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
-export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -16,8 +16,6 @@ const TextInputMask = (props) => {
     zipCode: '',
     postalCode: '',
     ssn: '',
-    creditCard: '',
-    cvv: ''
   })
 
   const handleOnChangeFormField =  ({ target }) => {
@@ -59,22 +57,6 @@ const TextInputMask = (props) => {
           value={formFields.ssn}
           {...props}
       />
-      <TextInput
-          label="Credit Card"
-          mask="creditCard"
-          name="creditCard"
-          onChange={handleOnChangeFormField}
-          value={formFields.creditCard}
-          {...props}
-      />
-      <TextInput
-          label="CVV"
-          mask="cvv"
-          name="cvv"
-          onChange={handleOnChangeFormField}
-          value={formFields.cvv}
-          {...props}
-      />
 
       <br />
       <br />

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -6,7 +6,7 @@ type InputMask = {
 }
 
 type InputMaskDictionary = {
-    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn' | 'creditCard' | 'cvv']: InputMask
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
 const formatCurrencyDefaultValue = (value: string): string => {
@@ -58,15 +58,6 @@ const formatSSN = (value: string): string => {
         .replace(/(\d{3})(?=\d)/, '$1-')
 }
 
-const formatCreditCard = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 16)
-    return cleaned.replace(/(\d{4})(?=\d)/g, '$1 ')
-}
-
-const formatCVV = (value: string): string => {
-    return value.replace(/\D/g, '').slice(0, 4)
-}
-
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
@@ -93,16 +84,4 @@ export const INPUTMASKS: InputMaskDictionary = {
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },
-    creditCard: {
-        format: formatCreditCard,
-        formatDefaultValue: formatCreditCard,
-        pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
-        placeholder: '1234 5678 9012 3456',
-    },
-    cvv: {
-        format: formatCVV,
-        formatDefaultValue: formatCVV,
-        pattern: '\\d{3,4}',
-        placeholder: '123',
-    },
 } 

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -226,83 +226,3 @@ test('returns masked ssn value', () => {
 
   expect(input.value).toBe('123-45-6789')
 })
-
-const TextInputCreditCardMask = (props) => {
-  const [creditCard, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="creditCard"
-        onChange={handleOnChange}
-        value={creditCard}
-        {...props}
-    />
-  )
-}
-
-test('returns masked credit card value', () => {
-  render(
-    <TextInputCreditCardMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox')
-
-  fireEvent.change(input, { target: { value: '1234567890123456' } })
-
-  expect(input.value).toBe('1234 5678 9012 3456')
-
-  fireEvent.change(input, { target: { value: '1234' } })
-
-  expect(input.value).toBe('1234')
-
-  fireEvent.change(input, { target: { value: '' } })
-
-  expect(input.value).toBe('')
-})
-
-const TextInputCVVMask = (props) => {
-  const [cvv, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="cvv"
-        onChange={handleOnChange}
-        value={cvv}
-        {...props}
-    />
-  )
-}
-
-test('returns masked CVV value', () => {
-  render(
-    <TextInputCVVMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox')
-
-  fireEvent.change(input, { target: { value: '1234' } })
-
-  expect(input.value).toBe('1234')
-
-  fireEvent.change(input, { target: { value: '123' } })
-
-  expect(input.value).toBe('123')
-
-  fireEvent.change(input, { target: { value: '' } })
-
-  expect(input.value).toBe('')
-})