playbook_ui 5.4.0 → 5.5.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55fa48f865b6b79cacae36a5e14f509a3cfefca7cb380e586657739f130d5e2d
-  data.tar.gz: d7ac2b958cc908d72c50f2ba27068f9d3ca8c4f4dd8caa158adeeba6af7fc46a
+  metadata.gz: 80d3445db1a3c2f93076e12a4a582addb5187c6a5ef3c36ddebbab3fb82a045f
+  data.tar.gz: 331cc223a6a087ff2a1f6799b25a3e8b91ec0cc85ec7904261843986075c4e62
 SHA512:
-  metadata.gz: 95ed9a7e3a31996a636129fd43ae63c41ab31f7011044588116b364023b326f9eecf33b40aa2fa9ba81ca269b8b29ba5ef51de7d0dbca9bd2f34efeca03b1150
-  data.tar.gz: ca78aa387f3d479cd1c1e3ad81f2fc186cb182ab1353376f82baf321aa8afefb001207d1a0669e9bbc18647df210b8fbc48371eca53a6d1295bac6f0b6a351d4
+  metadata.gz: 5af755abbf2e1350a3cfe728b9e1290b81994cf675b2ecda3c00c9bb43e6c5c64353c1577e31d29d63588ffed84ec3638397b8e3ea31401c0c8814519906d897
+  data.tar.gz: 83b752409849ff081f195d317531dd16f1230954a712bdaaee15dfea65fe14de9e404394b1e9b0062513a7e95f5ebe6cb3149cbc86ce2be294be213cbb36708b

data/app/pb_kits/playbook/data/menu.yml

@@ -2,6 +2,7 @@ samples:
   - dashboards
   - registration
   - filter_table
+  - collection_detail
 
 kits:
   - avatar

data/app/pb_kits/playbook/packs/samples.js

@@ -13,7 +13,9 @@ import WebpackerReact from 'webpacker-react'
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
 import FilterTable from '../../../views/playbook/samples/filter_table/index.jsx'
 import Registration from '../../../views/playbook/samples/registration/index.jsx'
+import CollectionDetail from '../../../views/playbook/samples/collection_detail/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
 WebpackerReact.setup({ FilterTable })
 WebpackerReact.setup({ Registration })
