playbook_ui 7.15.0 → 7.16.0.pre.alpha4

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -5,31 +5,37 @@ const DefaultImage = (props) => {
   return (
     <>
       <Image
+          alt="picture of a misty forest"
           size="xs"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt="picture of a misty forest"
           size="sm"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt="picture of a misty forest"
           size="md"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt="picture of a misty forest"
           size="lg"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt="picture of a misty forest"
           size="xl"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt="picture of a misty forest"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb

@@ -1,17 +1,17 @@
-<%= pb_rails("image", props: { rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { alt: "", rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
 
 <br>
 
-<%= pb_rails("image", props: { rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { alt: "", rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
 
 <br>
 
-<%= pb_rails("image", props: { rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { alt: "", rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
 
 <br>
 
-<%= pb_rails("image", props: { rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { alt: "", rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
 
 <br>
 
-<%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
+<%= pb_rails("image", props: { alt: "", rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx

@@ -5,30 +5,35 @@ const RoundedImage = (props) => {
   return (
     <>
       <Image
+          alt=""
           rounded
           size="xs"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="sm"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="md"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="lg"
           url="https://unsplash.it/500/400/?image=634"
           {...props}
       />
       <Image
+          alt=""
           rounded
           size="xl"
           url="https://unsplash.it/500/400/?image=634"

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

@@ -2,6 +2,8 @@ examples:
   rails:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling
   react:
   - default_image: Default
   - rounded_image: Rounded
+  - custom_error_image: Error Handling

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

@@ -1,2 +1,3 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
+export { default as CustomErrorImage } from './_custom_error_image.jsx'

data/app/pb_kits/playbook/pb_image/{_image.html.erb → image.html.erb}

@@ -4,5 +4,7 @@
     class: object.classname,
     aria: object.aria,
     src: object.url,
-    alt: object.alt)
+    alt: object.alt,
+    onerror: object.on_error,
+    )
 %>

data/app/pb_kits/playbook/pb_image/image.rb

@@ -2,12 +2,10 @@
 
 module Playbook
   module PbImage
-    class Image
-      include Playbook::Props
-
-      partial "pb_image/image"
-
+    class Image < Playbook::KitBase
       prop :alt
+      prop :on_error, type: Playbook::Props::String,
+                      default: nil
       prop :rounded, type: Playbook::Props::Boolean,
                      default: false
       prop :size, type: Playbook::Props::Enum,
@@ -16,7 +14,7 @@ module Playbook
       prop :url
 
       def classname
-        generate_classname("pb_image_kit lazyload blur_up", size_class) + rounded_class
+        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
       end
 
     private
@@ -26,7 +24,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : size
+        size == "none" ? nil : "_#{size}"
       end
     end
   end

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -0,0 +1,35 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import Image from './_image'
+
+const props = {
+  alt: 'picture of misty forest',
+  data: { testid: 'avatar' },
+  size: null,
+  url: 'https://unsplash.it/500/400/?image=634',
+}
+
+it('Should be accessible', async () => {
+  ensureAccessible(Image, props)
+})
+
+test('alt attribute', () => {
+  const kit = renderKit(Image, props)
+  expect(kit).toHaveAttribute('alt', props.alt)
+})
+
+test('default classname', () => {
+  const kit = renderKit(Image, props)
+  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
+})
+
+test('size = xs', () => {
+  const kit = renderKit(Image, props, { size: 'xs' })
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
+})
+
+test('rounded = true', () => {
+  const kit = renderKit(Image, props, { rounded: true })
+  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
+})
+

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