playbook_ui 14.5.0.pre.alpha.PBNTR595popoverwidthpropfilterpopoverprop4158 → 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068
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_dropdown/_dropdown.tsx +4 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +0 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +1 -4
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -17
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -5
- data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -3
- data/dist/chunks/{_typeahead-BKndSDgc.js → _typeahead-CT2ByCBK.js} +1 -1
- data/dist/chunks/_weekday_stacked-BFqyoTft.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx +0 -71
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md +0 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
- data/dist/chunks/_weekday_stacked-DBH_rF_4.js +0 -45
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.5.0.pre.alpha.
|
4
|
+
version: 14.5.0.pre.alpha.PBNTR600reactfilterdisplayzeroresults4068
|
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: 2024-10-
|
12
|
+
date: 2024-10-15 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1126,8 +1126,6 @@ files:
|
|
1126
1126
|
- app/pb_kits/playbook/pb_dropdown/context/index.tsx
|
1127
1127
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
|
1128
1128
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
|
1129
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
|
1130
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
|
1131
1129
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
|
1132
1130
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
1133
1131
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
|
@@ -1216,10 +1214,6 @@ files:
|
|
1216
1214
|
- app/pb_kits/playbook/pb_filter/_filter.scss
|
1217
1215
|
- app/pb_kits/playbook/pb_filter/_filter.tsx
|
1218
1216
|
- app/pb_kits/playbook/pb_filter/docs/_description.md
|
1219
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.html.erb
|
1220
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_custom_width.jsx
|
1221
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_rails.md
|
1222
|
-
- app/pb_kits/playbook/pb_filter/docs/_filter_custom_width_react.md
|
1223
1217
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
|
1224
1218
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
|
1225
1219
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.md
|
@@ -1810,8 +1804,6 @@ files:
|
|
1810
1804
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
|
1811
1805
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
|
1812
1806
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
1813
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
1814
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
|
1815
1807
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
|
1816
1808
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
|
1817
1809
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
|
@@ -1865,8 +1857,6 @@ files:
|
|
1865
1857
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
|
1866
1858
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
|
1867
1859
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
|
1868
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
|
1869
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
|
1870
1860
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
|
1871
1861
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
|
1872
1862
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
|
@@ -3089,8 +3079,8 @@ files:
|
|
3089
3079
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3090
3080
|
- app/pb_kits/playbook/utilities/text.ts
|
3091
3081
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3092
|
-
- dist/chunks/_typeahead-
|
3093
|
-
- dist/chunks/_weekday_stacked-
|
3082
|
+
- dist/chunks/_typeahead-CT2ByCBK.js
|
3083
|
+
- dist/chunks/_weekday_stacked-BFqyoTft.js
|
3094
3084
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3095
3085
|
- dist/chunks/lib-CEpcaI8y.js
|
3096
3086
|
- dist/chunks/pb_form_validation-D9zkwt2b.js
|
@@ -1,45 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
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.
|
@@ -1,41 +0,0 @@
|
|
1
|
-
<%=
|
2
|
-
pb_rails("filter", props: {
|
3
|
-
id: "filter_custom_width_rails",
|
4
|
-
position: "top",
|
5
|
-
filters: [
|
6
|
-
{ name: "name", value: "John Wick" },
|
7
|
-
{ name: "city", value: "San Francisco"}
|
8
|
-
],
|
9
|
-
sort_menu: [
|
10
|
-
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
-
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
-
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
-
],
|
14
|
-
template: "default",
|
15
|
-
results: 1,
|
16
|
-
popover_props: { width: "250px" },
|
17
|
-
}) do
|
18
|
-
%>
|
19
|
-
<%
|
20
|
-
example_collection = [
|
21
|
-
OpenStruct.new(name: "USA", value: 1),
|
22
|
-
OpenStruct.new(name: "Canada", value: 2),
|
23
|
-
OpenStruct.new(name: "Brazil", value: 3),
|
24
|
-
OpenStruct.new(name: "Philippines", value: 4),
|
25
|
-
OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
|
26
|
-
]
|
27
|
-
%>
|
28
|
-
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
29
|
-
<%= form.text_field :example_text_field, props: { label: true } %>
|
30
|
-
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
|
31
|
-
|
32
|
-
<%= form.actions do |action| %>
|
33
|
-
<%= action.submit props: {
|
34
|
-
text: "Apply",
|
35
|
-
data: {
|
36
|
-
disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
|
37
|
-
},}%>
|
38
|
-
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
-
<% end %>
|
40
|
-
<% end %>
|
41
|
-
<% end %>
|
@@ -1,71 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
|
3
|
-
|
4
|
-
const FilterCustomWidth = (props) => {
|
5
|
-
const options = [
|
6
|
-
{ value: 'USA' },
|
7
|
-
{ value: 'Canada' },
|
8
|
-
{ value: 'Brazil' },
|
9
|
-
{ value: 'Philippines' },
|
10
|
-
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
|
11
|
-
]
|
12
|
-
|
13
|
-
const popoverProps = {
|
14
|
-
width: "250px"
|
15
|
-
}
|
16
|
-
|
17
|
-
return (
|
18
|
-
<Filter
|
19
|
-
{...props}
|
20
|
-
double
|
21
|
-
filters={{
|
22
|
-
'Full Name': 'John Wick',
|
23
|
-
'City': 'San Francisco',
|
24
|
-
}}
|
25
|
-
popoverProps={popoverProps}
|
26
|
-
results={1}
|
27
|
-
sortOptions={{
|
28
|
-
popularity: 'Popularity',
|
29
|
-
// eslint-disable-next-line
|
30
|
-
manager_title: 'Manager\'s Title',
|
31
|
-
// eslint-disable-next-line
|
32
|
-
manager_name: 'Manager\'s Name',
|
33
|
-
}}
|
34
|
-
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
35
|
-
>
|
36
|
-
{({ closePopover }) => (
|
37
|
-
<form>
|
38
|
-
<TextInput
|
39
|
-
label="Example Text Field"
|
40
|
-
placeholder="Enter Text"
|
41
|
-
{...props}
|
42
|
-
/>
|
43
|
-
<Select
|
44
|
-
blankSelection="Select One..."
|
45
|
-
label="Example Collection Select"
|
46
|
-
name="Collection Select"
|
47
|
-
options={options}
|
48
|
-
{...props}
|
49
|
-
/>
|
50
|
-
<Flex
|
51
|
-
spacing="between"
|
52
|
-
{...props}
|
53
|
-
>
|
54
|
-
<Button
|
55
|
-
onClick={closePopover}
|
56
|
-
text="Apply"
|
57
|
-
{...props}
|
58
|
-
/>
|
59
|
-
<Button
|
60
|
-
text="Clear"
|
61
|
-
variant="secondary"
|
62
|
-
{...props}
|
63
|
-
/>
|
64
|
-
</Flex>
|
65
|
-
</form>
|
66
|
-
)}
|
67
|
-
</Filter>
|
68
|
-
)
|
69
|
-
}
|
70
|
-
|
71
|
-
export default FilterCustomWidth
|
@@ -1 +0,0 @@
|
|
1
|
-
Filter can leverage `popover_props` to set a custom width to the popover, without affecting the Filter size.
|
@@ -1 +0,0 @@
|
|
1
|
-
Filter can leverage `popoverProps` to set a custom width to the popover, without affecting the Filter size.
|
@@ -1,93 +0,0 @@
|
|
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>
|
@@ -1 +0,0 @@
|
|
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
DELETED
@@ -1,336 +0,0 @@
|
|
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 %>
|