playbook_ui_docs 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068 → 14.5.0.pre.alpha.PBNTR614advancedtablepoc4155
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_advanced_table/docs/_advanced_table_custom_cell.jsx +52 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 760c600aa8c70de0805338e22fafc6cf330d9b7328573fb6d815fcabe1f84ca0
|
|
4
|
+
data.tar.gz: bf7ad1901122286dc7f8f0d49cd03f94b6d1f7e9e1bafb94e831a2eea62b6c92
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c827a3dca81bc5dd9f8aea745a0349a8de7929de5766c6ee5ab775479b515e7c541a81635ed1813e66e06657bd2ab3a9ec566a1d068179756fd511ed681f2ebc
|
|
7
|
+
data.tar.gz: 2e5e9cbca84a88466f3ecb50577a9a4a6c67388ddf7d7d4e5ed6b6657468299923a8e6bab766d022d062b27fe27cc0a15fb4fb6f913f8bb0cd936a91bc0007df
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { AdvancedTable, Pill, Body } from "playbook-ui"
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableCustomCell = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
customRenderer: (row, value) => <Pill text={value} />,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
accessor: "scheduledMeetings",
|
|
20
|
+
label: "Scheduled Meetings",
|
|
21
|
+
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
accessor: "attendanceRate",
|
|
25
|
+
label: "Attendance Rate",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "completedClasses",
|
|
29
|
+
label: "Completed Classes",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
accessor: "classCompletionRate",
|
|
33
|
+
label: "Class Completion Rate",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
accessor: "graduatedStudents",
|
|
37
|
+
label: "Graduated Students",
|
|
38
|
+
},
|
|
39
|
+
]
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div>
|
|
43
|
+
<AdvancedTable
|
|
44
|
+
columnDefinitions={columnDefinitions}
|
|
45
|
+
tableData={MOCK_DATA}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export default AdvancedTableCustomCell
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
5
5
|
- advanced_table_beta_sort: Enable Sorting
|
|
6
|
+
|
|
6
7
|
react:
|
|
7
8
|
- advanced_table_default: Default (Required Props)
|
|
8
9
|
- advanced_table_loading: Loading State
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- advanced_table_table_props: Table Props
|
|
16
17
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
17
18
|
- advanced_table_responsive: Responsive Tables
|
|
19
|
+
- advanced_table_custom_cell: Custom Components for Cells
|
|
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
|
|
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
|
10
10
|
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
|
11
11
|
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
|
12
|
+
export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{
|
|
6
|
+
label: "United States",
|
|
7
|
+
value: "United States",
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
label: "Canada",
|
|
11
|
+
value: "Canada",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Pakistan",
|
|
15
|
+
value: "Pakistan",
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const DropdownClearSelection = (props) => {
|
|
20
|
+
const dropdownRef = useRef(null)
|
|
21
|
+
|
|
22
|
+
const handleReset = () => {
|
|
23
|
+
if (dropdownRef.current) {
|
|
24
|
+
dropdownRef.current.clearSelected()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<Dropdown
|
|
31
|
+
defaultValue={options[2]}
|
|
32
|
+
options={options}
|
|
33
|
+
ref={dropdownRef}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<Button
|
|
37
|
+
marginTop="md"
|
|
38
|
+
onClick={handleReset}
|
|
39
|
+
text="Reset"
|
|
40
|
+
/>
|
|
41
|
+
</>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default DropdownClearSelection
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
|
@@ -22,6 +22,7 @@ examples:
|
|
|
22
22
|
- dropdown_error: Dropdown with Error
|
|
23
23
|
- dropdown_default_value: Default Value
|
|
24
24
|
- dropdown_blank_selection: Blank Selection
|
|
25
|
+
- dropdown_clear_selection: Clear Selection
|
|
25
26
|
# - dropdown_with_autocomplete: Autocomplete
|
|
26
27
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
|
27
28
|
# - dropdown_with_external_control: useDropdown Hook
|
|
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
15
|
+
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-reset-example",
|
|
69
|
+
name: "my_array",
|
|
70
|
+
tree_data: treeData,
|
|
71
|
+
return_all_selected: true
|
|
72
|
+
}) %>
|
|
73
|
+
|
|
74
|
+
<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<script>
|
|
78
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
79
|
+
const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
|
|
80
|
+
|
|
81
|
+
exampleResetButton.addEventListener("click", () => {
|
|
82
|
+
clearMultiLevelSelectById('multi-level-select-reset-example');
|
|
83
|
+
});
|
|
84
|
+
function clearMultiLevelSelectById(id) {
|
|
85
|
+
const clearFunction = window[`clearMultiLevelSelect_${id}`];
|
|
86
|
+
if (clearFunction) {
|
|
87
|
+
clearFunction();
|
|
88
|
+
} else {
|
|
89
|
+
console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
})
|
|
93
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.
|
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
ADDED
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("flex") do %>
|
|
4
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
5
|
+
|
|
6
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
7
|
+
variant: "bubble",
|
|
8
|
+
size: "sm",
|
|
9
|
+
users: [
|
|
10
|
+
{
|
|
11
|
+
name: "Patrick Welch",
|
|
12
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
13
|
+
}
|
|
14
|
+
]
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<% end %>
|
|
18
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
19
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
20
|
+
size: "sm",
|
|
21
|
+
variant: "bubble",
|
|
22
|
+
users: [
|
|
23
|
+
{
|
|
24
|
+
name: "Patrick Welch",
|
|
25
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
name: "Lucille Sanchez",
|
|
29
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
35
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
36
|
+
size: "sm",
|
|
37
|
+
variant: "bubble",
|
|
38
|
+
users: [
|
|
39
|
+
{
|
|
40
|
+
name: "Patrick Welch",
|
|
41
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: "Lucille Sanchez",
|
|
45
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: "Beverly Reyes",
|
|
49
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
50
|
+
},
|
|
51
|
+
]
|
|
52
|
+
}) %>
|
|
53
|
+
<% end %>
|
|
54
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
55
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
56
|
+
size: "sm",
|
|
57
|
+
variant: "bubble",
|
|
58
|
+
users: [
|
|
59
|
+
{
|
|
60
|
+
name: "Patrick Welch",
|
|
61
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: "Lucille Sanchez",
|
|
65
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
name: "Beverly Reyes",
|
|
69
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
name: "Keith Craig",
|
|
73
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: "Alicia Cooper",
|
|
77
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}) %>
|
|
81
|
+
<% end %>
|
|
82
|
+
<% end %>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
<%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
|
|
87
|
+
|
|
88
|
+
<%= pb_rails("flex") do %>
|
|
89
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
90
|
+
|
|
91
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
92
|
+
size: "md",
|
|
93
|
+
variant: "bubble",
|
|
94
|
+
users: [
|
|
95
|
+
{
|
|
96
|
+
name: "Patrick Welch",
|
|
97
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
}) %>
|
|
101
|
+
|
|
102
|
+
<% end %>
|
|
103
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
104
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
105
|
+
size: "md",
|
|
106
|
+
variant: "bubble",
|
|
107
|
+
users: [
|
|
108
|
+
{
|
|
109
|
+
name: "Patrick Welch",
|
|
110
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: "Lucille Sanchez",
|
|
114
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}) %>
|
|
118
|
+
<% end %>
|
|
119
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
120
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
121
|
+
size: "md",
|
|
122
|
+
variant: "bubble",
|
|
123
|
+
users: [
|
|
124
|
+
{
|
|
125
|
+
name: "Patrick Welch",
|
|
126
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
name: "Lucille Sanchez",
|
|
130
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
name: "Beverly Reyes",
|
|
134
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
135
|
+
},
|
|
136
|
+
]
|
|
137
|
+
}) %>
|
|
138
|
+
<% end %>
|
|
139
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
140
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
141
|
+
size: "md",
|
|
142
|
+
variant: "bubble",
|
|
143
|
+
users: [
|
|
144
|
+
{
|
|
145
|
+
name: "Patrick Welch",
|
|
146
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
name: "Lucille Sanchez",
|
|
150
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
name: "Beverly Reyes",
|
|
154
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
name: "Keith Craig",
|
|
158
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
name: "Alicia Cooper",
|
|
162
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
163
|
+
}
|
|
164
|
+
]
|
|
165
|
+
}) %>
|
|
166
|
+
<% end %>
|
|
167
|
+
<% end %>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
<%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
|
|
172
|
+
|
|
173
|
+
<%= pb_rails("flex") do %>
|
|
174
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
175
|
+
|
|
176
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
177
|
+
size: "lg",
|
|
178
|
+
variant: "bubble",
|
|
179
|
+
users: [
|
|
180
|
+
{
|
|
181
|
+
name: "Patrick Welch",
|
|
182
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
183
|
+
}
|
|
184
|
+
]
|
|
185
|
+
}) %>
|
|
186
|
+
|
|
187
|
+
<% end %>
|
|
188
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
189
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
190
|
+
size: "lg",
|
|
191
|
+
variant: "bubble",
|
|
192
|
+
users: [
|
|
193
|
+
{
|
|
194
|
+
name: "Patrick Welch",
|
|
195
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
name: "Lucille Sanchez",
|
|
199
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
200
|
+
}
|
|
201
|
+
]
|
|
202
|
+
}) %>
|
|
203
|
+
<% end %>
|
|
204
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
205
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
206
|
+
size: "lg",
|
|
207
|
+
variant: "bubble",
|
|
208
|
+
users: [
|
|
209
|
+
{
|
|
210
|
+
name: "Patrick Welch",
|
|
211
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
name: "Lucille Sanchez",
|
|
215
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
name: "Beverly Reyes",
|
|
219
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
220
|
+
},
|
|
221
|
+
]
|
|
222
|
+
}) %>
|
|
223
|
+
<% end %>
|
|
224
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
225
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
226
|
+
size: "lg",
|
|
227
|
+
variant: "bubble",
|
|
228
|
+
users: [
|
|
229
|
+
{
|
|
230
|
+
name: "Patrick Welch",
|
|
231
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
name: "Lucille Sanchez",
|
|
235
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
name: "Beverly Reyes",
|
|
239
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
name: "Keith Craig",
|
|
243
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
name: "Alicia Cooper",
|
|
247
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
248
|
+
}
|
|
249
|
+
]
|
|
250
|
+
}) %>
|
|
251
|
+
<% end %>
|
|
252
|
+
<% end %>
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
|
|
256
|
+
|
|
257
|
+
<%= pb_rails("flex") do %>
|
|
258
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
259
|
+
|
|
260
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
261
|
+
size: "xl",
|
|
262
|
+
variant: "bubble",
|
|
263
|
+
users: [
|
|
264
|
+
{
|
|
265
|
+
name: "Patrick Welch",
|
|
266
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
267
|
+
}
|
|
268
|
+
]
|
|
269
|
+
}) %>
|
|
270
|
+
|
|
271
|
+
<% end %>
|
|
272
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
273
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
274
|
+
size: "xl",
|
|
275
|
+
variant: "bubble",
|
|
276
|
+
users: [
|
|
277
|
+
{
|
|
278
|
+
name: "Patrick Welch",
|
|
279
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
name: "Lucille Sanchez",
|
|
283
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
284
|
+
}
|
|
285
|
+
]
|
|
286
|
+
}) %>
|
|
287
|
+
<% end %>
|
|
288
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
289
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
290
|
+
size: "xl",
|
|
291
|
+
variant: "bubble",
|
|
292
|
+
users: [
|
|
293
|
+
{
|
|
294
|
+
name: "Patrick Welch",
|
|
295
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
name: "Lucille Sanchez",
|
|
299
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
name: "Beverly Reyes",
|
|
303
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
304
|
+
},
|
|
305
|
+
]
|
|
306
|
+
}) %>
|
|
307
|
+
<% end %>
|
|
308
|
+
<%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
|
|
309
|
+
<%= pb_rails("multiple_users_stacked", props: {
|
|
310
|
+
size: "xl",
|
|
311
|
+
variant: "bubble",
|
|
312
|
+
users: [
|
|
313
|
+
{
|
|
314
|
+
name: "Patrick Welch",
|
|
315
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
name: "Lucille Sanchez",
|
|
319
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
name: "Beverly Reyes",
|
|
323
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
name: "Keith Craig",
|
|
327
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
name: "Alicia Cooper",
|
|
331
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
|
332
|
+
}
|
|
333
|
+
]
|
|
334
|
+
}) %>
|
|
335
|
+
<% end %>
|
|
336
|
+
<% end %>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Flex from '../../pb_flex/_flex'
|
|
3
|
+
import Title from '../../pb_title/_title'
|
|
4
|
+
import MultipleUsersStacked from '../_multiple_users_stacked'
|
|
5
|
+
|
|
6
|
+
const MultipleUsersStackedSize = (props) => {
|
|
7
|
+
const sizes = [
|
|
8
|
+
{ label: 'S', size: 'sm' },
|
|
9
|
+
{ label: 'M', size: 'md' },
|
|
10
|
+
{ label: 'L', size: 'lg' },
|
|
11
|
+
{ label: 'XL', size: 'xl' },
|
|
12
|
+
]
|
|
13
|
+
|
|
14
|
+
const usersList = [
|
|
15
|
+
[
|
|
16
|
+
{
|
|
17
|
+
name: 'Patrick Welch',
|
|
18
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
[
|
|
22
|
+
{
|
|
23
|
+
name: 'Patrick Welch',
|
|
24
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: 'Lucille Sanchez',
|
|
28
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
|
29
|
+
},
|
|
30
|
+
],
|
|
31
|
+
[
|
|
32
|
+
{
|
|
33
|
+
name: 'Patrick Welch',
|
|
34
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'Lucille Sanchez',
|
|
38
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: 'Beverly Reyes',
|
|
42
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
[
|
|
46
|
+
{
|
|
47
|
+
name: 'Patrick Welch',
|
|
48
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
name: 'Lucille Sanchez',
|
|
52
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'Beverly Reyes',
|
|
56
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'Keith Craig',
|
|
60
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: 'Alicia Cooper',
|
|
64
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
]
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<>
|
|
71
|
+
{sizes.map(({ label, size }) => (
|
|
72
|
+
<Flex key={size}
|
|
73
|
+
orientation="column"
|
|
74
|
+
>
|
|
75
|
+
<Title paddingTop='sm' >{label}</Title>
|
|
76
|
+
<Flex>
|
|
77
|
+
{usersList.map((users, index) => (
|
|
78
|
+
<Flex key={index}
|
|
79
|
+
paddingRight='sm'
|
|
80
|
+
>
|
|
81
|
+
<MultipleUsersStacked
|
|
82
|
+
size={size}
|
|
83
|
+
users={users}
|
|
84
|
+
variant="bubble"
|
|
85
|
+
{...props}
|
|
86
|
+
/>
|
|
87
|
+
</Flex>
|
|
88
|
+
))}
|
|
89
|
+
</Flex>
|
|
90
|
+
<br />
|
|
91
|
+
</Flex>
|
|
92
|
+
))}
|
|
93
|
+
</>
|
|
94
|
+
)
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export default MultipleUsersStackedSize
|