playbook_ui 7.16.0.pre.alpha5 → 7.16.0

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

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

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

@@ -5,35 +5,30 @@ 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,7 +2,11 @@
 
 module Playbook
   module PbImage
-    class Image < Playbook::KitBase
+    class Image
+      include Playbook::Props
+
+      partial "pb_image/image"
+
       prop :alt
       prop :on_error, type: Playbook::Props::String,
                       default: nil
@@ -14,7 +18,7 @@ module Playbook
       prop :url
 
       def classname
-        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
+        generate_classname("pb_image_kit lazyload blur_up", size_class) + rounded_class
       end
 
     private
@@ -24,7 +28,7 @@ module Playbook
       end
 
       def size_class
-        size == "none" ? nil : "_#{size}"
+        size == "none" ? nil : size
       end
     end
   end

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbLabelPill
-    class LabelPill < Playbook::KitBase
+    class LabelPill
+      include Playbook::Props
+
+      partial "pb_label_pill/label_pill"
+
       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,7 +2,11 @@
 
 module Playbook
   module PbLabelValue
-    class LabelValue < Playbook::KitBase
+    class LabelValue
+      include Playbook::Props
+
+      partial "pb_label_value/label_value"
+
       prop :label, required: true
       prop :value
       prop :variant, type: Playbook::Props::Enum,
@@ -14,6 +18,7 @@ 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/{header.html.erb → _body.html.erb}

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

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

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+                id: object.id,
+                data: object.data,
+                class: object.classname,
+  ) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_layout/{body.html.erb → _footer.html.erb}

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

data/app/pb_kits/playbook/pb_layout/{footer.html.erb → _header.html.erb}

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

data/app/pb_kits/playbook/{pb_flex/flex.html.erb → pb_layout/_layout.html.erb}

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

data/app/pb_kits/playbook/pb_layout/{sidebar.html.erb → _sidebar.html.erb}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbLegend
-    class Legend < Playbook::KitBase
+    class Legend
+      include Playbook::Props
+
+      partial "pb_legend/legend"
+
       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,7 +2,11 @@
 
 module Playbook
   module PbLineGraph
-    class LineGraph < Playbook::KitBase
+    class LineGraph
+      include Playbook::Props
+
+      partial "pb_line_graph/line_graph"
+
       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 %>
-    <%= content.presence %>
+    <%= capture(&object.children) %>
 <% 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 %>
-      <%= content.presence %>
+      <%= capture(&object.children) %>
   <% end %>
 <% end %>

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

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

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbList
-    class List < Playbook::KitBase
+    class List
+      include Playbook::Props
+
+      partial "pb_list/list"
+
       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,7 +2,11 @@
 
 module Playbook
   module PbLoadingInline
-    class LoadingInline < Playbook::KitBase
+    class LoadingInline
+      include Playbook::Props
+
+      partial "pb_loading_inline/loading_inline"
+
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

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

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

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

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbMultipleUsers
-    class MultipleUsers < Playbook::KitBase
+    class MultipleUsers
+      include Playbook::Props
+
+      partial "pb_multiple_users/multiple_users"
+
       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,7 +2,11 @@
 
 module Playbook
   module PbMultipleUsersStacked
-    class MultipleUsersStacked < Playbook::KitBase
+    class MultipleUsersStacked
+      include Playbook::Props
+
+      partial "pb_multiple_users_stacked/multiple_users_stacked"
+
       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 %><%= content.presence %>
+      <%= object.text %><%= capture(&object.children) if !object.children.nil? %>
     </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/{nav.html.erb → _nav.html.erb}

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

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

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