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
data/app/views/playbook/samples/filter_table/index.jsx ADDED
@@ -0,0 +1,433 @@
1
+ import React from 'react'
2
+ import { Body, Button, Caption, CircleIconButton, Currency, Date, Filter, Flex, FlexItem, PersonContact, ProgressPills, Table, TextInput, Title, User } from '../../../../pb_kits/playbook'
3
+
4
+ const FilterTable = () => (
5
+ <div>
6
+ <Flex
7
+ className="bg_light"
8
+ marginTop="md"
9
+ paddingX="md"
10
+ spacing="between"
11
+ >
12
+ <FlexItem>
13
+ <Title
14
+ size={3}
15
+ tag="h3"
16
+ text="Prospective Clients"
17
+ />
18
+ </FlexItem>
19
+ <FlexItem>
20
+ <Button
21
+ onClick={() => alert('button clicked!')}
22
+ text="Add Client"
23
+ />
24
+ </FlexItem>
25
+ </Flex>
26
+ <Filter
27
+ filters={{ 'Start Date': 'Apr 19, 2020', 'End Date': 'Apr 20, 2020' }}
28
+ marginTop="md"
29
+ marginX="md"
30
+ results={0}
31
+ sortOptions={{
32
+ dateCreated: 'Date Created',
33
+ // eslint-disable-next-line
34
+ assignee: 'Assignee',
35
+ // eslint-disable-next-line
36
+ contact: 'Contact',
37
+ // eslint-disable-next-line
38
+ inquirySource: 'Inquiry Source',
39
+ }}
40
+ sortValue={[{ name: 'dateCreated', dir: 'asc' }]}
41
+ template="single"
42
+ >
43
+
44
+ <Flex orientation="row">
45
+ <TextInput
46
+ aria={{ label: 'hello' }}
47
+ data={{ say: 'hi', yell: 'go' }}
48
+ id="unique-id"
49
+ label="Start Date"
50
+ paddingRight="md"
51
+ placeholder="Enter first name"
52
+ value="Apr 19, 2020"
53
+ />
54
+ <TextInput
55
+ aria={{ label: 'hello' }}
56
+ data={{ say: 'hi', yell: 'go' }}
57
+ id="unique-id"
58
+ label="End Date"
59
+ placeholder="Enter first name"
60
+ value="Apr 20, 2020"
61
+ />
62
+ </Flex>
63
+
64
+ <Flex spacing="between">
65
+ <Button text="Apply" />
66
+ <Button
67
+ text="Clear"
68
+ variant="secondary"
69
+ />
70
+ </Flex>
71
+ </Filter>
72
+ <Flex orientation="row">
73
+
74
+ <Table
75
+ margin="md"
76
+ size="sm"
77
+ >
78
+ <thead>
79
+ <tr>
80
+ <th>{'Contact'}</th>
81
+ <th>{'Date Created'}</th>
82
+ <th>{'Inquiry Source'}</th>
83
+ <th>{'Lead Status'}</th>
84
+ <th>{'Quote'}</th>
85
+ <th>{'Assignee'}</th>
86
+ <th>{'Actions'}</th>
87
+ </tr>
88
+ </thead>
89
+ <tbody>
90
+ <tr>
91
+ <td>
92
+ <PersonContact
93
+ contacts={[
94
+ {
95
+ contactType: 'cell',
96
+ contactValue: '3832919348',
97
+ },
98
+ {
99
+ contactType: 'email',
100
+ contactValue: 'jesse.cortez@gmail.com',
101
+ },
102
+ ]}
103
+ firstName="Jesse"
104
+ lastName="Cortez"
105
+ />
106
+ </td>
107
+ <td>
108
+ <Date
109
+ size="xs"
110
+ value="2020-04-20T04:20:00.000Z"
111
+ />
112
+ </td>
113
+ <td>
114
+ <Body text="Email" />
115
+ <Caption
116
+ size="xs"
117
+ text="hello@companyname.com"
118
+ />
119
+ </td>
120
+ <td>
121
+ <ProgressPills
122
+ active={0}
123
+ steps={4}
124
+ title="Status:"
125
+ value="Not Started"
126
+ />
127
+ </td>
128
+ <td>
129
+ <Currency amount="729.63" />
130
+ </td>
131
+ <td>
132
+ <Body text="Unassigned" />
133
+ </td>
134
+ <td>
135
+ <CircleIconButton
136
+ icon="ellipsis-h"
137
+ variant="secondary"
138
+ />
139
+ </td>
140
+ </tr>
141
+ <tr>
142
+ <td>
143
+ <PersonContact
144
+ contacts={[
145
+ {
146
+ contactType: 'cell',
147
+ contactValue: '8313455824',
148
+ },
149
+ {
150
+ contactType: 'email',
151
+ contactValue: 'billbuch@yahoo.com',
152
+ },
153
+ ]}
154
+ firstName="Bill"
155
+ lastName="Buchanan"
156
+ />
157
+ </td>
158
+ <td>
159
+ <Date
160
+ size="xs"
161
+ value="2020-04-20T04:20:00.000Z"
162
+ />
163
+ </td>
164
+ <td>
165
+ <Body text="Social Media" />
166
+ <Caption
167
+ size="xs"
168
+ text="Facebook"
169
+ />
170
+ </td>
171
+ <td>
172
+ <ProgressPills
173
+ active={3}
174
+ steps={4}
175
+ title="Status:"
176
+ value="Negotiation"
177
+ />
178
+ </td>
179
+ <td>
180
+ <Currency amount="534.40" />
181
+ </td>
182
+ <td>
183
+ <User
184
+ align="left"
185
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
186
+ name="Anna Black"
187
+ orientation="horizontal"
188
+ title="Project Coordinator"
189
+ />
190
+ </td>
191
+ <td>
192
+ <CircleIconButton
193
+ icon="ellipsis-h"
194
+ variant="secondary"
195
+ />
196
+ </td>
197
+ </tr>
198
+ <tr>
199
+ <td>
200
+ <PersonContact
201
+ contacts={[
202
+ {
203
+ contactType: 'cell',
204
+ contactValue: '1582430782',
205
+ },
206
+ {
207
+ contactType: 'email',
208
+ contactValue: 'effieguzman@comcast.net',
209
+ },
210
+ ]}
211
+ firstName="Effie"
212
+ lastName="Guzman"
213
+ />
214
+ </td>
215
+ <td>
216
+ <Date
217
+ size="xs"
218
+ value="2020-04-20T04:20:00.000Z"
219
+ />
220
+ </td>
221
+ <td>
222
+ <Body text="Online Quote" />
223
+ <Caption
224
+ size="xs"
225
+ text="Landing Page"
226
+ />
227
+ </td>
228
+ <td>
229
+ <ProgressPills
230
+ active={4}
231
+ steps={4}
232
+ title="Status:"
233
+ value="Contract"
234
+ />
235
+ </td>
236
+ <td>
237
+ <Currency amount="392.26" />
238
+ </td>
239
+ <td>
240
+ <User
241
+ align="left"
242
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
243
+ name="Anna Black"
244
+ orientation="horizontal"
245
+ title="Project Coordinator"
246
+ />
247
+ </td>
248
+ <td>
249
+ <CircleIconButton
250
+ icon="ellipsis-h"
251
+ variant="secondary"
252
+ />
253
+ </td>
254
+ </tr>
255
+ <tr>
256
+ <td>
257
+ <PersonContact
258
+ contacts={[
259
+ {
260
+ contactType: 'cell',
261
+ contactValue: '3859275970',
262
+ },
263
+ {
264
+ contactType: 'email',
265
+ contactValue: 'rodneyboone@gmail.com',
266
+ },
267
+ ]}
268
+ firstName="Rodney"
269
+ lastName="Boone"
270
+ />
271
+ </td>
272
+ <td>
273
+ <Date
274
+ size="xs"
275
+ value="2020-04-20T04:20:00.000Z"
276
+ />
277
+ </td>
278
+ <td>
279
+ <Body text="Internal" />
280
+ <Caption
281
+ size="xs"
282
+ text="Referral"
283
+ />
284
+ </td>
285
+ <td>
286
+ <ProgressPills
287
+ active={4}
288
+ steps={4}
289
+ title="Status:"
290
+ value="Contract"
291
+ />
292
+ </td>
293
+ <td>
294
+ <Currency amount="342.86" />
295
+ </td>
296
+ <td>
297
+ <User
298
+ align="left"
299
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
300
+ name="Anna Black"
301
+ orientation="horizontal"
302
+ title="Project Coordinator"
303
+ />
304
+ </td>
305
+ <td>
306
+ <CircleIconButton
307
+ icon="ellipsis-h"
308
+ variant="secondary"
309
+ />
310
+ </td>
311
+ </tr>
312
+ <tr>
313
+ <td>
314
+ <PersonContact
315
+ contacts={[
316
+ {
317
+ contactType: 'cell',
318
+ contactValue: '2849186943',
319
+ },
320
+ {
321
+ contactType: 'email',
322
+ contactValue: 'barbaramaxwell4@yahoo.com',
323
+ },
324
+ ]}
325
+ firstName="Barbara"
326
+ lastName="Maxwell"
327
+ />
328
+ </td>
329
+ <td>
330
+ <Date
331
+ size="xs"
332
+ value="2020-04-20T04:20:00.000Z"
333
+ />
334
+ </td>
335
+ <td>
336
+ <Body text="Online Quote" />
337
+ <Caption
338
+ size="xs"
339
+ text="Main Website"
340
+ />
341
+ </td>
342
+ <td>
343
+ <ProgressPills
344
+ active={3}
345
+ steps={4}
346
+ title="Status:"
347
+ value="Negotiation"
348
+ />
349
+ </td>
350
+ <td>
351
+ <Currency amount="145.01" />
352
+ </td>
353
+ <td>
354
+ <User
355
+ align="left"
356
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
357
+ name="Anna Black"
358
+ orientation="horizontal"
359
+ title="Project Coordinator"
360
+ />
361
+ </td>
362
+ <td>
363
+ <CircleIconButton
364
+ icon="ellipsis-h"
365
+ variant="secondary"
366
+ />
367
+ </td>
368
+ </tr>
369
+ <tr>
370
+ <td>
371
+ <PersonContact
372
+ contacts={[
373
+ {
374
+ contactType: 'cell',
375
+ contactValue: '6884927492',
376
+ },
377
+ {
378
+ contactType: 'email',
379
+ contactValue: 'ellen.thornton@gmail.com',
380
+ },
381
+ ]}
382
+ firstName="Ellen"
383
+ lastName="Thornton"
384
+ />
385
+ </td>
386
+ <td>
387
+ <Date
388
+ size="xs"
389
+ value="2020-04-20T04:20:00.000Z"
390
+ />
391
+ </td>
392
+ <td>
393
+ <Body text="Social Media" />
394
+ <Caption
395
+ size="xs"
396
+ text="Instagram"
397
+ />
398
+ </td>
399
+ <td>
400
+ <ProgressPills
401
+ active={3}
402
+ steps={4}
403
+ title="Status:"
404
+ value="Negotiation"
405
+ />
406
+ </td>
407
+ <td>
408
+ <Currency amount="25.27" />
409
+ </td>
410
+ <td>
411
+ <User
412
+ align="left"
413
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
414
+ name="Anna Black"
415
+ orientation="horizontal"
416
+ title="Project Coordinator"
417
+ />
418
+ </td>
419
+ <td>
420
+ <CircleIconButton
421
+ icon="ellipsis-h"
422
+ variant="secondary"
423
+ />
424
+ </td>
425
+ </tr>
426
+ </tbody>
427
+ </Table>
428
+ </Flex>
429
+
430
+ </div>
431
+ )
432
+
433
+ export default FilterTable
data/app/views/playbook/samples/registration/index.html.erb ADDED
@@ -0,0 +1,316 @@
1
+ <%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
2
+ <%= pb_rails("layout/sidebar") do %>
3
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center", padding: "md"}) do %>
4
+ <%= pb_rails("flex/flex_item") do %>
5
+ <%= pb_rails("title", props: { text: "Design Expo", tag: "h2", size: 3 }) %>
6
+ <% end %>
7
+ <%= pb_rails("flex/flex_item") do %>
8
+ <%= pb_rails("body", props: {
9
+ text: "Annual Conference*",
10
+ color: "light"
11
+ }) %>
12
+ <% end %>
13
+ <% end %>
14
+
15
+ <%= pb_rails("section_separator") %>
16
+ <%= pb_rails("flex", props: {orientation: "column", padding: "md"}) do %>
17
+ <%= pb_rails("flex/flex_item") do %>
18
+ <%= pb_rails("title", props: { text: "Regions", tag: "h4", size: 4, padding_bottom: "sm" }) %>
19
+ <% end %>
20
+
21
+ <%= pb_rails("flex", props: {orientation: "column"}) do %>
22
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>
23
+ <%= pb_rails("checkbox" , props: {
24
+ text: "North America",
25
+ value: "checkbox-value",
26
+ checked: true,
27
+ name: "checkbox-name",
28
+ padding_left: "sm",
29
+ padding_bottom: "sm"
30
+ }) %>
31
+ <% end %>
32
+ <%= pb_rails("body", props: {classname: "flex-item"}) do %>
33
+ <%= pb_rails("checkbox" , props: {
34
+ text: "Europe",
35
+ value: "checkbox-value",
36
+ checked: true,
37
+ name: "checkbox-name",
38
+ padding_left: "sm",
39
+ padding_bottom: "sm"
40
+ }) %>
41
+ <% end %>
42
+ <% end %>
43
+
44
+
45
+ <%= pb_rails("title", props: { text: "Total Registered", tag: "h4", size: 4, padding_y: "sm" }) %>
46
+
47
+ <%= pb_rails("table", props: { size: "sm", disable_hover: true, padding_bottom: "xs" }) do %>
48
+ <thead>
49
+ <tr>
50
+ <th>Conference</th>
51
+ <th>Total #</th>
52
+ </tr>
53
+ </thead>
54
+ <tbody>
55
+ <tr>
56
+ <td>2020 | SF</td>
57
+ <td>2,391</td>
58
+ </tr>
59
+ <tr>
60
+ <td>2020 | TOR</td>
61
+ <td>3,829</td>
62
+ </tr>
63
+ <tr>
64
+ <td>2019 | AMS</td>
65
+ <td>2,047</td>
66
+ </tr>
67
+ <tr>
68
+ <td>2018 | SF</td>
69
+ <td>1,824</td>
70
+ </tr>
71
+ <tr>
72
+ <td>2017 | LA</td>
73
+ <td>719</td>
74
+ </tr>
75
+ <tr>
76
+ <td>2017 | LDN</td>
77
+ <td>491</td>
78
+ </tr>
79
+ </tbody>
80
+ <% end %>
81
+ <%= pb_rails("caption", props: { text: "*This dashboard includes the last six conferences", size: 'xs' }) %>
82
+ <% end %>
83
+
84
+ <% end %>
85
+
86
+
87
+
88
+ <%= pb_rails("layout/body", props: { padding: "xl" }) do %>
89
+
90
+ <%= pb_rails("title", props: { text: "Registration Dashboard", tag: "h1", size: 3, padding_bottom: "lg" }) %>
91
+
92
+
93
+ <%= pb_rails("flex") do %>
94
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "60%", padding_right: "lg"}) do %>
95
+ <%= pb_rails("card") do %>
96
+ <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_bottom: "md"}) do %>
97
+ <%= pb_rails("flex/flex_item") do %>
98
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
99
+ <%= pb_rails("flex/flex_item") do %>
100
+ <%= pb_rails("caption", props: { text: "2020 | SF", size: "xs" }) %>
101
+ <% end %>
102
+ <%= pb_rails("flex/flex_item") do %>
103
+ <%= pb_rails("caption", props: { text: "Total Registered" }) %>
104
+ <% end %>
105
+ <%= pb_rails("flex/flex_item") do %>
106
+ <%= pb_rails("title", props: { text: "2,391", tag: "h3", size: 2 }) %>
107
+ <% end %>
108
+ <% end %>
109
+ <% end %>
110
+ <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
111
+ <%= pb_rails("flex/flex_item") do %>
112
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
113
+ <%= pb_rails("flex/flex_item") do %>
114
+ <%= pb_rails("caption", props: { text: "Graphic" }) %>
115
+ <% end %>
116
+ <%= pb_rails("flex/flex_item") do %>
117
+ <%= pb_rails("title", props: { text: "353", tag: "h3", size: 3 }) %>
118
+ <% end %>
119
+ <% end %>
120
+ <% end %>
121
+ <%= pb_rails("flex/flex_item") do %>
122
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
123
+ <%= pb_rails("flex/flex_item") do %>
124
+ <%= pb_rails("caption", props: { text: "UX/UI" }) %>
125
+ <% end %>
126
+ <%= pb_rails("flex/flex_item") do %>
127
+ <%= pb_rails("title", props: { text: "254", tag: "h3", size: 3 }) %>
128
+ <% end %>
129
+ <% end %>
130
+ <% end %>
131
+ <%= pb_rails("flex/flex_item") do %>
132
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
133
+ <%= pb_rails("flex/flex_item") do %>
134
+ <%= pb_rails("caption", props: { text: "Product" }) %>
135
+ <% end %>
136
+ <%= pb_rails("flex/flex_item") do %>
137
+ <%= pb_rails("title", props: { text: "194", tag: "h3", size: 3 }) %>
138
+ <% end %>
139
+ <% end %>
140
+ <% end %>
141
+ <% end %>
142
+ <%= pb_rails("section_separator") %>
143
+ <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_top: "sm"}) do %>
144
+ <%= pb_rails("flex/flex_item") do %>
145
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
146
+ <%= pb_rails("flex/flex_item") do %>
147
+ <%= pb_rails("caption", props: { text: "2020 | TOR", size: "xs" }) %>
148
+ <% end %>
149
+ <%= pb_rails("flex/flex_item") do %>
150
+ <%= pb_rails("caption", props: { text: "Total Registered" }) %>
151
+ <% end %>
152
+ <%= pb_rails("flex/flex_item") do %>
153
+ <%= pb_rails("title", props: { text: "3,829", tag: "h3", size: 2 }) %>
154
+ <% end %>
155
+ <% end %>
156
+ <% end %>
157
+ <%= pb_rails("flex/flex_item") do %>
158
+ <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
159
+ <% end %>
160
+ <%= pb_rails("flex/flex_item") do %>
161
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
162
+ <%= pb_rails("flex/flex_item") do %>
163
+ <%= pb_rails("caption", props: { text: "Graphic" }) %>
164
+ <% end %>
165
+ <%= pb_rails("flex/flex_item") do %>
166
+ <%= pb_rails("title", props: { text: "937", tag: "h3", size: 3 }) %>
167
+ <% end %>
168
+ <% end %>
169
+ <% end %>
170
+ <%= pb_rails("flex/flex_item") do %>
171
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
172
+ <%= pb_rails("flex/flex_item") do %>
173
+ <%= pb_rails("caption", props: { text: "UX/UI" }) %>
174
+ <% end %>
175
+ <%= pb_rails("flex/flex_item") do %>
176
+ <%= pb_rails("title", props: { text: "721", tag: "h3", size: 3 }) %>
177
+ <% end %>
178
+ <% end %>
179
+ <% end %>
180
+ <%= pb_rails("flex/flex_item") do %>
181
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
182
+ <%= pb_rails("flex/flex_item") do %>
183
+ <%= pb_rails("caption", props: { text: "Product" }) %>
184
+ <% end %>
185
+ <%= pb_rails("flex/flex_item") do %>
186
+ <%= pb_rails("title", props: { text: "628", tag: "h3", size: 3 }) %>
187
+ <% end %>
188
+ <% end %>
189
+ <% end %>
190
+ <% end %>
191
+ <% end %>
192
+
193
+ <%= pb_rails("flex", props: {orientation: "column", horizontal: "right", padding_bottom: "md"}) do %>
194
+ <%= pb_rails("flex/flex_item") do %>
195
+ <%= pb_rails("button", props: { text: "View full breakdown", variant: "link" }) %>
196
+ <% end %>
197
+ <% end %>
198
+
199
+ <%= pb_rails("card") do %>
200
+ <% data = [{
201
+ name: '2020 | SF',
202
+ data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
203
+ }, {
204
+ name: '2020 | TOR',
205
+ data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
206
+ }, {
207
+ name: '2019 | AMS',
208
+ data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
209
+ }, {
210
+ name: '2018 | SF',
211
+ data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
212
+ }, {
213
+ name: '2017 | LA',
214
+ data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
215
+ }] %>
216
+
217
+ <%= pb_rails("line_graph", props: {
218
+ id: "line-registration",
219
+ gradient: false,
220
+ chart_data: data,
221
+ x_axis_categories:['7 wks away','6 wks away','5 wks away','4 wks away','3 wks away','2 wks away','1 wk away','Start of event'],
222
+ title: 'Running Total',
223
+ axis_title: 'Total Registration',
224
+ legend: true,
225
+ height: '80%'
226
+ }) %>
227
+ <% end %>
228
+ <% end %>
229
+
230
+
231
+
232
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "40%"}) do %>
233
+ <%= pb_rails("card") do %>
234
+ <% total = [{
235
+ name: 'Registrations',
236
+ data: [1475, 524, 1344, 780, 200, 900]
237
+ }] %>
238
+ <%= pb_rails("bar_graph", props: {
239
+ axis_title: 'Total Registered',
240
+ chart_data: total,
241
+ id: "total-attendees",
242
+ y_axis_min: 0,
243
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
244
+ height: '30%'
245
+ }) %>
246
+
247
+ <% new_attendees = [{
248
+ name: 'Registrations',
249
+ data: [1475, 524, 1344, 780, 200, 900]
250
+ }] %>
251
+ <%= pb_rails("bar_graph", props: {
252
+ axis_title: 'New Attendees',
253
+ chart_data: new_attendees,
254
+ id: "new-attendees",
255
+ y_axis_min: 0,
256
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
257
+ height: '30%'
258
+ }) %>
259
+
260
+ <% repeating_attendees = [{
261
+ name: 'Registrations',
262
+ data: [1475, 524, 1344, 780, 200, 900]
263
+ }] %>
264
+ <%= pb_rails("bar_graph", props: {
265
+ axis_title: 'Repeating Attendees',
266
+ chart_data: repeating_attendees,
267
+ id: "repeating-attendees",
268
+ y_axis_min: 0,
269
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
270
+ height: '30%'
271
+ }) %>
272
+
273
+ <% graphic_designers = [{
274
+ name: 'Registrations',
275
+ data: [1475, 524, 1344, 780, 200, 900]
276
+ }] %>
277
+ <%= pb_rails("bar_graph", props: {
278
+ axis_title: 'Graphic Designers',
279
+ chart_data: graphic_designers,
280
+ id: "graphic-designers",
281
+ y_axis_min: 0,
282
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
283
+ height: '30%'
284
+ }) %>
285
+
286
+ <% ux_ui = [{
287
+ name: 'Registrations',
288
+ data: [1475, 524, 1344, 780, 200, 900]
289
+ }] %>
290
+ <%= pb_rails("bar_graph", props: {
291
+ axis_title: 'UX/UI',
292
+ chart_data: ux_ui,
293
+ id: "ux-ui",
294
+ y_axis_min: 0,
295
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
296
+ height: '30%'
297
+ }) %>
298
+
299
+ <% product_designers = [{
300
+ name: 'Registrations',
301
+ data: [1475, 524, 1344, 780, 200, 900]
302
+ }] %>
303
+ <%= pb_rails("bar_graph", props: {
304
+ axis_title: 'Product Designers',
305
+ chart_data: product_designers,
306
+ id: "product-designers",
307
+ y_axis_min: 0,
308
+ x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
309
+ height: '30%'
310
+ }) %>
311
+
312
+ <% end %>
313
+ <% end %>
314
+ <% end %>
315
+ <% end %>
316
+ <% end %>