playbook_ui 14.5.0.pre.alpha.PBNTR614advancedtablepoc4155 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -26
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
  5. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -2
  6. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  7. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  9. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  10. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  11. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
  12. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  13. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
  14. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  15. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
  18. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +3 -1
  19. data/dist/chunks/_weekday_stacked-B0Zid7Rv.js +45 -0
  20. data/dist/chunks/vendor.js +1 -1
  21. data/dist/playbook-doc.js +1 -1
  22. data/dist/playbook.css +1 -1
  23. data/lib/playbook/version.rb +1 -1
  24. metadata +3 -8
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +0 -52
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  28. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  29. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
  30. data/dist/chunks/_weekday_stacked-leC2i6B3.js +0 -45
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.5.0"
5
- VERSION = "14.5.0.pre.alpha.PBNTR614advancedtablepoc4155"
5
+ VERSION = "14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094"
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.PBNTR614advancedtablepoc4155
4
+ version: 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094
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-18 00:00:00.000000000 Z
12
+ date: 2024-10-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -268,7 +268,6 @@ files:
268
268
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
269
269
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
270
270
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
271
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
272
271
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
273
272
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
274
273
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
@@ -1127,8 +1126,6 @@ files:
1127
1126
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1128
1127
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
1129
1128
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
1130
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
1131
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
1132
1129
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
1133
1130
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
1134
1131
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -1862,8 +1859,6 @@ files:
1862
1859
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
1863
1860
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
1864
1861
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
1865
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
1866
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
1867
1862
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
1868
1863
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
1869
1864
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -3087,7 +3082,7 @@ files:
3087
3082
  - app/pb_kits/playbook/utilities/text.ts
3088
3083
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3089
3084
  - dist/chunks/_typeahead-C9g4qCcE.js
3090
- - dist/chunks/_weekday_stacked-leC2i6B3.js
3085
+ - dist/chunks/_weekday_stacked-B0Zid7Rv.js
3091
3086
  - dist/chunks/lazysizes-B7xYodB-.js
3092
3087
  - dist/chunks/lib-CEpcaI8y.js
3093
3088
  - dist/chunks/pb_form_validation-D9zkwt2b.js
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx DELETED
@@ -1,52 +0,0 @@
1
- import React from "react"
2
- import { AdvancedTable, Pill, Body } from "playbook-ui"
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableCustomCell = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
-
12
- },
13
- {
14
- accessor: "newEnrollments",
15
- label: "New Enrollments",
16
- customRenderer: (row, value) => <Pill text={value} />,
17
- },
18
- {
19
- accessor: "scheduledMeetings",
20
- label: "Scheduled Meetings",
21
- customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
22
- },
23
- {
24
- accessor: "attendanceRate",
25
- label: "Attendance Rate",
26
- },
27
- {
28
- accessor: "completedClasses",
29
- label: "Completed Classes",
30
- },
31
- {
32
- accessor: "classCompletionRate",
33
- label: "Class Completion Rate",
34
- },
35
- {
36
- accessor: "graduatedStudents",
37
- label: "Graduated Students",
38
- },
39
- ]
40
-
41
- return (
42
- <div>
43
- <AdvancedTable
44
- columnDefinitions={columnDefinitions}
45
- tableData={MOCK_DATA}
46
- {...props}
47
- />
48
- </div>
49
- )
50
- }
51
-
52
- export default AdvancedTableCustomCell
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx DELETED
@@ -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
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md DELETED
@@ -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.
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb DELETED
@@ -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 %>
data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx DELETED
@@ -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