[PLAY-48]Configure the Date Picker Kit to be able to select month onl…

…y as an option (#1735)

* React code done

* Change prop name/added rails code

* hallelujah

* clean code

* Fixed styles

* fixed hover color

playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -40,6 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
+  plugins?: Boolean,
   type?: String,
   yearRange?: Array,
 }
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
+    plugins = false,
     yearRange = [ 1900, 2100 ],
   } = props
 
@@ -100,6 +102,7 @@ const DatePicker = (props: DatePickerProps) => {
       mode: mode,
       onChange: onChange,
       pickerId: pickerId,
+      plugins: plugins,
       yearRange: yearRange,
     })
   }, [])

playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -3,6 +3,7 @@
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
 @import "./sass_partials/inline_styles";
+@import "./sass_partials/month_and_year_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {

playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -41,6 +41,8 @@ class DatePicker < Playbook::KitBase
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
+      prop :plugins, type: Playbook::Props::Boolean,
+                     default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -64,6 +66,7 @@ def date_picker_config
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
+          plugins: plugins,
           required: required,
           yearRange: year_range,
         }.to_json.html_safe

playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -1,4 +1,5 @@
 import flatpickr from 'flatpickr'
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 
 const datePickerHelper = (config) => {
   const {
@@ -13,6 +14,7 @@ const datePickerHelper = (config) => {
     mode,
     onChange = () => {},
     pickerId,
+    plugins,
     required,
     yearRange,
   } = config
@@ -50,6 +52,10 @@ const datePickerHelper = (config) => {
     }
   }
 
+  const setMonthAndYearPlugin = () => (
+    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
+  )
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -97,6 +103,7 @@ const datePickerHelper = (config) => {
     onYearChange: [() => {
       yearChangeHook()
     }],
+    plugins: setMonthAndYearPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -153,8 +160,10 @@ const datePickerHelper = (config) => {
   }
 
   // Adding dropdown icons to year and month selects
-  picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  if (picker.monthElements[0].parentElement) {
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  plugins: true,
+  picker_id: "disabled_date"
+}) %>

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMonthAndYear = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="disabled-date"
+          plugins
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerMonthAndYear

playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md

@@ -0,0 +1 @@
+By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.

playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -16,6 +16,7 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
 
 
   react:
@@ -34,3 +35,4 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only

playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -13,3 +13,4 @@ export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
+export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'

playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss

@@ -0,0 +1,127 @@
+@import "../../tokens/colors";
+
+
+.numInput {
+  border-left: none !important;
+}
+
+// Manual Import
+.flatpickr-monthSelect-months {
+  margin: 10px 1px 3px 1px;
+  flex-wrap: wrap;
+}
+
+.flatpickr-monthSelect-month {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: $text_lt_default;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 400;
+  margin: 0.5px;
+  justify-content: center;
+  padding: 10px;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  text-align: center;
+  width: 33%;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled {
+	color: #eee;
+}
+
+.flatpickr-monthSelect-month.flatpickr-disabled:hover,
+.flatpickr-monthSelect-month.flatpickr-disabled:focus {
+	cursor: not-allowed;
+	background: none !important;
+}
+
+.flatpickr-monthSelect-theme-dark {
+  background: #3f4458;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
+  color: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
+.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
+  color: #fff;
+  fill: #fff;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.flatpickr-monthSelect-month.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-month.inRange.today,
+.flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-month:focus {
+  background: $active_light;
+  font-weight: $bold;
+  color: $text_lt_default;
+  cursor: pointer;
+  outline: 0;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
+  background: #646c8c;
+  border-color: #646c8c;
+}
+
+.flatpickr-monthSelect-month.today:hover,
+.flatpickr-monthSelect-month.today:focus {
+  background: #959ea9;
+  border-color: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-month.endRange {
+  background-color: $primary;
+  font-weight: $bold;
+  box-shadow: none;
+  color: #fff;
+  border-color: $primary;
+}
+
+.flatpickr-monthSelect-month.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-monthSelect-month.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-monthSelect-month.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-monthSelect-month.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
+.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}

playbook/spec/pb_kits/playbook/kits/date_picker_spec.rb

@@ -25,6 +25,7 @@
   it { is_expected.to define_prop(:mode).of_type(Playbook::Props::String).with_default("single") }
   it { is_expected.to define_prop(:picker_id).of_type(Playbook::Props::String).that_is_required }
   it { is_expected.to define_prop(:placeholder).of_type(Playbook::Props::String) }
+  it { is_expected.to define_prop(:plugins).of_type(Playbook::Props::Boolean).with_default(false) }
   it { is_expected.to define_boolean_prop(:required).with_default(false) }
   it { is_expected.to define_prop(:year_range).of_type(Playbook::Props::Array).with_default([1900, 2100]) }