playbook_ui 7.15.1 → 7.16.0.pre.alpha1

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableList
-      include Playbook::Props
-
-      partial "pb_selectable_list/selectable_list"
-
+    class SelectableList < Playbook::KitBase
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[radio checkbox],
                      default: "checkbox"

data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list_item.html.erb → selectable_list_item.html.erb}

@@ -3,16 +3,15 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-    <% puts object.variant %>
   <% if object.variant == "radio"%>
     <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% else %>
     <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
+    <% if content.present? %>
+      <%= content %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -2,9 +2,7 @@
 
 module Playbook
   module PbSelectableList
-    class SelectableListItem
-      include Playbook::Props
-
+    class SelectableListItem < Playbook::KitBase
       prop :tabindex
 
       prop :checked, type: Playbook::Props::Boolean,
@@ -18,8 +16,6 @@ module Playbook
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
 
-      partial "pb_selectable_list/selectable_list_item"
-
       def classname
         generate_classname("pb_selectable_list_item_kit")
       end

data/app/pb_kits/playbook/pb_source/source.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbSource
-    class Source
-      include Playbook::Props
-
-      partial "pb_source/source"
-
+    class Source < Playbook::KitBase
       prop :hide_icon, type: Playbook::Props::Boolean,
                        default: false
       prop :source, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -52,17 +52,17 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <div className="pb_star_rating_number">
-        <If condition={!hideRating}>
+      <If condition={!hideRating}>
+        <div className="pb_star_rating_number">
           {rating}
-        </If>
-      </div>
+        </div>
+      </If>
 
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star"
                 key={index}
             />
@@ -70,7 +70,7 @@ const StarRating = ({
 
           <If condition={hasHalfStar()}>
             <Icon
-                fixedWidth
+                fixedWidth={false}
                 icon="star-half"
             />
           </If>
@@ -78,23 +78,23 @@ const StarRating = ({
 
         <div className="pb_star_rating_base">
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
           <Icon
-              fixedWidth
+              fixedWidth={false}
               icon="star"
           />
         </div>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 $pb_star_rating_number_width: 30px;
-$pb_star_rating_wrapper_width: 150px;
+$pb_star_rating_wrapper_width: 90px;
 $pb_star_rating_height: 26px;
 
 [class^=pb_star_rating_kit] {
@@ -35,16 +35,18 @@ $pb_star_rating_height: 26px;
     min-height: $pb_star_rating_height;
 
     .pb_star_rating_highlight {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 5;
       color: $yellow;
       line-height: $pb_star_rating_height;
     }
     .pb_star_rating_base {
+      display: flex;
       position: absolute;
-      top: 0;
+      top: 5px;
       left: 0;
       z-index: 0;
       color: rgba($slate, $opacity-4);

data/app/pb_kits/playbook/pb_star_rating/{_star_rating.html.erb → star_rating.html.erb}

@@ -3,9 +3,7 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <% if object.hide_rating %>
-      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
-    <% else %>
+    <% if !object.hide_rating %>
       <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
     <% end %>
 
@@ -13,20 +11,21 @@
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
         <% object.star_count.times do %>
-          <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star" }) %>
         <% end %>
         <% unless object.star_full %>
-          <%= pb_rails("icon", props: { icon: "star-half", fixed_width: true }) %>
+          <%= pb_rails("icon", props: { icon: "star-half" }) %>
         <% end %>
       <% end %>
 
       <%# Grey background stars as base %>
       <%= content_tag(:div, class: "pb_star_rating_base") do %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
-        <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
+        <%= pb_rails("icon", props: { icon: "star" }) %>
       <% end %>
+
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbStarRating
-    class StarRating
-      include Playbook::Props
-
-      partial "pb_star_rating/star_rating"
-
+    class StarRating < Playbook::KitBase
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false
 

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbStatChange
-    class StatChange
-      include Playbook::Props
-
-      partial "pb_stat_change/stat_change"
-
+    class StatChange < Playbook::KitBase
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbStatValue
-    class StatValue
-      include Playbook::Props
-      include ActionView::Helpers::NumberHelper
-
-      partial "pb_stat_value/stat_value"
-
+    class StatValue < Playbook::KitBase
       prop :unit
       prop :value, type: Playbook::Props::Number
 

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx

@@ -28,7 +28,6 @@ const TableAlignmentShiftData = (props) => {
           </td>
         </tr>
       </tbody>
-      <br />
       <thead>
         <tr>
           <th>{'Espresso Drinks'}</th>

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/border_radius";
+@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xl-min) {
@@ -11,9 +12,9 @@
 
       thead {
         tr {
-          left: -9999px;
+          left: $offscreen;
           position: absolute;
-          top: -9999px;
+          top: $offscreen;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/border_radius";
+@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
@@ -11,9 +12,9 @@
 
       thead {
         tr {
-          left: -9999px;
+          left: $offscreen;
           position: absolute;
-          top: -9999px;
+          top: $offscreen;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/border_radius";
+@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
@@ -11,9 +12,9 @@
 
       thead {
         tr {
-          left: -9999px;
+          left: $offscreen;
           position: absolute;
-          top: -9999px;
+          top: $offscreen;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/border_radius";
+@import "../../tokens/positioning";
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-lg-min) {
@@ -11,9 +12,9 @@
 
       thead {
         tr {
-          left: -9999px;
+          left: $offscreen;
           position: absolute;
-          top: -9999px;
+          top: $offscreen;
 
           th {
             display: block;

data/app/pb_kits/playbook/pb_table/{_table.html.erb → table.html.erb}

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

data/app/pb_kits/playbook/pb_table/table.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTable
-    class Table
-      include Playbook::Props
-
-      partial "pb_table/table"
-
+    class Table < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md lg],
                   default: "md"

data/app/pb_kits/playbook/pb_table/{_table_row.html.erb → table_row.html.erb}

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

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTable
-    class TableRow
-      include Playbook::Props
-
-      partial "pb_table/table_row"
-
+    class TableRow < Playbook::KitBase
       prop :side_highlight_color, type: Playbook::Props::String,
                                   default: "none"
 

data/app/pb_kits/playbook/pb_text_input/{_text_input.html.erb → text_input.html.erb}

@@ -5,13 +5,9 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>
-  <%= content_tag(:div,
-      class: "text_input_wrapper") do %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
-      <% if object.error %>
-        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
-      <% end %>
+  <%= content_tag(:div, class: "text_input_wrapper") do %>
+    <% if content.present? %>
+      <%= content %>
     <% else %>
       <%= tag(:input,
           autocomplete: object.autocomplete ? nil : "off",
@@ -25,9 +21,9 @@
           required: object.required,
           type: object.type,
           value: object.value) %>
-      <% if object.error %>
-        <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
-      <% end %>
+    <% end %>
+    <% if object.error %>
+      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbTextInput
-    class TextInput
-      include Playbook::Props
-
-      partial "pb_text_input/text_input"
-
+    class TextInput < Playbook::KitBase
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_textarea/{_textarea.html.erb → textarea.html.erb}

@@ -5,10 +5,10 @@
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>
-  <% if object.children %>
-    <%= capture(&object.children) %>
+  <% if content.present? %>
+    <%= content %>
     <% if object.error %>
-      <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) %>
+      <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
     <% end %>
   <% else %>
     <%= text_area(
@@ -20,7 +20,7 @@
         :onkeyup => object.onkeyup,
         :placeholder => object.placeholder,
         :rows => object.rows,
-        :value => object.value )%>
+        :value => object.value) %>
     <% if object.error %>
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>