playbook_ui 7.15.1 → 7.16.0.pre.alpha1

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

@@ -7,6 +7,7 @@ examples:
   - layout_collection_detail: Collection Detail Layout
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
+  - layout_masonry: Masonry Layout
 
   react:
   - layout_colors: Colors
@@ -16,3 +17,5 @@ examples:
   - 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

@@ -6,4 +6,5 @@ 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/footer.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= content.presence %>
+<% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Footer
-      include Playbook::Props
-
-      partial "pb_layout/footer"
-
+    class Footer < Playbook::KitBase
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[ul li span div],
                  default: "div"

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= content.presence %>
+<% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Header
-      include Playbook::Props
-
-      partial "pb_layout/header"
-
+    class Header < Playbook::KitBase
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[ul li span div],
                  default: "div"

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/{_sidebar.html.erb → layout.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= capture(&object.children) %>
+  <%= content.presence %>
 <% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Layout
-      include Playbook::Props
-
-      partial "pb_layout/layout"
-
+    class Layout < Playbook::KitBase
       prop :collapse, type: Playbook::Props::Enum,
                       values: %w[xs sm md lg xl],
                       default: "xs"
@@ -22,25 +18,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_timeline/_timeline.html.erb → pb_layout/sidebar.html.erb}

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= capture(&object.children) %>
+  <%= content.presence %>
 <% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Sidebar
-      include Playbook::Props
-
-      partial "pb_layout/sidebar"
-
+    class Sidebar < Playbook::KitBase
       def classname
         generate_classname("layout_sidebar")
       end

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLegend
-    class Legend
-      include Playbook::Props
-
-      partial "pb_legend/legend"
-
+    class Legend < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
                    values: (1..7).map { |n| "data_#{n}" },
                    default: "data_1"

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLineGraph
-    class LineGraph
-      include Playbook::Props
-
-      partial "pb_line_graph/line_graph"
-
+    class LineGraph < Playbook::KitBase
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []

data/app/pb_kits/playbook/pb_list/{_item.html.erb → item.html.erb}

@@ -5,5 +5,5 @@
                 id: object.id,
                 tabindex: object.tabindex
   ) do %>
-    <%= capture(&object.children) %>
+    <%= content.presence %>
 <% end %>

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

@@ -2,13 +2,9 @@
 
 module Playbook
   module PbList
-    class Item
-      include Playbook::Props
-
+    class Item < Playbook::KitBase
       prop :tabindex
 
-      partial "pb_list/item"
-
       def classname
         generate_classname("pb_item_kit")
       end

data/app/pb_kits/playbook/pb_list/{_list.html.erb → list.html.erb}

@@ -7,6 +7,6 @@
                   role: object.role,
                   tabindex: object.tabindex
     ) do %>
-      <%= capture(&object.children) %>
+      <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbList
-    class List
-      include Playbook::Props
-
-      partial "pb_list/list"
-
+    class List < Playbook::KitBase
       prop :borderless, type: Playbook::Props::Boolean,
                         default: false
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLoadingInline
-    class LoadingInline
-      include Playbook::Props
-
-      partial "pb_loading_inline/loading_inline"
-
+    class LoadingInline < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_message/message.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbMessage
-    class Message
-      include Playbook::Props
-
-      partial "pb_message/message"
-
+    class Message < Playbook::KitBase
       prop :avatar_name
       prop :avatar_status
       prop :avatar_url

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbMultipleUsers
-    class MultipleUsers
-      include Playbook::Props
-
-      partial "pb_multiple_users/multiple_users"
-
+    class MultipleUsers < Playbook::KitBase
       prop :reverse, type: Playbook::Props::Boolean, default: false
       prop :users, type: Playbook::Props::HashArray, required: true
 

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbMultipleUsersStacked
-    class MultipleUsersStacked
-      include Playbook::Props
-
-      partial "pb_multiple_users_stacked/multiple_users_stacked"
-
+    class MultipleUsersStacked < Playbook::KitBase
       prop :users, type: Playbook::Props::HashArray, required: true
 
       def more_than_two

data/app/pb_kits/playbook/pb_nav/{_item.html.erb → item.html.erb}

@@ -12,7 +12,7 @@
       <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
-      <%= object.text %><%= capture(&object.children) if !object.children.nil? %>
+      <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
       <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbNav
-    class Item
-      include Playbook::Props
-
-      partial "pb_nav/item"
-
+    class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
       prop :link
       prop :text

data/app/pb_kits/playbook/pb_nav/{_nav.html.erb → nav.html.erb}

@@ -10,5 +10,5 @@
       <% end %>
     <% end %>
   <% end %>
-  <ul><%= capture(&object.children) %></ul>
+  <ul><%= content.presence %></ul>
 <% end %>

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbNav
-    class Nav
-      include ActionView::Helpers::TagHelper
-      include Playbook::Props
-
-      partial "pb_nav/nav"
-
+    class Nav < Playbook::KitBase
       prop :link, default: "#"
       prop :title
       prop :orientation, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbOnlineStatus
-    class OnlineStatus
-      include Playbook::Props
-
-      partial "pb_online_status/online_status"
-
+    class OnlineStatus < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[online offline away],
                     default: "offline"