playbook_ui 2.8.4 → 2.8.5

data/app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("card") do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {selected: true}) do %>
+  Card content
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_shadow.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("card", props: {shadow: "none"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {shadow: "shallow"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {shadow: "default"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {shadow: "deep"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {shadow: "deeper"}) do %>
+  Card content
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: {shadow: "deepest"}) do %>
+  Card content
+<% end %>

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

@@ -1,5 +1,9 @@
 examples:
   rails:
   - card_light: Default
+  - card_selected: Selected
+  - card_padding: Padding Size
+  - card_shadow: Shadow Size
+  - card_content: Content Size
   react:
   - card_light: Default

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss

@@ -1,7 +1,10 @@
 @import "dashboard_value_mixins";
 @import "child_kits/stat_value";
+@import "../pb_icon/icon";
+@import "../pb_body/body";
+@import "../pb_title/title";
 
-[class^=pb_dashboard_value]{
+[class^=pb_dashboard_value_kit]{
   @each $align_name, $align_value in $pb_dashboard_value_align {
     &[class*=_#{$align_name}]  {
       @include pb_dashboard_value($align_value);

data/app/pb_kits/playbook/pb_dashboard_value/child_kits/_stat_value.scss

@@ -1,4 +1,4 @@
-[class^=pb_stat_value]{
+[class^=pb_stat_value_kit]{
   &[class*=_wrapper] {
     display: flex;
     justify-content: flex-start;

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -56,7 +56,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_dashboard_value",
+          "pb_dashboard_value_kit",
           align,
         ]
         kit_options.join("_")

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

@@ -70,7 +70,7 @@ module Playbook
 
       def kit_class
         stat_options = [
-          "pb_stat_change",
+          "pb_stat_change_kit",
           status,
         ]
         stat_options.join("_")

data/app/pb_kits/playbook/pb_dashboard_value/stat_label.rb

@@ -33,7 +33,7 @@ module Playbook
       end
 
       def kit_class
-        "pb_stat_label"
+        "pb_stat_label_kit"
       end
 
       def to_partial_path

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

@@ -43,7 +43,7 @@ module Playbook
       end
 
       def kit_class
-        "pb_stat_value"
+        "pb_stat_value_kit"
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,4 +1,8 @@
-[class^=pb_date] {
+@import "../pb_icon/icon";
+@import "../pb_body/body";
+@import "../pb_title/title";
+
+[class^=pb_date_kit] {
   [class^=pb_body] {
     font-weight: $bold !important;
   }

data/app/pb_kits/playbook/pb_date/date.rb

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def kit_class
-        "pb_date"
+        "pb_date_kit"
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,3 @@
-[class^=pb_icon]{
+[class^=pb_icon_kit]{
 
 }

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -126,7 +126,7 @@ module Playbook
 
       def kit_class
         icon_options = [
-          "pb_icon",
+          "pb_icon_kit",
           "far",
           icon_class,
           border_class,

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -2,6 +2,7 @@
 @import "../tokens/colors";
 @import "../tokens/typography";
 @import "../tokens/opacity";
+@import "../pb_icon/icon";
 
 $pb_icon_circle_sizes: (
   "xs":   28px,
@@ -12,7 +13,7 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-[class^=pb_icon_circle] {
+[class^=pb_icon_circle_kit] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,7 +23,7 @@ $pb_icon_circle_sizes: (
 
   i,
   svg {
-    &[class^=pb_icon] {
+    &[class^=pb_icon_kit] {
       width: 100%;
       height: 100%;
       display: block;
@@ -40,11 +41,11 @@ $pb_icon_circle_sizes: (
       border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
-
-      &[class^=pb_icon] {
-        font-size: $size * 0.38;
-        line-height: $size;
-      }
+      font-size: $size * 0.38;
+      line-height: $size;
+      flex-shrink: 0;
+      flex-grow: 0;
+      flex-basis: $size;
     }
   }
 

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -33,7 +33,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_icon_circle",
+          "pb_icon_circle_kit",
           size,
           variant,
         ]

data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss

@@ -1,17 +1,19 @@
 @import "../tokens/typography";
 @import "../tokens/spacing";
+@import "../pb_icon/icon";
+@import "../pb_body/body";
 
-[class^=pb_icon_value] {
+[class^=pb_icon_value_kit] {
   display: flex;
   align-items: center;
 
-  [class^=pb_body] {
+  [class^=pb_body_kit] {
     font-size: $font-small !important;
     display: inline-flex;
     justify-content: flex-start;
     align-items: center;
 
-    [class*=pb_icon] {
+    [class*=pb_icon_kit] {
       font-size: $font-large !important;
       margin-right: $space-xs !important;
       flex-shrink: 0;

data/app/pb_kits/playbook/pb_icon_value/icon_value.rb

@@ -36,7 +36,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_icon_value",
+          "pb_icon_value_kit",
           align,
         ]
         kit_options.compact.join("_")

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -1,4 +1,4 @@
-.pb_image {
+.pb_image_kit {
 	max-width: 100%;
 	max-height: 100%;
 

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

@@ -34,7 +34,7 @@ module Playbook
 
       def kit_class
         image_options = %w[
-          pb_image
+          pb_image_kit
           lazyload
           blur_up
         ]

data/app/pb_kits/playbook/pb_input/_input.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    class: "pb_input") do %>
+    class: "pb_input_kit") do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label}) %>
   <% end %>

data/app/pb_kits/playbook/pb_input/_input.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-.pb_input {
+.pb_input_kit {
   margin: 8px;
 
   .input_wrapper {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_label_pill")) do %>
+    class: object.classname("pb_label_pill_kit")) do %>
   <%= object.label %>
   <%= object.pill %>
 <% end %>

data/app/pb_kits/playbook/pb_label_pill/_label_pill.scss

@@ -1,11 +1,12 @@
 @import "../pb_caption/caption";
 @import "../pb_pill/pill";
 
-.pb_label_pill {
+[class^=pb_label_pill_kit] {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  &_label {
+
+  .pb_label_pill_label {
     margin-right: $space-xs;
   }
 }

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,7 +1,9 @@
 @import "../tokens/spacing";
+@import "../pb_caption/caption";
+@import "../pb_body/body";
 
-[class^=pb_label_value] {
-  [class^=pb_caption]  {
+[class^=pb_label_value_kit] {
+  [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -36,7 +36,7 @@ module Playbook
       end
 
       def kit_class
-        "pb_label_value"
+        "pb_label_value_kit"
       end
 
       def to_partial_path

data/app/pb_kits/playbook/pb_list/_list.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    class: "pb_list#{object.xpadding}#{object.borderless}#{object.dark}#{object.size}#{object.layout}") do %>
+    class: "pb_list_kit#{object.xpadding}#{object.borderless}#{object.dark}#{object.size}#{object.layout}") do %>
     <%= content_tag(:"#{object.ordered}",
       id: object.id,
       data: object.data,

data/app/pb_kits/playbook/pb_list/_list.scss

@@ -1,10 +1,10 @@
 @import "list_mixin";
 
-[class*=pb_list] {
+[class*=pb_list_kit] {
   @include pb_list;
 }
 
-[class^=pb_list] {
+[class^=pb_list_kit] {
   &[class*=_dark] li {
     @include pb_list_dark;
   }

data/app/pb_kits/playbook/pb_message/_message.scss

@@ -1,5 +1,9 @@
 @import "message_mixins";
+@import "../pb_avatar/avatar";
+@import "../pb_body/body";
+@import "../pb_caption/caption";
+@import "../pb_timestamp/timestamp";
 
-[class^=pb_message] {
+[class^=pb_message_kit] {
   @include pb_message;
 }

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

@@ -66,7 +66,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_message",
+          "pb_message_kit",
           avatar_class,
         ]
         kit_options.compact.join("_")

data/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -1,6 +1,6 @@
 @import "online_status_mixins";
 
-[class^=pb_online_status] {
+[class^=pb_online_status_kit] {
   @include pb_online_status;
 
   @each $status_name, $status_value in $pb_online_status_statuses {

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

@@ -25,7 +25,7 @@ module Playbook
 
       def kit_class
         kit_options = [
-          "pb_online_status",
+          "pb_online_status_kit",
           status,
         ]
         kit_options.join("_")

data/app/pb_kits/playbook/pb_owner/_owner.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_owner")) do %>
+    class: object.classname("pb_owner_kit")) do %>
       <%= object.first_name %>
       <%= object.last_name %>
 <% end %>

data/app/pb_kits/playbook/pb_owner/_owner.scss

@@ -2,10 +2,11 @@
 @import "../pb_body/body";
 @import "../tokens/spacing";
 
- .pb_owner {
+[class^=pb_owner_kit] {
   display: flex;
   align-items: baseline;
-  &_first {
+
+  .pb_owner_first {
     margin: 0 ($space_xs - 4px) 0 0;
   }
 }

data/app/pb_kits/playbook/pb_owner/owner.rb

@@ -22,7 +22,7 @@ module Playbook
       end
 
        def first_name
-        pb_first_name = Playbook::PbBody::Body.new(classname: "pb_owner_first") do
+        pb_first_name = Playbook::PbBody::Body.new(tag: "span", classname: "pb_owner_first") do
           default_value(configured_first_name, "")
         end
         ApplicationController.renderer.render(partial: pb_first_name, as: :object)

data/app/pb_kits/playbook/pb_owner_phone/_owner_phone.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_owner_phone")) do %>
+    class: object.classname("pb_owner_phone_kit")) do %>
     <%= object.name %>
     <%= object.phone %>
 <% end %>

data/app/pb_kits/playbook/pb_owner_phone/_owner_phone.scss

@@ -1,9 +1,10 @@
 @import "../tokens/spacing";
+@import "../pb_phone/phone";
+@import "../pb_owner/owner";
 
-.pb_owner_phone {
+.pb_owner_phone_kit {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
-
 }