playbook_ui 5.4.0 → 5.5.1.pre.alpha3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/data/menu.yml +2 -0
  4. data/app/pb_kits/playbook/index.js +2 -0
  5. data/app/pb_kits/playbook/packs/examples.js +2 -0
  6. data/app/pb_kits/playbook/packs/samples.js +2 -0
  7. data/app/pb_kits/playbook/pb_body/_body.jsx +2 -2
  8. data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
  9. data/app/pb_kits/playbook/pb_caption/_caption.scss +2 -2
  10. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb +3 -2
  11. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +15 -12
  12. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +36 -0
  13. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +98 -0
  14. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +59 -0
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +38 -0
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +91 -0
  17. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  18. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  19. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +4 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +13 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +23 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +8 -0
  35. data/app/pb_kits/playbook/pb_date_picker/index.js +11 -0
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +1 -0
  37. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  38. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -1
  39. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  40. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +15 -0
  41. data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
  42. data/app/pb_kits/playbook/pb_layout/_layout.scss +16 -0
  43. data/app/pb_kits/playbook/pb_legend/_legend.html.erb +1 -0
  44. data/app/pb_kits/playbook/pb_legend/_legend.jsx +25 -4
  45. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
  46. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +1 -1
  47. data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -1
  48. data/app/pb_kits/playbook/pb_popover/_popover.scss +4 -0
  49. data/app/pb_kits/playbook/pb_popover/popover.rb +4 -0
  50. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
  51. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
  52. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
  53. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
  54. data/app/pb_kits/playbook/pb_title/_title.jsx +7 -4
  55. data/app/pb_kits/playbook/pb_title/_title.scss +7 -0
  56. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +2 -0
  57. data/app/pb_kits/playbook/pb_title/title.rb +4 -1
  58. data/app/pb_kits/playbook/vendor.js +4 -0
  59. data/app/views/layouts/playbook/samples.html.erb +1 -0
  60. data/app/views/playbook/samples/collection_detail/index.html.erb +169 -0
  61. data/app/views/playbook/samples/collection_detail/index.jsx +372 -0
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +31 -4
@@ -0,0 +1,372 @@
1
+ import React from 'react'
2
+ import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from '../../../../pb_kits/playbook'
3
+
4
+ const CollectionDetail = () => (
5
+ <div>
6
+
7
+ <Layout
8
+ layout="collection_detail"
9
+ padding="lg"
10
+ >
11
+ <Card padding="none">
12
+ <Caption
13
+ padding="md"
14
+ size="lg"
15
+ text="News Stories"
16
+ />
17
+ <SectionSeparator />
18
+ {
19
+ <Nav
20
+ link="#"
21
+ marginTop="sm"
22
+ orientation="vertical"
23
+ >
24
+ <NavItem
25
+ link="#"
26
+ text="All News"
27
+ />
28
+ <NavItem
29
+ link="#"
30
+ text="Top Stories"
31
+ />
32
+ <NavItem
33
+ active
34
+ link="#"
35
+ text="National"
36
+ />
37
+ <Nav variant="subtle">
38
+ <NavItem
39
+ active
40
+ link="#"
41
+ text="All"
42
+ />
43
+ <NavItem
44
+ link="#"
45
+ text="Planet Money"
46
+ />
47
+ <NavItem
48
+ link="#"
49
+ text="Books"
50
+ />
51
+ <NavItem
52
+ link="#"
53
+ text="Books, News, and Features"
54
+ />
55
+ <NavItem
56
+ link="#"
57
+ text="Science"
58
+ />
59
+ <NavItem
60
+ link="#"
61
+ text="Politics"
62
+ />
63
+ <NavItem
64
+ link="#"
65
+ text="National Security"
66
+ />
67
+ <NavItem
68
+ link="#"
69
+ text="Environment"
70
+ />
71
+ <NavItem
72
+ link="#"
73
+ text="Shots - Health News"
74
+ />
75
+ <NavItem
76
+ link="#"
77
+ text="Analysis"
78
+ />
79
+ </Nav>
80
+ <NavItem
81
+ link="#"
82
+ text="Files"
83
+ />
84
+ </Nav>
85
+ }
86
+ </Card>
87
+
88
+ <Layout.Body>
89
+ {/* START PLANET MONEY */}
90
+ <Card padding="none">
91
+ <Card.Header>
92
+ <Caption
93
+ dark
94
+ text="Planet Money"
95
+ />
96
+ </Card.Header>
97
+ <Card.Body padding="none">
98
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/292f0C2i3f2z2f2A0P0n/Screen%20Shot%202020-07-09%20at%201.23.31%20PM.png?X-CloudApp-Visitor-Id=3399053&v=ed16c3c4" />
99
+ <Title
100
+ paddingLeft="sm"
101
+ paddingTop="sm"
102
+ size={4}
103
+ tag="h4"
104
+ text="Where’d the Money Go, and Other Questions"
105
+ />
106
+ <SectionSeparator paddingY="sm" />
107
+ <Flex
108
+ orientation="row"
109
+ paddingBottom="sm"
110
+ paddingX="sm"
111
+ wrap
112
+ >
113
+ <FlexItem paddingRight="sm">
114
+ { <IconValue
115
+ icon="share-alt"
116
+ text="391"
117
+ /> }
118
+ </FlexItem>
119
+ <FlexItem paddingRight="sm">
120
+ { <IconValue
121
+ icon="eye"
122
+ text="2,039"
123
+ /> }
124
+ </FlexItem>
125
+ <FlexItem>
126
+ { <IconValue
127
+ icon="comments"
128
+ text="89"
129
+ /> }
130
+ </FlexItem>
131
+ </Flex>
132
+ </Card.Body>
133
+ </Card>
134
+ {/* END PLANET MONEY */}
135
+ {/* START WORLD CARD */}
136
+ <Card padding="none">
137
+ <Card.Header categoryColor={2}>
138
+ <Caption
139
+ dark
140
+ text="World"
141
+ />
142
+ </Card.Header>
143
+ <Card.Body padding="none">
144
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n07340O0c3R0V0L1V0P/Screen%20Shot%202020-07-09%20at%201.41.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=b532b3f0" />
145
+ <Title
146
+ paddingLeft="sm"
147
+ paddingTop="sm"
148
+ size={4}
149
+ tag="h4"
150
+ text="U.K. Willing To Admit 3 Million If China Adopts Security Law"
151
+ />
152
+ <SectionSeparator paddingY="sm" />
153
+ <Flex
154
+ orientation="row"
155
+ paddingBottom="sm"
156
+ paddingX="sm"
157
+ wrap
158
+ >
159
+ <FlexItem paddingRight="sm">
160
+ { <IconValue
161
+ icon="share-alt"
162
+ text="304"
163
+ /> }
164
+ </FlexItem>
165
+ <FlexItem paddingRight="sm">
166
+ { <IconValue
167
+ icon="eye"
168
+ text="5,032"
169
+ /> }
170
+ </FlexItem>
171
+ <FlexItem>
172
+ { <IconValue
173
+ icon="comments"
174
+ text="102"
175
+ /> }
176
+ </FlexItem>
177
+ </Flex>
178
+ </Card.Body>
179
+ </Card>
180
+ {/* END WORLD CARD */}
181
+ {/* START BOOKS CARD */}
182
+ <Card padding="none">
183
+ <Card.Header categoryColor={3}>
184
+ <Caption
185
+ dark
186
+ text="Books"
187
+ />
188
+ </Card.Header>
189
+ <Card.Body padding="none">
190
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/1j2k1g3f2H2W2f1v3225/Screen%20Shot%202020-07-09%20at%201.42.32%20PM.png?X-CloudApp-Visitor-Id=3399053&v=2ab46cb6" />
191
+ <Title
192
+ paddingLeft="sm"
193
+ paddingTop="sm"
194
+ size={4}
195
+ tag="h4"
196
+ text="Opinion: Harry Potter's Magic Fades When His Creator Tweets"
197
+ />
198
+ <SectionSeparator paddingY="sm" />
199
+ <Flex
200
+ orientation="row"
201
+ paddingBottom="sm"
202
+ paddingX="sm"
203
+ wrap
204
+ >
205
+ <FlexItem paddingRight="sm">
206
+ { <IconValue
207
+ icon="share-alt"
208
+ text="201"
209
+ /> }
210
+ </FlexItem>
211
+ <FlexItem paddingRight="sm">
212
+ { <IconValue
213
+ icon="eye"
214
+ text="890"
215
+ /> }
216
+ </FlexItem>
217
+ <FlexItem>
218
+ { <IconValue
219
+ icon="comments"
220
+ text="2"
221
+ /> }
222
+ </FlexItem>
223
+ </Flex>
224
+ </Card.Body>
225
+ </Card>
226
+ {/* END BOOKS CARD */}
227
+ {/* START NATIONAL CARD */}
228
+ <Card padding="none">
229
+ <Card.Header categoryColor={4}>
230
+ <Caption
231
+ dark
232
+ text="National"
233
+ />
234
+ </Card.Header>
235
+ <Card.Body padding="none">
236
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/2j0G2k3I0f3W3a2c2q3o/Screen%20Shot%202020-07-09%20at%201.43.40%20PM.png?X-CloudApp-Visitor-Id=3399053&v=d2667a0b" />
237
+ <Title
238
+ paddingTop="sm"
239
+ paddingX="sm"
240
+ size={4}
241
+ tag="h4"
242
+ text="1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean"
243
+ />
244
+ <SectionSeparator paddingY="sm" />
245
+ <Flex
246
+ orientation="row"
247
+ paddingBottom="sm"
248
+ paddingX="sm"
249
+ wrap
250
+ >
251
+ <FlexItem paddingRight="sm">
252
+ { <IconValue
253
+ icon="share-alt"
254
+ text="245"
255
+ /> }
256
+ </FlexItem>
257
+ <FlexItem paddingRight="sm">
258
+ { <IconValue
259
+ icon="eye"
260
+ text="10,302"
261
+ /> }
262
+ </FlexItem>
263
+ <FlexItem>
264
+ { <IconValue
265
+ icon="comments"
266
+ text="89"
267
+ /> }
268
+ </FlexItem>
269
+ </Flex>
270
+ </Card.Body>
271
+ </Card>
272
+ {/* END NATIONAL CARD */}
273
+ {/* START BOOKS, NEWS, AND FEATURES CARD */}
274
+ <Card padding="none">
275
+ <Card.Header categoryColor={5}>
276
+ <Caption
277
+ dark
278
+ text="Books, News, and Features"
279
+ />
280
+ </Card.Header>
281
+ <Card.Body padding="none">
282
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/0m353s3A3I3B0w3N3W2U/Screen%20Shot%202020-07-09%20at%201.44.30%20PM.png?X-CloudApp-Visitor-Id=3399053&v=5b24787c" />
283
+ <Title
284
+ paddingLeft="sm"
285
+ paddingTop="sm"
286
+ size={4}
287
+ tag="h4"
288
+ text="Publishers Sue Internet Archive For Mass Copyright Infringement"
289
+ />
290
+ <SectionSeparator paddingY="sm" />
291
+ <Flex
292
+ orientation="row"
293
+ paddingBottom="sm"
294
+ paddingX="sm"
295
+ wrap
296
+ >
297
+ <FlexItem paddingRight="sm">
298
+ { <IconValue
299
+ icon="share-alt"
300
+ text="84"
301
+ /> }
302
+ </FlexItem>
303
+ <FlexItem paddingRight="sm">
304
+ { <IconValue
305
+ icon="eye"
306
+ text="5,592"
307
+ /> }
308
+ </FlexItem>
309
+ <FlexItem>
310
+ { <IconValue
311
+ icon="comments"
312
+ text="104"
313
+ /> }
314
+ </FlexItem>
315
+ </Flex>
316
+ </Card.Body>
317
+ </Card>
318
+ {/* END BOOKS, NEWS, AND FEATURES CARD */}
319
+ {/* START SCIENCE CARD */}
320
+ <Card padding="none">
321
+ <Card.Header categoryColor={6}>
322
+ <Caption
323
+ dark
324
+ text="Science"
325
+ />
326
+ </Card.Header>
327
+ <Card.Body padding="none">
328
+ <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n1b1V1F4614343t3547/Screen%20Shot%202020-07-09%20at%201.45.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=a3cc4d20" />
329
+ <Title
330
+ paddingLeft="sm"
331
+ paddingTop="sm"
332
+ size={4}
333
+ tag="h4"
334
+ text="New Book Argues Migration Isn’t A Crisis — It’s The Solution"
335
+ />
336
+ <SectionSeparator paddingY="sm" />
337
+ <Flex
338
+ orientation="row"
339
+ paddingBottom="sm"
340
+ paddingX="sm"
341
+ wrap
342
+ >
343
+ <FlexItem paddingRight="sm">
344
+ { <IconValue
345
+ icon="share-alt"
346
+ text="54"
347
+ /> }
348
+ </FlexItem>
349
+ <FlexItem paddingRight="sm">
350
+ { <IconValue
351
+ icon="eye"
352
+ text="3,982"
353
+ /> }
354
+ </FlexItem>
355
+ <FlexItem>
356
+ { <IconValue
357
+ icon="comments"
358
+ text="12"
359
+ /> }
360
+ </FlexItem>
361
+ </Flex>
362
+ </Card.Body>
363
+ </Card>
364
+ {/* END SCIENCE CARD */}
365
+
366
+ </Layout.Body>
367
+
368
+ </Layout>
369
+
370
+ </div>
371
+ )
372
+ export default CollectionDetail
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "5.4.0"
4
+ VERSION = "5.5.1.pre.alpha3"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 5.4.0
4
+ version: 5.5.1.pre.alpha3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-07-16 00:00:00.000000000 Z
12
+ date: 2020-07-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -662,6 +662,30 @@ files:
662
662
  - app/pb_kits/playbook/pb_date/docs/_description.md
