playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4162
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +12 -2
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +2 -1
- data/dist/chunks/_weekday_stacked-CDe9cyw6.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -3
- data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
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 %>
|
|
@@ -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(
|
|
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(
|
|
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(
|
|
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
|
|
@@ -69,7 +69,6 @@ $flag-min-resolution: 192dpi;
|
|
|
69
69
|
|
|
70
70
|
.iti__selected-country {
|
|
71
71
|
position: absolute;
|
|
72
|
-
z-index: 2;
|
|
73
72
|
top: 0;
|
|
74
73
|
display: flex;
|
|
75
74
|
height: 100%;
|
|
@@ -184,7 +183,6 @@ $flag-min-resolution: 192dpi;
|
|
|
184
183
|
border-radius: $space_xs;
|
|
185
184
|
border: 1px solid $border_light !important;
|
|
186
185
|
position: absolute;
|
|
187
|
-
z-index: 2;
|
|
188
186
|
top: 100%;
|
|
189
187
|
}
|
|
190
188
|
|
|
@@ -258,3 +256,15 @@ $flag-min-resolution: 192dpi;
|
|
|
258
256
|
}
|
|
259
257
|
}
|
|
260
258
|
}
|
|
259
|
+
|
|
260
|
+
// Rails Phone Number Input padding placement of placeholders
|
|
261
|
+
// is off in a Dialog because it doesn't account for
|
|
262
|
+
// padding: 0 $space_xxs 0 $space_xs;
|
|
263
|
+
// Set to 0 so the placeholder doesn't overlap with selected country
|
|
264
|
+
.pb_dialog {
|
|
265
|
+
.pb_phone_number_input_rails {
|
|
266
|
+
.iti__selected-country {
|
|
267
|
+
padding: 0;
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
@@ -23,12 +23,13 @@ module Playbook
|
|
|
23
23
|
default: ""
|
|
24
24
|
|
|
25
25
|
def classname
|
|
26
|
-
generate_classname("
|
|
26
|
+
generate_classname("pb_phone_number_input_rails")
|
|
27
27
|
end
|
|
28
28
|
|
|
29
29
|
def phone_number_input_options
|
|
30
30
|
{
|
|
31
31
|
id: id,
|
|
32
|
+
className: classname,
|
|
32
33
|
dark: dark,
|
|
33
34
|
disabled: disabled,
|
|
34
35
|
error: error,
|