playbook_ui 5.1.0.pre.alpha4 → 5.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (82) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/clark.jpg +0 -0
  3. data/app/assets/images/giant.jpg +0 -0
  4. data/app/assets/images/pb-caret.svg +1 -0
  5. data/app/assets/images/pb-check.svg +11 -0
  6. data/app/assets/images/pb.logo.svg +28 -0
  7. data/app/controllers/playbook/application_controller.rb +13 -0
  8. data/app/controllers/playbook/guides_controller.rb +11 -0
  9. data/app/controllers/playbook/pages_controller.rb +79 -0
  10. data/app/controllers/playbook/samples_controller.rb +40 -0
  11. data/app/pb_kits/playbook/config/_kit_example.html.erb +9 -0
  12. data/app/pb_kits/playbook/config/_kit_samples_list.html.erb +3 -0
  13. data/app/pb_kits/playbook/config/_kit_ui.html.erb +40 -0
  14. data/app/pb_kits/playbook/config/_pb_kit_api.html.erb +18 -0
  15. data/app/pb_kits/playbook/data/menu.yml +93 -0
  16. data/app/pb_kits/playbook/index.js +0 -4
  17. data/app/pb_kits/playbook/packs/application.js +55 -0
  18. data/app/pb_kits/playbook/packs/examples.js +174 -0
  19. data/app/pb_kits/playbook/packs/main.scss +12 -0
  20. data/app/pb_kits/playbook/packs/samples.js +19 -0
  21. data/app/pb_kits/playbook/packs/site_styles/_samples.scss +72 -0
  22. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +43 -0
  23. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +135 -0
  24. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +9 -0
  25. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +531 -0
  26. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +92 -0
  27. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +15 -0
  28. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +190 -0
  29. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +18 -0
  30. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +82 -0
  31. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +72 -0
  32. data/app/pb_kits/playbook/pb_filter/docs/_description.md +3 -0
  33. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
  34. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +2 -2
  35. data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -3
  36. data/app/pb_kits/playbook/pb_popover/_popover.scss +25 -21
  37. data/app/pb_kits/playbook/pb_popover/index.js +6 -1
  38. data/app/pb_kits/playbook/pb_radio/_radio.scss +4 -0
  39. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  40. data/app/views/layouts/playbook/_mobile_hamburger.html.erb +2 -0
  41. data/app/views/layouts/playbook/_nav.html.erb +13 -0
  42. data/app/views/layouts/playbook/_sidebar.html.erb +52 -0
  43. data/app/views/layouts/playbook/application.html.slim +22 -0
  44. data/app/views/layouts/playbook/fullscreen.html.slim +10 -0
  45. data/app/views/layouts/playbook/grid.html.slim +10 -0
  46. data/app/views/layouts/playbook/samples.html.erb +18 -0
  47. data/app/views/playbook/guides/create_kit.html.slim +16 -0
  48. data/app/views/playbook/guides/create_kit/_file_naming.html.md +2 -0
  49. data/app/views/playbook/guides/create_kit/_generator.html.md +6 -0
  50. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +2 -0
  51. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +2 -0
  52. data/app/views/playbook/guides/create_kit/_kit_react.html.md +2 -0
  53. data/app/views/playbook/guides/create_kit/_layout.html.md +2 -0
  54. data/app/views/playbook/guides/create_kit/_view_objects.html.md +2 -0
  55. data/app/views/playbook/guides/create_kit/_writing_sass.md +10 -0
  56. data/app/views/playbook/guides/use_nitro.html.slim +6 -0
  57. data/app/views/playbook/guides/use_nitro/_local.html.md +2 -0
  58. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +2 -0
  59. data/app/views/playbook/guides/use_nitro/_versions.html.md +2 -0
  60. data/app/views/playbook/pages/fullscreen.html.slim +10 -0
  61. data/app/views/playbook/pages/grid.html.slim +2 -0
  62. data/app/views/playbook/pages/home.html.slim +4 -0
  63. data/app/views/playbook/pages/kit_category_show.html.erb +14 -0
  64. data/app/views/playbook/pages/kit_show.html.erb +33 -0
  65. data/app/views/playbook/pages/kits.html.erb +12 -0
  66. data/app/views/playbook/pages/principals/_getting_started.html.md +30 -0
  67. data/app/views/playbook/pages/principles.html.slim +3 -0
  68. data/app/views/playbook/pages/tokens.html.slim +15 -0
  69. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +17 -0
  70. data/app/views/playbook/pages/utilities.html.slim +116 -0
  71. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +15 -0
  72. data/app/views/playbook/samples/dashboards/index.html.erb +81 -0
  73. data/app/views/playbook/samples/dashboards/index.jsx +130 -0
  74. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  75. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  76. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  77. data/app/views/playbook/samples/registration/index.jsx +476 -0
  78. data/app/views/playbook/samples/sample_show.html.erb +36 -0
  79. data/lib/playbook/version.rb +1 -1
  80. data/lib/tasks/pb_release.rake +0 -3
  81. metadata +74 -7
  82. data/app/pb_kits/playbook/tokens/index.scss +0 -12
