playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4073 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
  3. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  4. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  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 +4 -2
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  24. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +15 -8
  25. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +2 -1
  26. data/dist/chunks/{_typeahead-CY44rh9x.js → _typeahead-ICFw7Umq.js} +1 -1
  27. data/dist/chunks/_weekday_stacked-CDe9cyw6.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/playbook-doc.js +1 -1
  30. data/dist/playbook-rails-react-bindings.js +1 -1
  31. data/dist/playbook-rails.js +1 -1
  32. data/dist/playbook.css +1 -1
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +10 -4
  35. data/dist/chunks/_weekday_stacked-NcRanohJ.js +0 -45
data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx CHANGED
@@ -14,6 +14,7 @@ type MultipleUsersStackedProps = {
14
14
  data?: { [key: string]: string },
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  id?: string,
17
+ size?: "md" | "lg" | "sm" | "xl"
17
18
  users: Array<{ [key: string]: string }>,
18
19
  variant: "default" | "bubble",
19
20
  }
@@ -27,14 +28,17 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
27
28
  htmlOptions = {},
28
29
  id,
29
30
  users,
31
+ size = "sm",
30
32
  variant = "default",
31
33
  } = props
32
34
 
33
35
  const moreThanTwo = users.length > 2
34
36
  const onlyOne = users.length == 1
35
37
  const isBubble = variant === "bubble"
38
+ const doubleBubble = isBubble && users.length === 2
36
39
  const tripleBubble = isBubble && users.length === 3
37
40
  const quadrupleBubble = isBubble && users.length > 3
41
+ const sizeClass = isBubble ? `size_${size}` : ""
38
42
  const displayCount = () => {
39
43
  return moreThanTwo ? 1 : users.length
40
44
  }
@@ -43,17 +47,19 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
43
47
  const htmlProps = buildHtmlProps(htmlOptions)
44
48
  const classes = classnames(buildCss(
45
49
  'pb_multiple_users_stacked_kit',
46
- { single: onlyOne, bubble: isBubble }), globalProps(props), className)
50
+ { single: onlyOne, bubble: isBubble }, sizeClass),
51
+ globalProps(props),
52
+ className)
47
53
 
48
54
  const firstUser = () => {
49
55
  return users.slice(0, 1).map((userObject, index) => {
50
56
  return (
51
57
  <Avatar
52
58
  {...userObject}
53
- className={`pb_multiple_users_stacked_item first_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
59
+ className={`pb_multiple_users_stacked_item first_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
54
60
  dark={dark}
55
61
  key={index}
56
- size={isBubble ? "sm" : "xs"}
62
+ size={isBubble ? "md" : "xs"}
57
63
  />
58
64
  )
59
65
  })
@@ -65,10 +71,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
65
71
  return (
66
72
  <Avatar
67
73
  {...userObject}
68
- className={`pb_multiple_users_stacked_item second_item${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
74
+ className={`pb_multiple_users_stacked_item second_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
69
75
  dark={dark}
70
76
  key={index}
71
- size="xs"
77
+ size={isBubble ? "md" : "xs"}
72
78
  />
73
79
  )
74
80
  })
@@ -81,10 +87,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
81
87
  return (
82
88
  <Avatar
83
89
  {...userObject}
84
- className={`pb_multiple_users_stacked_item third_item${quadrupleBubble ? " quadruple_bubble" : ""}`}
90
+ className={`pb_multiple_users_stacked_item third_item ${doubleBubble ? "double_bubble" : ""}${tripleBubble ? " triple_bubble" : ""}${quadrupleBubble ? " quadruple_bubble" : ""}`}
85
91
  dark={dark}
86
92
  key={index}
87
- size="xs"
93
+ size="md"
88
94
  />
89
95
  )
90
96
  })
@@ -97,10 +103,10 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
97
103
  return (
98
104
  <Avatar
99
105
  {...userObject}
100
- className="pb_multiple_users_stacked_item fourth_item"
106
+ className="pb_multiple_users_stacked_item fourth_item quadruple_bubble"
101
107
  dark={dark}
102
108
  key={index}
103
- size="xs"
109
+ size="md"
104
110
  />
105
111
  )
