From f3ed7c0a034e7967b3ff046bf5e4af7149949e3a Mon Sep 17 00:00:00 2001 From: Jelena Durovic <82796889+JelenaD1@users.noreply.github.com> Date: Thu, 27 Jan 2022 16:52:48 -0500 Subject: [PATCH] [PLAY-48]Configure the Date Picker Kit to be able to select month only as an option (#1735) * React code done * Change prop name/added rails code * hallelujah * clean code * Fixed styles * fixed hover color --- .../playbook/pb_date_picker/_date_picker.jsx | 3 + .../playbook/pb_date_picker/_date_picker.scss | 1 + .../playbook/pb_date_picker/date_picker.rb | 3 + .../pb_date_picker/date_picker_helper.js | 11 +- .../docs/_date_picker_month_and_year.html.erb | 5 + .../docs/_date_picker_month_and_year.jsx | 18 +++ .../docs/_date_picker_month_and_year.md | 1 + .../playbook/pb_date_picker/docs/example.yml | 2 + .../playbook/pb_date_picker/docs/index.js | 1 + .../sass_partials/_month_and_year_styles.scss | 127 ++++++++++++++++++ .../pb_kits/playbook/kits/date_picker_spec.rb | 1 + 11 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md create mode 100644 playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx b/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx index f7c97ccad7..f66556df66 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +++ b/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, }) }, []) diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss b/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss index 781bcaa49f..1751f0e14d 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +++ b/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 { diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb index cc5c3658ee..32016b6656 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker.rb +++ b/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 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js b/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js index b683c68f76..edc39aaa2c 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +++ b/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: '', static: true, }) @@ -153,8 +160,10 @@ const datePickerHelper = (config) => { } // Adding dropdown icons to year and month selects - picker.monthElements[0].insertAdjacentHTML('afterend', '') dropdown.insertAdjacentHTML('afterend', '') + if (picker.monthElements[0].parentElement) { + return picker.monthElements[0].insertAdjacentHTML('afterend', '') + } // Remove readonly attribute for validation and or text input if (allowInput){ diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb new file mode 100644 index 0000000000..9eba0e8c10 --- /dev/null +++ b/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" +}) %> diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx new file mode 100644 index 0000000000..6db1db328b --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +export default DatePickerMonthAndYear diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md b/playbook/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md new file mode 100644 index 0000000000..4e98d1a3e2 --- /dev/null +++ b/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. diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml b/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml index ad6e2543fe..a3a7308be9 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/docs/example.yml +++ b/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 diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js b/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js index cdf0246015..63490b9d01 100644 --- a/playbook/app/pb_kits/playbook/pb_date_picker/docs/index.js +++ b/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' diff --git a/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss b/playbook/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss new file mode 100644 index 0000000000..34f6d0c4e5 --- /dev/null +++ b/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; +} diff --git a/playbook/spec/pb_kits/playbook/kits/date_picker_spec.rb b/playbook/spec/pb_kits/playbook/kits/date_picker_spec.rb index de1c974a88..5786d7b482 100644 --- a/playbook/spec/pb_kits/playbook/kits/date_picker_spec.rb +++ b/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]) }