playbook_ui_docs 13.16.0.pre.alpha.powercentrainplaybookpt22125 → 13.17.0.pre.alpha.nodealphaupgrade2157
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
- data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +48 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +58 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/dist/menu.yml +102 -3
- data/dist/pb_doc_helper.rb +6 -9
- data/dist/playbook-doc.js +9 -9
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e99d154ce104a55d28c67532b2faafeeae5bcec8477ed2789148cf0c7c512318
|
|
4
|
+
data.tar.gz: d5a50110484a244a77226675eb0fc05a0f0a218f55b690fb95230206edea325f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 360ad2dbe74a507b58efc027f27c88a4ecde6f5236db91ad35913dee011df060e99c26b85538537f7ce2190702b468ff50d4fe0e6e1426f557e506b3d665cee6
|
|
7
|
+
data.tar.gz: 60919c258b0c94b2d51f6a3516423ab10c8d93ba230dadfa1c38d2c58bf0aea98620f5bfd183025bb05127dc633f20a81dfc27e85262b6fbbc4b6d0fb92bb82b
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
CHANGED
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
|
4
4
|
</form>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
document.addEventListener('
|
|
9
|
-
|
|
10
|
-
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
|
11
|
-
})
|
|
6
|
+
<%= javascript_tag do %>
|
|
7
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
8
|
+
document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
|
|
9
|
+
if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
|
|
12
10
|
})
|
|
13
|
-
|
|
11
|
+
})
|
|
14
12
|
<% end %>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: {
|
|
2
|
+
dark: true,
|
|
3
|
+
orientation: "row",
|
|
4
|
+
vertical: "center"
|
|
5
|
+
}) do %>
|
|
6
|
+
<%= pb_rails("body", props: { text: "Click info for more details" }) %>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("circle_icon_button", props: {
|
|
9
|
+
variant: "secondary",
|
|
10
|
+
icon: "info",
|
|
11
|
+
id: "actionable-popover-1"
|
|
12
|
+
}) %>
|
|
13
|
+
<%= pb_rails("popover", props: {
|
|
14
|
+
close_on_click: "any",
|
|
15
|
+
trigger_element_id: "actionable-popover-1",
|
|
16
|
+
tooltip_id: "actionable-tooltip-1",
|
|
17
|
+
offset: true,
|
|
18
|
+
position: "top"
|
|
19
|
+
}) do %>
|
|
20
|
+
<%= pb_rails("button", props: { id: "actionable-tooltip-button", text: "Learn more" }) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<%= javascript_tag do %>
|
|
25
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
26
|
+
document.querySelector('#actionable-tooltip-button').addEventListener('click', function (e) {
|
|
27
|
+
alert("Let's do this")
|
|
28
|
+
}, { once: true })
|
|
29
|
+
})
|
|
30
|
+
<% end %>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Body,
|
|
4
|
+
Button,
|
|
5
|
+
CircleIconButton,
|
|
6
|
+
Flex,
|
|
7
|
+
PbReactPopover,
|
|
8
|
+
} from '../..'
|
|
9
|
+
|
|
10
|
+
const PopoverActionableContent = (props) => {
|
|
11
|
+
const [showPopover, setShowPopover] = useState(false)
|
|
12
|
+
|
|
13
|
+
const handleTogglePopover = () => {
|
|
14
|
+
setShowPopover(!showPopover)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const handleShouldClosePopover = (shouldClose) => {
|
|
18
|
+
setShowPopover(!shouldClose)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const popoverReference = (
|
|
22
|
+
<CircleIconButton
|
|
23
|
+
icon="info"
|
|
24
|
+
onClick={handleTogglePopover}
|
|
25
|
+
variant="secondary"
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<Flex
|
|
31
|
+
orientation="row"
|
|
32
|
+
vertical="center"
|
|
33
|
+
{...props}
|
|
34
|
+
>
|
|
35
|
+
<Body text="Click info for more details" />
|
|
36
|
+
|
|
37
|
+
<PbReactPopover
|
|
38
|
+
closeOnClick="inside"
|
|
39
|
+
offset
|
|
40
|
+
placement="top"
|
|
41
|
+
reference={popoverReference}
|
|
42
|
+
shouldClosePopover={handleShouldClosePopover}
|
|
43
|
+
show={showPopover}
|
|
44
|
+
{...props}
|
|
45
|
+
>
|
|
46
|
+
<Body textAlign="center">
|
|
47
|
+
<Button
|
|
48
|
+
onClick={() => {alert("Let's do this!")}}
|
|
49
|
+
text="Learn More"
|
|
50
|
+
/>
|
|
51
|
+
</Body>
|
|
52
|
+
</PbReactPopover>
|
|
53
|
+
</Flex>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default PopoverActionableContent
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- popover_close: Close Options
|
|
6
6
|
- popover_z_index: Set Z-Index
|
|
7
7
|
- popover_scroll_height: Scroll and Height Settings
|
|
8
|
+
- popover_actionable_content: With Actionable Content
|
|
8
9
|
|
|
9
10
|
react:
|
|
10
11
|
- popover_default: Default
|
|
@@ -12,4 +13,4 @@ examples:
|
|
|
12
13
|
- popover_close: Close Options
|
|
13
14
|
- popover_z_index: Set Z-Index
|
|
14
15
|
- popover_scroll_height: Scroll and Height Settings
|
|
15
|
-
|
|
16
|
+
- popover_actionable_content: With Actionable Content
|
|
@@ -3,3 +3,4 @@ export { default as PopoverList } from './_popover_list.jsx'
|
|
|
3
3
|
export { default as PopoverClose } from './_popover_close.jsx'
|
|
4
4
|
export { default as PopoverZIndex } from './_popover_z_index.jsx'
|
|
5
5
|
export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
|
|
6
|
+
export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm", striped: true }) do %>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th>Column 1</th>
|
|
5
|
+
<th>Column 2</th>
|
|
6
|
+
<th>Column 3</th>
|
|
7
|
+
<th>Column 4</th>
|
|
8
|
+
<th>Column 5</th>
|
|
9
|
+
</tr>
|
|
10
|
+
</thead>
|
|
11
|
+
<tbody>
|
|
12
|
+
<tr>
|
|
13
|
+
<td>Value 1</td>
|
|
14
|
+
<td>Value 2</td>
|
|
15
|
+
<td>Value 3</td>
|
|
16
|
+
<td>Value 4</td>
|
|
17
|
+
<td>Value 5</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>Value 1</td>
|
|
21
|
+
<td>Value 2</td>
|
|
22
|
+
<td>Value 3</td>
|
|
23
|
+
<td>Value 4</td>
|
|
24
|
+
<td>Value 5</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Value 1</td>
|
|
28
|
+
<td>Value 2</td>
|
|
29
|
+
<td>Value 3</td>
|
|
30
|
+
<td>Value 4</td>
|
|
31
|
+
<td>Value 5</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td>Value 1</td>
|
|
35
|
+
<td>Value 2</td>
|
|
36
|
+
<td>Value 3</td>
|
|
37
|
+
<td>Value 4</td>
|
|
38
|
+
<td>Value 5</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td>Value 1</td>
|
|
42
|
+
<td>Value 2</td>
|
|
43
|
+
<td>Value 3</td>
|
|
44
|
+
<td>Value 4</td>
|
|
45
|
+
<td>Value 5</td>
|
|
46
|
+
</tr>
|
|
47
|
+
</tbody>
|
|
48
|
+
<% end %>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import Table from "../_table"
|
|
3
|
+
|
|
4
|
+
const TableStriped = (props) => (
|
|
5
|
+
<Table
|
|
6
|
+
striped
|
|
7
|
+
{...props}
|
|
8
|
+
>
|
|
9
|
+
<thead>
|
|
10
|
+
<tr>
|
|
11
|
+
<th>{'Column 1'}</th>
|
|
12
|
+
<th>{'Column 2'}</th>
|
|
13
|
+
<th>{'Column 3'}</th>
|
|
14
|
+
<th>{'Column 4'}</th>
|
|
15
|
+
<th>{'Column 5'}</th>
|
|
16
|
+
</tr>
|
|
17
|
+
</thead>
|
|
18
|
+
<tbody>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>{'Value 1'}</td>
|
|
21
|
+
<td>{'Value 2'}</td>
|
|
22
|
+
<td>{'Value 3'}</td>
|
|
23
|
+
<td>{'Value 4'}</td>
|
|
24
|
+
<td>{'Value 5'}</td>
|
|
25
|
+
</tr>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>{'Value 1'}</td>
|
|
28
|
+
<td>{'Value 2'}</td>
|
|
29
|
+
<td>{'Value 3'}</td>
|
|
30
|
+
<td>{'Value 4'}</td>
|
|
31
|
+
<td>{'Value 5'}</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td>{'Value 1'}</td>
|
|
35
|
+
<td>{'Value 2'}</td>
|
|
36
|
+
<td>{'Value 3'}</td>
|
|
37
|
+
<td>{'Value 4'}</td>
|
|
38
|
+
<td>{'Value 5'}</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td>{'Value 1'}</td>
|
|
42
|
+
<td>{'Value 2'}</td>
|
|
43
|
+
<td>{'Value 3'}</td>
|
|
44
|
+
<td>{'Value 4'}</td>
|
|
45
|
+
<td>{'Value 5'}</td>
|
|
46
|
+
</tr>
|
|
47
|
+
<tr>
|
|
48
|
+
<td>{'Value 1'}</td>
|
|
49
|
+
<td>{'Value 2'}</td>
|
|
50
|
+
<td>{'Value 3'}</td>
|
|
51
|
+
<td>{'Value 4'}</td>
|
|
52
|
+
<td>{'Value 5'}</td>
|
|
53
|
+
</tr>
|
|
54
|
+
</tbody>
|
|
55
|
+
</Table>
|
|
56
|
+
)
|
|
57
|
+
|
|
58
|
+
export default TableStriped
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.
|
|
@@ -23,6 +23,7 @@ examples:
|
|
|
23
23
|
- table_icon_buttons: Table with Icon Buttons
|
|
24
24
|
- table_with_background_kit: Table With Background Kit
|
|
25
25
|
- table_vertical_border: Vertical Borders
|
|
26
|
+
- table_striped: Striped Table
|
|
26
27
|
|
|
27
28
|
react:
|
|
28
29
|
- table_sm: Small
|
|
@@ -47,3 +48,4 @@ examples:
|
|
|
47
48
|
- table_icon_buttons: Table with Icon Buttons
|
|
48
49
|
- table_with_background_kit: Table With Background Kit
|
|
49
50
|
- table_vertical_border: Vertical Borders
|
|
51
|
+
- table_striped: Striped Table
|
|
@@ -20,3 +20,4 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
|
|
|
20
20
|
export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
|
|
21
21
|
export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
|
|
22
22
|
export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
|
|
23
|
+
export { default as TableStriped } from './_table_striped.jsx'
|