playbook_ui_docs 14.12.0.pre.rc.12 → 14.13.0.pre.alpha.PBNTR5596029
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_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +5 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +99 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +61 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +89 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -5
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +58 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb +15 -0
- data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +29 -0
- data/app/pb_kits/playbook/pb_link/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_link/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +39 -4
- /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
// Initial items to be dragged
|
|
5
|
+
const data = [
|
|
6
|
+
{
|
|
7
|
+
id: "1",
|
|
8
|
+
task: "Task 1",
|
|
9
|
+
assignee_name: "Terry Miles",
|
|
10
|
+
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
id: "2",
|
|
14
|
+
task: "Task 2",
|
|
15
|
+
assignee_name: "Sophia Miles",
|
|
16
|
+
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
id: "3",
|
|
20
|
+
task: "Task 3",
|
|
21
|
+
assignee_name: "Alice Jones",
|
|
22
|
+
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: "4",
|
|
26
|
+
task: "Task 4",
|
|
27
|
+
assignee_name: "Mike James",
|
|
28
|
+
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: "5",
|
|
32
|
+
task: "Task 5",
|
|
33
|
+
assignee_name: "James Guy",
|
|
34
|
+
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
const DraggableWithTableReact = (props) => {
|
|
39
|
+
const [initialState, setInitialState] = useState(data);
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<>
|
|
43
|
+
<DraggableProvider initialItems={data}
|
|
44
|
+
onReorder={(items) => setInitialState(items)}
|
|
45
|
+
>
|
|
46
|
+
<Table
|
|
47
|
+
responsive="none"
|
|
48
|
+
size="sm"
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<Table.Head>
|
|
52
|
+
<Table.Row>
|
|
53
|
+
<Table.Header>{"id"}</Table.Header>
|
|
54
|
+
<Table.Header>{"name"}</Table.Header>
|
|
55
|
+
<Table.Header>{"task number"}</Table.Header>
|
|
56
|
+
</Table.Row>
|
|
57
|
+
</Table.Head>
|
|
58
|
+
<Table.Body draggableContainer>
|
|
59
|
+
{initialState.map(({ id, task, assignee_name, assignee_img }) => (
|
|
60
|
+
<Table.Row
|
|
61
|
+
dragId={id}
|
|
62
|
+
draggableItem
|
|
63
|
+
key={id}
|
|
64
|
+
>
|
|
65
|
+
<Table.Cell>{id}</Table.Cell>
|
|
66
|
+
<Table.Cell>
|
|
67
|
+
<Flex align="center">
|
|
68
|
+
<Avatar
|
|
69
|
+
imageUrl={assignee_img}
|
|
70
|
+
size="xs"
|
|
71
|
+
/>
|
|
72
|
+
<Body
|
|
73
|
+
paddingLeft="xxs"
|
|
74
|
+
text={assignee_name}
|
|
75
|
+
/>
|
|
76
|
+
</Flex>
|
|
77
|
+
</Table.Cell>
|
|
78
|
+
<Table.Cell>{task}</Table.Cell>
|
|
79
|
+
</Table.Row>
|
|
80
|
+
))}
|
|
81
|
+
</Table.Body>
|
|
82
|
+
</Table>
|
|
83
|
+
</DraggableProvider>
|
|
84
|
+
</>
|
|
85
|
+
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export default DraggableWithTableReact;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
|
2
|
+
|
|
3
|
+
- Wrap the Table with the `DraggableProvider` and manage state as shown.
|
|
4
|
+
- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
|
|
5
|
+
- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
3
|
-
|
|
4
2
|
react:
|
|
5
3
|
- draggable_default: Default
|
|
6
4
|
- draggable_with_list: Draggable with List Kit
|
|
7
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
8
6
|
- draggable_with_cards: Draggable with Cards
|
|
9
7
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
10
|
-
|
|
8
|
+
- draggable_with_table_react: Draggable with Table
|
|
9
|
+
|
|
11
10
|
rails:
|
|
12
11
|
- draggable_default_rails: Default
|
|
13
12
|
- draggable_with_list_rails: Draggable with List Kit
|
|
14
13
|
- draggable_with_selectable_list_rails: Draggable with SelectableList Kit
|
|
15
14
|
- draggable_with_cards_rails: Draggable with Cards
|
|
15
|
+
- draggable_with_table: Draggable with Table
|
|
16
|
+
- draggable_multiple_containers_rails: Dragging Across Multiple Containers
|
|
16
17
|
|
|
17
|
-
|
|
18
|
-
|
|
@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
|
|
|
2
2
|
export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
|
|
3
3
|
export { default as DraggableWithList } from './_draggable_with_list.jsx'
|
|
4
4
|
export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
|
|
5
|
-
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
|
5
|
+
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
|
6
|
+
export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
|
|
2
|
+
<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
5
|
+
auto_close: 3000,
|
|
6
|
+
classname: "toast-to-hide",
|
|
7
|
+
id: "toast-auto-close",
|
|
8
|
+
text: "I will disappear in 3 seconds.",
|
|
9
|
+
status: "tip",
|
|
10
|
+
vertical: "top",
|
|
11
|
+
horizontal: "center"
|
|
12
|
+
}) %>
|
|
13
|
+
|
|
14
|
+
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
15
|
+
auto_close: 10000,
|
|
16
|
+
closeable: true,
|
|
17
|
+
id: "toast-auto-close-closeable",
|
|
18
|
+
text: "I will disappear in 10 seconds.",
|
|
19
|
+
status: "tip",
|
|
20
|
+
vertical: "top",
|
|
21
|
+
horizontal: "center"
|
|
22
|
+
}) %>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
26
|
+
// Initialize toast elements and buttons
|
|
27
|
+
const toasts = {
|
|
28
|
+
'#toast-auto-close': document.querySelector("#toast-auto-close"),
|
|
29
|
+
'#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const buttons = {
|
|
33
|
+
'#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
|
|
34
|
+
'#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Store original toasts and remove them from DOM
|
|
38
|
+
const originalToasts = {}
|
|
39
|
+
Object.entries(toasts).forEach(([id, toast]) => {
|
|
40
|
+
if (toast) {
|
|
41
|
+
originalToasts[id] = toast.cloneNode(true)
|
|
42
|
+
toast.remove()
|
|
43
|
+
}
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
// Set up button click handlers
|
|
47
|
+
Object.keys(buttons).forEach((toastId) => {
|
|
48
|
+
const button = buttons[toastId]
|
|
49
|
+
if (button) {
|
|
50
|
+
button.onclick = () => {
|
|
51
|
+
const newToast = originalToasts[toastId].cloneNode(true)
|
|
52
|
+
newToast.style.display = "flex"
|
|
53
|
+
document.body.appendChild(newToast)
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
})
|
|
57
|
+
})
|
|
58
|
+
</script>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
|
|
2
|
+
|
|
3
|
+
The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
|
|
@@ -5,6 +5,7 @@ examples:
|
|
|
5
5
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
6
6
|
- fixed_confirmation_toast_close: Click to Close
|
|
7
7
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
8
|
+
- fixed_confirmation_toast_auto_close: Click to Show Auto Close
|
|
8
9
|
- fixed_confirmation_toast_children: Children
|
|
9
10
|
- fixed_confirmation_toast_custom_icon: Custom Icon
|
|
10
11
|
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= pb_rails("home_address_street", props: {
|
|
2
|
+
address: "70 pRoSpEcT ave",
|
|
3
|
+
address_cont: "Apt M18",
|
|
4
|
+
city: "West Chester",
|
|
5
|
+
home_id: 8250263,
|
|
6
|
+
home_url: "https://powerhrg.com/",
|
|
7
|
+
preserve_case: true,
|
|
8
|
+
state: "pa",
|
|
9
|
+
zipcode: "19382",
|
|
10
|
+
territory: "PHL",
|
|
11
|
+
}) %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import HomeAddressStreet from '../_home_address_street'
|
|
4
|
+
|
|
5
|
+
const HomeAddressStreetFormatting = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<HomeAddressStreet
|
|
8
|
+
address="70 pRoSpEcT ave"
|
|
9
|
+
addressCont="Apt M18"
|
|
10
|
+
city="West Chester"
|
|
11
|
+
homeId="8250263"
|
|
12
|
+
homeUrl="https://powerhrg.com/"
|
|
13
|
+
preserveCase
|
|
14
|
+
state="pa"
|
|
15
|
+
territory="PHL"
|
|
16
|
+
zipcode="19382"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default HomeAddressStreetFormatting
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
|
|
@@ -5,12 +5,14 @@ examples:
|
|
|
5
5
|
- home_address_street_emphasis: Emphasis
|
|
6
6
|
- home_address_street_modified: Modified
|
|
7
7
|
- home_address_street_link: Link
|
|
8
|
+
- home_address_street_formatting: Formatting
|
|
8
9
|
|
|
9
10
|
react:
|
|
10
11
|
- home_address_street_default: Default
|
|
11
12
|
- home_address_street_emphasis: Emphasis
|
|
12
13
|
- home_address_street_modified: Modified
|
|
13
14
|
- home_address_street_link: Link
|
|
15
|
+
- home_address_street_formatting: Formatting
|
|
14
16
|
|
|
15
17
|
swift:
|
|
16
18
|
- home_address_street_default_swift: Default
|
|
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
|
|
|
2
2
|
export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
|
|
3
3
|
export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
|
|
4
4
|
export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
|
|
5
|
+
export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div>
|
|
2
|
+
<%= pb_rails("link", props: {
|
|
3
|
+
href: "http://google.com",
|
|
4
|
+
target: "blank",
|
|
5
|
+
text: "Open In New Window"
|
|
6
|
+
}) %>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div>
|
|
10
|
+
<%= pb_rails("link", props: {
|
|
11
|
+
href: "https://playbook.powerapp.cloud/",
|
|
12
|
+
target: "child",
|
|
13
|
+
text: "Open In Child Tab",
|
|
14
|
+
}) %>
|
|
15
|
+
</div>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Link } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const LinkTarget = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<div>
|
|
7
|
+
<Link
|
|
8
|
+
aria={{ label: 'Link to Google in new window' }}
|
|
9
|
+
href="https://google.com"
|
|
10
|
+
tabIndex={0}
|
|
11
|
+
target='blank'
|
|
12
|
+
text="Open In New Window"
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<Link
|
|
18
|
+
aria={{ label: 'Link to Playbook in a child tab' }}
|
|
19
|
+
href="https://playbook.powerapp.cloud/"
|
|
20
|
+
tabIndex={0}
|
|
21
|
+
target='child'
|
|
22
|
+
text="Open In Child Tab"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
export default LinkTarget
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- link_color: Color
|
|
5
5
|
- link_underline: Underline
|
|
6
6
|
- link_icon: Icon
|
|
7
7
|
- link_disabled: Disabled
|
|
8
8
|
- link_tag: Tag
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
- link_target: Target
|
|
10
|
+
|
|
11
|
+
|
|
11
12
|
react:
|
|
12
13
|
- link_color: Color
|
|
13
14
|
- link_underline: Underline
|
|
14
15
|
- link_icon: Icon
|
|
15
16
|
- link_disabled: Disabled
|
|
16
17
|
- link_tag: Tag
|
|
18
|
+
- link_target: Target
|
|
@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
|
|
|
2
2
|
export { default as LinkUnderline } from './_link_underline.jsx'
|
|
3
3
|
export { default as LinkIcon } from './_link_icon.jsx'
|
|
4
4
|
export { default as LinkDisabled } from './_link_disabled.jsx'
|
|
5
|
-
export { default as LinkTag } from './_link_tag.jsx'
|
|
5
|
+
export { default as LinkTag } from './_link_tag.jsx'
|
|
6
|
+
export { default as LinkTarget } from './_link_target.jsx'
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
|
|
3
3
|
step 1
|
|
4
4
|
<% end %>
|
|
5
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
|
|
5
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
6
6
|
step 2
|
|
7
7
|
<% end %>
|
|
8
8
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
|
|
12
12
|
step 4
|
|
13
13
|
<% end %>
|
|
14
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
|
|
14
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
|
|
15
15
|
step 5
|
|
16
16
|
<% end %>
|
|
17
17
|
<% end %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<br /><br />
|
|
20
20
|
|
|
21
21
|
<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
|
|
22
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
|
|
22
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
|
|
23
23
|
<% end %>
|
|
24
24
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
|
|
25
25
|
<% end %>
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
|
|
32
32
|
<br /><br>
|
|
33
33
|
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
|
|
34
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"
|
|
34
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
|
|
35
35
|
<%= pb_rails("caption", props:{text: "Ordered"})%>
|
|
36
36
|
<% end %>
|
|
37
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
|
|
37
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
|
|
38
38
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
39
39
|
<% end %>
|
|
40
40
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
|
|
51
51
|
<%= pb_rails("caption", props:{text: "Shipped"})%>
|
|
52
52
|
<% end %>
|
|
53
|
-
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
|
|
53
|
+
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
|
|
54
54
|
<%= pb_rails("caption", props:{text: "Out for Delivery"})%>
|
|
55
55
|
<% end %>
|
|
56
56
|
<%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
|
|
@@ -39,20 +39,17 @@
|
|
|
39
39
|
</tr>
|
|
40
40
|
</tbody>
|
|
41
41
|
<% end %>
|
|
42
|
-
|
|
43
42
|
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
|
|
44
43
|
<colgroup>
|
|
45
44
|
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
|
|
46
|
-
<%= pb_rails("background", props: { background_color: "
|
|
45
|
+
<%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
|
|
47
46
|
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
|
|
48
47
|
</colgroup>
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</tr>
|
|
55
|
-
<% end %>
|
|
48
|
+
<thead>
|
|
49
|
+
<th>Column 1</th>
|
|
50
|
+
<th>Column 2</th>
|
|
51
|
+
<th>Column 3</th>
|
|
52
|
+
</thead>
|
|
56
53
|
<tbody>
|
|
57
54
|
<tr>
|
|
58
55
|
<td>Value 1</td>
|
|
@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
|
|
|
68
68
|
tag='col'
|
|
69
69
|
/>
|
|
70
70
|
<Background
|
|
71
|
-
backgroundColor="
|
|
71
|
+
backgroundColor="info_subtle"
|
|
72
72
|
tag='col'
|
|
73
73
|
/>
|
|
74
74
|
<Background
|
|
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
|
|
|
76
76
|
tag='col'
|
|
77
77
|
/>
|
|
78
78
|
</colgroup>
|
|
79
|
-
<
|
|
80
|
-
backgroundColor="card_light"
|
|
81
|
-
tag='thead'
|
|
82
|
-
>
|
|
79
|
+
<thead>
|
|
83
80
|
<tr>
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
<th>{'Column 1'}</th>
|
|
82
|
+
<th>{'Column 2'}</th>
|
|
83
|
+
<th>{'Column 3'}</th>
|
|
87
84
|
</tr>
|
|
88
|
-
</
|
|
85
|
+
</thead>
|
|
89
86
|
<tbody>
|
|
90
87
|
<tr>
|
|
91
88
|
<td>{'Value 1'}</td>
|
|
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
8
8
|
<Card
|
|
9
9
|
borderNone
|
|
10
10
|
borderRadius="none"
|
|
11
|
-
color="light"
|
|
11
|
+
color="light"
|
|
12
12
|
paddingX="xl"
|
|
13
13
|
paddingY="md"
|
|
14
14
|
{...props}
|
|
15
15
|
>
|
|
16
|
-
<Body paddingBottom="sm"
|
|
16
|
+
<Body paddingBottom="sm"
|
|
17
17
|
text="Expanded Custom Layout"
|
|
18
18
|
{...props}
|
|
19
19
|
/>
|
|
20
20
|
<Flex justify="between">
|
|
21
21
|
<Image
|
|
22
|
-
|
|
22
|
+
size="sm"
|
|
23
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
23
24
|
/>
|
|
24
25
|
<Image
|
|
25
|
-
|
|
26
|
+
size="sm"
|
|
27
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
26
28
|
/>
|
|
27
29
|
<Image
|
|
28
|
-
|
|
30
|
+
size="sm"
|
|
31
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
29
32
|
/>
|
|
30
33
|
<Image
|
|
31
|
-
|
|
34
|
+
size="sm"
|
|
35
|
+
url="https://unsplash.it/500/400/?image=634"
|
|
32
36
|
/>
|
|
33
37
|
</Flex>
|
|
34
38
|
</Card>
|
|
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
52
56
|
|
|
53
57
|
</Table.Head>
|
|
54
58
|
<Table.Body>
|
|
55
|
-
<Table.Row collapsible
|
|
59
|
+
<Table.Row collapsible
|
|
56
60
|
collapsibleContent={<Content/>}
|
|
57
61
|
{...props}
|
|
58
62
|
>
|
|
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
|
|
|
61
65
|
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
62
66
|
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
63
67
|
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
64
|
-
<Table.Cell textAlign="right">{
|
|
68
|
+
<Table.Cell textAlign="right">{
|
|
65
69
|
<Icon
|
|
66
70
|
color="primary"
|
|
67
71
|
fixedWidth
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
|
|
3
|
+
<%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
|
|
4
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
|
5
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
6
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
7
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
8
|
+
<%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|
|
File without changes
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<% content = capture do %>
|
|
2
|
+
<%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
|
|
3
|
+
<%= pb_rails("background", props: { tag: "tr" }) do %>
|
|
4
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
5
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
6
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
7
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
8
|
+
<%= pb_rails("table/table_cell") do %>Expanded<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
|
|
17
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
|
|
18
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
|
|
19
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
|
|
20
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
|
|
21
|
+
<%= pb_rails("table/table_header", props: { text: ""}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
24
|
+
<%= pb_rails("table/table_body") do %>
|
|
25
|
+
<%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
31
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
|
|
32
|
+
<%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
35
|
+
<%= pb_rails("table/table_row") do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<%= pb_rails("table/table_row") do %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
|
|
45
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
|
|
46
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
|
|
47
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
|
|
48
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
|
|
49
|
+
<%= pb_rails("table/table_cell", props: { text: ""}) %>
|
|
50
|
+
<% end %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<% end %>
|