playbook_ui_docs 14.18.0.pre.rc.1 → 14.18.0.pre.rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +19 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/dist/playbook-doc.js +19 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 286f25769dbfd3e52e3648d7057de6008725ffe47c6707171f27bec86a6df652
|
|
4
|
+
data.tar.gz: 2204b8eb2e9c5a145f9399d492b43dc080f08ca9fe9485885791ab9ff1dc87e0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 52850dad180f1d9442844cfe9187dd8429ae066867df6c096640ed904f19123e5f96136b2a7de585dba10d56123110a4f8e4a43fcc16be3cef358cfd81ceaa0c
|
|
7
|
+
data.tar.gz: 8dcd9d89a1fcc3ff97bd8c5c202f6884a87e9f0d010a2d6eba531b36d8c087de3f840f67f463f8590ff2709c080964e3e539ed9c014a7952237c8daf76878026
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
import usePBCopy from '../../pb_copy_button/usePBCopy'
|
|
3
|
+
import Body from '../../pb_body/_body'
|
|
4
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
5
|
+
import Tooltip from '../../pb_tooltip/_tooltip'
|
|
6
|
+
|
|
7
|
+
const CopyButtonHook = ({...props}) => {
|
|
8
|
+
// This is how you can use the copy button hook to copy text to the clipboard
|
|
9
|
+
// eslint-disable-next-line no-unused-vars
|
|
10
|
+
const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
|
|
11
|
+
// I added a tooltip so it looks better in the ui
|
|
12
|
+
const [showTooltip, setShowTooltip] = useState(false)
|
|
13
|
+
|
|
14
|
+
const handleCopy = () => {
|
|
15
|
+
copyToClipboard()
|
|
16
|
+
setShowTooltip(true)
|
|
17
|
+
setTimeout(() => setShowTooltip(false), 1500)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const el = document.getElementById('hookbody')
|
|
22
|
+
if (!el) return
|
|
23
|
+
|
|
24
|
+
el.addEventListener('click', handleCopy)
|
|
25
|
+
return () => {
|
|
26
|
+
el.removeEventListener('click', handleCopy)
|
|
27
|
+
}
|
|
28
|
+
}, [copyToClipboard])
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Tooltip
|
|
33
|
+
delay={{ close: 1000 }}
|
|
34
|
+
forceOpenTooltip={showTooltip}
|
|
35
|
+
placement="top"
|
|
36
|
+
showTooltip={false}
|
|
37
|
+
text="Copied!"
|
|
38
|
+
>
|
|
39
|
+
<Body
|
|
40
|
+
cursor="pointer"
|
|
41
|
+
id="hookbody"
|
|
42
|
+
text="I'm a custom copy hook! Click this body to copy this text!"
|
|
43
|
+
/>
|
|
44
|
+
</Tooltip>
|
|
45
|
+
|
|
46
|
+
<Textarea
|
|
47
|
+
{...props}
|
|
48
|
+
placeholder="Paste here"
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default CopyButtonHook
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
|
|
2
|
+
|
|
3
|
+
`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as CopyButtonDefault } from './_copy_button_default.jsx'
|
|
2
|
-
export { default as CopyButtonFrom } from './_copy_button_from.jsx'
|
|
2
|
+
export { default as CopyButtonFrom } from './_copy_button_from.jsx'
|
|
3
|
+
export { default as CopyButtonHook } from './_copy_button_hook.jsx'
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, {useState} from 'react'
|
|
2
2
|
|
|
3
3
|
import FormGroup from '../_form_group'
|
|
4
4
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
|
5
5
|
import Select from '../../pb_select/_select'
|
|
6
6
|
import TextInput from '../../pb_text_input/_text_input'
|
|
7
7
|
import Flex from '../../pb_flex/_flex'
|
|
8
|
+
import Passphrase from '../../pb_passphrase/_passphrase'
|
|
8
9
|
|
|
9
10
|
const FormGroupSelect = (props) => {
|
|
11
|
+
const [input, setInput] = useState("");
|
|
12
|
+
const handleChange = (e) => setInput(e.target.value);
|
|
13
|
+
|
|
10
14
|
const options = [
|
|
11
15
|
{ value: 'Country' },
|
|
12
16
|
{ value: 'Pop' },
|
|
@@ -63,6 +67,20 @@ const FormGroupSelect = (props) => {
|
|
|
63
67
|
{...props}
|
|
64
68
|
/>
|
|
65
69
|
</FormGroup>
|
|
70
|
+
<FormGroup>
|
|
71
|
+
<Select
|
|
72
|
+
blankSelection="Phone"
|
|
73
|
+
options={phoneOptions}
|
|
74
|
+
{...props}
|
|
75
|
+
/>
|
|
76
|
+
<Passphrase
|
|
77
|
+
id="my-passphrase"
|
|
78
|
+
label=""
|
|
79
|
+
onChange={handleChange}
|
|
80
|
+
value={input}
|
|
81
|
+
{...props}
|
|
82
|
+
/>
|
|
83
|
+
</FormGroup>
|
|
66
84
|
</Flex>
|
|
67
85
|
)
|
|
68
86
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
The `collapsibleContent` can display any content, including nested Table Rows.
|
|
2
2
|
|
|
3
|
-
Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
|
3
|
+
Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
|
4
|
+
|
|
5
|
+
**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
The `collapsible_content` can display any content, including nested Table Rows.
|
|
2
2
|
|
|
3
|
-
Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
|
3
|
+
Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
|
|
4
|
+
|
|
5
|
+
**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
The `collapsible_content` can also be used to display nested Tables within each Row.
|
|
1
|
+
The `collapsible_content` can also be used to display nested Tables within each Row.
|
|
2
|
+
|
|
3
|
+
**NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
|
|
3
|
+
import TextInput from '../../pb_text_input/_text_input'
|
|
4
|
+
|
|
5
|
+
const TextInputSanitize = (props) => {
|
|
6
|
+
const ref = React.createRef()
|
|
7
|
+
|
|
8
|
+
const [currency, setCurrency] = useState('')
|
|
9
|
+
const [sanitizedCurrency, setSanitizedCurrency] = useState('')
|
|
10
|
+
const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
|
|
11
|
+
setCurrency(target.value)
|
|
12
|
+
setSanitizedCurrency(sanitizedValue);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const [creditCard, setCreditCard] = useState('')
|
|
16
|
+
const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
|
|
17
|
+
const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
|
|
18
|
+
setCreditCard(target.value)
|
|
19
|
+
setSanitizedCreditCard(sanitizedValue);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const [ssn, setSSN] = useState('')
|
|
23
|
+
const [sanitizedSSN, setSanitizedSSN] = useState('')
|
|
24
|
+
const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
|
|
25
|
+
setSSN(target.value)
|
|
26
|
+
setSanitizedSSN(sanitizedValue);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<div>
|
|
31
|
+
<TextInput
|
|
32
|
+
label="Currency"
|
|
33
|
+
mask="currency"
|
|
34
|
+
onChange={handleOnChangeSanitizeCurrency}
|
|
35
|
+
placeholder="Enter Amount"
|
|
36
|
+
ref={ref}
|
|
37
|
+
value={currency}
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
{currency !== "" && (
|
|
42
|
+
<React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
|
|
43
|
+
)}
|
|
44
|
+
<br />
|
|
45
|
+
{sanitizedCurrency !== "" && (
|
|
46
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
|
|
47
|
+
)}
|
|
48
|
+
|
|
49
|
+
<br />
|
|
50
|
+
<br />
|
|
51
|
+
|
|
52
|
+
<TextInput
|
|
53
|
+
label="Credit Card"
|
|
54
|
+
mask="creditCard"
|
|
55
|
+
onChange={handleOnChangeSanitizeCC}
|
|
56
|
+
placeholder="Enter Card"
|
|
57
|
+
ref={ref}
|
|
58
|
+
value={creditCard}
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
{creditCard !== "" && (
|
|
63
|
+
<React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
|
|
64
|
+
)}
|
|
65
|
+
<br />
|
|
66
|
+
{sanitizedCreditCard !== "" && (
|
|
67
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
|
|
68
|
+
)}
|
|
69
|
+
|
|
70
|
+
<br />
|
|
71
|
+
<br />
|
|
72
|
+
|
|
73
|
+
<TextInput
|
|
74
|
+
label="SSN"
|
|
75
|
+
mask="ssn"
|
|
76
|
+
onChange={handleOnChangeSanitizeSSN}
|
|
77
|
+
placeholder="Enter Amount"
|
|
78
|
+
ref={ref}
|
|
79
|
+
value={ssn}
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
{ssn !== "" && (
|
|
84
|
+
<React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
|
|
85
|
+
)}
|
|
86
|
+
<br />
|
|
87
|
+
{sanitizedSSN !== "" && (
|
|
88
|
+
<React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
|
|
89
|
+
)}
|
|
90
|
+
</div>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export default TextInputSanitize
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
|
|
@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
|
|
|
6
6
|
export { default as TextInputInline } from './_text_input_inline.jsx'
|
|
7
7
|
export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
|
|
8
8
|
export { default as TextInputMask } from './_text_input_mask.jsx'
|
|
9
|
+
export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
|