playbook_ui 7.13.0.pre.alpha1 → 7.16.0

data/app/pb_kits/playbook/{pb_collapsible/child_kits/_collapsible_content.html.erb → pb_layout/_item.html.erb}

@@ -1,7 +1,6 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
+    class: object.classname) do %>
   <%= capture(&object.children) %>
 <% end %>

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

@@ -19,7 +19,7 @@ type LayoutPropTypes = {
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
   transparent?: boolean,
-  layout?: "sidebar" | "collection" | "kanban" | "content",
+  layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
 }
 
 type LayoutSideProps = {
@@ -32,6 +32,12 @@ type LayoutBodyProps = {
   className?: string,
 }
 
+type LayoutItemProps = {
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  size?: "sm" | "md" | "lg"
+}
+
 type LayoutHeaderProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
@@ -62,6 +68,17 @@ const Body = (props: LayoutBodyProps) => {
   )
 }
 
+// Item component
+const Item = (props: LayoutItemProps) => {
+  const { children, className, size = 'sm' } = props
+  const sizeClass = `size_${size}`
+  return (
+    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
+      {children}
+    </div>
+  )
+}
+
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
@@ -159,6 +176,7 @@ const Layout = (props: LayoutPropTypes) => {
 
 Layout.Side = Side
 Layout.Body = Body
+Layout.Item = Item
 Layout.Header = Header
 Layout.Footer = Footer
 

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

@@ -21,14 +21,46 @@ $card-border-radius: $border_rad_lightest;
       grid-column-gap: $space_sm;
       grid-row-gap: $space_sm;
       grid-template-columns: repeat(4, 1fr);
-      
+
       @media screen and (max-width: $screen-md-min) {
         grid-template-columns: repeat(2, 1fr);
       }
-       @media screen and (max-width: $screen-xs-min) {
+      @media screen and (max-width: $screen-xs-min) {
         grid-template-columns: repeat(1, 1fr);
       }
-    } 
+    }
+  }
+
+  &[class*=_masonry] {
+    div.layout_body {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      grid-gap: 10px;
+      grid-auto-rows: minmax(180px, auto);
+      grid-auto-flow: dense;
+      padding: 10px;
+
+      .size_md {
+        grid-column-end: span 2;
+        grid-row-end: span 2;
+      }
+
+      .size_lg {
+        grid-column-end: span 3;
+        grid-row-end: span 4;
+      }
+
+      @media screen and (max-width: $screen-lg-min) {
+        grid-template-columns: repeat(3, 1fr);
+      }
+
+      div.layout_item, * {
+        display: flex;
+        img {
+          max-width: 100%;
+        }
+      }
+    }
   }
 
   &[class*=_collection_detail]{
@@ -36,13 +68,13 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
       height: 100%;
       padding: $space_lg;
-      grid-template-areas: 
+      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;        
+        margin-left: $space_md;
         }
         @media screen and (max-width: $screen-lg-min) {
           grid-template-columns: repeat(3, 1fr);
@@ -61,7 +93,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
-      
+
   }
 
   &[class*=_kanban]{
@@ -76,7 +108,7 @@ $card-border-radius: $border_rad_lightest;
       content: '';
       flex: 0 0 $gap;
     }
-    
+
     div.layout_body{
       width: $list-width;
       height: 100vh;
@@ -135,7 +167,7 @@ $card-border-radius: $border_rad_lightest;
       width: 100%;
     }
   }
