playbook_ui 5.1.0 → 5.2.0.pre.alpha6

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.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/app/controllers/playbook/application_controller.rb +0 -2
  3. data/app/pb_kits/playbook/index.js +4 -0
  4. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +7 -6
  6. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +1 -0
  7. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +2 -2
  8. data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -3
  9. data/app/pb_kits/playbook/pb_popover/_popover.scss +21 -25
  10. data/app/pb_kits/playbook/pb_popover/index.js +1 -6
  11. data/app/pb_kits/playbook/pb_radio/_radio.scss +0 -4
  12. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  13. data/app/pb_kits/playbook/tokens/index.scss +11 -0
  14. data/lib/playbook/engine.rb +1 -0
  15. data/lib/playbook/version.rb +1 -1
  16. data/lib/tasks/pb_release.rake +3 -0
  17. metadata +7 -68
  18. data/app/assets/images/clark.jpg +0 -0
  19. data/app/assets/images/giant.jpg +0 -0
  20. data/app/assets/images/pb-caret.svg +0 -1
  21. data/app/assets/images/pb-check.svg +0 -11
  22. data/app/assets/images/pb.logo.svg +0 -28
  23. data/app/controllers/playbook/guides_controller.rb +0 -11
  24. data/app/controllers/playbook/pages_controller.rb +0 -79
  25. data/app/controllers/playbook/samples_controller.rb +0 -40
  26. data/app/pb_kits/playbook/packs/application.js +0 -55
  27. data/app/pb_kits/playbook/packs/examples.js +0 -174
  28. data/app/pb_kits/playbook/packs/main.scss +0 -12
  29. data/app/pb_kits/playbook/packs/samples.js +0 -19
  30. data/app/pb_kits/playbook/packs/site_styles/_samples.scss +0 -72
  31. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +0 -43
  32. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +0 -135
  33. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +0 -9
  34. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +0 -531
  35. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +0 -92
  36. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +0 -15
  37. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +0 -190
  38. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -18
  39. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +0 -82
  40. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +0 -72
  41. data/app/pb_kits/playbook/pb_filter/docs/_description.md +0 -3
  42. data/app/views/layouts/playbook/_mobile_hamburger.html.erb +0 -2
  43. data/app/views/layouts/playbook/_nav.html.erb +0 -13
  44. data/app/views/layouts/playbook/_sidebar.html.erb +0 -52
  45. data/app/views/layouts/playbook/application.html.slim +0 -22
  46. data/app/views/layouts/playbook/fullscreen.html.slim +0 -10
  47. data/app/views/layouts/playbook/grid.html.slim +0 -10
  48. data/app/views/layouts/playbook/samples.html.erb +0 -18
  49. data/app/views/playbook/guides/create_kit.html.slim +0 -16
  50. data/app/views/playbook/guides/create_kit/_file_naming.html.md +0 -2
  51. data/app/views/playbook/guides/create_kit/_generator.html.md +0 -6
  52. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +0 -2
  53. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +0 -2
  54. data/app/views/playbook/guides/create_kit/_kit_react.html.md +0 -2
  55. data/app/views/playbook/guides/create_kit/_layout.html.md +0 -2
  56. data/app/views/playbook/guides/create_kit/_view_objects.html.md +0 -2
  57. data/app/views/playbook/guides/create_kit/_writing_sass.md +0 -10
  58. data/app/views/playbook/guides/use_nitro.html.slim +0 -6
  59. data/app/views/playbook/guides/use_nitro/_local.html.md +0 -2
  60. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +0 -2
  61. data/app/views/playbook/guides/use_nitro/_versions.html.md +0 -2
  62. data/app/views/playbook/pages/fullscreen.html.slim +0 -10
  63. data/app/views/playbook/pages/grid.html.slim +0 -2
  64. data/app/views/playbook/pages/home.html.slim +0 -4
  65. data/app/views/playbook/pages/kit_category_show.html.erb +0 -14
  66. data/app/views/playbook/pages/kit_show.html.erb +0 -33
  67. data/app/views/playbook/pages/kits.html.erb +0 -12
  68. data/app/views/playbook/pages/principals/_getting_started.html.md +0 -30
  69. data/app/views/playbook/pages/principles.html.slim +0 -3
  70. data/app/views/playbook/pages/tokens.html.slim +0 -15
  71. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +0 -17
  72. data/app/views/playbook/pages/utilities.html.slim +0 -116
  73. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +0 -15
  74. data/app/views/playbook/samples/dashboards/index.html.erb +0 -81
  75. data/app/views/playbook/samples/dashboards/index.jsx +0 -130
  76. data/app/views/playbook/samples/filter_table/index.html.erb +0 -348
  77. data/app/views/playbook/samples/filter_table/index.jsx +0 -433
  78. data/app/views/playbook/samples/registration/index.html.erb +0 -316
  79. data/app/views/playbook/samples/registration/index.jsx +0 -476
  80. data/app/views/playbook/samples/sample_show.html.erb +0 -36
data/app/views/playbook/samples/registration/index.jsx DELETED
@@ -1,476 +0,0 @@
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