playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment4991

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

@@ -16,6 +16,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
+export { default as TextInputMask } from './_text_input_mask.jsx'

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

@@ -0,0 +1,64 @@
+type InputMask = {
+    format: (value: string) => string
+    pattern: string
+    placeholder: string
+}
+
+type InputMaskDictionary = {
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+}
+
+const formatCurrency = (value: string): string => {
+    const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
+
+    if (!numericValue) return ''
+
+    const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
+    if (dollars === 0) return ''
+
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
+const formatBasicPostal = (value: string): string => {
+    return value.replace(/\D/g, '').slice(0, 5)
+}
+
+const formatExtendedPostal = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned.replace(/(\d{5})(?=\d)/, '$1-')
+}
+
+const formatSSN = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned
+        .replace(/(\d{5})(?=\d)/, '$1-')
+        .replace(/(\d{3})(?=\d)/, '$1-')
+}
+
+export const INPUTMASKS: InputMaskDictionary = {
+    currency: {
+        format: formatCurrency,
+        // eslint-disable-next-line no-useless-escape
+        pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
+        placeholder: '$0.00',
+    },
+    zipCode: {
+        format: formatBasicPostal,
+        pattern: '\\d{5}',
+        placeholder: '12345',
+    },
+    postalCode: {
+        format: formatExtendedPostal,
+        pattern: '\\d{5}-\\d{4}',
+        placeholder: '12345-6789',
+    },
+    ssn: {
+        format: formatSSN,
+        pattern: '\\d{3}-\\d{2}-\\d{4}',
+        placeholder: '123-45-6789',
+    },
+} 

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import React, { useState } from 'react'
+import { render, screen, fireEvent, within } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,3 +89,140 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} mb_lg`)
 })
+
+
+const TextInputCurrencyMask = (props) => {
+  const [currency, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="currency"
+        onChange={handleOnChange}
+        value={currency}
+        {...props}
+    />
+  )
+}
+
+test('returns masked currency value', () => {
+  render(
+    <TextInputCurrencyMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456' } });
+
+  expect(input.value).toBe('$1,234.56')
+
+  fireEvent.change(input, { target: { value: '1' } });
+
+  expect(input.value).toBe('$0.01')
+
+  fireEvent.change(input, { target: { value: '' } });
+
+  expect(input.value).toBe('')
+})
+
+const TextInputZipCodeMask = (props) => {
+  const [zipCode, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="zipCode"
+        onChange={handleOnChange}
+        value={zipCode}
+        {...props}
+    />
+  )
+}
+
+test('returns masked zip code value', () => {
+  render(
+    <TextInputZipCodeMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456' } });
+
+  expect(input.value).toBe('12345')
+})
+
+const TextInputPostalCodeMask = (props) => {
+  const [postalCode, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="postalCode"
+        onChange={handleOnChange}
+        value={postalCode}
+        {...props}
+    />
+  )
+}
+
+test('returns masked postal code value', () => {
+  render(
+    <TextInputPostalCodeMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456789' } });
+
+  expect(input.value).toBe('12345-6789')
+})
+
+const TextInputSSNMask = (props) => {
+  const [ssn, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="ssn"
+        onChange={handleOnChange}
+        value={ssn}
+        {...props}
+    />
+  )
+}
+
+test('returns masked ssn value', () => {
+  render(
+    <TextInputSSNMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox');
+
+  fireEvent.change(input, { target: { value: '123456789' } });
+
+  expect(input.value).toBe('123-45-6789')
+})