playbook_ui 8.3.0 → 9.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20c10bc88818a098a88244dae5b86297a03b9d22b0be15a262f21829f12c0236
-  data.tar.gz: 62d4b2bebdd82c69816de65c0cf4822a0f9107c23de69d3a4d5fa6c2534e762a
+  metadata.gz: aef1741f04bc8e69735bca02d3a02371f3b505fa00e89886e0765ef9966cabb4
+  data.tar.gz: 7ba329497b8405ca204af5e7d41e18ec51e14d3691b33741f36767d385a0506e
 SHA512:
-  metadata.gz: '079f98c19577878aa9f7e0dd7cfbb893f4eb51ff5a560da77947dea78210fb925d645b29319e6acf5904ea9c4ba34f11a1fd4cb8a625c702f870cd1dbe10fc36'
-  data.tar.gz: e5f99fe04321876316262a71f408dfb2e752bee6f311febac948e4c95673f41e90aa21ee4079e482edbdc8f81ff303fd20bef751143918ca3f7246f11d4a452a
+  metadata.gz: 29359809591a9728d7be433e38691ca397c133c1b1ed9bbe85e75b95775fcd6d90f4c25c65eccd288f4197af1c5a7ed2016821d61967a1b737b9d467ac22baad
+  data.tar.gz: 85d37c87b12da09850947cc291b02e8a7edb081a4f165d8824d47a2cb0bc26a6a02eb30e486f0899b3b259753a67fe32d25486fdabee9fcdb9724bbc192b6f47

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -48,7 +48,6 @@ $avatar-sizes: (
           line-height: $size;
           text-transform: uppercase;
           position: relative;
-          z-index: 0;
         }
 
         img {
@@ -57,7 +56,6 @@ $avatar-sizes: (
           position: absolute;
           top: 0;
           left: 0;
-          z-index: 1;
           border-radius: $border-rad-mega;
           object-fit: cover;
           display: block;
@@ -69,7 +67,6 @@ $avatar-sizes: (
         top: 0;
         bottom: auto;
         left: auto;
-        z-index: 500;
 
         &.size_xs {
           right: -4px;

data/app/pb_kits/playbook/pb_form/docs/_description.md

@@ -1,10 +1,6 @@
-The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper. 
+The `form` kit provides consumers with a convenient, consistently styled `<form>` wrapper.
 
 ### Form Helpers
 
-There are currently two form helper options for Rails: [`form_with`](https://apidock.com/rails/ActionView/Helpers/FormHelper/form_with) and [`simple_form`](https://github.com/heartcombo/simple_form). 
-
-**Note:** It is suggested to use `form_with` for newer or more progressive Rails applications and `simple_form` for older legacy forms where simple_form is already implemented and a complete overhaul might not make sense.
-
-This kit does make use of other kits such as text_input, select and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
+This kit uses rails `form_with` with our custom builder to render forms using other kits such as text_input, select, and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.
 

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, url: "", method: :get } }) do |form| %>
+<%= pb_form_with(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 } %>

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

@@ -13,10 +13,7 @@
   ]
 %>
 
-<%= pb_rails("form/form_with", props: {
-    scope: :example, method: :get, url: "",
-    validate: true
-  }) do |form| %>
+<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>

data/app/pb_kits/playbook/pb_form/docs/example.yml

@@ -1,7 +1,5 @@
 examples:
 
   rails:
-  - form_form_with: Default (Form With)
-  - form_form_with_validate: Default (Form With) + Validation
-  - form_simple_form: Default (Simple Form)
-  - form_simple_form_validate: Default (Simple Form) + Validation
+  - form_form_with: Default
+  - form_form_with_validate: Default + Validation

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

@@ -3,33 +3,27 @@
 module Playbook
   module PbForm
     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 :form_system, deprecated: "Playbook only supports form_with and this prop is ignored",
+                         type: Playbook::Props::Base
+      prop :form_system_options, deprecated: "Use options instead",
+                                 type: Playbook::Props::Base
+      prop :options, type: Playbook::Props::Base
       prop :validate, type: Playbook::Props::Boolean, default: false
 
-      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)
+        view_context.pb_form_with(form_options, &block)
       end
 
     private
 
-      def form_kit
-        @form_system ||= begin
-          ::Playbook::KitResolver.resolve("form/#{form_system}")
-                                 .new(options: form_system_options, validate: validate, children: children)
-        end
+      def form_options
+        {
+          id: id,
+          aria: aria,
+          class: classname,
+          data: data,
+          validate: validate,
+        }.merge(prop(:options) || prop(:form_system_options) || { })
       end
     end
   end

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -28,7 +28,7 @@ const Highlight = (props: HighlightProps) => {
         autoEscape
         data={data}
         highlightClassName={classnames(globalProps(props), className)}
-        highlightTag="span"
+        highlightTag="mark"
         id={id}
         searchWords={highlightedText}
         textToHighlight={text || children}

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -2,5 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= content.presence || object.text %>
+    <mark>
+      <%= content.presence || object.text %>
+    </mark>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx

@@ -52,6 +52,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -59,6 +60,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={2}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -66,6 +68,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={`${value}`}
         />
       )

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -12,6 +12,7 @@
       <div>
         <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
             <%= pb_rails "title", props: {
+                tag: "span",
                 text: object.value_string,
                 size: object.title_size } %>
                 &nbsp;

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -46,7 +46,7 @@ const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
-    aria = {},
+    aria = { hidden: true },
     className,
     data = {},
     id,

