playbook_ui 7.14.0.pre.alpha1 → 7.16.0.pre.alpha2

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;
@@ -45,6 +49,7 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
+        background-color: $white;
       }
     }
   }
@@ -61,6 +66,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_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_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,

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -4,7 +4,7 @@ import DateTime from '../_date_time.jsx'
 const DateTimeDefault = (props) => (
   <div>
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09')}
         showDayOfWeek
         showIcon
         {...props}
@@ -29,7 +29,7 @@ const DateTimeDefault = (props) => (
     <br />
 
     <DateTime
-        datetime={new Date()}
+        datetime={new Date('2020-12-31 14:24:09 -0500')}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_date_time_stacked/{_date_time_stacked.html.erb → date_time_stacked.html.erb}

@@ -2,7 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
     <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
       <%= pb_rails("flex/flex_item") do %>
         <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
@@ -11,5 +10,4 @@
         <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", date: object.date, tag: "caption" }) %>
       <% end %>
     <% end %>
-
 <% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateTimeStacked
-    class DateTimeStacked
-      include Playbook::Props
-
-      partial "pb_date_time_stacked/date_time_stacked"
-
+    class DateTimeStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDateYearStacked
-    class DateYearStacked
-      include Playbook::Props
-
-      partial "pb_date_year_stacked/date_year_stacked"
-
+    class DateYearStacked < Playbook::KitBase
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,7 +1,7 @@
 @import "../tokens/colors";
 
 [class^=pb_distribution_bar] {
-  $bar_colors: map-values($data_colors);
+  $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
@@ -10,8 +10,8 @@
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @each $name, $color in $data_colors {
-      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
+    @each $name, $color in $bar_colors {
+      &:nth-child(#{length($bar_colors)}n+#{index(($bar_colors), ($name $color))}) {
         background-color: $color;
       }
       &.color_#{$name} {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -2,11 +2,7 @@
 
 module Playbook
   module PbDistributionBar
-    class DistributionBar
-      include Playbook::Props
-
-      partial "pb_distribution_bar/distribution_bar"
-
+    class DistributionBar < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm],
                   default: "lg"

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -1,4 +1,4 @@
 <%= pb_rails("distribution_bar", props: {
   widths: [4,5,3],
-  colors: ["data_7", "data_1", "data_6"]
+  colors: ["data_7", "data_1", "neutral"]
 }) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -6,7 +6,7 @@ const DistributionBarCustomColors = (props) => {
     <React.Fragment>
       <div>
         <DistributionBar
-            colors={['data_7', 'data_1', 'data_6']}
+            colors={['data_7', 'data_1', 'neutral']}
             widths={[4, 5, 3]}
             {...props}
         />