playbook_ui_docs 14.5.0.pre.alpha.play1549upgradereactmodal4130 → 14.5.0.pre.alpha.play1586datearea4115

Sign up to get free protection for your applications and to get access to all the features.
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.play1549upgradereactmodal4130
4
+ version: 14.5.0.pre.alpha.play1586datearea4115
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -1184,8 +1184,6 @@ files:
1184
1184
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
1185
1185
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
1186
1186
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md
1187
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb
1188
- - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx
1189
1187
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md
1190
1188
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md
1191
1189
  - app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml
@@ -1785,6 +1783,9 @@ files:
1785
1783
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
1786
1784
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
1787
1785
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
1786
+ - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
1787
+ - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
1788
+ - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
1788
1789
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
1789
1790
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
1790
1791
  - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
@@ -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