playbook_ui 7.16.0.pre.alpha5 → 7.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7506fd4ba5e3aabe6c2f01f55ae4a9d35f36da9c6197e6eebba0ba5c035e7f47
-  data.tar.gz: 9f6cb471538b8ce9e1563a386ceee044db8df80ac31b276b49794783ddf5a35b
+  metadata.gz: ba7ca0e1a8dbb832e4553d4ca3c0c8c328ead105c57d691a0181ca169197b53a
+  data.tar.gz: a8c51729b2dfcfb7dc54d448abc6a305cb89fb367933b4a01893a8a455dd0fcb
 SHA512:
-  metadata.gz: e69547b69f74fa31c73c051db1431febbaf041e1b285dbde95d2add050e6518a973b4a355a6628a208dba788d8c3fe43364d83acfea02872c7871e04a9022c08
-  data.tar.gz: 1bdf69f04bf3913e87dbb780886e7f38df6044149ba6fcd6b8fad95565d2e706f45a85c903b3abeacf64d1604b9f8de4f11d23b946b63b359308f17f058911b9
+  metadata.gz: e2ff1660024fbfc09a674433414caf39bc8b1c50220f51dc642c76d5de7d11f2b8056ae70ab924944c2828ee362f7b9986d1e5226672e9feda680606fc4ba7c2
+  data.tar.gz: 01b2ae4f1a7abed5972b1394f9a2b13ac31de8814050adef4f78ca81cab284c82fab7b966a88428b94c326f6319b72774443f00894c29e273773279d97388696

data/{lib → app/helpers}/playbook/pb_kit_helper.rb

@@ -6,11 +6,7 @@ module Playbook
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
       kit = build_view_model(kit.to_s, props, &block)
-      if kit.is_a?(Playbook::KitBase)
-        render_component kit, &block
-      else
-        render(partial: kit, as: :object)
-      end
+      render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -90,4 +90,3 @@
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
 @import './utilities/max_width';
-@import './utilities/positioning';

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -22,22 +22,20 @@
   <div class="markdown pb--kit-example-markdown <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
     <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
   </div>
-  <div id="code-wrapper">
-    <div class="pb--codeControls">
-      <ul>
-        <li>
-          <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
-        </li>
-      </ul>
-    </div>
-    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
-      <%= pb_rails("section_separator")%>
-      <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
-      <% if type == "rails" %>
-        <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
-      <% elsif type == "react" %>
-        <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
-      <% end %>
-    </div>
+  <div class="pb--codeControls">
+    <ul>
+      <li>
+        <a href="#" data-toggle="code_example">Code Example</a>
+      </li>
+    </ul>
+  </div>
+  <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+    <%= pb_rails("section_separator")%>
+    <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
+    <% if type == "rails" %>
+      <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
+    <% elsif type == "react" %>
+      <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
+    <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbAvatar
-    class Avatar < Playbook::KitBase
+    class Avatar
+      include Playbook::Props
+
+      partial "pb_avatar/avatar"
+
       prop :image_url
       prop :name, default: ""
       prop :size, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_avatar_action_button/{avatar_action_button.html.erb → _avatar_action_button.html.erb}

