playbook_ui 5.3.0.pre.alpha1 → 5.5.1.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -2
  3. data/app/pb_kits/playbook/data/menu.yml +4 -3
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/packs/examples.js +2 -2
  6. data/app/pb_kits/playbook/packs/samples.js +2 -0
  7. data/app/pb_kits/playbook/pb_body/_body.html.erb +1 -0
  8. data/app/pb_kits/playbook/pb_body/_body.jsx +33 -24
  9. data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +0 -2
  11. data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +1 -0
  12. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +3 -7
  13. data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
  14. data/app/pb_kits/playbook/pb_caption/_caption.scss +2 -2
  15. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -1
  16. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +18 -5
  17. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +17 -0
  18. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
  19. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  20. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb +1 -0
  21. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +17 -1
  22. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +0 -26
  23. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb +3 -2
  24. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +15 -12
  25. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +36 -0
  26. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +98 -0
  27. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +59 -0
  28. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +38 -0
  29. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +91 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb +1 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx +12 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +24 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +30 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +43 -0
  35. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx +48 -0
  36. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +4 -0
  37. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +13 -0
  38. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +19 -0
  39. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +25 -0
  40. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb +4 -0
  41. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx +13 -0
  42. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +14 -0
  43. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx +22 -0
  44. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +4 -0
  45. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +13 -0
  46. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +23 -0
  47. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +8 -0
  48. data/app/pb_kits/playbook/pb_date_picker/index.js +11 -0
  49. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +1 -0
  50. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  51. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -1
  52. data/app/pb_kits/playbook/pb_form/form_builder.rb +1 -0
  53. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +15 -0
  54. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_image/_image.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_layout/_layout.scss +16 -0
  57. data/app/pb_kits/playbook/pb_legend/_legend.html.erb +1 -0
  58. data/app/pb_kits/playbook/pb_legend/_legend.jsx +25 -4
  59. data/app/pb_kits/playbook/pb_nav/_item.jsx +20 -10
  60. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
  61. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +1 -1
  62. data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -1
  63. data/app/pb_kits/playbook/pb_popover/_popover.scss +4 -0
  64. data/app/pb_kits/playbook/pb_popover/popover.rb +4 -0
  65. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
  66. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
  67. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
  68. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
  69. data/app/pb_kits/playbook/pb_title/_title.jsx +7 -4
  70. data/app/pb_kits/playbook/pb_title/_title.scss +7 -0
  71. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +2 -0
  72. data/app/pb_kits/playbook/pb_title/title.rb +4 -1
  73. data/app/pb_kits/playbook/plugins/pb_chart.js +0 -71
  74. data/app/pb_kits/playbook/vendor.js +4 -0
  75. data/app/views/layouts/playbook/samples.html.erb +1 -0
  76. data/app/views/playbook/samples/collection_detail/index.html.erb +169 -0
  77. data/app/views/playbook/samples/collection_detail/index.jsx +372 -0
  78. data/lib/generators/kit/kit_generator.rb +6 -3
  79. data/lib/generators/kit/templates/kit_html.erb.tt +3 -2
  80. data/lib/generators/kit/templates/kit_jsx.erb.tt +38 -10
  81. data/lib/playbook/version.rb +1 -1
  82. metadata +30 -23
  83. data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb +0 -12
  84. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -105
  85. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +0 -11
  86. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb +0 -11
  87. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +0 -17
  88. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb +0 -14
  89. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +0 -20
  90. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb +0 -15
  91. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +0 -23
  92. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +0 -25
  93. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb +0 -21
  94. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +0 -26
  95. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +0 -33
  96. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +0 -42
  97. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb +0 -14
  98. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +0 -20
  99. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb +0 -29
  100. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +0 -29
  101. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -22
  102. data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -8
  103. data/app/pb_kits/playbook/pb_gauge/gauge.rb +0 -55
data/app/pb_kits/playbook/vendor.js CHANGED
@@ -5,6 +5,10 @@ window.pbChart = pbChart
5
5
  // Forms
