playbook_ui 7.0.0.pre.alpha7 → 7.0.0.pre.alpha12

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_date_range_stacked/_date_range_stacked.jsx

@@ -18,7 +18,11 @@ type DateRangeStackedProps = {
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_range_stacked'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
-    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -20,7 +20,11 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_year_stacked', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
+        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
         {...getRootProps()}
     >
       <Card>

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_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]
 

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        className,
-        globalProps(props)
+        globalProps(props),
+        className
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

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

@@ -24,7 +24,16 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= 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.check_box :example_checkbox,
+    data: { field1: "value1", field2: "value2" },
+    props: { text: "Example Checkbox", label: true },
+    checked_value: "yes",
+    unchecked_value: "no",
+    id: "checkbox-id",
+    name: "checkbox-name",
+    class: "checkbox-class" 
+  %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank", label: true } %>
 
   <%= 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, label: "hello-label" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,12 +14,24 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
+    :example_checkbox_field,
+    :example_checkbox_field_2,
+    :example_date_picker_field_1,
+    :example_date_picker_field_3
+
+    # for local testing only
+    # will be removed before merging
+    def initialize
+      # @example_number_field = 123
+      @example_date_picker_field_1 = "10/02/1993"
+      @example_date_picker_field_3 = Date.today.httpdate
+    end
 
 
     def self.model_name
       ActiveModel::Name.new(self, nil, "ExampleFormModel")
     end
+
   end
 %>
 
@@ -40,6 +52,7 @@
 
 
 <%= pb_rails("form", props: { form_system: "simple_form", form_system_options: [example_form_model.new, url: "", method: :get] }) do |form| %>
+
   <%= form.input :example_text_field, as: :string %>
   <%= form.input :example_phone_field, as: :tel %>
   <%= form.input :example_email_field, as: :email %>
@@ -51,6 +64,9 @@
   <%= 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.check_box :example_checkbox_field_2, props: { text: "Example Checkbox", label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field_3, props: { default_date: 'blank', label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,7 +14,8 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
+    :example_checkbox_field,
+    :example_date_picker_field_2
 
 
     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_field_2, 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/checkbox_field.rb

@@ -4,13 +4,18 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options, &block)
+        def check_box(name, props: {}, **options)
           label_text = @template.label(@object_name, name) if props[:label] == true
           options[:required] = true if props[:required]
           props[:margin_bottom] = "sm"
           props[:form_spacing] = true
 
-          input = super(name, **options, &block)
+          checked_value = options[:checked_value]
+          unchecked_value = options[:unchecked_value]
+          options.delete(:checked_value)
+          options.delete(:unchecked_value)
+
+          input = super(name, options, checked_value, unchecked_value)
 
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

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

@@ -0,0 +1,51 @@
+# 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
+          props[:label] = @template.label(@object_name, name) if props[:label] == true
+
+          puts @object.to_json
+
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+          puts input
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
+        end
+      end
+    end
+  end
+end
+
+# Create text input with rails form helper
+# pass options to text input
+
+# add hidden, implicit prop identifying it as form helper
+# inside dp erb, create conditional if check to leave out text_input kit
+
+# pass that input as a block to @template.pb_rails("date_picker")
+# let rails do the magic
+
+# null value handling

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -18,8 +18,9 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    [`pb_form_pill_kit_${'primary'}`, className],
-    globalProps(props)
+    `pb_form_pill_kit_${'primary'}`,
+    globalProps(props),
+    className
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -18,13 +18,16 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
-      &:hover {
-        background-color: rgba($color_value, $opacity-2);
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($color_value, $opacity-2);
+        }
       }
       #{$selector}_text {
         color: $color_value;