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

data/app/pb_kits/playbook/{pb_timeline/_timeline.html.erb → pb_layout/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/docs/_line_graph_legend.jsx

@@ -11,7 +11,7 @@ const LineGraphLegend = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="bar-test-2"
+        id="line-test-2"
         legend
         title="Line Graph with Legend"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_nav/{_nav.html.erb → nav.html.erb}

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

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

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbNav
-    class Nav
-      include ActionView::Helpers::TagHelper
-      include Playbook::Props
-
-      partial "pb_nav/nav"
-
+    class Nav < Playbook::KitBase
       prop :link, default: "#"
       prop :title
       prop :orientation, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbOnlineStatus
-    class OnlineStatus
-      include Playbook::Props
-
-      partial "pb_online_status/online_status"
-
+    class OnlineStatus < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[online offline away],
                     default: "offline"

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      <%= pb_rails("body", props: {
+        tag: "span",
+        classname: "pb_person_first" }) { object.first_name } %>
+      <%= pb_rails("title", props: {
+        text: object.last_name,
+        size: 4 }) if object.last_name %>
+<% end %>

data/app/pb_kits/playbook/pb_person/person.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbPerson
-    class Person
-      include Playbook::Props
-
-      partial "pb_person/person"
-
+    class Person < Playbook::KitBase
       prop :first_name
       prop :last_name
 

data/app/pb_kits/playbook/pb_person_contact/person_contact.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbPersonContact
-    class PersonContact
-      include Playbook::Props
-
-      partial "pb_person_contact/person_contact"
-
+    class PersonContact < Playbook::KitBase
       prop :contacts, type: Playbook::Props::HashArray, default: []
       prop :first_name
       prop :last_name

data/app/pb_kits/playbook/pb_pill/pill.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbPill
-    class Pill
-      include Playbook::Props
-
-      partial "pb_pill/pill"
-
+    class Pill < Playbook::KitBase
       prop :text
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[success warning error info neutral primary],

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -0,0 +1,11 @@
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id) do %>
+  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+    <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+      <%= content.presence %>
+    </div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -2,10 +2,7 @@
 
 module Playbook
   module PbPopover
-    class Popover
-      include Playbook::Props
-      partial "pb_popover/popover"
-
+    class Popover < Playbook::KitBase
       prop :position, type: Playbook::Props::Enum,
                       values: %w[top bottom left right],
                       default: "left"

data/app/pb_kits/playbook/pb_progress_pills/{_progress_pills.html.erb → progress_pills.html.erb}

@@ -16,5 +16,5 @@
         <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
-    
+
 <% end %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbProgressPills
-    class ProgressPills
-      include Playbook::Props
-
-      partial "pb_progress_pills/progress_pills"
-
+    class ProgressPills < Playbook::KitBase
       prop :active, type: Playbook::Props::Number,
                     default: 0
       prop :value

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -2,13 +2,9 @@
 
 module Playbook
   module PbProgressSimple
-    class ProgressSimple
-      include Playbook::Props
-
+    class ProgressSimple < Playbook::KitBase
       class ProgressError < StandardError; end
 
-      partial "pb_progress_simple/progress_simple"
-
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_progress_step/{_progress_step.html.erb → progress_step.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_progress_step/progress_step.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbProgressStep
-    class ProgressStep
-      include Playbook::Props
-
-      partial "pb_progress_step/progress_step"
-
+    class ProgressStep < Playbook::KitBase
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "horizontal"

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <div class="box">
+    <div class="circle">
+      <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
+    </div>
+    <div class="content">
+      <%= content.presence %>
+    <div>
+  </div>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbProgressStep
-    class ProgressStepItem
-      include Playbook::Props
-
-      partial "pb_progress_step/progress_step_item"
-
+    class ProgressStepItem < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[complete active inactive hidden],
                     default: "inactive"

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
+@import "../tokens/positioning";
 @import "../pb_body/body";
 @import "../tokens/transition";
 
@@ -21,29 +22,39 @@
   }
 
   @media (hover:hover) {
-    &:hover .pb_radio_button {
-      border-color: $primary_action;
+    &:hover, &:focus {
+      .pb_radio_button {
+        border-color: $primary_action;
+      }
     }
   }
 
   input {
     position: relative;
-    display: none;
-    &:checked ~ .pb_radio_button {
-      border: 6px solid $primary;
+    left: $offscreen;
+    &:checked, &:focus {
+      & ~ .pb_radio_button {
+        border: 6px solid $primary;
+      }
     }
   }
   &.dark {
     .pb_radio_button {
       border-color: $border_dark;
     }
-    input:checked ~ .pb_radio_button {
-      border: 6px solid $primary;
+    input {
+      &:checked, &:focus {
+        & ~ .pb_radio_button {
+          border: 6px solid $primary;
+        }
+      }
     }
 
     @media (hover:hover) {
-      &:hover .pb_radio_button {
-        border-color: $primary_action;
+      &:hover, &:focus {
+        .pb_radio_button {
+          border-color: $primary_action;
+        }
       }
     }
     &.error {