106
112
  })
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb ADDED
@@ -0,0 +1,336 @@
1
+ <%= pb_rails("title", props: {size: 4, text: "S", padding_top: "sm"}) %>
2
+
3
+ <%= pb_rails("flex") do %>
4
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
5
+
6
+ <%= pb_rails("multiple_users_stacked", props: {
7
+ variant: "bubble",
8
+ size: "sm",
9
+ users: [
10
+ {
11
+ name: "Patrick Welch",
12
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
13
+ }
14
+ ]
15
+ }) %>
16
+
17
+ <% end %>
18
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
19
+ <%= pb_rails("multiple_users_stacked", props: {
20
+ size: "sm",
21
+ variant: "bubble",
22
+ users: [
23
+ {
24
+ name: "Patrick Welch",
25
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
26
+ },
27
+ {
28
+ name: "Lucille Sanchez",
29
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
30
+ }
31
+ ]
32
+ }) %>
33
+ <% end %>
34
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
35
+ <%= pb_rails("multiple_users_stacked", props: {
36
+ size: "sm",
37
+ variant: "bubble",
38
+ users: [
39
+ {
40
+ name: "Patrick Welch",
41
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
42
+ },
43
+ {
44
+ name: "Lucille Sanchez",
45
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
46
+ },
47
+ {
48
+ name: "Beverly Reyes",
49
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
50
+ },
51
+ ]
52
+ }) %>
53
+ <% end %>
54
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
55
+ <%= pb_rails("multiple_users_stacked", props: {
56
+ size: "sm",
57
+ variant: "bubble",
58
+ users: [
59
+ {
60
+ name: "Patrick Welch",
61
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
62
+ },
63
+ {
64
+ name: "Lucille Sanchez",
65
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
66
+ },
67
+ {
68
+ name: "Beverly Reyes",
69
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
70
+ },
71
+ {
72
+ name: "Keith Craig",
73
+ image_url: "https://randomuser.me/api/portraits/men/40.jpg",
74
+ },
75
+ {
76
+ name: "Alicia Cooper",
77
+ image_url: "https://randomuser.me/api/portraits/women/46.jpg",
78
+ }
79
+ ]
80
+ }) %>
81
+ <% end %>
82
+ <% end %>
83
+
84
+
85
+
86
+ <%= pb_rails("title", props: {size: 4, text: "M", padding_top: "sm"}) %>
87
+
88
+ <%= pb_rails("flex") do %>
89
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
90
+
91
+ <%= pb_rails("multiple_users_stacked", props: {
92
+ size: "md",
93
+ variant: "bubble",
94
+ users: [
95
+ {
96
+ name: "Patrick Welch",
97
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
98
+ }
99
+ ]
100
+ }) %>
101
+
102
+ <% end %>
103
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
104
+ <%= pb_rails("multiple_users_stacked", props: {
105
+ size: "md",
106
+ variant: "bubble",
107
+ users: [
108
+ {
109
+ name: "Patrick Welch",
110
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
111
+ },
112
+ {
113
+ name: "Lucille Sanchez",
114
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
115
+ }
116
+ ]
117
+ }) %>
118
+ <% end %>
119
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
120
+ <%= pb_rails("multiple_users_stacked", props: {
121
+ size: "md",
122
+ variant: "bubble",
123
+ users: [
124
+ {
125
+ name: "Patrick Welch",
126
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
127
+ },
128
+ {
129
+ name: "Lucille Sanchez",
130
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
131
+ },
132
+ {
133
+ name: "Beverly Reyes",
134
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
135
+ },
136
+ ]
137
+ }) %>
138
+ <% end %>
139
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
140
+ <%= pb_rails("multiple_users_stacked", props: {
141
+ size: "md",
142
+ variant: "bubble",
143
+ users: [
144
+ {
145
+ name: "Patrick Welch",
146
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
147
+ },
148
+ {
149
+ name: "Lucille Sanchez",
150
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
151
+ },
152
+ {
153
+ name: "Beverly Reyes",
154
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
155
+ },
156
+ {
157
+ name: "Keith Craig",
158
+ image_url: "https://randomuser.me/api/portraits/men/40.jpg",
159
+ },
160
+ {
161
+ name: "Alicia Cooper",
162
+ image_url: "https://randomuser.me/api/portraits/women/46.jpg",
163
+ }
164
+ ]
165
+ }) %>
166
+ <% end %>
167
+ <% end %>
168
+
169
+
170
+
171
+ <%= pb_rails("title", props: {size: 4, text: "L", padding_top: "sm"}) %>
172
+
173
+ <%= pb_rails("flex") do %>
174
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
175
+
176
+ <%= pb_rails("multiple_users_stacked", props: {
177
+ size: "lg",
178
+ variant: "bubble",
179
+ users: [
180
+ {
181
+ name: "Patrick Welch",
182
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
183
+ }
184
+ ]
185
+ }) %>
186
+
187
+ <% end %>
188
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
189
+ <%= pb_rails("multiple_users_stacked", props: {
190
+ size: "lg",
191
+ variant: "bubble",
192
+ users: [
193
+ {
194
+ name: "Patrick Welch",
195
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
196
+ },
197
+ {
198
+ name: "Lucille Sanchez",
199
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
200
+ }
201
+ ]
202
+ }) %>
203
+ <% end %>
204
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
205
+ <%= pb_rails("multiple_users_stacked", props: {
206
+ size: "lg",
207
+ variant: "bubble",
208
+ users: [
209
+ {
210
+ name: "Patrick Welch",
211
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
212
+ },
213
+ {
214
+ name: "Lucille Sanchez",
215
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
216
+ },
217
+ {
218
+ name: "Beverly Reyes",
219
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
220
+ },
221
+ ]
222
+ }) %>
223
+ <% end %>
224
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
225
+ <%= pb_rails("multiple_users_stacked", props: {
226
+ size: "lg",
227
+ variant: "bubble",
228
+ users: [
229
+ {
230
+ name: "Patrick Welch",
231
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
232
+ },
233
+ {
234
+ name: "Lucille Sanchez",
235
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
236
+ },
237
+ {
238
+ name: "Beverly Reyes",
239
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
240
+ },
241
+ {
242
+ name: "Keith Craig",
243
+ image_url: "https://randomuser.me/api/portraits/men/40.jpg",
244
+ },
245
+ {
246
+ name: "Alicia Cooper",
247
+ image_url: "https://randomuser.me/api/portraits/women/46.jpg",
248
+ }
249
+ ]
250
+ }) %>
251
+ <% end %>
252
+ <% end %>
253
+
254
+
255
+ <%= pb_rails("title", props: {size: 4, text: "XL", padding_top: "sm"}) %>
256
+
257
+ <%= pb_rails("flex") do %>
258
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
259
+
260
+ <%= pb_rails("multiple_users_stacked", props: {
261
+ size: "xl",
262
+ variant: "bubble",
263
+ users: [
264
+ {
265
+ name: "Patrick Welch",
266
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
267
+ }
268
+ ]
269
+ }) %>
270
+
271
+ <% end %>
272
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
273
+ <%= pb_rails("multiple_users_stacked", props: {
274
+ size: "xl",
275
+ variant: "bubble",
276
+ users: [
277
+ {
278
+ name: "Patrick Welch",
279
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
280
+ },
281
+ {
282
+ name: "Lucille Sanchez",
283
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
284
+ }
285
+ ]
286
+ }) %>
287
+ <% end %>
288
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
289
+ <%= pb_rails("multiple_users_stacked", props: {
290
+ size: "xl",
291
+ variant: "bubble",
292
+ users: [
293
+ {
294
+ name: "Patrick Welch",
295
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
296
+ },
297
+ {
298
+ name: "Lucille Sanchez",
299
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
300
+ },
301
+ {
302
+ name: "Beverly Reyes",
303
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
304
+ },
305
+ ]
306
+ }) %>
307
+ <% end %>
308
+ <%= pb_rails("flex/flex_item", props: { padding_right: "md" }) do %>
309
+ <%= pb_rails("multiple_users_stacked", props: {
310
+ size: "xl",
311
+ variant: "bubble",
312
+ users: [
313
+ {
314
+ name: "Patrick Welch",
315
+ image_url: "https://randomuser.me/api/portraits/men/9.jpg",
316
+ },
317
+ {
318
+ name: "Lucille Sanchez",
319
+ image_url: "https://randomuser.me/api/portraits/women/6.jpg",
320
+ },
321
+ {
322
+ name: "Beverly Reyes",
323
+ image_url: "https://randomuser.me/api/portraits/women/74.jpg",
324
+ },
325
+ {
326
+ name: "Keith Craig",
327
+ image_url: "https://randomuser.me/api/portraits/men/40.jpg",
328
+ },
329
+ {
330
+ name: "Alicia Cooper",
331
+ image_url: "https://randomuser.me/api/portraits/women/46.jpg",
332
+ }
333
+ ]
334
+ }) %>
335
+ <% end %>
336
+ <% end %>
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml CHANGED
@@ -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
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb CHANGED
@@ -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 %>
data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb CHANGED
@@ -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