playbook_ui 14.9.0.pre.rc.18 → 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137

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

@@ -0,0 +1,87 @@
+type InputMask = {
+    format: (value: string) => string
+    formatDefaultValue: (value: string) => string
+    pattern: string
+    placeholder: string
+}
+
+type InputMaskDictionary = {
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+}
+
+const formatCurrencyDefaultValue = (value: string): string => {
+    // Remove non-numeric characters except for the decimal point
+    const numericValue = value.replace(/[^0-9.]/g, '')
+
+    if (!numericValue) return ''
+
+    // Parse the numeric value as a float to handle decimals
+    const dollars = parseFloat(numericValue)
+    if (isNaN(dollars) || dollars === 0) return ''
+
+    // Format as currency
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
+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,
+        formatDefaultValue: formatCurrencyDefaultValue,
+        // eslint-disable-next-line no-useless-escape
+        pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
+        placeholder: '$0.00',
+    },
+    zipCode: {
+        format: formatBasicPostal,
+        formatDefaultValue: formatBasicPostal,
+        pattern: '\\d{5}',
+        placeholder: '12345',
+    },
+    postalCode: {
+        format: formatExtendedPostal,
+        formatDefaultValue: formatExtendedPostal,
+        pattern: '\\d{5}-\\d{4}',
+        placeholder: '12345-6789',
+    },
+    ssn: {
+        format: formatSSN,
+        formatDefaultValue: 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')
+})

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,10 +49,11 @@
   }
 
   &.dark {
-    @include pb_title_dark; 
-  }
-
-  &.dark[class*=_link] { 
-    @include pb_title_dark_link; 
+    @include title_dark;
+    @each $name, $color in $pb_dark_title_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -9,6 +9,15 @@ $pb_title_colors: (
   link: $primary
 );
 
+$pb_dark_title_colors: (
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  success: $success,
+  error: $error_dark,
+  link: $active_dark
+);
+
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
     }
   }
 }
+
+@mixin title_dark {
+  color: $text_dk_default;
+}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -90,50 +90,7 @@
       }
     }
   }
-  &[class*=dark] {
-    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
-      color: $text_dk_light;
-    }
-    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
-      display: inherit !important;
-    }
-    .typeahead-kit-select__menu {
-      background-color: $bg_dark;
-      color: $white;
-      z-index: $z_1;
-    }
-    .typeahead-kit-select__option:hover {
-      background-color: $active_dark;
-    }
-    .typeahead-kit-select__indicator:hover {
-      color: $white;
-    }
-    .typeahead-kit-select__input {
-      color: white;
-      input:focus {
-        box-shadow: none;
-      }
-    }
-    .typeahead-kit-select__single-value {
-      color: white;
-    }
-    .typeahead-kit-select__option--is-focused {
-      background-color: $active_dark;
-    }
-    [class^=pb_list_kit] {
-      background-color: $bg_dark;
-    }
-    .pb_item_kit {
-      button {
-        color: white !important;
-      }
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($white,.1);
-        }
-      }
-    }
-  }
+
   &.react-select, &.react-select .dark {
     .text_input {
       display: inherit;
@@ -182,7 +139,7 @@
       }
     }
   }
- 
+
   .typeahead-kit-select__menu {
     z-index: $z_1;
     .typeahead-kit-select__menu-list {
@@ -215,5 +172,117 @@
       }
     }
   }
-}
 
