playbook_ui 5.4.0 → 5.5.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 55fa48f865b6b79cacae36a5e14f509a3cfefca7cb380e586657739f130d5e2d
4
- data.tar.gz: d7ac2b958cc908d72c50f2ba27068f9d3ca8c4f4dd8caa158adeeba6af7fc46a
3
+ metadata.gz: 80d3445db1a3c2f93076e12a4a582addb5187c6a5ef3c36ddebbab3fb82a045f
4
+ data.tar.gz: 331cc223a6a087ff2a1f6799b25a3e8b91ec0cc85ec7904261843986075c4e62
5
5
  SHA512:
6
- metadata.gz: 95ed9a7e3a31996a636129fd43ae63c41ab31f7011044588116b364023b326f9eecf33b40aa2fa9ba81ca269b8b29ba5ef51de7d0dbca9bd2f34efeca03b1150
7
- data.tar.gz: ca78aa387f3d479cd1c1e3ad81f2fc186cb182ab1353376f82baf321aa8afefb001207d1a0669e9bbc18647df210b8fbc48371eca53a6d1295bac6f0b6a351d4
6
+ metadata.gz: 5af755abbf2e1350a3cfe728b9e1290b81994cf675b2ecda3c00c9bb43e6c5c64353c1577e31d29d63588ffed84ec3638397b8e3ea31401c0c8814519906d897
7
+ data.tar.gz: 83b752409849ff081f195d317531dd16f1230954a712bdaaee15dfea65fe14de9e404394b1e9b0062513a7e95f5ebe6cb3149cbc86ce2be294be213cbb36708b
@@ -2,6 +2,7 @@ samples:
2
2
  - dashboards
3
3
  - registration
4
4
  - filter_table
5
+ - collection_detail
5
6
 
6
7
  kits:
7
8
  - avatar
@@ -13,7 +13,9 @@ import WebpackerReact from 'webpacker-react'
13
13
  import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
14
14
  import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
15
15
  import Registration from '../../../views/playbook/samples/registration/index.jsx'
16
+ import CollectionDetail from '../../../views/playbook/samples/collection_detail/index.jsx'
16
17
 
17
18
  WebpackerReact.setup({ Dashboards })
18
19
  WebpackerReact.setup({ FilterTable })
19
20
  WebpackerReact.setup({ Registration })