663
663
  - app/pb_kits/playbook/pb_date/docs/example.yml
664
664
  - app/pb_kits/playbook/pb_date/docs/index.js
665
+ - app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
666
+ - app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
667
+ - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
668
+ - app/pb_kits/playbook/pb_date_picker/date_picker.rb
669
+ - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
670
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
671
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
672
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
673
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
674
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
675
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
676
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
677
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
678
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
679
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
680
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
681
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
682
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
683
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
684
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
685
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
686
+ - app/pb_kits/playbook/pb_date_picker/docs/example.yml
687
+ - app/pb_kits/playbook/pb_date_picker/docs/index.js
688
+ - app/pb_kits/playbook/pb_date_picker/index.js
665
689
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
666
690
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
667
691
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -827,6 +851,7 @@ files:
827
851
  - app/pb_kits/playbook/pb_form/form_builder.rb
828
852
  - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
829
853
  - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
854
+ - app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
830
855
  - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
831
856
  - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
832
857
  - app/pb_kits/playbook/pb_form/form_builder/select_field.rb
@@ -1773,6 +1798,8 @@ files:
1773
1798
  - app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim
1774
1799
  - app/views/playbook/pages/utilities.html.slim
1775
1800
  - app/views/playbook/pages/utilities/_pb_doc_color.html.slim
1801
+ - app/views/playbook/samples/collection_detail/index.html.erb
1802
+ - app/views/playbook/samples/collection_detail/index.jsx
1776
1803
  - app/views/playbook/samples/dashboards/index.html.erb
1777
1804
  - app/views/playbook/samples/dashboards/index.jsx
1778
1805
  - app/views/playbook/samples/filter_table/index.html.erb
@@ -1814,9 +1841,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
1814
1841
  version: '0'
1815
1842
  required_rubygems_version: !ruby/object:Gem::Requirement
1816
1843
  requirements:
1817
- - - ">="
1844
+ - - ">"
1818
1845
  - !ruby/object:Gem::Version
1819
- version: '0'
1846
+ version: 1.3.1
1820
1847
  requirements: []
1821
1848
  rubyforge_project:
1822
1849
  rubygems_version: 2.7.3