playbook_ui 7.0.0.pre.alpha9 → 7.0.0.pre.alpha10

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.scss

@@ -13,17 +13,22 @@
     margin-bottom: $space_sm;
     display: block;
 
-    input::placeholder {
+    input::placeholder,
+    .text_input .placeholder {
       @include pb_body_light;
     }
 
-    input {
+    input,
+    .text_input {
       @include pb_textarea_light;
       @include pb_title_4;
       overflow: hidden;
     }
 
-    input:focus, input:-webkit-autofill:focus {
+    input:focus,
+    .text_input:focus,
+    input:-webkit-autofill:focus,
+    .text_input:-webkit-autofill:focus {
       @include pb_textarea_focus;
       -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
       transition: background-color 5000s ease-in-out 0s;
@@ -34,18 +39,22 @@
     .text_input_wrapper {
       margin-bottom: 1rem;
 
-      input::placeholder {
+      input::placeholder,
+      .text_input .placeholder {
         @include pb_body_light_dark;
       }
 
-      input {
+      input, .text_input {
         @include pb_textarea_dark;
         @include pb_title_4;
         @include pb_title_dark;
         overflow: hidden;
       }
 
-      input:focus, input:-webkit-autofill:focus {
+      input:focus,
+      .text_input:focus,
+      input:-webkit-autofill:focus,
+      .text_input:-webkit-autofill:focus {
         @include pb_textarea_focus_dark;
         -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
         transition: background-color 5000s ease-in-out 0s;
@@ -54,7 +63,7 @@
 
     &.error {
       .text_input_wrapper {
-        input {
+        input, .text_input {
           border-color: $error_dark;
         }
       }
@@ -66,7 +75,7 @@
       [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
-      input {
+      input, .text_input {
         border-color: $error;
       }
     }

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/pb_time/_time.html.erb

@@ -2,32 +2,38 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <% if object.size == "lg" %>
-    <%= pb_rails("title", props: { tag: "span", text: object.format_time_string, size: 3 }) %>
-    <%= content_tag(:span) do %>
+    <%
+      # convert deprecated prop values
+      size = object.size
+      size = "sm" if object.size == "xs"
+      size = "md" if object.size == "lg"
+    %>
+  <% if size == "md" %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <% if object.show_timezone %>
       <%= content_tag(:span, class: "pb_time_timezone") do %>
         <%= object.pb_date_time.to_timezone.upcase %>
       <% end %>
     <% end %>
-  <% elsif object.size == "sm" %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
-      <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
-      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
-          <% end %>
-        <% end %>
+  <% else %>
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-  <% else %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
         <%= content_tag(:span) do %>
           <%= object.format_time_string %>
-          <%= content_tag(:span, class: "pb_time_timezone") do %>
-            <%= object.pb_date_time.to_timezone.upcase %>
+          <% if object.show_timezone %>
+            <%= content_tag(:span, class: "pb_time_timezone") do %>
+              <%= object.pb_date_time.to_timezone.upcase %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>