21
+ WebpackerReact.setup({ CollectionDetail })
@@ -40,11 +40,11 @@ const Body = (props: BodyProps) => {
40
40
  const ariaProps = buildAriaProps(aria)
41
41
  const dataProps = buildDataProps(data)
42
42
  const classes = classnames(
43
- className,
44
43
  buildCss('pb_body_kit', color, status, {
45
44
  dark: dark,
46
45
  }),
47
- spacing(props)
46
+ spacing(props),
47
+ className
48
48
  )
49
49
  const Tag = `${tag}`
50
50
 
@@ -3,11 +3,11 @@
3
3
  [class^=pb_caption_kit] {
4
4
  @include caption;
5
5
 
6
- &[class*=_lg] {
6
+ &[class^=pb_caption_kit_lg] {
7
7
  @include caption_lg;
8
8
  }
9
9
 
10
- &[class*=_xs] {
10
+ &[class^=pb_caption_kit_xs] {
11
11
  @include caption_xs;
12
12
  }
13
13
 
@@ -1,7 +1,8 @@
1
1
  <%= content_tag(:div,
2
- id: object.id,
2
+ aria: object.aria,
3
+ class: object.classname,
3
4
  data: object.data,
4
- class: object.classname) do %>
5
+ id: object.id) do %>
5
6
  <% if object.stat_label.present? %>
6
7
  <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
7
8
  <% end %>
@@ -2,6 +2,7 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
6
  import { spacing } from '../utilities/spacing.js'
6
7
  import {
7
8
  Body,
@@ -11,7 +12,9 @@ import {
11
12
 
12
13
  type DashboardValueProps = {
13
14
  align?: 'left' | 'center' | 'right',
15
+ aria?: object,
14
16
  className?: String,
17
+ data?: object,
15
18
  id?: String,
16
19
  statChange?: {
17
20
  change?: String,
@@ -24,27 +27,27 @@ type DashboardValueProps = {
24
27
  }
25
28
  }
26
29
 
27
- const dashboardValueCSS = ({
28
- align = 'left',
29
-
30
- }: DashboardValueProps) => {
31
- const alignStyle = align !== '' ? `_${align}` : ''
32
-
33
- return 'pb_dashboard_value_kit' + alignStyle
34
- }
35
-
36
30
  const DashboardValue = (props: DashboardValueProps) => {
37
31
  const {
32
+ align = 'left',
33
+ aria = {},
38
34
  className,
35
+ data = {},
39
36
  id,
40
- statChange,
37
+ statChange = {},
41
38
  statLabel,
42
- statValue,
39
+ statValue = {},
43
40
  } = props
44
41
 
42
+ const ariaProps = buildAriaProps(aria)
43
+ const dataProps = buildDataProps(data)
44
+ const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, spacing(props))
45
+
45
46
  return (
46
47
  <div
47
- className={classnames(dashboardValueCSS(props), className, spacing(props))}
48
+ {...ariaProps}
49
+ {...dataProps}
50
+ className={classes}
48
51
  id={id}
49
52
  >
50
53
  <If condition={statLabel}>
@@ -14,7 +14,7 @@ const Image = (props: ImageProps) => {
14
14
  return (
15
15
  <img
16
16
  alt={alt}
17
- className={classnames('pb_image lazyload blur_up', spacing(props))}
17
+ className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
18
18
  data-src={url}
19
19
  />
20
20
  )
@@ -35,10 +35,25 @@ $card-border-radius: $border_rad_lightest;
35
35
  display: grid;
36
36
  width: 100%;
37
37
  height: 100%;
38
+ padding: $space_lg;
38
39
  grid-template-areas:
39
40
  "side-bar collection";
40
41
  grid-template-columns: .25fr 1fr;
41
42
  grid-column-gap: $space_sm;
43
+ div.layout_body{
44
+ @media screen and (min-width: $screen-md-min) {
45
+ margin-left: $space_md;
46
+ }
47
+ @media screen and (max-width: $screen-lg-min) {
48
+ grid-template-columns: repeat(3, 1fr);
49
+ }
50
+ @media screen and (max-width: $screen-md-min) {
51
+ grid-template-columns: repeat(2, 1fr) !important;
52
+ }
53
+ @media screen and (max-width: $screen-xs-min) {
54
+ grid-template-columns: repeat(1, 1fr) !important;
55
+ }
56
+ }
42
57
 
43
58
  @media screen and (max-width: $screen-md-min) {
44
59
  grid-template-areas: "side-bar"
@@ -46,6 +61,7 @@ $card-border-radius: $border_rad_lightest;
46
61
  grid-template-columns: 1fr;
47
62
  grid-row-gap: $space_sm;
48
63
  }
64
+
49
65
  }
50
66
 
51
67
  &[class*=_kanban]{
@@ -1,4 +1,5 @@
1
1
  <%= content_tag(:div, object.text,
2
+ aria: object.aria,
2
3
  id: object.id,
3
4
  data: object.data,
4
5
  class: object.classname) do %>
@@ -2,12 +2,14 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
- import { buildCss } from '../utilities/props'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
6
  import { spacing } from '../utilities/spacing.js'
7
7
 
8
8
  import { Body, Title } from '../'
9
9
 
10
10
  type LegendProps = {
11
+ aria?: object,
12
+ className?: String,
11
13
  color?: | "data_1"
12
14
  | "data_2"
13
15
  | "data_3"
@@ -16,20 +18,39 @@ type LegendProps = {
16
18
  | "data_6"
17
19
  | "data_7",
18
20
  dark?: Boolean,
21
+ data?: object,
22
+ id?: String,
19
23
  prefixText?: String,
20
24
  text: String,
21
25
  }
22
26
 
23
27
  const Legend = (props: LegendProps) => {
24
- const { color = 'data_1', dark = false, prefixText, text } = props
28
+ const {
29
+ aria = {},
30
+ className,
31
+ color = 'data_1',
32
+ dark = false,
33
+ data = {},
34
+ id,
35
+ prefixText,
36
+ text,
37
+ } = props
38
+
39
+ const ariaProps = buildAriaProps(aria)
40
+ const dataProps = buildDataProps(data)
25
41
  const darkClass = dark ? 'dark' : 'light'
26
42
  const bodyCSS = classnames(
27
- buildCss('pb_legend_kit', color, darkClass),
43
+ buildCss('pb_legend_kit', color, darkClass), className,
28
44
  spacing(props)
29
45
  )
30
46
 
31
47
  return (
32
- <div className={bodyCSS}>
48
+ <div
49
+ {...ariaProps}
50
+ {...dataProps}
51
+ className={bodyCSS}
52
+ id={id}
53
+ >
33
54
  <Body color={dark ? 'lighter' : 'light'}>
34
55
  <span className="pb_legend_indicator_circle" />
35
56
  <If condition={prefixText}>
@@ -32,6 +32,7 @@ $selector: ".pb_nav_list";
32
32
  }
33
33
  [class*=_item_text] {
34
34
  color: $primary;
35
+ font-weight: $bold;
35
36
  }
36
37
  }
37
38
  }
@@ -90,6 +91,7 @@ $selector: ".pb_nav_list";
90
91
  text-decoration: none;
91
92
  display: flex;
92
93
  align-items: center;
94
+ border: none;
93
95
  padding: $space_xs ($space_sm - 2px);
94
96
  transition-property: color, background-color;
95
97
  transition-duration: 0.15s;
@@ -106,6 +108,7 @@ $selector: ".pb_nav_list";
106
108
  }
107
109
  [class*=_text] {
108
110
  flex: 1;
111
+ font-weight: $regular;
109
112
  }
110
113
  &:hover {
111
114
  background-color: rgba($primary, 0.03);
@@ -3,7 +3,7 @@
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
5
  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
6
- <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
6
+ <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
7
7
  <%= capture(&object.children) %>
8
8
  </div>
9
9
  </div>
@@ -59,6 +59,7 @@ const Popover = (props: PbPopoverProps) => {
59
59
  } = props
60
60
 
61
61
  const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
62
+ const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
62
63
  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
63
64
  const widthHeightStyles = () => {
64
65
  return Object.assign(
@@ -96,7 +97,8 @@ const Popover = (props: PbPopoverProps) => {
96
97
  <div
97
98
  className={classnames(
98
99
  'pb_popover_body',
99
- popoverSpacing
100
+ popoverSpacing,
101
+ overflowHandling
100
102
  )}
101
103
  style={widthHeightStyles()}
102
104
  >
@@ -23,6 +23,8 @@
23
23
  @include pb_card;
24
24
  border: 0;
25
25
  box-shadow: $shadow_deeper;
26
+ }
27
+ .overflow_handling {
26
28
  overflow: auto;
27
29
  }
28
30
  }
@@ -49,6 +51,8 @@
49
51
  @include pb_card;
50
52
  border: 0;
51
53
  box-shadow: $shadow_deeper;
54
+ }
55
+ .overflow_handling {
52
56
  overflow: auto;
53
57
  }
54
58
 
@@ -42,6 +42,10 @@ module Playbook
42
42
  out
43
43
  end
44
44
 
45
+ def width_height_class_helper
46
+ "overflow_handling" if max_height || max_width
47
+ end
48
+
45
49
  def data
46
50
  Hash(values[:data]).merge(
47
51
  pb_popover_kit: true,
@@ -7,14 +7,15 @@ import { spacing } from '../utilities/spacing.js'
7
7
 
8
8
  type TitleProps = {
9
9
  aria?: object,
10
- className?: String,
11
10
  children?: Array<React.ReactNode> | React.ReactNode,
11
+ className?: String,
12
12
  dark?: Boolean,
13
13
  data?: object,
14
14
  id?: String,
15
15
  size?: 1 | 2 | 3 | 4,
16
16
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
17
17
  text?: String,
18
+ variant?: null | "primary",
18
19
  }
19
20
 
20
21
  const Title = (props: TitleProps) => {
@@ -27,12 +28,14 @@ const Title = (props: TitleProps) => {
27
28
  id,
28
29
  size = 3,
29
30
  tag = 'h3',
30
- text } = props
31
+ text,
32
+ variant = null,
33
+ } = props
31
34
 
32
- const themeStyle = dark === true ? '_dark' : ''
35
+ const themeStyle = dark === true ? 'dark' : ''
33
36
  const ariaProps = buildAriaProps(aria)
34
37
  const dataProps = buildDataProps(data)
35
- const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
38
+ const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, spacing(props))
36
39
  const Tag = `${tag}`
37
40
 
38
41
  return (
@@ -1,4 +1,5 @@
1
1
  @import "title_mixin";
2
+ @import "../tokens/colors";
2
3
 
3
4
  [class^=pb_title_kit]{
4
5
  &[class*=_1] {
@@ -20,4 +21,10 @@
20
21
  &[class*=_dark] {
21
22
  @include pb_title_dark;
22
23
  }
24
+
25
+ @each $color_name, $color_value in $status_colors {
26
+ &[class*=_#{$color_name}] {
27
+ color: map-get($status_color_text, $color_name);
28
+ }
29
+ }
23
30
  }
@@ -36,3 +36,5 @@
36
36
  @mixin pb_title_dark {
37
37
  color: $text_dk_default;
38
38
  }
39
+
40
+
@@ -16,9 +16,12 @@ module Playbook
16
16
  values: %w[h1 h2 h3 h4 h5 h6 p div span],
17
17
  default: "h3"
18
18
  prop :text
19
+ prop :variant, type: Playbook::Props::Enum,
20
+ values: [nil, "primary"],
21
+ default: nil
19
22
 
20
23
  def classname
21
- generate_classname("pb_title_kit", size, dark_class)
24
+ generate_classname("pb_title_kit", size, dark_class, variant)
22
25
  end
23
26
 
24
27
  private
@@ -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>
@@ -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
+
@@ -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.0.pre.alpha1"
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.0.pre.alpha1
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-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1773,6 +1773,8 @@ files:
1773
1773
  - app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim
1774
1774
  - app/views/playbook/pages/utilities.html.slim
1775
1775
  - app/views/playbook/pages/utilities/_pb_doc_color.html.slim
1776
+ - app/views/playbook/samples/collection_detail/index.html.erb
1777
+ - app/views/playbook/samples/collection_detail/index.jsx
1776
1778
  - app/views/playbook/samples/dashboards/index.html.erb
1777
1779
  - app/views/playbook/samples/dashboards/index.jsx
1778
1780
  - app/views/playbook/samples/filter_table/index.html.erb
@@ -1814,12 +1816,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
1814
1816
  version: '0'
1815
1817
  required_rubygems_version: !ruby/object:Gem::Requirement
1816
1818
  requirements:
1817
- - - ">="
1819
+ - - ">"
1818
1820
  - !ruby/object:Gem::Version
1819
- version: '0'
1821
+ version: 1.3.1
1820
1822
  requirements: []
1821
- rubyforge_project:
1822
- rubygems_version: 2.7.3
1823
+ rubygems_version: 3.1.4
1823
1824
  signing_key:
1824
1825
  specification_version: 4
1825
1826
  summary: Playbook Design System