6
6
  import './pb_form/pb_form_validation'
7
7
 
8
+ // Date Picker
9
+ import datePickerHelper from './pb_date_picker/date_picker_helper.js'
10
+ window.datePickerHelper = datePickerHelper
11
+
8
12
  // Lazy image loading
9
13
  import 'lazysizes'
10
14
 
data/app/views/layouts/playbook/samples.html.erb CHANGED
@@ -4,6 +4,7 @@
4
4
  <title>Full Screen Examples</title>
5
5
  <%= csrf_meta_tags %>
6
6
  <%= csp_meta_tag %>
7
+ <meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"/>
7
8
  <%= stylesheet_packs_with_chunks_tag 'main' %>
8
9
  </head>
9
10
  <body>
data/app/views/playbook/samples/collection_detail/index.html.erb ADDED
@@ -0,0 +1,169 @@
1
+ <%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", layout: "collection_detail" }) do %>
2
+ <%= pb_rails("layout/sidebar") do %>
3
+ <%= pb_rails("card", props: { padding: "none" }) do %>
4
+ <%= pb_rails("caption", props: { text: "News Stories", size: 'lg', margin: "md" }) %>
5
+ <%= pb_rails("section_separator") %>
6
+ <%= pb_rails("nav", props: {link: "#", padding_top:"sm" }) do %>
7
+ <%= pb_rails("nav/item", props: { text: "All News", link: "#" }) %>
8
+ <%= pb_rails("nav/item", props: { text: "Top Stories", link: "#" }) %>
9
+ <%= pb_rails("nav/item", props: { text: "National", link: "#", active: true }) %>
10
+ <%= pb_rails("nav", props: {variant: "subtle", highlight: false }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "All", link: "#", active: true }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Planet Money", link: "#" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Books", link: "#" }) %>
14
+ <%= pb_rails("nav/item", props: { text: "Books, News, and Features", link: "#" }) %>
15
+ <%= pb_rails("nav/item", props: { text: "Science", link: "#" }) %>
16
+ <%= pb_rails("nav/item", props: { text: "Politics", link: "#" }) %>
17
+ <%= pb_rails("nav/item", props: { text: "National Security", link: "#" }) %>
18
+ <%= pb_rails("nav/item", props: { text: "Environment", link: "#" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "Shots - Health News", link: "#" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Analysis", link: "#" }) %>
21
+ <% end %>
22
+ <%= pb_rails("nav/item", props: { text: "World", link: "#" }) %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
26
+
27
+ <%= pb_rails("layout/body") do %>
28
+ <!-- START PLANET MONEY CARD -->
29
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
30
+ <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
31
+ <%= pb_rails("caption", props: { text: "Planet Money", dark: true }) %>
32
+ <% end %>
33
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
34
+ <%= pb_rails("image", props: { 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" }) %>
35
+ <%= pb_rails("title", props: { text: "Where’d the Money Go, and Other Questions", tag: "h4", size: 4, padding: "sm" }) %>
36
+ <%= pb_rails("section_separator") %>
37
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
38
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
39
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "391" }) %>
40
+ <% end %>
41
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
42
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "2,039" }) %>
43
+ <% end %>
44
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
45
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
46
+ <% end %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
50
+ <!-- END PLANET MONEY CARD -->
51
+ <!-- START WORLD CARD -->
52
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
53
+ <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 2 }) do %>
54
+ <%= pb_rails("caption", props: { text: "World", dark: true }) %>
55
+ <% end %>
56
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
57
+ <%= pb_rails("image", props: { 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" }) %>
58
+ <%= pb_rails("title", props: { text: "U.K. Willing To Admit 3 Million If China Adopts Security Law", tag: "h4", size: 4, padding: "sm" }) %>
59
+ <%= pb_rails("section_separator") %>
60
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
61
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
62
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "304" }) %>
63
+ <% end %>
64
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
65
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "5,032" }) %>
66
+ <% end %>
67
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
68
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "102" }) %>
69
+ <% end %>
70
+ <% end %>
71
+ <% end %>
72
+ <% end %>
73
+ <!-- END WORLD CARD -->
74
+ <!-- START BOOKS CARD -->
75
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
76
+ <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 3 }) do %>
77
+ <%= pb_rails("caption", props: { text: "Books", dark: true }) %>
78
+ <% end %>
79
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
80
+ <%= pb_rails("image", props: { 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" }) %>
81
+ <%= pb_rails("title", props: { text: "Opinion: Harry Potter's Magic Fades When His Creator Tweets", tag: "h4", size: 4, padding: "sm" }) %>
82
+ <%= pb_rails("section_separator") %>
83
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
84
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
85
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "201" }) %>
86
+ <% end %>
87
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
88
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "890" }) %>
89
+ <% end %>
90
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
91
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "2" }) %>
92
+ <% end %>
93
+ <% end %>
94
+ <% end %>
95
+ <% end %>
96
+ <!-- END BOOKS CARD -->
97
+ <!-- START NATIONAL CARD -->
98
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
99
+ <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 4 }) do %>
100
+ <%= pb_rails("caption", props: { text: "National", dark: true }) %>
101
+ <% end %>
102
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
103
+ <%= pb_rails("image", props: { 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" }) %>
104
+ <%= pb_rails("title", props: { text: "1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean", tag: "h4", size: 4, padding: "sm" }) %>
105
+ <%= pb_rails("section_separator") %>
106
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
107
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
108
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "245" }) %>
109
+ <% end %>
110
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
111
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "10,302" }) %>
112
+ <% end %>
113
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
114
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
115
+ <% end %>
116
+ <% end %>
117
+ <% end %>
118
+ <% end %>
119
+ <!-- END NATIONAL CARD -->
120
+ <!-- START BOOKS, NEWS, AND FEATURES CARD -->
121
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
122
+ <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 5 }) do %>
123
+ <%= pb_rails("caption", props: { text: "Books, News, and Features", dark: true }) %>
124
+ <% end %>
125
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
126
+ <%= pb_rails("image", props: { 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" }) %>
127
+ <%= pb_rails("title", props: { text: "Publishers Sue Internet Archive For Mass Copyright Infringement", tag: "h4", size: 4, padding: "sm" }) %>
128
+ <%= pb_rails("section_separator") %>
129
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
130
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
131
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "84" }) %>
132
+ <% end %>
133
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
134
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "5,592" }) %>
135
+ <% end %>
136
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
137
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "104" }) %>
138
+ <% end %>
139
+ <% end %>
140
+ <% end %>
141
+ <% end %>
142
+ <!-- END BOOKS, NEWS, AND FEATURES CARD -->
143
+ <!-- START SCIENCE CARD -->
144
+ <%= pb_rails("card", props: { padding: "none", header: true}) do %>
145
+ <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 6 }) do %>
146
+ <%= pb_rails("caption", props: { text: "Science", dark: true }) %>
147
+ <% end %>
148
+ <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
149
+ <%= pb_rails("image", props: { 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" }) %>
150
+ <%= pb_rails("title", props: { text: "New Book Argues Migration Isn’t A Crisis — It’s The Solution", tag: "h4", size: 4, padding: "sm" }) %>
151
+ <%= pb_rails("section_separator") %>
152
+ <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
153
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
154
+ <%= pb_rails("icon_value", props: { icon: "share-alt", text: "54" }) %>
155
+ <% end %>
156
+ <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
157
+ <%= pb_rails("icon_value", props: { icon: "eye", text: "3,982" }) %>
158
+ <% end %>
159
+ <%= pb_rails("body", props: {classname: "flex-item" }) do %>
160
+ <%= pb_rails("icon_value", props: { icon: "comments", text: "12" }) %>
161
+ <% end %>
162
+ <% end %>
163
+ <% end %>
164
+ <% end %>
165
+ <!-- END SCIENCE CARD -->
166
+ <% end %>
167
+ <% end %>
168
+
169
+
data/app/views/playbook/samples/collection_detail/index.jsx ADDED
@@ -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