playbook_ui 6.4.2 → 6.5.0

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -0,0 +1,108 @@
+@import "../../pb_title/title_mixin";
+// Header Styles
+.flatpickr-months {
+  border-bottom: solid 1px $border_light;
+}
+.flatpickr-month {
+  height: $space_xl;
+}
+.flatpickr-current-month {
+  left: $space_xs;
+  display: flex;
+  padding-top: 0;
+}
+.flatpickr-monthDropdown-months {
+  appearance: none;
+  @include pb_title_4;
+  height: $space_xl;
+  width: $space_xs * 12;
+  padding-left: 0;
+  padding-right: $space_xs;
+  margin-left: $space_sm;
+  margin-top: 0;
+  margin-bottom: 0;
+  @media (hover: hover) {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+.numInputWrapper {
+  display: contents;
+  .numInput {
+    @include pb_title_4;
+    border: 0;
+    appearance: none;
+    background-color: transparent;
+    border-left: solid 1px $border_light;
+    padding-left: $space_md - 1.5;
+    padding-right: $space_sm;
+    margin-left: $space_xs;
+    height: $space_xl;
+    &:focus {
+      outline: none;
+    }
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+// Icon for Select Tags
+.month-dropdown-icon {
+  align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 2;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+.year-dropdown-icon {
+  align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 4;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+
+// Left - Right Arrow Styling
+.flatpickr-prev-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: $space_xs * 29.25 !important;
+  padding-right: $space_sm;
+  border-left: solid 1px $border_light;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}
+.flatpickr-next-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover{
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss

@@ -0,0 +1,44 @@
+@media (min-width: 500px) {
+  .flatpickr-calendar {
+    padding: $space_xs;
+    width: 323.88px
+  }
+  .dayContainer {
+    width: 315.88px
+  }
+  .flatpickr-months {
+    margin-left: -$space_xs;
+    margin-top: -$space_xs;
+    width: 323.88px;
+  }
+}
+@media (max-width: 499px) {
+  .numInput.cur-year {
+    padding-left: $space_sm;
+  }
+  .flatpickr-prev-month {
+    left: $space_xs * 27.5 !important;
+  }
+}
+// Firefox Header Adjustments
+@supports (-moz-appearance:none) { 
+  select.flatpickr-monthDropdown-months {
+      width: 97px !important;
+      margin-left: $space_xs + 3;
+  }
+  select.numInput {
+    padding-left: $space_sm + 1.5 !important;
+    margin-left: $space_xs !important;
+  }
+}
+// Direct Overrides
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  cursor: not-allowed;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -49,7 +49,7 @@
     display: flex;
     flex-shrink: 1;
     flex-wrap: nowrap;
-    overflow-x: scroll;
+    overflow-x: auto;
     padding-right: 80px;
     padding-top: $space_md;
     padding-bottom: $space_md;

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

@@ -25,6 +25,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -28,6 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -15,6 +15,7 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
+    :example_date_picker_field1
 
 
     def self.model_name
@@ -51,6 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
+  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -15,6 +15,7 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
+    :example_date_picker_field2
 
 
     def self.model_name
@@ -51,6 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -18,6 +18,7 @@ module Playbook
         prepend(SelectField)
         prepend(CollectionSelectField)
         prepend(CheckboxField)
+        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module DatePickerField
+        def date_picker(name, props: {})
+          prefix = @object_name
+          html_attribute_name = "#{prefix}[#{name}]"
+          html_id = "#{prefix}_#{name}"
+
+          props[:name] = html_attribute_name
+          props[:picker_id] = html_id
+
+          @template.pb_rails("date_picker", props: props)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -13,8 +13,8 @@ module Playbook
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :variant, type: Playbook::Props::Enum,
-                         values: %w[default tracker],
-                         default: "default"
+                     values: %w[default tracker],
+                     default: "default"
       def classname
         generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class)
       end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -14,7 +14,6 @@ module Playbook
       def classname
         generate_classname("pb_progress_step_item", status)
       end
-
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table.rb

@@ -33,9 +33,9 @@ module Playbook
 
     private
 
-      def dark_class	
-        dark ? "table-dark" : nil	
-      end	
+      def dark_class
+        dark ? "table-dark" : nil
+      end
 
       def data_table_class
         data_table ? "data_table" : nil

data/app/pb_kits/playbook/pb_text_input/_text_input.html.erb

@@ -14,6 +14,7 @@
       <% end %>
     <% else %>
       <%= tag(:input,
+          autocomplete: object.autocomplete ? nil : "off",
           class: "text_input",
           data: object.validation_data,
           disabled: object.disabled,

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -13,6 +13,7 @@ type TextInputProps = {
   aria?: object,
   className: string,
   data?: object,
+  dark?: boolean,
   disabled?: boolean,
   error?: string,
   id?: string,
@@ -26,23 +27,25 @@ type TextInputProps = {
   children: Node,
 }
 
-const TextInput = ({
-  aria = {},
-  className,
-  data = {},
-  disabled,
-  error,
-  id,
-  name,
-  label,
-  onChange = () => {},
-  placeholder,
-  required,
-  type = 'text',
-  value,
-  children = null,
-  ...props
-}: TextInputProps) => {
+const TextInput = (props: TextInputProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    dark = false,
+    disabled,
+    error,
+    id,
+    name,
+    label,
+    onChange = () => {},
+    placeholder,
+    required,
+    type = 'text',
+    value,
+    children = null,
+  } = props
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
@@ -60,6 +63,7 @@ const TextInput = ({
     >
       <Caption
           className="pb_text_input_kit_label"
+          dark={dark}
           text={label}
       />
       <div className="text_input_wrapper">

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_text_input/text_input"
 
+      prop :autocomplete, type: Playbook::Props::Boolean,
+                          default: true
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
       prop :error

data/app/pb_kits/playbook/vendor.js

@@ -5,6 +5,10 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+window.datePickerHelper = datePickerHelper
+
 // Lazy image loading
 import 'lazysizes'
 
@@ -19,3 +23,5 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
+
+import 'flatpickr'

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "6.4.2"
+  VERSION = "6.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.4.2
+  version: 6.5.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-04 00:00:00.000000000 Z
+date: 2020-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -707,6 +707,53 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
+- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
+- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_read_only.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
+- app/pb_kits/playbook/pb_date_picker/docs/_description.md
+- app/pb_kits/playbook/pb_date_picker/docs/example.yml
+- app/pb_kits/playbook/pb_date_picker/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -877,6 +924,7 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
 - app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
+- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb