playbook_ui 7.16.0 → 8.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -2,13 +2,7 @@
 
 module Playbook
   module PbDateRangeInline
-    class DateRangeInline
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_date_range_inline/date_range_inline"
-
+    class DateRangeInline < Playbook::KitBase
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true
       prop :icon, required: false

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateRangeStacked
-    class DateRangeStacked
-      include Playbook::Props
-
-      partial "pb_date_range_stacked/date_range_stacked"
-
+    class DateRangeStacked < Playbook::KitBase
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -2,13 +2,7 @@
 
 module Playbook
   module PbDateStacked
-    class DateStacked
-      include ActionView::Helpers::TagHelper
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_date_stacked/date_stacked"
-
+    class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
                   values: %w[left center right],

data/app/pb_kits/playbook/pb_date_time/{_date_time.html.erb → date_time.html.erb}

@@ -4,9 +4,9 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("flex", props: { 
-      orientation: "row", 
-      horizontal: object.align, 
+    <%= pb_rails("flex", props: {
+      orientation: "row",
+      horizontal: object.align,
       vertical: "baseline" }) do %>
 
       <%= pb_rails("date", props: {

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateTime
-    class DateTime
-      include Playbook::Props
-
-      partial "pb_date_time/date_time"
-
+    class DateTime < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :align, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.html.erb → date_time_stacked.html.erb}

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
     <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
@@ -11,5 +10,4 @@
         <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
       <% end %>
     <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateTimeStacked
-    class DateTimeStacked
-      include Playbook::Props
-
-      partial "pb_date_time_stacked/date_time_stacked"
-
+    class DateTimeStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateYearStacked
-    class DateYearStacked
-      include Playbook::Props
-
-      partial "pb_date_year_stacked/date_year_stacked"
-
+    class DateYearStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

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

@@ -14,7 +14,7 @@
 %>
 
 <%= pb_rails("form", props: {
-    form_system_options: { scope: :example, method: :get },
+    form_system_options: { 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.html.erb

@@ -0,0 +1,7 @@
+<%=
+  pb_rails("form/#{form_system}", props: {
+    options: form_system_options,
+    children: children,
+    validate: validate
+  })
+%>

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

@@ -1,28 +1,26 @@
 # 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
-
-    private
+      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 specific_form
-        @specific_form ||= "#{self.class}::#{form_system.classify}Form".constantize.new(self)
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
       end
     end
   end