playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha9

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_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -5,7 +5,7 @@ const DateTimeStackedDark = () => (
   <div>
     <DateTimeStacked
         dark
-        date={new Date}
+        date={new Date()}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -3,7 +3,7 @@ import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = () => (
   <div>
-    <DateTimeStacked date={new Date} />
+    <DateTimeStacked date={new Date()} />
   </div>
 )
 

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_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_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;

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb

@@ -1 +1,3 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("body", props: { dark: true }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import { Icon } from '../../'
+import { Body, Icon } from '../../'
 
 const IconDefaultDark = () => {
   return (
     <div>
-      <Icon
-          fixedWidth
-          icon="user"
-      />
+      <Body dark>
+        <Icon
+            fixedWidth
+            icon="user"
+        />
+      </Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_label_value/docs/example.yml

@@ -4,16 +4,10 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark
+
   
   
   react:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark
-

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

@@ -1,7 +1,3 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
 export { default as LabelValueDetails } from './_label_value_details.jsx'
 export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
-
-export { default as LabelValueDark } from './_label_value_dark.jsx'
-export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
-export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'

data/app/pb_kits/playbook/pb_legend/docs/example.yml

@@ -3,13 +3,9 @@ examples:
   rails:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text
+ 
   
   
   react:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text
-  

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

@@ -1,4 +1,2 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
-export { default as LegendDark } from './_legend_dark.jsx'
-export { default as LegendDarkPrefix } from './_legend_dark_prefix.jsx'

data/app/pb_kits/playbook/pb_list/docs/example.yml

@@ -7,11 +7,7 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding
+ 
   react:
   - list_default: Default
   - list_lg: Large
@@ -20,9 +16,3 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding
- 

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

@@ -1,13 +1,7 @@
 export { default as ListDefault } from './_list_default.jsx'
-export { default as ListDark } from './_list_dark.jsx'
 export { default as ListXpadding } from './_list_xpadding.jsx'
-export { default as ListDarkBorderless } from './_list_dark_borderless.jsx'
-export { default as ListDarkLg } from './_list_dark_lg.jsx'
-export { default as ListDarkXpadding } from './_list_dark_xpadding.jsx'
-export { default as ListDarkOrdered } from './_list_dark_ordered.jsx'
 export { default as ListLayoutRight } from './_list_layout_right.jsx'
 export { default as ListLayoutLeft } from './_list_layout_left.jsx'
 export { default as ListLg } from './_list_lg.jsx'
 export { default as ListOrdered } from './_list_ordered.jsx'
 export { default as ListBorderless } from './_list_borderless.jsx'
-

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -2,10 +2,8 @@ examples:
   
   rails:
   - loading_inline_light: Light
-  - loading_inline_dark: Dark
+
   
   
   react:
   - loading_inline_light: Default
-  - loading_inline_dark: Default
-  

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

@@ -1,2 +1 @@
 export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
-export { default as LoadingInlineDark } from './_loading_inline_dark.jsx'

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml

@@ -3,9 +3,8 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark
+
 
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark

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

@@ -1,3 +1,2 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
-export { default as MultipleUsersDark } from './_multiple_users_dark.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml

@@ -2,8 +2,7 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark
+
 
   react:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark