playbook_ui 7.16.0.pre.alpha5 → 8.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7506fd4ba5e3aabe6c2f01f55ae4a9d35f36da9c6197e6eebba0ba5c035e7f47
-  data.tar.gz: 9f6cb471538b8ce9e1563a386ceee044db8df80ac31b276b49794783ddf5a35b
+  metadata.gz: cf9b3f5c473d741e312f2688e16d3aad2f37b6a18c4dd11bf878dd538ab11199
+  data.tar.gz: 3cd322faca0eba26a65c5e84277d9691f301bd116d95d9bdefab56c50c699c80
 SHA512:
-  metadata.gz: e69547b69f74fa31c73c051db1431febbaf041e1b285dbde95d2add050e6518a973b4a355a6628a208dba788d8c3fe43364d83acfea02872c7871e04a9022c08
-  data.tar.gz: 1bdf69f04bf3913e87dbb780886e7f38df6044149ba6fcd6b8fad95565d2e706f45a85c903b3abeacf64d1604b9f8de4f11d23b946b63b359308f17f058911b9
+  metadata.gz: a98eec496b2a72d53fd4d7e590ef9e86aa0b18fc66d019b50d18733b774952746f06bda29c30ffcdfffb1ec715460cb3fe6ed529f5e647063a7891352ee17805
+  data.tar.gz: 8afa59cc9e0f784b0267ef52f83597b4f097a413a0a819f623a24ec2da2ebb1eaa2619aa237788b76c738d76cf600397b82624f0f96d54e3e31b153acbc68dc5

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -289,9 +289,6 @@
 .numInputWrapper span svg path {
   fill: rgba(0,0,0,0.5);
 }
-.numInputWrapper:hover {
-  background: rgba(0,0,0,0.05);
-}
 .numInputWrapper:hover span {
   opacity: 1;
 }

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -13,6 +13,7 @@
 }
 .flatpickr-monthDropdown-months {
   appearance: none;
+  -webkit-appearance: none;
   @include pb_title_4;
   height: $space_xl;
   width: $space_xs * 12;
@@ -29,10 +30,14 @@
 }
 .numInputWrapper {
   display: contents;
+  display: -webkit-box;
+  display: -webkit-flex;
   .numInput {
     @include pb_title_4;
     border: 0;
     appearance: none;
+    -webkit-appearance: none;
+    border-radius: 0;
     background-color: transparent;
     border-left: solid 1px $border_light;
     padding-left: $space_md - 1.5;
@@ -45,6 +50,7 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
+        background-color: $white;
       }
     }
   }
@@ -61,6 +67,7 @@
 }
 .year-dropdown-icon {
   align-self: center;
+  -webkit-align-self: center;
   margin-top: $space_xs - 3;
   width: $space_xs + 2;
   position: relative;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -41,4 +41,7 @@
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
   -webkit-box-shadow: none;
           box-shadow: none;
-}
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .numInputWrapper:hover {
+  background-color: $white;
+}

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

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), &block
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb

@@ -0,0 +1,3 @@
+<ol class="pb-form-actions">
+    <%= content %>
+</ol>

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

@@ -3,10 +3,8 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea
-        def initialize(form_builder)
-          self.form_builder = form_builder
-        end
+      class ActionArea < Playbook::KitBase
+        prop :submit_default_value, type: Playbook::Props::String
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
@@ -14,26 +12,12 @@ module Playbook
         end
 
         def button(value = nil, props:)
-          props[:text] ||= value || form_builder.send(:submit_default_value)
-
-          template.content_tag(:li) do
-            template.pb_rails("button", props: props)
-          end
-        end
+          props[:text] ||= value || submit_default_value
 
-        def wrapper
-          template.content_tag(:ol, class: "pb-form-actions") do
-            yield self
+          content_tag(:li) do
+            pb_rails("button", props: props)
           end
         end
-
-      private
-
-        attr_accessor :form_builder
-
-        def template
-          form_builder.instance_variable_get("@template")
-        end
       end
     end
   end