playbook_ui 7.14.0 → 7.16.0.pre.alpha3

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

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

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