@@ -0,0 +1,476 @@
1
+ import React from 'react'
2
+ import { BarGraph, Body, Button, Caption, Card, Checkbox, Flex, Layout, LineGraph, SectionSeparator, Table, Title } from '../../../../pb_kits/playbook'
3
+ import FlexItem from '../../../../pb_kits/playbook/pb_flex/_flex_item.jsx'
4
+
5
+ const data = [{
6
+ name: '2020 | SF',
7
+ data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
8
+ }, {
9
+ name: '2020 | TOR',
10
+ data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
11
+ }, {
12
+ name: '2019 | AMS',
13
+ data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
14
+ }, {
15
+ name: '2018 | SF',
16
+ data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
17
+ }, {
18
+ name: '2017 | LA',
19
+ data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
20
+ }]
21
+
22
+ const totalRegistered = [{
23
+ name: 'Registrations',
24
+ data: [1475, 524, 1344, 780, 200, 900],
25
+ }]
26
+ const newAttendees = [{
27
+ name: 'Registrations',
28
+ data: [1475, 524, 1344, 780, 200, 900],
29
+ }]
30
+ const repeatingAttendees = [{
31
+ name: 'Registrations',
32
+ data: [1475, 524, 1344, 780, 200, 900],
33
+ }]
34
+ const graphicDesigners = [{
35
+ name: 'Registrations',
36
+ data: [1475, 524, 1344, 780, 200, 900],
37
+ }]
38
+ const uxUi = [{
39
+ name: 'Registrations',
40
+ data: [1475, 524, 1344, 780, 200, 900],
41
+ }]
42
+ const productDesigners = [{
43
+ name: 'Registrations',
44
+ data: [1475, 524, 1344, 780, 200, 900],
45
+ }]
46
+
47
+ const Registration = () => (
48
+ <div>
49
+ <Layout
50
+ collapse="xs"
51
+ position="left"
52
+ size="lg"
53
+ >
54
+ <Layout.Side>
55
+ <Flex
56
+ orientation="column"
57
+ padding="md"
58
+ vertical="center"
59
+ >
60
+ <FlexItem>
61
+ <Title
62
+ size={3}
63
+ tag="h3"
64
+ text="Design Expo"
65
+ />
66
+ </FlexItem>
67
+ <FlexItem>
68
+ <Body
69
+ color="light"
70
+ text="Annual Conference*"
71
+ />
72
+ </FlexItem>
73
+ </Flex>
74
+ <SectionSeparator />
75
+ <Flex
76
+ orientation="column"
77
+ padding="md"
78
+ >
79
+ <FlexItem>
80
+ <Title
81
+ paddingBottom="sm"
82
+ size={4}
83
+ tag="h4"
84
+ text="Regions"
85
+ />
86
+ </FlexItem>
87
+ <Flex
88
+ inline
89
+ orientation="column"
90
+ >
91
+ <Checkbox
92
+ checked
93
+ name="NorthAmerica"
94
+ paddingBottom="sm"
95
+ paddingLeft="sm"
96
+ text="North America"
97
+ value="NorthAmerica"
98
+ />
99
+ <Checkbox
100
+ checked
101
+ name="Europe"
102
+ paddingBottom="sm"
103
+ paddingLeft="sm"
104
+ text="Europe"
105
+ value="Europe"
106
+ />
107
+ </Flex>
108
+ <Title
109
+ paddingY="sm"
110
+ size={4}
111
+ tag="h4"
112
+ text="Total Registered"
113
+ />
114
+ <Table
115
+ paddingBottom="xs"
116
+ size="sm"
117
+ >
118
+ <thead>
119
+ <tr>
120
+ <th>{'Conference'}</th>
121
+ <th>{'Total #'}</th>
122
+ </tr>
123
+ </thead>
124
+ <tbody>
125
+ <tr>
126
+ <td>{'2020 | SF'}</td>
127
+ <td>{'2,391'}</td>
128
+ </tr>
129
+ <tr>
130
+ <td>{'2020 | TOR'}</td>
131
+ <td>{'3,829'}</td>
132
+ </tr>
133
+ <tr>
134
+ <td>{'2019 | AMS'}</td>
135
+ <td>{'2,047'}</td>
136
+ </tr>
137
+ <tr>
138
+ <td>{'2018 | SF'}</td>
139
+ <td>{'1,824'}</td>
140
+ </tr>
141
+ <tr>
142
+ <td>{'2017 | LA'}</td>
143
+ <td>{'719'}</td>
144
+ </tr>
145
+ <tr>
146
+ <td>{'2017 | LDN'}</td>
147
+ <td>{'491'}</td>
148
+ </tr>
149
+ </tbody>
150
+ </Table>
151
+ <Caption
152
+ size="xs"
153
+ text="*This dashboard includes the last six conferences"
154
+ />
155
+ </Flex>
156
+ </Layout.Side>
157
+
158
+ <Layout.Body
159
+ padding="xl"
160
+ >
161
+ <Title
162
+ paddingBottom="lg"
163
+ size={3}
164
+ tag="h3"
165
+ text="Registration Dashboard"
166
+ />
167
+ <Flex
168
+ className="bg_light"
169
+ wrap
170
+ >
171
+ <FlexItem
172
+ fixedSize="60%"
173
+ paddingRight="lg"
174
+ >
175
+ <Card>
176
+
177
+ <Flex
178
+ paddingBottom="md"
179
+ spacing="around"
180
+ vertical="bottom"
181
+ >
182
+ {/****** first number ******/}
183
+ <FlexItem>
184
+ <Flex
185
+ orientation="column"
186
+ vertical="center"
187
+ >
188
+ <FlexItem>
189
+ <Caption
190
+ size="xs"
191
+ text="2020 | SF"
192
+ />
193
+ </FlexItem>
194
+ <FlexItem>
195
+ <Caption
196
+ text="Total Registered"
197
+ />
198
+ </FlexItem>
199
+ <FlexItem>
200
+ <Title
201
+ size={2}
202
+ tag="h2"
203
+ text="2,391"
204
+ />
205
+ </FlexItem>
206
+ </Flex>
207
+ </FlexItem>
208
+
209
+ <SectionSeparator orientation="vertical" />
210
+
211
+ {/****** second number ******/}
212
+
213
+ <FlexItem>
214
+ <Flex
215
+ orientation="column"
216
+ paddingTop="sm"
217
+ vertical="center"
218
+ >
219
+ <FlexItem>
220
+ <Caption
221
+ text="Graphic"
222
+ />
223
+ </FlexItem>
224
+ <FlexItem>
225
+ <Title
226
+ size={3}
227
+ tag="h3"
228
+ text="353"
229
+ />
230
+ </FlexItem>
231
+ </Flex>
232
+ </FlexItem>
233
+
234
+ {/****** third number ******/}
235
+
236
+ <FlexItem>
237
+ <Flex
238
+ orientation="column"
239
+ vertical="center"
240
+ >
241
+ <FlexItem>
242
+ <Caption
243
+ text="UX/UI"
244
+ />
245
+ </FlexItem>
246
+ <FlexItem>
247
+ <Title
248
+ size={3}
249
+ tag="h3"
250
+ text="254"
251
+ />
252
+ </FlexItem>
253
+ </Flex>
254
+ </FlexItem>
255
+
256
+ {/****** fourth number ******/}
257
+
258
+ <FlexItem>
259
+ <Flex
260
+ orientation="column"
261
+ vertical="center"
262
+ >
263
+ <FlexItem>
264
+ <Caption
265
+ text="Product"
266
+ />
267
+ </FlexItem>
268
+ <FlexItem>
269
+ <Title
270
+ size={3}
271
+ tag="h3"
272
+ text="194"
273
+ />
274
+ </FlexItem>
275
+ </Flex>
276
+ </FlexItem>
277
+ </Flex>
278
+
279
+ <SectionSeparator />
280
+
281
+ <Flex
282
+ paddingTop="sm"
283
+ spacing="around"
284
+ vertical="bottom"
285
+ >
286
+ {/****** first number ******/}
287
+ <FlexItem>
288
+ <Flex
289
+ orientation="column"
290
+ vertical="center"
291
+ >
292
+ <FlexItem>
293
+ <Caption
294
+ size="xs"
295
+ text="2020 | TOR"
296
+ />
297
+ </FlexItem>
298
+ <FlexItem>
299
+ <Caption
300
+ text="Total Registered"
301
+ />
302
+ </FlexItem>
303
+ <FlexItem>
304
+ <Title
305
+ size={2}
306
+ tag="h2"
307
+ text="3,829"
308
+ />
309
+ </FlexItem>
310
+ </Flex>
311
+ </FlexItem>
312
+
313
+ <SectionSeparator orientation="vertical" />
314
+
315
+ {/****** second number ******/}
316
+
317
+ <FlexItem>
318
+ <Flex
319
+ orientation="column"
320
+ vertical="center"
321
+ >
322
+ <FlexItem>
323
+ <Caption
324
+ text="Graphic"
325
+ />
326
+ </FlexItem>
327
+ <FlexItem>
328
+ <Title
329
+ size={3}
330
+ tag="h3"
331
+ text="937"
332
+ />
333
+ </FlexItem>
334
+ </Flex>
335
+ </FlexItem>
336
+
337
+ {/****** third number ******/}
338
+
339
+ <FlexItem>
340
+ <Flex
341
+ orientation="column"
342
+ vertical="center"
343
+ >
344
+ <FlexItem>
345
+ <Caption
346
+ text="UX/UI"
347
+ />
348
+ </FlexItem>
349
+ <FlexItem>
350
+ <Title
351
+ size={3}
352
+ tag="h3"
353
+ text="721"
354
+ />
355
+ </FlexItem>
356
+ </Flex>
357
+ </FlexItem>
358
+
359
+ {/****** fourth number ******/}
360
+
361
+ <FlexItem>
362
+ <Flex
363
+ orientation="column"
364
+ vertical="center"
365
+ >
366
+ <FlexItem>
367
+ <Caption
368
+ text="Product"
369
+ />
370
+ </FlexItem>
371
+ <FlexItem>
372
+ <Title
373
+ size={3}
374
+ tag="h3"
375
+ text="628"
376
+ />
377
+ </FlexItem>
378
+ </Flex>
379
+ </FlexItem>
380
+ </Flex>
381
+ </Card>
382
+
383
+ <Flex
384
+ orientation="column"
385
+ paddingBottom="md"
386
+ vertical="right"
387
+ >
388
+ <FlexItem>
389
+ <Button
390
+ onClick={() => alert('button clicked!')}
391
+ text="View full breakdown"
392
+ variant="link"
393
+ />
394
+ </FlexItem>
395
+ </Flex>
396
+
397
+ <Card>
398
+ <LineGraph
399
+ axisTitle="Total Registration"
400
+ chartData={data}
401
+ height="80%"
402
+ id="line-registration"
403
+ legend
404
+ title="Running Total"
405
+ xAxisCategories={['7 wks away', '6 wks away', '5 wks away', '4 wks away', '3 wks away', '2 wks away', '1 wk away', 'Start of Event']}
406
+ yAxisMin={0}
407
+ />
408
+ </Card>
409
+ </FlexItem>
410
+ <FlexItem fixedSize="40%">
411
+ <Card>
412
+ <BarGraph
413
+ axisTitle="Total Registered"
414
+ chartData={totalRegistered}
415
+ height="30%"
416
+ id="total-attendees"
417
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
418
+ yAxisMin={0}
419
+ />
420
+ <BarGraph
421
+ axisTitle="New Attendees"
422
+ chartData={newAttendees}
423
+ height="30%"
424
+ id="new-attendees"
425
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
426
+ yAxisMin={0}
427
+ />
428
+ <BarGraph
429
+ axisTitle="New Attendees"
430
+ chartData={newAttendees}
431
+ height="30%"
432
+ id="new-attendees"
433
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
434
+ yAxisMin={0}
435
+ />
436
+ <BarGraph
437
+ axisTitle="Repeating Attendees"
438
+ chartData={repeatingAttendees}
439
+ height="30%"
440
+ id="repeating-attendees"
441
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
442
+ yAxisMin={0}
443
+ />
444
+ <BarGraph
445
+ axisTitle="Graphic Designers"
446
+ chartData={graphicDesigners}
447
+ height="30%"
448
+ id="graphic-designers"
449
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
450
+ yAxisMin={0}
451
+ />
452
+ <BarGraph
453
+ axisTitle="UX/UI"
454
+ chartData={uxUi}
455
+ height="30%"
456
+ id="ux-ui"
457
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
458
+ yAxisMin={0}
459
+ />
460
+ <BarGraph
461
+ axisTitle="Product Designers"
462
+ chartData={productDesigners}
463
+ height="30%"
464
+ id="product-designers"
465
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
466
+ yAxisMin={0}
467
+ />
468
+ </Card>
469
+ </FlexItem>
470
+ </Flex>
471
+ </Layout.Body>
472
+ </Layout>
473
+ </div>
474
+ )
475
+
476
+ export default Registration