playbook_ui 7.15.1 → 7.16.0.pre.alpha5

data/app/pb_kits/playbook/{pb_body/_body.html.erb → pb_caption/caption.html.erb}

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

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCaption
-    class Caption
-      include Playbook::Props
-
-      partial "pb_caption/caption"
-
+    class Caption < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"

data/app/pb_kits/playbook/pb_card/{_card.html.erb → card.html.erb}

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
-  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+    <%= content %>
+  <% end if content.present? %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class Card
-      include Playbook::Props
-
-      partial "pb_card/card"
-
+    class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
@@ -31,7 +27,7 @@ module Playbook
 
       def body_padding
         if padding.present?
-           ""
+          ""
         else
           "p_md"
         end
@@ -39,7 +35,6 @@ module Playbook
 
     private
 
-
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/{child_kits/_card_header.html.erb → card_body.html.erb}

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

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCard
-    class CardBody
-      include Playbook::Props
-
-      partial "pb_card/child_kits/card_body"
-
+    class CardBody < Playbook::KitBase
       def classname
         generate_classname("pb_card_body_kit", padding, separator: " ")
       end

data/app/pb_kits/playbook/pb_card/{child_kits/_card_body.html.erb → card_header.html.erb}

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

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -2,11 +2,7 @@
 
 module Playbook
     module PbCard
-      class CardHeader
-        include Playbook::Props
-  
-        partial "pb_card/child_kits/card_header"
-  
+      class CardHeader < Playbook::KitBase
         prop :header_color, type: Playbook::Props::String,
                             default: "category_1"
 
@@ -16,4 +12,3 @@ module Playbook
       end
     end
   end
