playbook_ui 7.16.0 → 8.0.1

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

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

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/image.rb

@@ -2,11 +2,7 @@
 
 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
@@ -18,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
@@ -28,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/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/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_flex/_flex.html.erb → pb_layout/item.html.erb}

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

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbLayout
-    class Item
-      include Playbook::Props
-
-      partial "pb_layout/item"
-
+    class Item < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md lg],
                   default: "sm"

data/app/pb_kits/playbook/pb_layout/{_item.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"

data/app/pb_kits/playbook/pb_layout/{_layout.html.erb → 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 %>