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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  3. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  9. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  12. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  13. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  14. data/app/pb_kits/playbook/pb_flex/flex_item.rb +5 -2
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -17
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
  24. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  25. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  26. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  27. data/dist/chunks/_typeahead-D8vYsn7T.js +22 -0
  28. data/dist/chunks/_weekday_stacked-CaNCkN7U.js +45 -0
  29. data/dist/chunks/vendor.js +1 -1
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/kit_base.rb +17 -0
  35. data/lib/playbook/version.rb +1 -1
  36. metadata +4 -10
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  41. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  42. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
  43. data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
  44. data/dist/chunks/_weekday_stacked-BcMzYSwZ.js +0 -45
@@ -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
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.5.0"
5
- VERSION = "14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4128"
5
+ VERSION = "14.5.0.pre.alpha.PLAY15814040"
6
6
  end
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.PLAY1601updatereactzoompanpinch4128
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-17 00:00:00.000000000 Z
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-C9g4qCcE.js
3089
- - dist/chunks/_weekday_stacked-BcMzYSwZ.js
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.
@@ -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