playbook_ui 7.16.0 → 8.0.1

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

@@ -0,0 +1,3 @@
+<ol class="pb-form-actions">
+  <%= instance_exec(self, &children) %>
+</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

data/app/pb_kits/playbook/pb_form/{_form_simple_form.html.erb → form_with.html.erb}

@@ -1,8 +1,6 @@
-<%= simple_form_for *object.merged_form_system_options do |form| %>
-  <% instance_exec form, &object.children %>
-<% end %>
+<%= form_with(form_options, &method(:render_form)) %>
 
-<% if object.validate %>
+<% if validate %>
   <% content_for :pb_js do %>
     <%= javascript_tag do %>
       window.addEventListener('DOMContentLoaded', function() {
@@ -10,4 +8,4 @@
       })
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    class FormWith < Playbook::KitBase
+      class FormBuilder < ::ActionView::Helpers::FormBuilder
+        include ::Playbook::PbForm::FormBuilder
+      end
+
+      prop :options, type: Playbook::Props::Hash, default: {}
+      prop :validate, type: Playbook::Props::Boolean, default: false
+
+      def data
+        prop(:data).merge("pb-form-validation" => validate)
+      end
+
+      def form_options
+        {
+          url: "",
+          id: id,
+          aria: aria,
+          class: classname,
+          data: data,
+          builder: ::Playbook::PbForm::FormWith::FormBuilder,
+        }.merge(options)
+      end
+
+      def render_form(builder)
+        view_context.capture(builder, &children)
+      end
+
+      def classname
+        [generate_classname("pb-form"), options[:class]].join(" ")
+      end
+
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form/simple_form.html.erb

@@ -0,0 +1,13 @@
+<%= simple_form_for model, options do |form| %>
+  <% instance_exec form, &children %>
+<% end %>
+
+<% if validate %>
+  <% content_for :pb_js do %>
+    <%= javascript_tag do %>
+      window.addEventListener('DOMContentLoaded', function() {
+        PbFormValidation.start()
+      })
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+if defined?(SimpleForm)
+module Playbook
+  module PbForm
+    class SimpleForm < Playbook::KitBase
+      class FormBuilder < ::SimpleForm::FormBuilder
+        include ::Playbook::PbForm::FormBuilder
+
+        def input(attribute_name, options = {}, &block)
+          super(
+            attribute_name,
+            options.deep_merge(label: false, input_html: {
+                            props: {
+                              label: true,
+                            },
+                          }),
+            &block
+          )
+        end
+      end
+
+      prop :options, type: Playbook::Props::Hash, default: {}
+      prop :validate, type: Playbook::Props::Boolean, default: false
+
+      def options
+        {
+          builder: Playbook::PbForm::SimpleForm::FormBuilder,
+          html: html_options,
+          data: data,
+          url: "",
+        }.merge(prop(:options))
+      end
+
+      def model
+        prop(:options).fetch(:model, nil)
+      end
+
+      def data
+        prop(:data).merge("pb-form-validation" => validate)
+      end
+
+      def classname
+        [generate_classname("pb-form"), html[:class]].join(" ")
+      end
+
+      def html
+        prop(:options).fetch(:html, {})
+      end
+
+      def render_in(view_context, &_block)
+        super(view_context, &nil)
+      end
+
+    private
+
+      def html_options
+        html.merge(class: classname)
+      end
+    end
+  end
+end
+end

data/app/pb_kits/playbook/pb_form_group/{_form_group.html.erb → form_group.html.erb}

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

data/app/pb_kits/playbook/pb_form_group/form_group.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFormGroup
-    class FormGroup
-      include Playbook::Props
-
-      partial "pb_form_group/form_group"
-
+    class FormGroup < Playbook::KitBase
       def classname
         generate_classname("pb_form_group_kit")
       end