+  &[class*=dark] {
+    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
+      color: $text_dk_light;
+    }
+    .pb_text_input_kit_label {
+      color: $text_dk_light;
+    }
+    [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
+      display: inherit !important;
+    }
+    .typeahead-kit-select__menu {
+      background-color: $bg_dark;
+      color: $white;
+      z-index: $z_1;
+      .typeahead-kit-select__menu-list {
+        padding: 0;
+      }
+      .typeahead-kit-select__single-value {
+        color: white;
+      }
+
+      .typeahead-kit-select__option {
+        &.typeahead-kit-select__option--is-focused {
+          background-color: $hover_dark;
+        }
+        &.typeahead-kit-select__option--is-selected {
+          background-color: $active_dark;
+        }
+      }
+    }
+    .text_input_wrapper{
+      color: text_dk_default;
+    }
+    .typeahead-kit-select__option:hover {
+      background-color: $active_dark;
+    }
+    .typeahead-kit-select__indicator {
+      color: $text_dk_default;
+    }
+    .typeahead-kit-select__indicator:hover {
+      color: $text_dk_lighter;
+    }
+    .typeahead-kit-select__input {
+      color: white;
+      input:focus {
+        box-shadow: none;
+      }
+    }
+    .typeahead-kit-select__option--is-focused {
+      background-color: $active_dark;
+    }
+    [class^=pb_list_kit] {
+      background-color: $bg_dark;
+    }
+    .pb_item_kit {
+      button {
+        color: white !important;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: $hover_dark;
+        }
+      }
+    }
+
+    .text_input {
+      .typeahead-kit-select__input-container{
+        color: $text_dk_default
+      }
+      .typeahead-kit-select {
+        &__single-value{
+          color: $text_dk_default;
+        }
+      }
+      &.typeahead-kit-select {
+        &__single-value{
+          color: $text_dk_default;
+        }
+        &__control {
+          &--is-focused {
+            @include pb_textarea_focus;
+            @include transition_default;
+            border-color: $active_dark;
+            background-color: rgba($focus_input_dark,$opacity_5);
+            box-shadow: none;
+            .typeahead-plus-icon {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &.inline {
+      &:not(:hover) {
+        .text_input {
+          background-color: transparent;
+          border-color: transparent;
+        }
+        .typeahead-kit-select__indicator {
+          color: transparent;
+        }
+      }
+
+      &:hover {
+        .text_input {
+          background-color: $hover_dark;
+        }
+      }
+    }
+
+  }
+}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -55,11 +55,18 @@ const TypeaheadWithHighlight = (props) => {
               marginRight="sm"
               name={name}
               size="sm"
+              {...props}
           />
         </FlexItem>
         <FlexItem>
-          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
-          <Body color="light">
+          <Title
+              size={4}
+              {...props}
+          >
+            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light"
+              {...props}
+          >
             <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
             {territory}
           </Body>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -25,8 +25,9 @@
         validation: object.validation,
         label: object.label,
         id: object.input_options[:id],
+        dark: object.dark,
       }) %>
-      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+      <%= pb_rails("list", props: { ordered: false, borderless: true, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
     </div>
 
@@ -36,4 +37,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -33,14 +33,6 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
-@mixin pb_title_dark {
-    color: $text_dk_default;
-} 
-
-@mixin pb_title_dark_link {
-    color: $active_dark;
-}
-
 @mixin pb_title_bold {
   font-weight: $bolder;
 }

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -20,6 +20,13 @@
   }
 }
 
+@mixin hover-underline {
+  .hover_underline:hover {
+    text-decoration: underline;
+    transition: text-decoration $transition-speed ease;
+  }
+}
+
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
       .hover_background-#{"" + $name}:hover {
@@ -32,7 +39,9 @@
       }
     }
   }
-  
+
+
+  @include hover-underline;
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -64,4 +73,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -64,6 +64,7 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
+  underline?: boolean,
   visibility?: boolean,
 }
 
@@ -236,6 +237,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background-${hover.background } ` : '';
+      css += hover.underline ? `hover_underline ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
       css += hover.visibility ? `hover_visibility` : '';

data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js

@@ -57,6 +57,19 @@ test('Hover Props: returns proper class name', () => {
   expectedClassName = `hover_scale_xl`;
   expect(kit).toHaveClass(expectedClassName);
 
+  const testIdUnderline = `${testSubject}-hover-underline`;
+  render(
+    <Body
+        data={{ testid: testIdUnderline }}
+        hover={{ underline: true }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdUnderline);
+  expectedClassName = `hover_underline`;
+  expect(kit).toHaveClass(expectedClassName);
+
   const testIdMultiple = `${testSubject}-hover-multiple`;
   render(
     <Body
@@ -66,6 +79,7 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
+        underline: true,
       }}
         text="Hi"
     />
@@ -76,4 +90,5 @@ test('Hover Props: returns proper class name', () => {
   expect(kit).toHaveClass('hover_background-error');
   expect(kit).toHaveClass('hover_shadow_deeper');
   expect(kit).toHaveClass('hover_scale_xl');
+  expect(kit).toHaveClass('hover_underline');
 });