data/app/pb_kits/playbook/pb_progress_pills/docs/_description.md

@@ -1 +1,3 @@
-Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
+Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
+
+Note: be sure to make use of the aria attribute as shown in the example if you want this kit to be web accessible.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("progress_pills", props: { steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -7,6 +7,7 @@ const ProgressPillsDefault = (props) => {
     <div>
       <ProgressPills
           active={2}
+          aria={{ label: '2 out of 3 steps complete' }}
           steps={3}
           {...props}
       />

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb

@@ -1 +1 @@
-<%= pb_rails("progress_pills", props: { steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -7,6 +7,7 @@ const ProgressPillsStatus = (props) => {
     <div>
       <ProgressPills
           active={2}
+          aria={{ label: '2 out of 3 steps complete' }}
           steps={3}
           title="Status:"
           value="Orientation"

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria,
+    aria: object.aria_attributes,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -26,6 +26,11 @@ module Playbook
          step <= active ? "_active" : "_inactive"
       end
 
+      def aria_attributes
+        return aria if aria.present?
+        { hidden: true }
+      end
+
       def dark_pill
         dark ? " dark" : nil
       end

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -25,6 +25,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -36,6 +37,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={unit}
         />
       )

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -6,10 +6,12 @@
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
       size: 1,
+      tag: "span",
       text: object.formatted_value } %>
       &nbsp;
       <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
+      tag: "span",
       size: 3,
       text: object.unit } %>
   </div>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -9,6 +9,7 @@
   }
   .pb_typeahead_wrapper {
     position: relative;
+
     .text_input_value_container{
       cursor: text;
     }
@@ -28,6 +29,9 @@
   }
   [class^=pb_text_input_kit] {
     .text_input_wrapper {
+      .text_input {
+        max-height: none;
+      }
       & > input:first-child {
         padding-right: $space_xl;
       }

data/lib/playbook.rb

@@ -6,8 +6,11 @@ require "webpacker"
 require "webpacker/react"
 require "view_component/engine"
 
-require "playbook/props"
 require "playbook/version"
+
+require "playbook/props"
+require "playbook/forms"
+require "playbook/pb_forms_helper"
 require "playbook/pb_kit_helper"
 require "playbook/pb_doc_helper"
 require "playbook/kit_base"

data/lib/playbook/forms.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require_relative "forms/builder"

data/lib/playbook/forms/builder.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder < ::ActionView::Helpers::FormBuilder
+      require_relative "builder/action_area"
+      require_relative "builder/checkbox_field"
+      require_relative "builder/collection_select_field"
+      require_relative "builder/date_picker_field"
+      require_relative "builder/form_field_builder"
+      require_relative "builder/select_field"
+      require_relative "builder/typeahead_field"
+
+      prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:search_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:telephone_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:text_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
+      prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+
+      def actions
+        context = @template.respond_to?(:view_context) ? @template.view_context : @template
+        context.content_tag :ol, class: "pb-form-actions" do
+          yield ActionArea.new(@template, submit_default_value)
+        end
+      end
+    end
+  end
+end

data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/action_area.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Playbook
-  module PbForm
-    module FormBuilder
+  module Forms
+    class Builder
       class ActionArea
         def initialize(view_context, submit_default_value)
           self.view_context = view_context

data/lib/playbook/forms/builder/checkbox_field.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def check_box(name, props: {}, **options)
+        label_text = @template.label(@object_name, name) if props[:label] == true
+        options[:required] = true if props[:required]
+        props[:margin_bottom] = "sm"
+        props[:form_spacing] = true
+
+        checked_value = options[:checked_value]
+        unchecked_value = options[:unchecked_value]
+        options.delete(:checked_value)
+        options.delete(:unchecked_value)
+
+        input = super(name, options, checked_value, unchecked_value)
+
+        if props[:label]
+          @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
+            @template.pb_rails("checkbox", props: props) do
+              input
+            end
+        else
+          @template.pb_rails("checkbox", props: props) do
+            input
+          end
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {} )
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+        options[:prompt] = props[:blank_selection] || ""
+        html_options[:required] = "required" if props[:required]
+        input = super(name, collection, value_method, text_method, options, html_options)
+
+        @template.pb_rails("select", props: props) do
+          input
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder/date_picker_field.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def date_picker(name, props: {})
+        prefix = @object_name
+        html_attribute_name = "#{prefix}[#{name}]"
+        html_id = "#{prefix}_#{name}"
+
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        props[:label] = "Date Picker" if props[:label].nil?
+
+        props[:name] = html_attribute_name
+        props[:picker_id] = html_id
+
+        input = text_field(
+          name,
+          autocomplete: "off",
+          disabled: props[:disable_input],
+          data: props[:input_data],
+          aria: props[:input_aria],
+          props: {
+            error: props[:error],
+            label: props[:hide_label] ? nil : props[:label],
+            placeholder: props[:placeholder],
+            required: props[:required],
+          }
+        )
+
+        @template.pb_rails("date_picker", props: props) do
+          input
+        end
+      end
+    end
+  end
+end