@@ -3,6 +3,8 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
+      
+
     <% if object.tooltip_text.present? %>
         <%= pb_rails("tooltip", props: {
           trigger_element_id: object.tooltip_id,
@@ -15,6 +17,7 @@
     <% end %>
 
     <%= link_to object.link_url, id: object.tooltip_id do %>
+
       <%= pb_rails("avatar", props: {
         dark: object.dark,
         name: object.name,
@@ -22,11 +25,12 @@
         image_url: object.image_url,
         class: "avatar_action"
       }) %>
-      <div class="icon <%= object.dark ? 'dark' : '' %> ">
-        <%= pb_rails("icon", props: {
-          dark: object.dark,
-          icon: object.action_icons
-        }) %>
-      </div>
+        <div class="icon <%= object.dark ? 'dark' : '' %> ">
+          <%= pb_rails("icon", props: {
+            dark: object.dark,
+            icon: object.action_icons
+          }) %>
+        </div>
+       
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -2,11 +2,13 @@
 
 module Playbook
   module PbAvatarActionButton
-    class AvatarActionButton < Playbook::KitBase
+    class AvatarActionButton
+      include Playbook::Props
+
       prop :action, type: Playbook::Props::String,
                     default: "add"
       prop :image_url, type: Playbook::Props::String
-      prop :link_url, type: Playbook::Props::String, default: "#"
+      prop :link_url, type: Playbook::Props::String
       prop :tooltip_text, type: Playbook::Props::String
       prop :tooltip_id, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String,
@@ -18,6 +20,8 @@ module Playbook
                        values: %w[bottom_left bottom_right top_left top_right],
                        default: "bottom_left"
 
+      partial "pb_avatar_action_button/avatar_action_button"
+
       def classname
         generate_classname("pb_avatar_action_button_kit", action, size, placement)
       end

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -1,5 +1,5 @@
 <div class="pb--doc-demo-row">
-
+  
   <%= pb_rails("avatar_action_button", props: {
       name: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg"

data/app/pb_kits/playbook/pb_background/{background.html.erb → _background.html.erb}

@@ -6,7 +6,7 @@
       class: object.classname,
       style: "background-image: url('#{object.image_url}');"
   ) do %>
-    <%= content.presence %>
+    <%= capture(&object.children) %>
   <% end %>
 <% else %>
   <%= content_tag(object.tag,
@@ -15,6 +15,6 @@
       id: object.id,
       class: object.classname
   ) do %>
-    <%= content.presence %>
+    <%= capture(&object.children) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_background/background.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbBackground
-    class Background < Playbook::KitBase
+    class Background
+      include Playbook::Props
+
+      partial "pb_background/background"
+
       prop :background_color, type: Playbook::Props::Enum,
                               values: %w[gradient dark light white],
                               default: "light"

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbBadge
-    class Badge < Playbook::KitBase
+    class Badge
+      include Playbook::Props
+
+      partial "pb_badge/badge"
+
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -2,7 +2,10 @@
 
 module Playbook
   module PbBarGraph
-    class BarGraph < Playbook::KitBase
+    class BarGraph
+      include Playbook::Props
+      partial "pb_bar_graph/bar_graph"
+
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []

data/app/pb_kits/playbook/{pb_caption/caption.html.erb → pb_body/_body.html.erb}

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

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

@@ -2,7 +2,12 @@
 
 module Playbook
   module PbBody
-    class Body < Playbook::KitBase
+    class Body
+      include Playbook::Props
+      include ActionView::Helpers
+
+      partial "pb_body/body"
+
       prop :color, type: Playbook::Props::Enum,
                    values: %w[default light lighter],
                    default: "default"
@@ -14,7 +19,7 @@ module Playbook
                  default: "div"
       prop :text
       prop :highlighting, type: Playbook::Props::Boolean,
-                          default: false
+                              default: false
       prop :highlighted_text, type: Playbook::Props::Array,
                               default: []
 
@@ -23,14 +28,14 @@ module Playbook
       end
 
       def content
-        body_text = super.presence || text
-        highlighting ? apply_highlight(body_text) : body_text
+        highlighting ? apply_highlight : text
       end
 
     private
 
-      def apply_highlight(text)
-        pb_highlight_output = pb_rails("highlight") { "|" }
+      def apply_highlight
+        pb_highlight = Playbook::PbHighlight::Highlight.new() {"|"}
+        pb_highlight_output = ApplicationController.renderer.render(partial: pb_highlight, as: :object)
         highlight_tags = pb_highlight_output.split("|")
         highlight(text, highlighted_text, highlighter: "#{highlight_tags.first.html_safe} \\1 #{highlight_tags.last.html_safe}")
       end

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -2,6 +2,7 @@
   text: "I am a body kit"
 }) %>
 
+
 <%= pb_rails("body", props: {
   text: "I am a body kit (Light)",
   color: "light"

data/app/pb_kits/playbook/pb_button/{button.html.erb → _button.html.erb}

@@ -1,5 +1,5 @@
 <%= content_tag(object.tag,
     object.tag == "button" ? object.options : object.link_options) do %>
     <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
-    <span class="pb_button_content"><%= content.presence || object.text %></span>
+    <span class="pb_button_content"><%= !object.children.nil? ? capture(&object.children) : object.text %></span>
 <% end %>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbButton
-    class Button < Playbook::KitBase
+    class Button
+      include Playbook::Props
+
+      partial "pb_button/button"
+
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :full_width, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_button_toolbar/{button_toolbar.html.erb → _button_toolbar.html.erb}

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

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbButtonToolbar
-    class ButtonToolbar < Playbook::KitBase
+    class ButtonToolbar
+      include Playbook::Props
+
+      partial "pb_button_toolbar/button_toolbar"
+
       prop :connected, type: Playbook::Props::Boolean, default: false
 
       prop :orientation, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/{pb_body/body.html.erb → pb_caption/_caption.html.erb}

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

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbCaption
-    class Caption < Playbook::KitBase
+    class Caption
+      include Playbook::Props
+
+      partial "pb_caption/caption"
+
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_card/{card.html.erb → _card.html.erb}

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
-    <%= content %>
-  <% end if content.present? %>
+  <% if object.children %>
+    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbCard
-    class Card < Playbook::KitBase
+    class Card
+      include Playbook::Props
+
+      partial "pb_card/card"
+
       prop :selected, type: Playbook::Props::Boolean, default: false
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
@@ -27,7 +31,7 @@ module Playbook
 
       def body_padding
         if padding.present?
-          ""
+           ""
         else
           "p_md"
         end
@@ -35,6 +39,7 @@ module Playbook
 
     private
 
+
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -2,7 +2,11 @@
 
 module Playbook
   module PbCard
-    class CardBody < Playbook::KitBase
+    class CardBody
+      include Playbook::Props
+
+      partial "pb_card/child_kits/card_body"
+
       def classname
         generate_classname("pb_card_body_kit", padding, separator: " ")
       end

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -2,7 +2,11 @@
 
 module Playbook
     module PbCard
-      class CardHeader < Playbook::KitBase
+      class CardHeader
+        include Playbook::Props
+  
+        partial "pb_card/child_kits/card_header"
+  
         prop :header_color, type: Playbook::Props::String,
                             default: "category_1"
 
@@ -12,3 +16,4 @@ module Playbook
       end
     end
   end
+  

data/app/pb_kits/playbook/pb_card/{card_body.html.erb → child_kits/_card_body.html.erb}

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

data/app/pb_kits/playbook/pb_card/{card_header.html.erb → child_kits/_card_header.html.erb}

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

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname) do %>  
+  <% if object.children %>
+    <%= capture(&object.children) %>
+   <% else %>            
+    <%= object.input %>
+  <% end %>
+    <span class="pb_checkbox_checkmark">
+      <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
+    </span>
+    <span class="pb_checkbox_label">
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+    </span>
+<% end %>