playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) 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_dropdown/_dropdown.tsx +20 -4
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  25. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +19 -5
  26. data/dist/chunks/_weekday_stacked-PLi3twbe.js +45 -0
  27. data/dist/chunks/vendor.js +1 -1
  28. data/dist/playbook-doc.js +1 -1
  29. data/dist/playbook.css +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +9 -3
  32. data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js CHANGED
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
81
81
  test('should have a single bubble', () => {
82
82
  render(<MultipleUsersStackedSingleBubble />)
83
83
  const kit = screen.getByTestId(testId)
84
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
84
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
85
85
 
86
86
  const firstItem = kit.querySelector('.first_item');
87
87
  expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
113
113
  test('should have a double bubble', () => {
114
114
  render(<MultipleUsersStackedDoubleBubble />)
115
115
  const kit = screen.getByTestId(testId)
116
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
116
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
117
117
 
118
118
  const firstItem = kit.querySelector('.first_item');
119
119
  expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
153
153
  test('should have a triple bubble', () => {
154
154
  render(<MultipleUsersStackedTripleBubble />)
155
155
  const kit = screen.getByTestId(testId)
156
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
156
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
157
157
 
158
158
  const firstItem = kit.querySelector('.first_item');
159
159
  expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
208
208
  test('should have a quadruple bubble', () => {
209
209
  render(<MultipleUsersStackedQuadrupleBubble />)
210
210
  const kit = screen.getByTestId(testId)
211
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
211
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
212
212
 
213
213
  const firstItem = kit.querySelector('.first_item');
214
214
  expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
224
224
 
225
225
  const fourthItem = kit.querySelector('.fourth_item');
226
226
  expect(fourthItem).toBeInTheDocument();
227
- })
227
+ })
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