playbook_ui 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4128 → 14.5.0.pre.alpha.PLAY15814040
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_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
- 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/ResultsCount.tsx +2 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +5 -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 -1
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
- data/dist/chunks/_typeahead-D8vYsn7T.js +22 -0
- data/dist/chunks/_weekday_stacked-CaNCkN7U.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/kit_base.rb +17 -0
- data/lib/playbook/version.rb +1 -1
- metadata +4 -10
- 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_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/_typeahead-C9g4qCcE.js +0 -22
- data/dist/chunks/_weekday_stacked-BcMzYSwZ.js +0 -45
data/lib/playbook/kit_base.rb
CHANGED
@@ -73,6 +73,10 @@ module Playbook
|
|
73
73
|
prop :aria, type: Playbook::Props::HashProp, default: {}
|
74
74
|
prop :html_options, type: Playbook::Props::HashProp, default: {}
|
75
75
|
prop :children, type: Playbook::Props::Proc
|
76
|
+
prop :style, type: Playbook::Props::HashProp, default: {}
|
77
|
+
prop :height
|
78
|
+
prop :min_height
|
79
|
+
prop :max_height
|
76
80
|
|
77
81
|
def object
|
78
82
|
self
|
@@ -82,6 +86,14 @@ module Playbook
|
|
82
86
|
default_html_options.merge(html_options.deep_merge(data_attributes))
|
83
87
|
end
|
84
88
|
|
89
|
+
def global_inline_props
|
90
|
+
{
|
91
|
+
height: height,
|
92
|
+
min_height: min_height,
|
93
|
+
max_height: max_height,
|
94
|
+
}.compact
|
95
|
+
end
|
96
|
+
|
85
97
|
# rubocop:disable Layout/CommentIndentation
|
86
98
|
# pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
|
87
99
|
# The pb_content_tag generates HTML content tags for rails kits with flexible options.
|
@@ -118,6 +130,7 @@ module Playbook
|
|
118
130
|
data: data,
|
119
131
|
class: classname,
|
120
132
|
aria: aria,
|
133
|
+
style: inline_styles,
|
121
134
|
}
|
122
135
|
end
|
123
136
|
|
@@ -131,5 +144,9 @@ module Playbook
|
|
131
144
|
aria: aria,
|
132
145
|
}.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
|
133
146
|
end
|
147
|
+
|
148
|
+
def inline_styles
|
149
|
+
global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" }.join(" ")
|
150
|
+
end
|
134
151
|
end
|
135
152
|
end
|
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.PLAY15814040
|
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-14 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
|
@@ -1806,8 +1804,6 @@ files:
|
|
1806
1804
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
|
1807
1805
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
|
1808
1806
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
|
1809
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
|
1810
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
|
1811
1807
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
|
1812
1808
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
|
1813
1809
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
|
@@ -1861,8 +1857,6 @@ files:
|
|
1861
1857
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
|
1862
1858
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
|
1863
1859
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
|
1864
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
|
1865
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
|
1866
1860
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
|
1867
1861
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
|
1868
1862
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
|
@@ -3085,8 +3079,8 @@ files:
|
|
3085
3079
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3086
3080
|
- app/pb_kits/playbook/utilities/text.ts
|
3087
3081
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3088
|
-
- dist/chunks/_typeahead-
|
3089
|
-
- dist/chunks/_weekday_stacked-
|
3082
|
+
- dist/chunks/_typeahead-D8vYsn7T.js
|
3083
|
+
- dist/chunks/_weekday_stacked-CaNCkN7U.js
|
3090
3084
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3091
3085
|
- dist/chunks/lib-CEpcaI8y.js
|
3092
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,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 %>
|
@@ -1,97 +0,0 @@
|
|
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
|