data/app/pb_kits/playbook/pb_form_pill/{_form_pill.html.erb → form_pill.html.erb}

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,
@@ -10,7 +9,6 @@
         size: "xs"
       }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-
     <% elsif object.text.present? %>
       <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
     <% end %>
@@ -18,5 +16,4 @@
     <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
       <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
     <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbFormPill
-    class FormPill
-      include Playbook::Props
-
-      partial "pb_form_pill/form_pill"
-
+    class FormPill < Playbook::KitBase
       prop :avatar_url
       prop :name
       prop :text

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbGauge
-    class Gauge
-      include Playbook::Props
-
-      partial "pb_gauge/gauge"
-
+    class Gauge < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: [{ name: "Name", value: 0 }]
       prop :style, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_hashtag/{_hashtag.html.erb → hashtag.html.erb}

@@ -3,7 +3,6 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-
   <%= link_to object.url do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHashtag
-    class Hashtag
-      include Playbook::Props
-
-      partial "pb_hashtag/hashtag"
-
+    class Hashtag < Playbook::KitBase
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],

data/app/pb_kits/playbook/pb_highlight/{_highlight.html.erb → highlight.html.erb}

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

data/app/pb_kits/playbook/pb_highlight/highlight.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHighlight
-    class Highlight
-      include Playbook::Props
-
-      partial "pb_highlight/highlight"
-
+    class Highlight < Playbook::KitBase
       prop :text
 
       def classname

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= render file: object.emphasis_partial, locals: { object: object } %>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbHomeAddressStreet
-    class HomeAddressStreet
-      include Playbook::Props
-
-      partial "pb_home_address_street/home_address_street"
-
+    class HomeAddressStreet < Playbook::KitBase
       prop :address
       prop :address_cont
       prop :city
@@ -26,11 +22,11 @@ module Playbook
       end
 
       def city_state_zip
-        "#{city.titleize}, #{state} #{zipcode}"
+        [city_state, zipcode].join(" ")
       end
 
       def city_state
-        "#{city.titleize}, #{state}"
+        [city.titleize, state].join(", ")
       end
 
       def zip
@@ -38,7 +34,7 @@ module Playbook
       end
 
       def address_house_style
-        "#{address&.titleize} #{separator} #{house_style}"
+        [address&.titleize, house_style].join(separator)
       end
 
       def address_house_style2
@@ -46,7 +42,11 @@ module Playbook
       end
 
       def separator
-        house_style ? "\u00b7" : ""
+        house_style ? " \u00b7 " : ""
+      end
+
+      def emphasis_partial
+        File.join(File.dirname(self.class.source_location), "_#{emphasis}_emphasis")
       end
 
     private

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbIcon
-    class Icon
-      include Playbook::Props
-
-      partial "pb_icon/icon"
-
+    class Icon < Playbook::KitBase
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbIconCircle
-    class IconCircle
-      include Playbook::Props
-
-      partial "pb_icon_circle/icon_circle"
-
+    class IconCircle < Playbook::KitBase
       prop :icon, required: true
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbIconStatValue
-    class IconStatValue
-      include Playbook::Props
-      include ActionView::Helpers::NumberHelper
-
-      partial "pb_icon_stat_value/icon_stat_value"
-
+    class IconStatValue < Playbook::KitBase
       prop :icon, required: true
 
       prop :size, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id) do %>
+  <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+    <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
+    <%= object.text %>
+  <% end %>
+<% end %>

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

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbIconValue
-    class IconValue
-      include Playbook::Props
-
-      partial "pb_icon_value/icon_value"
-
+    class IconValue < Playbook::KitBase
       prop :text, required: true
       prop :icon, required: true
       prop :align, type: Playbook::Props::Enum,

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

@@ -32,7 +32,9 @@ const Image = (props: ImageProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_image_kit lazyload blur_up', size),
+    buildCss('pb_image_kit', size),
+    'lazyload',
+    'blur_up',
     { rounded },
     globalProps(props),
     className