playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

data/app/pb_kits/playbook/pb_label_pill/label_pill.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLabelPill
-    class LabelPill
-      include Playbook::Props
-
-      partial "pb_label_pill/label_pill"
-
+    class LabelPill < Playbook::KitBase
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[success warning error info neutral primary],
                      default: "neutral"

data/app/pb_kits/playbook/pb_label_value/{_label_value.html.erb → label_value.html.erb}

@@ -12,11 +12,11 @@
             <%= pb_rails("body", props: { text: object.description, color: "light", margin_right: "xs", dark: object.dark }) if object.description.present? %>
             <% if object.active %>
                 <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>
-                    <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, variant: "link", dark: object.dark }) if object.title.present? %> 
+                    <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, variant: "link", dark: object.dark }) if object.title.present? %>
                     <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", variant: "link", dark: object.dark }) if object.date.present? %>
                 <% end %>
             <% else %>
-                <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark }) if object.title.present? %> 
+                <%= pb_rails("title", props: { text: object.title, tag: "h4", size: 4, dark: object.dark }) if object.title.present? %>
                 <%= pb_rails("title", props: { text: object.date_element, tag: "span", size: 4, margin_left: "xs", dark: object.dark }) if object.date.present? %>
             <% end %>
         <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLabelValue
-    class LabelValue
-      include Playbook::Props
-
-      partial "pb_label_value/label_value"
-
+    class LabelValue < Playbook::KitBase
       prop :label, required: true
       prop :value
       prop :variant, type: Playbook::Props::Enum,
@@ -18,7 +14,6 @@ module Playbook
       prop :date
       prop :active, type: Playbook::Props::Boolean, default: false
 
-
       def classname
         generate_classname("pb_label_value_kit", variant_class)
       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

@@ -25,12 +25,44 @@ $card-border-radius: $border_rad_lightest;
       @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]{
       display: grid;
       width: 100%;

data/app/pb_kits/playbook/pb_layout/body.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/body.rb

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

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

@@ -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