+WebpackerReact.setup({ CollectionDetail })

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -40,11 +40,11 @@ const Body = (props: BodyProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    className,
     buildCss('pb_body_kit', color, status, {
       dark: dark,
     }),
-    spacing(props)
+    spacing(props),
+    className
   )
   const Tag = `${tag}`
 

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -3,11 +3,11 @@
 [class^=pb_caption_kit] {
   @include caption;
 
-  &[class*=_lg] {
+  &[class^=pb_caption_kit_lg] {
     @include caption_lg;
   }
 
-  &[class*=_xs] {
+  &[class^=pb_caption_kit_xs] {
     @include caption_xs;
   }
 

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 import {
   Body,
@@ -11,7 +12,9 @@ import {
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
+  aria?: object,
   className?: String,
+  data?: object,
   id?: String,
   statChange?: {
     change?: String,
@@ -24,27 +27,27 @@ type DashboardValueProps = {
   }
 }
 
-const dashboardValueCSS = ({
-  align = 'left',
-
-}: DashboardValueProps) => {
-  const alignStyle = align !== '' ? `_${align}` : ''
-
-  return 'pb_dashboard_value_kit' + alignStyle
-}
-
 const DashboardValue = (props: DashboardValueProps) => {
   const {
+    align = 'left',
+    aria = {},
     className,
+    data = {},
     id,
-    statChange,
+    statChange = {},
     statLabel,
-    statValue,
+    statValue = {},
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, spacing(props))
+
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className, spacing(props))}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       <If condition={statLabel}>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -14,7 +14,7 @@ const Image = (props: ImageProps) => {
   return (
     <img
         alt={alt}
-        className={classnames('pb_image lazyload blur_up', spacing(props))}
+        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
         data-src={url}
     />
   )

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -35,10 +35,25 @@ $card-border-radius: $border_rad_lightest;
       display: grid;
       width: 100%;
       height: 100%;
+      padding: $space_lg;
       grid-template-areas: 
       "side-bar collection";
       grid-template-columns: .25fr 1fr;
       grid-column-gap: $space_sm;
+      div.layout_body{
+        @media screen and (min-width: $screen-md-min) {
+        margin-left: $space_md;        
+        }
+        @media screen and (max-width: $screen-lg-min) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+        @media screen and (max-width: $screen-md-min) {
+          grid-template-columns: repeat(2, 1fr) !important;
+        }
+         @media screen and (max-width: $screen-xs-min) {
+          grid-template-columns: repeat(1, 1fr) !important;
+        }
+      }
 
       @media screen and (max-width: $screen-md-min) {
         grid-template-areas: "side-bar"
@@ -46,6 +61,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
+      
   }
 
   &[class*=_kanban]{

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -2,12 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 import { Body, Title } from '../'
 
 type LegendProps = {
+  aria?: object,
+  className?: String,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -16,20 +18,39 @@ type LegendProps = {
     | "data_6"
     | "data_7",
   dark?: Boolean,
+  data?: object,
+  id?: String,
   prefixText?: String,
   text: String,
 }
 
 const Legend = (props: LegendProps) => {
-  const { color = 'data_1', dark = false, prefixText, text } = props
+  const {
+    aria = {},
+    className,
+    color = 'data_1',
+    dark = false,
+    data = {},
+    id,
+    prefixText,
+    text,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass),
+    buildCss('pb_legend_kit', color, darkClass), className,
     spacing(props)
   )
 
   return (
-    <div className={bodyCSS}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={bodyCSS}
+        id={id}
+    >
       <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -32,6 +32,7 @@ $selector: ".pb_nav_list";
           }
           [class*=_item_text] {
             color: $primary;
+            font-weight: $bold;
           }
         }
       }
@@ -90,6 +91,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
+        border: none;
         padding: $space_xs ($space_sm - 2px);
         transition-property: color, background-color;
         transition-duration: 0.15s;
@@ -106,6 +108,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           flex: 1;
+          font-weight: $regular;
         }
         &:hover {
           background-color: rgba($primary, 0.03);

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -3,7 +3,7 @@
   data: object.data,
   class: object.classname) do %>
     <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -59,6 +59,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props
 
   const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
     return Object.assign(
@@ -96,7 +97,8 @@ const Popover = (props: PbPopoverProps) => {
               <div
                   className={classnames(
                   'pb_popover_body',
-                  popoverSpacing
+                  popoverSpacing,
+                  overflowHandling
                 )}
                   style={widthHeightStyles()}
               >

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -23,6 +23,8 @@
     @include pb_card;
     border: 0;
     box-shadow: $shadow_deeper;
+  }
+  .overflow_handling {
     overflow: auto;
   }
 }
@@ -49,6 +51,8 @@
   @include pb_card;
   border: 0;
   box-shadow: $shadow_deeper;
+}
+.overflow_handling {
   overflow: auto;
 }
 

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -42,6 +42,10 @@ module Playbook
         out
       end
 
+      def width_height_class_helper
+        "overflow_handling" if max_height || max_width
+      end
+
       def data
         Hash(values[:data]).merge(
           pb_popover_kit: true,

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -7,14 +7,15 @@ import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
   aria?: object,
-  className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
   dark?: Boolean,
   data?: object,
   id?: String,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
+  variant?: null | "primary",
 }
 
 const Title = (props: TitleProps) => {
@@ -27,12 +28,14 @@ const Title = (props: TitleProps) => {
     id,
     size = 3,
     tag = 'h3',
-    text } = props
+    text,
+    variant = null,
+  } = props
 
-  const themeStyle = dark === true ? '_dark' : ''
+  const themeStyle = dark === true ? 'dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, spacing(props))
   const Tag = `${tag}`
 
   return (

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,4 +1,5 @@
 @import "title_mixin";
+@import "../tokens/colors";
 
 [class^=pb_title_kit]{
   &[class*=_1] {
@@ -20,4 +21,10 @@
   &[class*=_dark] {
     @include pb_title_dark;
   }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      color: map-get($status_color_text, $color_name);
+    }
+  }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -36,3 +36,5 @@
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,9 +16,12 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                    values: [nil, "primary"],
+                    default: nil
 
       def classname
-        generate_classname("pb_title_kit", size, dark_class)
+        generate_classname("pb_title_kit", size, dark_class, variant)
       end
 
     private

data/app/views/layouts/playbook/samples.html.erb

@@ -4,6 +4,7 @@
         <title>Full Screen Examples</title>
         <%= csrf_meta_tags %>
         <%= csp_meta_tag %>
+        <meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"/>
         <%= stylesheet_packs_with_chunks_tag 'main' %>
     </head>
     <body>

data/app/views/playbook/samples/collection_detail/index.html.erb

@@ -0,0 +1,169 @@
+<%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "md", layout: "collection_detail" }) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("card", props: { padding: "none" }) do %>
+    <%= pb_rails("caption", props: { text: "News Stories", size: 'lg', margin: "md" }) %>
+    <%= pb_rails("section_separator") %>
+        <%= pb_rails("nav", props: {link: "#", padding_top:"sm" }) do %>
+            <%= pb_rails("nav/item", props: { text: "All News", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "Top Stories", link: "#" }) %>
+            <%= pb_rails("nav/item", props: { text: "National", link: "#", active: true }) %>
+                <%= pb_rails("nav", props: {variant: "subtle", highlight: false }) do %>
+                    <%= pb_rails("nav/item", props: { text: "All", link: "#", active: true  }) %>
+                    <%= pb_rails("nav/item", props: { text: "Planet Money", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Books", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Books, News, and Features", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Science", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Politics", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "National Security", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Environment", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Shots - Health News", link: "#" }) %>
+                    <%= pb_rails("nav/item", props: { text: "Analysis", link: "#" }) %>
+                <% end %>
+            <%= pb_rails("nav/item", props: { text: "World", link: "#" }) %>
+        <% end %>    
+    <% end %>  
+    <% end %>
+
+    <%= pb_rails("layout/body") do %> 
+    <!-- START PLANET MONEY CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
+                <%= pb_rails("caption", props: { text: "Planet Money", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= pb_rails("title", props: { text: "Where’d the Money Go, and Other Questions", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "391" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "2,039" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END PLANET MONEY CARD -->
+    <!-- START WORLD CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 2 }) do %>
+                <%= pb_rails("caption", props: { text: "World", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= pb_rails("title", props: { text: "U.K. Willing To Admit 3 Million If China Adopts Security Law", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "304" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "5,032" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "102" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END WORLD CARD -->
+    <!-- START BOOKS CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 3 }) do %>
+                <%= pb_rails("caption", props: { text: "Books", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= pb_rails("title", props: { text: "Opinion: Harry Potter's Magic Fades When His Creator Tweets", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "201" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "890" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "2" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END BOOKS CARD -->
+    <!-- START NATIONAL CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 4 }) do %>
+                <%= pb_rails("caption", props: { text: "National", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= 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" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "245" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "10,302" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "89" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END NATIONAL CARD -->
+    <!-- START BOOKS, NEWS, AND FEATURES CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 5 }) do %>
+                <%= pb_rails("caption", props: { text: "Books, News, and Features", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= pb_rails("title", props: { text: "Publishers Sue Internet Archive For Mass Copyright Infringement", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "84" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "5,592" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "104" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END BOOKS, NEWS, AND FEATURES CARD -->
+    <!-- START SCIENCE CARD -->
+        <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+            <%= pb_rails("card/card_header", props: { padding: "sm", category_color: 6 }) do %>
+                <%= pb_rails("caption", props: { text: "Science", dark: true }) %>
+            <% end %>
+            <%= pb_rails("card/card_body", props: { padding: "none" }) do %>
+                <%= 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" }) %>
+                <%= pb_rails("title", props: { text: "New Book Argues Migration Isn’t A Crisis — It’s The Solution", tag: "h4", size: 4, padding: "sm" }) %> 
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: { padding: "sm", wrap: true }) do %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "share-alt", text: "54" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item", margin_right: "md" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "eye", text: "3,982" }) %>
+                    <% end %>
+                    <%= pb_rails("body", props: {classname: "flex-item" }) do %>
+                        <%= pb_rails("icon_value", props: { icon: "comments", text: "12" }) %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <!-- END SCIENCE CARD -->
+    <% end %>
+<% end %>
+
+

data/app/views/playbook/samples/collection_detail/index.jsx

@@ -0,0 +1,372 @@
+import React from 'react'
+import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from '../../../../pb_kits/playbook'
+
+const CollectionDetail = () => (
+  <div>
+
+    <Layout
+        layout="collection_detail"
+        padding="lg"
+    >
+      <Card padding="none">
+        <Caption
+            padding="md"
+            size="lg"
+            text="News Stories"
+        />
+        <SectionSeparator />
+        {
+          <Nav
+              link="#"
+              marginTop="sm"
+              orientation="vertical"
+          >
+            <NavItem
+                link="#"
+                text="All News"
+            />
+            <NavItem
+                link="#"
+                text="Top Stories"
+            />
+            <NavItem
+                active
+                link="#"
+                text="National"
+            />
+            <Nav variant="subtle">
+              <NavItem
+                  active
+                  link="#"
+                  text="All"
+              />
+              <NavItem
+                  link="#"
+                  text="Planet Money"
+              />
+              <NavItem
+                  link="#"
+                  text="Books"
+              />
+              <NavItem
+                  link="#"
+                  text="Books, News, and Features"
+              />
+              <NavItem
+                  link="#"
+                  text="Science"
+              />
+              <NavItem
+                  link="#"
+                  text="Politics"
+              />
+              <NavItem
+                  link="#"
+                  text="National Security"
+              />
+              <NavItem
+                  link="#"
+                  text="Environment"
+              />
+              <NavItem
+                  link="#"
+                  text="Shots - Health News"
+              />
+              <NavItem
+                  link="#"
+                  text="Analysis"
+              />
+            </Nav>
+            <NavItem
+                link="#"
+                text="Files"
+            />
+          </Nav>
+        }
+      </Card>
+
+      <Layout.Body>
+        {/* START PLANET MONEY */}
+        <Card padding="none">
+          <Card.Header>
+            <Caption
+                dark
+                text="Planet Money"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Where’d the Money Go, and Other Questions"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="391"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="2,039"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END PLANET MONEY */}
+        {/* START WORLD CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={2}>
+            <Caption
+                dark
+                text="World"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="U.K. Willing To Admit 3 Million If China Adopts Security Law"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="304"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,032"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="102"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END WORLD CARD */}
+        {/* START BOOKS CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={3}>
+            <Caption
+                dark
+                text="Books"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Opinion: Harry Potter's Magic Fades When His Creator Tweets"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="201"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="890"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="2"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS CARD */}
+        {/* START NATIONAL CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={4}>
+            <Caption
+                dark
+                text="National"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingTop="sm"
+                paddingX="sm"
+                size={4}
+                tag="h4"
+                text="1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="245"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="10,302"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END NATIONAL CARD */}
+        {/* START BOOKS, NEWS, AND FEATURES CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={5}>
+            <Caption
+                dark
+                text="Books, News, and Features"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Publishers Sue Internet Archive For Mass Copyright Infringement"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="84"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,592"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="104"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS, NEWS, AND FEATURES CARD */}
+        {/* START SCIENCE CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={6}>
+            <Caption
+                dark
+                text="Science"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <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" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="New Book Argues Migration Isn’t A Crisis — It’s The Solution"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="54"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="3,982"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="12"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END SCIENCE CARD */}
+
+      </Layout.Body>
+
+    </Layout>
+
+  </div>
+)
+export default CollectionDetail

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.4.0"
+  VERSION = "5.5.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.4.0
+  version: 5.5.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-16 00:00:00.000000000 Z
+date: 2020-07-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1773,6 +1773,8 @@ files:
 - app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim
 - app/views/playbook/pages/utilities.html.slim
 - app/views/playbook/pages/utilities/_pb_doc_color.html.slim
+- app/views/playbook/samples/collection_detail/index.html.erb
+- app/views/playbook/samples/collection_detail/index.jsx
 - app/views/playbook/samples/dashboards/index.html.erb
 - app/views/playbook/samples/dashboards/index.jsx
 - app/views/playbook/samples/filter_table/index.html.erb
@@ -1814,12 +1816,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Playbook Design System