playbook_ui_docs 14.17.0.pre.alpha.play1966highchartsgaugedefaultpoc7331 → 14.17.0.pre.alpha.play2065passphrasewithselect7273
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/example.yml +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +2 -8
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -35
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 14.17.0.pre.alpha.
|
|
4
|
+
version: 14.17.0.pre.alpha.play2065passphrasewithselect7273
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-04-
|
|
12
|
+
date: 2025-04-18 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -459,8 +459,6 @@ files:
|
|
|
459
459
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
|
460
460
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
|
|
461
461
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
|
|
462
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx
|
|
463
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
|
|
464
462
|
- app/pb_kits/playbook/pb_copy_button/docs/example.yml
|
|
465
463
|
- app/pb_kits/playbook/pb_copy_button/docs/index.js
|
|
466
464
|
- app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
|
|
@@ -998,8 +996,6 @@ files:
|
|
|
998
996
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
|
|
999
997
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
|
|
1000
998
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md
|
|
1001
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx
|
|
1002
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md
|
|
1003
999
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
|
|
1004
1000
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
|
|
1005
1001
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md
|
|
@@ -2016,8 +2012,6 @@ files:
|
|
|
2016
2012
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
|
|
2017
2013
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
|
|
2018
2014
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
|
|
2019
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx
|
|
2020
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md
|
|
2021
2015
|
- app/pb_kits/playbook/pb_text_input/docs/example.yml
|
|
2022
2016
|
- app/pb_kits/playbook/pb_text_input/docs/index.js
|
|
2023
2017
|
- app/pb_kits/playbook/pb_textarea/docs/_description.md
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
|
@@ -1,3 +0,0 @@
|
|
|
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,35 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import gaugeTheme from '../gaugeTheme'
|
|
3
|
-
import Highcharts from "highcharts"
|
|
4
|
-
import HighchartsReact from "highcharts-react-official"
|
|
5
|
-
import HighchartsMore from "highcharts/highcharts-more"
|
|
6
|
-
import SolidGauge from "highcharts/modules/solid-gauge"
|
|
7
|
-
import '../GaugeStyles.scss'
|
|
8
|
-
// Your path might look more like this
|
|
9
|
-
//import "playbook-ui/dist/pb_bar_graph/GaugeThemeStyles.scss";
|
|
10
|
-
|
|
11
|
-
HighchartsMore(Highcharts);
|
|
12
|
-
SolidGauge(Highcharts);
|
|
13
|
-
|
|
14
|
-
const data = [{ name: "Name", y: 45 }]
|
|
15
|
-
|
|
16
|
-
const baseOptions = {
|
|
17
|
-
chart: { type: "solidgauge" },
|
|
18
|
-
title: { text: "" },
|
|
19
|
-
series: [{ data: data }],
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const GaugePbStyles = () => {
|
|
23
|
-
const options = Highcharts.merge({}, gaugeTheme, baseOptions);
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<div>
|
|
27
|
-
<HighchartsReact
|
|
28
|
-
highcharts={Highcharts}
|
|
29
|
-
options={options}
|
|
30
|
-
/>
|
|
31
|
-
</div>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export default GaugePbStyles;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge graph. Just import gaugeTheme.ts and GaugeStyles.scss into your component, and the styles will apply automatically.
|
|
@@ -1,94 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
|