playbook_ui 7.16.0 → 8.0.1

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,7 +1,7 @@
 @import "../tokens/colors";
 
 [class^=pb_distribution_bar] {
-  $bar_colors: map-values($data_colors);
+  $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
@@ -10,8 +10,8 @@
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @each $name, $color in $data_colors {
-      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
+    @each $name, $color in $bar_colors {
+      &:nth-child(#{length($bar_colors)}n+#{index(($bar_colors), ($name $color))}) {
         background-color: $color;
       }
       &.color_#{$name} {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDistributionBar
-    class DistributionBar
-      include Playbook::Props
-
-      partial "pb_distribution_bar/distribution_bar"
-
+    class DistributionBar < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm],
                   default: "lg"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("distribution_bar", props: {
   widths: [4,5,3],
-  colors: ["data_7", "data_1", "data_6"]
+  colors: ["data_7", "data_1", "neutral"]
 }) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -6,7 +6,7 @@ const DistributionBarCustomColors = (props) => {
     <React.Fragment>
       <div>
         <DistributionBar
-            colors={['data_7', 'data_1', 'data_6']}
+            colors={['data_7', 'data_1', 'neutral']}
             widths={[4, 5, 3]}
             {...props}
         />

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](/visual_guidelines) for reference.

data/app/pb_kits/playbook/pb_docs/kit_api.html.erb

@@ -0,0 +1,12 @@
+<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+  <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
+  <%= pb_rails("card", props: { padding: "none" }) do %>
+    <%= pb_rails("list", props: { xpadding: true }) do %>
+      <% kit_props.each do |key, _def| %>
+        <%= pb_rails("list/item") do %>
+          <%= key %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_docs/kit_api.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocs
+    class KitApi < Playbook::KitBase
+      prop :kit, type: Playbook::Props::String, required: true
+
+      def kit_props
+        kit_class.props
+      end
+
+    private
+
+      def kit_class
+        @kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
+  <div class="pb--kit-example">
+    <%= pb_rails("caption", props: { text: example_title }) %>
+    <br />
+    <%= example %>
+    <br>
+  </div>
+
+  <% if show_code %>
+    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
+      <%= markdown(description) %>
+    </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", props: { dark: dark })%>
+        <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
+        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDocs
+    class KitExample < Playbook::KitBase
+      include Playbook::Markdown::Helper
+
+      prop :kit, type: Playbook::Props::String, required: true
+      prop :example_title, type: Playbook::Props::String, required: true
+      prop :example_key, type: Playbook::Props::String, required: true
+      prop :show_code, type: Playbook::Props::Boolean, default: true
+      prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
+      prop :dark, type: Playbook::Props::Boolean, default: false
+
+      def example
+        if type == "rails"
+          render inline: source
+        elsif type == "react"
+          react_component example_key.camelize, { dark: dark }
+        end
+      end
+
+      def description
+        @description ||= read_kit_file(kit, "_#{example_key}.md")
+      end
+
+      def highlighter
+        type.eql?("rails") ? "erb" : "react"
+      end
+
+      def source
+        @source ||= begin
+          extension = type == "react" ? "jsx" : "html.erb"
+          read_kit_file("_#{example_key}.#{extension}")
+        end
+      end
+
+    private
+
+      def read_kit_file(*args)
+        path = ::Playbook.kit_path(kit, "docs", *args)
+        path.exist? ? path.read : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -0,0 +1,86 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= object.wrapper do %>
+      <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
+        <% if (object.template != "sort_only") %>
+          <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
+          <div class="maskContainer">
+            <div class="filters">
+              <div class="left_gradient"></div>
+              <% object.filters.each do |filter| %>
+                <% if filter[:name] == "" %>
+                  <div>
+                    <%= pb_rails("body", props: {
+                      color: "light",
+                      padding_left: "xs",
+                      size: 4,
+                      tag:"h4",
+                      text: "No Filter Selected"
+                    }) %>
+                  </div>
+                <% else %>
+                <div class="filter">
+                  <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                  <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                </div>
+                <% end %>
+              <% end %>
+              <div class="right_gradient"></div>
+            </div>
+          </div>
+          <% if (object.template != "default") %>
+            <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+          <% end %>
+        <% end %>
+
+        <% if (object.template == "single" ) || (object.template == "sort_only") %>
+          <% unless object.sort_menu == [{}] %>
+            <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
+              <% object.sort_menu.each do |item| %>
+                <% if item[:active] == true %>
+                  <%= item[:item] %>
+                  <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if (object.template == "default")%>
+        <%= pb_rails("section_separator") %>
+        <%= pb_rails("flex", props: {orientation: "row", vertical: "center", spacing: "between", classname: "filter-bottom"}) do %>
+          <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
+            <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+              <%= pb_rails("caption", props: { text: "sort by:"}) %>
+              <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
+                <% object.sort_menu.each do |item| %>
+                  <% if item[:active] == true %>
+                    <%= item[:item] %>
+                    <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if object.template != "sort_only"%>
+      <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
+        <%= content %>
+      <% end %>
+    <%end%>
+
+    <% if object.template != "filter_only"%>
+      <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
+          <%= pb_rails("list") do %>
+            <% object.sort_menu.each do |item| %>
+              <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
+            <% end %>
+          <% end %>
+      <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFilter
-    class Filter
-      include Playbook::Props
-
-      partial "pb_filter/filter"
-
+    class Filter < Playbook::KitBase
       prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
       prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
       prop :results, type: Playbook::Props::Numeric
@@ -31,6 +27,14 @@ module Playbook
         end
       end
 
+      def wrapper(&block)
+        if object.background
+          pb_rails("card", props: { padding: "none" }, &block)
+        else
+          capture(&block)
+        end
+      end
+
       def sort_icon(direction)
         case direction
         when "asc"

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFixedConfirmationToast
-    class FixedConfirmationToast
-      include Playbook::Props
-
-      partial "pb_fixed_confirmation_toast/fixed_confirmation_toast"
-
+    class FixedConfirmationToast < Playbook::KitBase
       prop :status, type: Playbook::Props::Enum,
                     values: %w[success error neutral tip],
                     default: "neutral"

data/app/pb_kits/playbook/{pb_layout/_sidebar.html.erb → pb_flex/flex.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_flex/flex.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFlex
-    class Flex
-      include Playbook::Props
-
-      partial "pb_flex/flex"
-
+    class Flex < Playbook::KitBase
       prop :horizontal, type: Playbook::Props::Enum,
                         values: %w[left center right stretch none],
                         default: "left",

data/app/pb_kits/playbook/pb_flex/{_flex_item.html.erb → flex_item.html.erb}

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

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFlex
-    class FlexItem
-      include Playbook::Props
-
-      partial "pb_flex/flex_item"
-
+    class FlexItem < Playbook::KitBase
       prop :fixed_size, default: nil
       prop :grow, type: Playbook::Props::Boolean,
                   default: false

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -13,7 +13,7 @@
   ]
 %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+<%= pb_rails("form", props: { form_system_options: { scope: :example, url: "", method: :get } }) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
@@ -32,7 +32,7 @@
     unchecked_value: "no",
     id: "checkbox-id",
     name: "checkbox-name",
-    class: "checkbox-class" 
+    class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
 

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -13,8 +13,8 @@
   ]
 %>
 
-<%= pb_rails("form", props: {
-    form_system_options: { scope: :example, method: :get },
+<%= pb_rails("form/form_with", props: {
+    scope: :example, method: :get, url: "",
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -39,8 +39,7 @@
   ]
 %>
 
-
-<%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
+<%= pb_rails("form/simple_form", props: { options: { model: example_form_model.new, url: "", method: :get } }) do |form| %>
   <%= form.input :example_text_field, as: :string %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>

data/app/pb_kits/playbook/pb_form/form.rb

@@ -1,28 +1,35 @@
 # frozen_string_literal: true
 
-# require_dependency "app/pb_kits/playbook/pb_form/form_builder"
-
 module Playbook
   module PbForm
-    class Form
-      include Playbook::Props
-
-      clear_props
+    class Form < ::Playbook::KitBase
       prop :form_system, type: Playbook::Props::Enum,
                          values: %w[form_with simple_form],
                          default: "form_with"
       prop :form_system_options, type: Playbook::Props::Base
-      prop :children, type: Playbook::Props::Proc
       prop :validate, type: Playbook::Props::Boolean, default: false
 
-      delegate :to_partial_path, to: :specific_form
-      delegate :merged_form_system_options, to: :specific_form
-      delegate :form_builder, to: :specific_form
+      def form_system_options
+        form_options = prop(:form_system_options)
+        if form_options.is_a?(::Array)
+          model, options = *form_options
+          (options || {}).merge(model: model)
+        else
+          form_options
+        end
+      end
+
+      def render_in(view_context, &block)
+        form_kit.render_in(view_context, &block)
+      end
 
     private
 
-      def specific_form
-        @specific_form ||= "#{self.class}::#{form_system.classify}Form".constantize.new(self)
+      def form_kit
+        @form_system ||= begin
+          ::Playbook::KitResolver.resolve("form/#{form_system}")
+                                 .new(options: form_system_options, validate: validate, children: children)
+        end
       end
     end
   end

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -21,7 +21,7 @@ module Playbook
         prepend(DatePickerField)
 
         def actions(&block)
-          ActionArea.new(self).wrapper(&block)
+          @template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
         end
       end
     end