playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2107phonenumberlabeljumpbug7435

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

@@ -3,6 +3,7 @@ type InputMask = {
     formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
+    sanitize?: (value: string) => string;
 }
 
 type InputMaskDictionary = {
@@ -73,35 +74,41 @@ export const INPUTMASKS: InputMaskDictionary = {
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
+        sanitize: (value: string) => value.replace(/[$,]/g, ''),
     },
     zipCode: {
         format: formatBasicPostal,
         formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
+        sanitize: (value: string) => value,
     },
     postalCode: {
         format: formatExtendedPostal,
         formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
+        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     ssn: {
         format: formatSSN,
         formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
+        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     creditCard: {
         format: formatCreditCard,
         formatDefaultValue: formatCreditCard,
         pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
         placeholder: '1234 5678 9012 3456',
+        sanitize: (value: string) => value.replace(/\s/g, ''),
     },
     cvv: {
         format: formatCVV,
         formatDefaultValue: formatCVV,
         pattern: '\\d{3,4}',
         placeholder: '123',
+        sanitize: (value: string) => value,
     },
-} 
+}

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,15 +1,21 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
+import Icon from '../../pb_icon/_icon'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
+  const error = (
+    <>
+        <Icon icon="warning" /> This field has an error!
+    </>
+  )
   return (
     <div>
       <Textarea
-          error="This field has an error!"
+          error={error}
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,11 +1,8 @@
-<%= content_tag(:div,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
+<%= pb_content_tag(:div,
       style: remove_height_properties(combined_html_options[:style]) || "",
       **combined_html_options.except(:style)) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'
+import Icon from '../../pb_icon/_icon'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
 ]
 
 const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+  const [errorState, setErrorState] = useState(error);
   const [searchValue, setSearchValue] = useState(null);
   
   const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState("Please make a valid selection")
+        setErrorState(error)
       }
     }, [searchValue])
   

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

@@ -18,18 +18,18 @@ const USERS = [
     territory: "PHL",
   },
   {
-    name: "Jason Cypret",
-    title: "Vice President of User Experience",
+    name: "Carlos Lima",
+    title: "Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Stephen Marshall",
-    title: "Senior User Experience Engineer",
+    title: "Senior Nitro Developer",
     territory: "PHL",
   },
   {
     name: "Jasper Furniss",
-    title: "Senior User Experience Engineer",
+    title: "Lead User Experience Engineer",
     territory: "PHL",
   },
 ];

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

@@ -1,11 +1,8 @@
 <% if object.is_react? %>
   <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
-  <%= content_tag(:div,
-                id: object.id,
-                data: object.data,
-                class: object.classname + object.inline_class,
-                **combined_html_options) do %>
+  <%= pb_content_tag(:div,
+                     class: object.classname + object.inline_class) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>