-  

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -10,32 +10,34 @@ import { globalProps } from '../utilities/globalProps.js'
 type CheckboxProps = {
   aria?: object,
   checked?: boolean,
+  children: Node,
   className?: string,
   dark?: boolean,
   data?: object,
   error?: boolean,
   id?: string,
   name: string,
+  onChange: (boolean) => void,
+  tabIndex: number,
   text: string,
   value: string,
-  children: Node,
-  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {
   const {
     aria = {},
     checked = false,
+    children = null,
     className,
     dark = false,
     data = {},
     error = false,
     id,
     name = '',
+    onChange = () => {},
+    tabIndex,
     text = '',
     value = '',
-    children = null,
-    onChange = () => {},
   } = props
 
   const dataProps = buildDataProps(data)
@@ -60,6 +62,7 @@ const Checkbox = (props: CheckboxProps) => {
             defaultChecked={checked}
             name={name}
             onChange={onChange}
+            tabIndex={tabIndex}
             type="checkbox"
             value={value}
         />

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/transition";
+@import "../tokens/positioning";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
@@ -41,7 +42,10 @@ $transition: $transition_cubic;
     cursor: pointer;
     height: 0;
     width: 0;
-    display: none;
+    left: $offscreen;
+    &:focus ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
     &:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;
       border-color: $primary_action;

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname) do %>
+  <%= content.presence || object.input %>
+  <span class="pb_checkbox_checkmark">
+    <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
+  </span>
+  <span class="pb_checkbox_label">
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+  </span>
+<% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -2,13 +2,7 @@
 
 module Playbook
   module PbCheckbox
-    class Checkbox
-      include Playbook::Props
-      include ActionView::Helpers::FormTagHelper
-      include ActionView::Context
-
-      partial "pb_checkbox/checkbox"
-
+    class Checkbox < Playbook::KitBase
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :text

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb

@@ -1,4 +1,6 @@
+
 <%= pb_rails("checkbox" , props: {
+  input_options: { tabindex: 0 },
   text: "Checkbox Label",
   value: "checkbox-value",
   name: "checkbox-name"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -6,6 +6,7 @@ const CheckboxDefault = (props) => {
     <div>
       <Checkbox
           name="default name"
+          tabIndex={0}
           text="Checkbox label"
           value="default value"
           {...props}

data/app/pb_kits/playbook/pb_circle_chart/{_circle_chart.html.erb → circle_chart.html.erb}

@@ -8,15 +8,15 @@
       <%= javascript_tag do %>
         window.addEventListener('DOMContentLoaded', function() {
           new pbChart('.selector', <%= object.chart_options %>)
-      
+
         });
       <% end %>
     <% end %>
   <% end %>
 
-  <% if object.children %>
+  <% if content.present? %>
     <div class="pb-circle-chart-block">
-      <%= capture(&object.children) %>
+      <%= content %>
     </div>
   <% end %>
 </div>

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbCircleChart
-    class CircleChart
-      include Playbook::Props
-
-      partial "pb_circle_chart/circle_chart"
-
+    class CircleChart < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
@@ -23,7 +19,7 @@ module Playbook
       prop :start_angle, type: Playbook::Props::Numeric
       prop :header_format
       prop :data_label_html, default: '<div>{point.name}</div>'
-      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span> 
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
                                       {point.name}: ' + '<b>{point.y}
                                     </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.html.erb → circle_icon_button.html.erb}

@@ -1,11 +1,9 @@
 <%= content_tag(:div,
-  aria: object.aria, 
+  aria: object.aria,
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-
   <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -1,10 +1,6 @@
 module Playbook
   module PbCircleIconButton
-    class CircleIconButton
-      include Playbook::Props
-
-      partial "pb_circle_icon_button/circle_icon_button"
-
+    class CircleIconButton < Playbook::KitBase
       prop :type, type: Playbook::Props::Enum,
                   values: %w[button submit reset],
                   default: "button"

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -4,12 +4,7 @@ require "action_view"
 
 module Playbook
   module PbContact
-    class Contact
-      include ActionView::Helpers::NumberHelper
-      include Playbook::Props
-
-      partial "pb_contact/contact"
-
+    class Contact < Playbook::KitBase
       prop :contact_type
       prop :contact_value
       prop :contact_detail

data/app/pb_kits/playbook/pb_currency/{_currency.html.erb → currency.html.erb}

@@ -3,7 +3,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
   <%= pb_rails("caption", props: { text: object.label }) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -2,12 +2,7 @@
 
 module Playbook
   module PbCurrency
-    class Currency
-      include ActionView::Context
-      include Playbook::Props
-
-      partial "pb_currency/currency"
-
+    class Currency < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDashboardValue
-    class DashboardValue
-      include Playbook::Props
-
-      partial "pb_dashboard_value/dashboard_value"
-
+    class DashboardValue < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_date/date.rb

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

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -0,0 +1,42 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id) do %>
+  <div class="input_wrapper">
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= pb_rails("text_input", props: {
+        aria: object.input_aria,
+        autocomplete: false,
+        dark: object.dark,
+        data: object.input_data,
+        disabled: object.disable_input,
+        error: object.error,
+        id: object.picker_id,
+        label: object.hide_label ? nil : object.label,
+        name: object.name,
+        placeholder: object.placeholder,
+        required: object.required,
+      }) %>
+    <% end %>
+    <% if !object.hide_icon %>
+      <div
+          class="<%= object.icon_wrapper_class %>"
+          id="cal-icon-<%= object.picker_id %>"
+      >
+        <%= pb_rails("icon", props: {
+          classname: "cal_icon",
+          icon: "calendar-alt"
+        }) %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+        datePickerHelper(<%= object.date_picker_config %>)
+    })
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDatePicker
-    class DatePicker
-      include Playbook::Props
-
-      partial "pb_date_picker/date_picker"
-
+    class DatePicker < Playbook::KitBase
       prop :allow_input, type: Playbook::Props::Boolean,
                          default: false
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -49,6 +49,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <If condition={icon}>
         <Body
             color="light"
+            key={Math.random()}
             tag="span"
         >
           <Icon

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <div class="pb_date_range_inline_wrapper">
+    <% if object.icon == true %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
+    <% end %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
+
+    <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
+  </div>
+<% end %>