playbook_ui_docs 14.6.0.pre.alpha.play1586datearea4218 → 14.6.0.pre.rc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +7 -30
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +2 -0
  6. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -5
  7. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -3
  8. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -3
  10. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_form/docs/example.yml +0 -1
  12. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md +1 -1
  20. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  22. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  23. data/dist/playbook-doc.js +1 -1
  24. metadata +2 -31
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +0 -72
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +0 -5
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +0 -9
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +0 -33
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +0 -10
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +0 -34
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +0 -1
  34. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.html.erb +0 -41
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +0 -71
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_rails.md +0 -1
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md +0 -1
  38. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +0 -39
  39. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.md +0 -1
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  41. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  42. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  44. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  45. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  48. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  49. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  50. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
  51. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  52. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
  53. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx DELETED
@@ -1,105 +0,0 @@
1
- import React from "react";
2
- import MultiLevelSelect from "../_multi_level_select";
3
- import Badge from "../../pb_badge/_badge";
4
-
5
- const treeData = [
6
- {
7
- label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
9
- id: "powerhome1",
10
- expanded: true,
11
- children: [
12
- {
13
- label: "People",
14
- value: "People",
15
- id: "people1",
16
- expanded: true,
17
- status: "active",
18
- children: [
19
- {
20
- label: "Talent Acquisition",
21
- value: "Talent Acquisition",
22
- id: "talent1",
23
- },
24
- {
25
- label: "Business Affairs",
26
- value: "Business Affairs",
27
- id: "business1",
28
- status: "active",
29
- variant: "primary",
30
-
31
- children: [
32
- {
33
- label: "Initiatives",
34
- value: "Initiatives",
35
- id: "initiative1",
36
- },
37
- {
38
- label: "Learning & Development",
39
- value: "Learning & Development",
40
- id: "development1",
41
- status: "Inactive",
42
- },
43
- ],
44
- },
45
- {
46
- label: "People Experience",
47
- value: "People Experience",
48
- id: "experience1",
49
- },
50
- ],
51
- },
52
- {
53
- label: "Contact Center",
54
- value: "Contact Center",
55
- id: "contact1",
56
- status: "Inactive",
57
- variant: "error",
58
- children: [
59
- {
60
- label: "Appointment Management",
61
- value: "Appointment Management",
62
- id: "appointment1",
63
- },
64
- {
65
- label: "Customer Service",
66
- value: "Customer Service",
67
- id: "customer1",
68
- },
69
- {
70
- label: "Energy",
71
- value: "Energy",
72
- id: "energy1",
73
- },
74
- ],
75
- },
76
- ],
77
- },
78
- ];
79
-
80
- const MultiLevelSelectWithChildren = (props) => {
81
- return (
82
- <div>
83
- <MultiLevelSelect
84
- id="multiselect-with-children"
85
- onSelect={(selectedNodes) =>
86
- console.log("Selected Items", selectedNodes)
87
- }
88
- treeData={treeData}
89
- {...props}
90
- >
91
- <MultiLevelSelect.Options>
92
- {(item) => (
93
- <Badge
94
- marginLeft="sm"
95
- text={item.status}
96
- variant={item.status === "active" ? "success" : "warning"}
97
- />
98
- )}
99
- </MultiLevelSelect.Options>
100
- </MultiLevelSelect>
101
- </div>
102
- );
103
- };
104
-
105
- export default MultiLevelSelectWithChildren;
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md DELETED
@@ -1 +0,0 @@
1
- The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx DELETED
@@ -1,106 +0,0 @@
1
- import React from "react";
2
- import MultiLevelSelect from "../_multi_level_select";
3
- import Badge from "../../pb_badge/_badge";
4
-
5
- const treeData = [
6
- {
7
- label: "Power Home Remodeling",
8
- value: "Power Home Remodeling",
9
- id: "powerhome1",
10
- expanded: true,
11
- children: [
12
- {
13
- label: "People",
14
- value: "People",
15
- id: "people1",
16
- expanded: true,
17
- status: "active",
18
- children: [
19
- {
20
- label: "Talent Acquisition",
21
- value: "Talent Acquisition",
22
- id: "talent1",
23
- },
24
- {
25
- label: "Business Affairs",
26
- value: "Business Affairs",
27
- id: "business1",
28
- status: "active",
29
- variant: "primary",
30
-
31
- children: [
32
- {
33
- label: "Initiatives",
34
- value: "Initiatives",
35
- id: "initiative1",
36
- },
37
- {
38
- label: "Learning & Development",
39
- value: "Learning & Development",
40
- id: "development1",
41
- status: "Inactive",
42
- },
43
- ],
44
- },
45
- {
46
- label: "People Experience",
47
- value: "People Experience",
48
- id: "experience1",
49
- },
50
- ],
51
- },
52
- {
53
- label: "Contact Center",
54
- value: "Contact Center",
55
- id: "contact1",
56
- status: "Inactive",
57
- variant: "error",
58
- children: [
59
- {
60
- label: "Appointment Management",
61
- value: "Appointment Management",
62
- id: "appointment1",
63
- },
64
- {
65
- label: "Customer Service",
66
- value: "Customer Service",
67
- id: "customer1",
68
- },
69
- {
70
- label: "Energy",
71
- value: "Energy",
72
- id: "energy1",
73
- },
74
- ],
75
- },
76
- ],
77
- },
78
- ];
79
-
80
- const MultiLevelSelectWithChildrenWithRadios = (props) => {
81
- return (
82
- <div>
83
- <MultiLevelSelect
84
- id="multiselect-with-children"
85
- onSelect={(selectedNodes) =>
86
- console.log("Selected Items", selectedNodes)
87
- }
88
- treeData={treeData}
89
- variant="single"
90
- {...props}
91
- >
92
- <MultiLevelSelect.Options>
93
- {(item) => (
94
- <Badge
95
- marginLeft="sm"
96
- text={item.status}
97
- variant={item.status === "active" ? "success" : "warning"}
98
- />
99
- )}
100
- </MultiLevelSelect.Options>
101
- </MultiLevelSelect>
102
- </div>
103
- );
104
- };
105
-
106
- export default MultiLevelSelectWithChildrenWithRadios;
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md DELETED
@@ -1 +0,0 @@
1
- The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.
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
data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb DELETED
@@ -1,43 +0,0 @@
1
- <%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
2
- <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
3
-
4
- <% item.date_area do %>
5
- <%= pb_rails("timeline/date_area") do %>
6
- <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
7
- <% end %>
8
- <% end %>
9
-
10
- <% item.node_area do %>
11
- <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
12
- <% end %>
13
-
14
- <% item.detail_area do %>
15
- <%= pb_rails("title_detail", props: {
16
- title: "Jackson Heights",
17
- detail: "37-27 74th Street"
18
- }) %>
19
- <% end %>
20
- <% end %>
21
- <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
22
-
23
- <% item.node_area do %>
24
- <%= pb_rails("timeline/node_area") do %>
25
- <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
26
- <% end %>
27
- <% end %>
28
-
29
- <% item.detail_area do %>
30
- <%= pb_rails("title_detail", props: {
31
- title: "Greenpoint",
32
- detail: "81 Gate St Brooklyn"
33
- }) %>
34
- <% end %>
35
- <% end %>
36
-
37
- <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
38
- <%= pb_rails("title_detail", props: {
39
- title: "Society Hill",
40
- detail: "72 E St Astoria"
41
- }) %>
42
- <% end %>
43
- <% end %>