playbook_ui_docs 14.5.0.pre.alpha.PBNTR614advancedtablepoc4155 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4094
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_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
- data/dist/playbook-doc.js +1 -1
- metadata +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +0 -52
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.5.0.pre.alpha.
|
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-
|
12
|
+
date: 2024-10-16 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -41,7 +41,6 @@ files:
|
|
41
41
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
|
42
42
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
|
43
43
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
|
44
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx
|
45
44
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
46
45
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
47
46
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
@@ -664,8 +663,6 @@ files:
|
|
664
663
|
- app/pb_kits/playbook/pb_drawer/docs/index.js
|
665
664
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
|
666
665
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
|
667
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
|
668
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
|
669
666
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
|
670
667
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
|
671
668
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
|
@@ -1185,8 +1182,6 @@ files:
|
|
1185
1182
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
|
1186
1183
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
|
1187
1184
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
|
1188
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
|
1189
|
-
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
|
1190
1185
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
|
1191
1186
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
|
1192
1187
|
- app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
|
@@ -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
|
@@ -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
|
@@ -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 %>
|
@@ -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
|