playbook_ui_docs 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputSanitize = (props) => {
+  const ref = React.createRef()
+
+  const [currency, setCurrency] = useState('')
+  const [sanitizedCurrency, setSanitizedCurrency] = useState('')
+  const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
+    setCurrency(target.value)
+    setSanitizedCurrency(sanitizedValue);
+  }
+
+  const [creditCard, setCreditCard] = useState('')
+  const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
+  const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
+    setCreditCard(target.value)
+    setSanitizedCreditCard(sanitizedValue);
+  }
+
+  const [ssn, setSSN] = useState('')
+  const [sanitizedSSN, setSanitizedSSN] = useState('')
+  const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
+    setSSN(target.value)
+    setSanitizedSSN(sanitizedValue);
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          onChange={handleOnChangeSanitizeCurrency}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={currency}
+          {...props}
+      />
+
+      {currency !== "" && (
+        <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCurrency !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="Credit Card"
+          mask="creditCard"
+          onChange={handleOnChangeSanitizeCC}
+          placeholder="Enter Card"
+          ref={ref}
+          value={creditCard}
+          {...props}
+      />
+
+      {creditCard !== "" && (
+        <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCreditCard !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSanitizeSSN}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== "" && (
+        <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedSSN !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputSanitize

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md

@@ -0,0 +1 @@
+When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.

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

@@ -18,6 +18,8 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
+  - text_input_sanitize: Sanitized Masked Input
+
 
   swift:
     - text_input_default_swift: Default

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

@@ -6,3 +6,4 @@ 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'
+export { default as TextInputSanitize } from './_text_input_sanitize.jsx'

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_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",
   },
 ];