playbook_ui_docs 14.17.0.pre.alpha.PLAY20547307 → 14.17.0.pre.alpha.PLAY20547327

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 12352ee4bb634cb7444e5de28c82c167898e227842c829a6d28c0385cff05183
-  data.tar.gz: 7096a9f694e9cad51f3b5459b8d3d7a7fcf3612486e27a923694dd5f14b9cdff
+  metadata.gz: 4e424c03800745fc2d55fb92e5ed1ca2b6734147be34587f6c466baff999b4ca
+  data.tar.gz: 7be342d045d8211d75b38765b446d7cf7536275cadbaff2f218620b3a155a1ba
 SHA512:
-  metadata.gz: e4cbeb77d30218373c8163fd79b6db58663b1b1b80fc3bfe47ddfbadaae9c1ff2544951356988b4986f0b76efc69007e6a64352711c6382fa54067b795cc483f
-  data.tar.gz: 4eb8480fe8129264757b25eff1a81e54c15eefb0e91bf1637b3b97f22e0142ec836dc9c5672a06ebed9a9fe173dc05c624d7b3db35faf4da8ef53147fb623e80
+  metadata.gz: e45deeb3b950ab5a277d6cdebc5cc876d49effa32359e2e93c60ca56270dc3f22418ead70be4e752814933c20d682af7a047c311f74c0460e119ee17a7e190f9
+  data.tar.gz: cd396132c68e95e7691757ea028a5b9989dac5c1cfc5d6c8dd347b5446e5680a83a345ab93a3a450ca431c3a49cbb25a87f69e8b5c85d86553fa4bb5fa734018

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx

@@ -55,6 +55,7 @@ const AdvancedTableExpandByDepth = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           expandByDepth={expandByDepth}
+          onExpandByDepthClick={(depth, rows) => {console.log(depth, rows)}}
           tableData={MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md

@@ -6,4 +6,5 @@ The `expandByDepth` prop enables users to expand or collapse table rows by speci
 
 **Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
 
+If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
 

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,12 +1,16 @@
-import React from 'react'
+import React, {useState} from 'react'
 
 import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 import Flex from '../../pb_flex/_flex'
+import Passphrase from '../../pb_passphrase/_passphrase'
 
 const FormGroupSelect = (props) => {
+  const [input, setInput] = useState("");
+  const handleChange = (e) => setInput(e.target.value);
+
   const options = [
     { value: 'Country' },
     { value: 'Pop' },
@@ -63,6 +67,20 @@ const FormGroupSelect = (props) => {
           {...props}
       />
     </FormGroup>
+    <FormGroup>
+        <Select 
+            blankSelection="Phone" 
+            options={phoneOptions}
+            {...props}
+        />
+        <Passphrase
+            id="my-passphrase"
+            label=""
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </FormGroup>
     </Flex>
   )
 }

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'