playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  8. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  9. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +30 -7
  10. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +0 -2
  11. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +84 -3
  12. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +28 -5
  13. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +9 -0
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +33 -0
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +10 -0
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +34 -0
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -0
  20. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
  21. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -0
  22. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +10 -1
  23. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  25. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +2 -0
  26. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +2 -0
  27. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -1
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +41 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +71 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +1 -0
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +1 -0
  32. data/app/pb_kits/playbook/pb_filter/docs/example.yml +3 -0
  33. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  34. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  35. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -0
  36. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  37. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  38. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  39. data/app/pb_kits/playbook/pb_flex/flex_item.rb +7 -2
  40. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +39 -0
  41. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +1 -0
  42. data/app/pb_kits/playbook/pb_form/docs/example.yml +1 -0
  43. data/app/pb_kits/playbook/pb_form/form.rb +2 -0
  44. data/app/pb_kits/playbook/pb_form/formHelper.js +27 -0
  45. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  46. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  47. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  48. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  49. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  50. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  51. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  52. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  53. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  54. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +86 -18
  55. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +15 -6
  56. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  57. data/app/pb_kits/playbook/pb_phone_number_input/intlTelInput.scss +849 -931
  58. data/app/pb_kits/playbook/pb_phone_number_input/types.d.ts +4 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -2
  60. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  61. data/app/pb_kits/playbook/pb_popover/popover.rb +3 -1
  62. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +28 -0
  63. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
  64. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  65. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +5 -1
  66. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  67. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  68. data/dist/chunks/_typeahead-BhHnXJjy.js +22 -0
  69. data/dist/chunks/_weekday_stacked-B9Sy5PN8.js +45 -0
  70. data/dist/chunks/{lib-CEpcaI8y.js → lib-D-mTv-kp.js} +1 -1
  71. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-BkWGwJsl.js} +1 -1
  72. data/dist/chunks/vendor.js +1 -1
  73. data/dist/playbook-doc.js +1 -1
  74. data/dist/playbook-rails-react-bindings.js +1 -1
  75. data/dist/playbook-rails.js +1 -1
  76. data/dist/playbook.css +1 -1
  77. data/lib/playbook/kit_base.rb +21 -1
  78. data/lib/playbook/pb_forms_helper.rb +3 -1
  79. data/lib/playbook/version.rb +1 -1
  80. metadata +24 -6
  81. data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
  82. data/dist/chunks/_weekday_stacked-B0Zid7Rv.js +0 -45
@@ -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
@@ -3,11 +3,13 @@ examples:
3
3
  rails:
4
4
  - multiple_users_stacked_default: Default
5
5
  - multiple_users_stacked_bubble: Bubble
6
+ - multiple_users_stacked_size: Sizes
6
7
 
7
8
 
8
9
  react:
9
10
  - multiple_users_stacked_default: Default
10
11
  - multiple_users_stacked_bubble: Bubble
12
+ - multiple_users_stacked_size: Sizes
11
13
 
12
14
  swift:
13
15
  - multiple_users_stacked_default_swift: Default
@@ -1,2 +1,3 @@
1
1
  export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
2
2
  export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'
3
+ export { default as MultipleUsersStackedSize } from './_multiple_users_stacked_size.jsx'
@@ -1,5 +1,15 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("avatar", props: object.users[0].merge({size: object.bubble ? "sm" : "xs", classname: "pb_multiple_users_stacked_item first_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}", dark: object.dark}) ) %>
2
+ <%= pb_rails(
3
+ "avatar",
4
+ props: object.users[0].merge({
5
+ classname: "pb_multiple_users_stacked_item first_item" +
6
+ (object.double_bubble ? " double_bubble" : "") +
7
+ (object.triple_bubble ? " triple_bubble" : "") +
8
+ (object.quadruple_bubble ? " quadruple_bubble" : ""),
9
+ dark: object.dark,
10
+ size: 'xs'
11
+ })
12
+ ) %>
3
13
 
4
14
  <% unless object.only_one %>
5
15
  <% if object.more_than_two && !object.bubble %>
@@ -8,14 +18,26 @@
8
18
  text: "+#{object.users.count - object.display_count}",
9
19
  variant: "primary",
10
20
  rounded: true,
11
- classname: "pb_multiple_users_stacked_item second_item" }) %>
21
+ classname: "pb_multiple_users_stacked_item second_item"
22
+ }) %>
12
23
  <% elsif object.bubble %>
13
- <% object.users.slice(1,3).each_with_index do |item, idx| %>
14
- <%= pb_rails("avatar", props: item.merge({size: "xs", classname: "pb_multiple_users_stacked_item #{idx == 0 ? "second_item#{object.triple_bubble ? " triple_bubble" : ""}#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : idx == 1 ? "third_item#{object.quadruple_bubble ? " quadruple_bubble" : ""}" : "fourth_item"}", dark: object.dark}) ) %>
24
+ <% object.users.slice(1, 3).each_with_index do |item, idx| %>
25
+ <%= pb_rails(
26
+ "avatar",
27
+ props: item.merge({
28
+ classname: object.bubble_classname(idx),
29
+ dark: object.dark
30
+ })
31
+ ) %>
15
32
  <% end %>
16
33
  <% else %>
17
- <%= pb_rails("avatar", props: object.users[1].merge({size: "xs", classname: "pb_multiple_users_stacked_item second_item", dark: object.dark}) ) %>
34
+ <%= pb_rails(
35
+ "avatar",
36
+ props: object.users[1].merge({
37
+ classname: "pb_multiple_users_stacked_item second_item",
38
+ dark: object.dark
39
+ })
40
+ ) %>
18
41
  <% end %>
19
42
  <% end %>
20
-
21
43
  <% end %>
@@ -4,6 +4,9 @@ module Playbook
4
4
  module PbMultipleUsersStacked
5
5
  class MultipleUsersStacked < Playbook::KitBase
6
6
  prop :users, type: Playbook::Props::HashArray, required: true
7
+ prop :size, type: Playbook::Props::Enum,
8
+ values: %w[sm md lg xl],
9
+ default: "sm"
7
10
 
8
11
  prop :variant, type: Playbook::Props::Enum,
9
12
  values: %w[default bubble],
@@ -25,6 +28,10 @@ module Playbook
25
28
  variant == "bubble"
26
29
  end
27
30
 
31
+ def double_bubble
32
+ bubble && users.count === 2
33
+ end
34
+
28
35
  def triple_bubble
29
36
  bubble && users.count === 3
30
37
  end
@@ -33,8 +40,31 @@ module Playbook
33
40
  bubble && users.count > 3
34
41
  end
35
42
 
43
+ def size_class
44
+ "size_#{size}" if bubble
45
+ end
46
+
36
47
  def classname
37
- generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class)
48
+ generate_classname("pb_multiple_users_stacked_kit", single_class, bubble_class, size_class)
49
+ end
50
+
51
+ def bubble_classname(index)
52
+ base_classname = "pb_multiple_users_stacked_item "
53
+
54
+ case index
55
+ when 0
56
+ base_classname += "second_item"
57
+ base_classname += " double_bubble" if double_bubble
58
+ base_classname += " triple_bubble" if triple_bubble
59
+ base_classname += " quadruple_bubble" if quadruple_bubble
60
+ when 1
61
+ base_classname += "third_item"
62
+ base_classname += " quadruple_bubble" if quadruple_bubble
63
+ else
64
+ base_classname += "fourth_item"
65
+ end
66
+
67
+ base_classname
38
68
  end
39
69
 
40
70
  private