-  
+
 
   &[class*=_sidebar]{
     $layout_sizes: (
@@ -188,7 +220,7 @@ $card-border-radius: $border_rad_lightest;
     // Collapse Settings
     @each $position in $positions {
       @each $breakpoint_name, $breakpoint in $breakpoints {
-        &_#{$position}_collapse_#{$breakpoint_name} {
+        &[class*=_#{$position}_collapse_#{$breakpoint_name}] {
           @include break_at($breakpoint) {
             @if $position == 'left' {
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
@@ -198,7 +230,7 @@ $card-border-radius: $border_rad_lightest;
               grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
               grid-template-rows: 1fr auto;
             }
-            grid-template-columns: 1fr;
+            grid-template-columns: 1fr !important;
             &.full {
               min-height: auto !important;
             }

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("layout/body") do %>
 
  <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card") do %>
    <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
@@ -26,10 +26,10 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
     <% end %>
      <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card") do %>
-      Card content 
+      Card content
     <% end %>
       <%= pb_rails("user", props: {
       name: "Anna Black",
@@ -40,7 +40,7 @@
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
       }) %>
      <%= pb_rails("card" ) do %>
-      Card content 
+      Card content
     <% end %>
      <%= pb_rails("card" ) do %>
      <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.md

@@ -0,0 +1 @@
+Layout can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx

@@ -3,7 +3,7 @@ import { Card, Layout, Nav, NavItem } from '../../'
 const Cards = ({ n }) => {
   const cards = []
   for (let i = 0; i < n; ++i) {
-    cards.push(<Card>{'Card content'}</Card>)
+    cards.push(<Card key={i}>{'Card content'}</Card>)
   }
   return (cards)
 }

data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.html.erb

@@ -0,0 +1,48 @@
+<%= pb_rails("layout", props: {layout: "masonry"}) do %>
+  <%= pb_rails("layout/body") do %>
+
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "md" }) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "md" }) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "lg"}) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "md" }) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612144349227-1555ef8f2467?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzM3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "md" }) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
+    <% end %>
+    <%= pb_rails("layout/item", props: { size: "md" }) do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" }) %>
+    <% end %>
+    <%= pb_rails("layout/item") do %>
+      <%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>
+    <% end %>
+
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_masonry.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Image, Layout } from '../../'
+
+const LayoutMasonry = (props) => {
+  return (
+    <Layout
+        layout="masonry"
+        {...props}
+    >
+      <Layout.Body>
+        <Layout.Item>
+          <Image
+              url="https://images.unsplash.com/photo-1611932084285-4fc50bfb7102?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item size="md">
+          <Image
+              url="https://images.unsplash.com/photo-1611934529218-748707e1d066?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2307&q=80"
+          />
+        </Layout.Item>
+        <Layout.Item>
+          <Image
+              url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item size="lg">
+          <Image
+              url="https://images.unsplash.com/photo-1611927263897-c2f1156bc760?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item>
+          <Image
+              url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item size="md">
+          <Image
+              url="https://images.unsplash.com/photo-1612092172331-d788286028d5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3Mnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item>
+          <Image
+              url="https://images.unsplash.com/photo-1612123912968-5f6e964e8ea5?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0N3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item size="md">
+          <Image
+              url="https://images.unsplash.com/photo-1606851685679-2a35cfdd62d6?ixid=MXwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMXx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
+          />
+        </Layout.Item>
+        <Layout.Item>
+          <Image
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Layout.Item>
+      </Layout.Body>
+    </Layout>
+  )
+}
+
+export default LayoutMasonry

data/app/pb_kits/playbook/pb_layout/docs/example.yml

@@ -3,20 +3,19 @@ examples:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
-
+  - layout_masonry: Masonry Layout
 
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
-  - layout_sizes_dark: Sizes Dark
   - layout_collection: Collection Layout
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
+  - layout_masonry: Masonry Layout
 

data/app/pb_kits/playbook/pb_layout/docs/index.js

@@ -1,10 +1,10 @@
 export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
-export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
 export { default as LayoutCollection } from './_layout_collection.jsx'
 export { default as LayoutKanban } from './_layout_kanban.jsx'
 export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
+export { default as LayoutMasonry } from './_layout_masonry.jsx'
 

data/app/pb_kits/playbook/pb_layout/item.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLayout
+    class Item
+      include Playbook::Props
+
+      partial "pb_layout/item"
+
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg],
+                  default: "sm"
+
+      def classname
+        generate_classname("layout_item") + size_class
+      end
+
+    private
+
+      def size_class
+        " size_#{size}"
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -22,25 +22,25 @@ module Playbook
                      values: %w[light dark gradient],
                      default: "light"
       prop :layout, type: Playbook::Props::Enum,
-            values: %w[sidebar collection collection_detail kanban content],
-            default: "sidebar"
-
-
+                    values: %w[sidebar collection collection_detail kanban content masonry],
+                    default: "sidebar"
       prop :responsive, type: Playbook::Props::Boolean, default: false
 
       def classname
         case layout
-	        when "collection" 
-            generate_classname("pb_layout_kit", layout)
-          when "kanban"
-            generate_classname("pb_layout_kit", layout, responsive_class)
-          when "collection_detail"
-            generate_classname("pb_layout_kit", layout )
-          when "content"
-            generate_classname("pb_layout_kit", layout)
-	        else
-	          first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
-	          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        when "collection"
+          generate_classname("pb_layout_kit", layout)
+        when "kanban"
+          generate_classname("pb_layout_kit", layout, responsive_class)
+        when "collection_detail"
+          generate_classname("pb_layout_kit", layout)
+        when "content"
+          generate_classname("pb_layout_kit", layout)
+        when "masonry"
+          generate_classname("pb_layout_kit", layout)
+        else
+          first_class = generate_classname("pb_layout_kit_sidebar", "size_#{size}", position, variant, transparent_class)
+          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
         end
       end
 

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -11,7 +11,7 @@ const LineGraphLegend = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="bar-test-2"
+        id="line-test-2"
         legend
         title="Line Graph with Legend"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}

data/app/pb_kits/playbook/pb_popover/docs/example.yml

@@ -5,11 +5,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
 
   react:
     - popover_default: Default
@@ -17,12 +12,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_dark: Dark
-    - popover_list_dark: List Dark
-    - popover_close_dark: Close Dark
-    - popover_z_index_dark: Z-Index Dark
-    - popover_scroll_height_dark: Scroll and Height Settings Dark
-  
-
-