playbook_ui 7.13.0 → 7.16.0.pre.alpha1

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_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,13 @@
 }
 .numInputWrapper {
   display: contents;
+  display: -webkit-box;
+  display: -webkit-flex;
   .numInput {
     @include pb_title_4;
     border: 0;
     appearance: none;
+    -webkit-appearance: none;
     background-color: transparent;
     border-left: solid 1px $border_light;
     padding-left: $space_md - 1.5;
@@ -61,6 +65,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 {
+  background-color: $white;
 }

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

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_range_stacked/docs/example.yml

@@ -2,10 +2,6 @@ examples:
   
   rails:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  
   
   react:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  

data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js

@@ -1,2 +1 @@
 export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
-export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'

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_stacked/docs/example.yml

@@ -6,9 +6,6 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
 
   react:
   - date_stacked_default: Default
@@ -16,7 +13,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
-

data/app/pb_kits/playbook/pb_date_stacked/docs/index.js

@@ -3,5 +3,3 @@ export { default as DateStackedNotCurrentYear } from './_date_stacked_not_curren
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'
-export { default as DateStackedDark } from './_date_stacked_dark.jsx'
-

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -53,13 +53,13 @@ const DateTime = (props: DateTimeProps) => {
           vertical="baseline"
       >
         <FormattedDate
-            datetime={datetime}
             showDayOfWeek={showDayOfWeek}
             size={size}
             timeZone={timeZone}
+            value={datetime}
         />
         <Time
-            date={new Date()}
+            date={datetime}
             marginLeft="sm"
             showIcon={showIcon}
             size={size}

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,