playbook_ui 7.10.0 → 7.12.1

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerHideIcon = () => (
+const DatePickerHideIcon = (props) => (
   <div>
     <DatePicker
         hideIcon
         pickerId="date-picker-hide-icon"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerHooks = () => {
+const DatePickerHooks = (props) => {
   // Define hooks
   const changeHook = () => {
     alert('date changed')
@@ -25,10 +25,12 @@ const DatePickerHooks = () => {
       <DatePicker
           label="onChange"
           pickerId="date-picker-hooks-onchange"
+          {...props}
       />
       <DatePicker
           label="onOpen"
           pickerId="date-picker-hooks-onopen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerInput = () => (
+const DatePickerInput = (props) => (
   <div>
     <DatePicker
         inputAria={{ label: 'input-field' }}
@@ -9,22 +9,26 @@ const DatePickerInput = () => (
         label="Aria, Name, and Data Attributes"
         name="date-field"
         pickerId="date-picker-input1"
+        {...props}
     />
     <DatePicker
         label="Custom Placeholder"
         pickerId="date-picker-input2"
         placeholder="custom-placeholder"
+        {...props}
     />
     <DatePicker
         label="Blank Placeholder"
         pickerId="date-picker-input3"
         placeholder=""
+        {...props}
     />
     <DatePicker
         disableInput
         label="Disable Input"
         pickerId="date-picker-input4"
         placeholder="Disabled Input"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerLabel = () => (
+const DatePickerLabel = (props) => (
   <div>
     <DatePicker
         label="Your Label Here"
         pickerId="date-picker-label"
+        {...props}
     />
     <DatePicker
         hideLabel
         pickerId="date-picker-hide-label"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("date_picker", props: {
   label: "Dynamic dates",
-  max_date: (Date.today + 3).httpdate,
-  min_date: (Date.today - 3).httpdate,
+  max_date: (DateTime.current + 1.day).utc.iso8601,
+  min_date: (DateTime.current - 1.day).utc.iso8601,
   picker_id: "date-picker-min-max1"
 }) %>
 

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerMinMax = () => (
+const DatePickerMinMax = (props) => (
   <div>
     <DatePicker
         label="Dynamic dates using flatpickr increment function"
         maxDate={new Date().fp_incr(3)}
         minDate={new Date().fp_incr(-3)}
         pickerId="date-picker-min-max1"
+        {...props}
     />
     <DatePicker
         format="m/d/Y"
@@ -15,6 +16,7 @@ const DatePickerMinMax = () => (
         maxDate="10/20/2020"
         minDate="10/10/2020"
         pickerId="date-picker-min-max2"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { DatePicker, LabelValue } from '../..'
 
-const DatePickerOnChange = () => {
+const DatePickerOnChange = (props) => {
   const today = new Date()
   const [dateString, setDateString] = useState(today.toLocaleDateString())
   const [dateObj, setDateObj] = useState([today])
@@ -18,15 +18,18 @@ const DatePickerOnChange = () => {
           marginBottom="lg"
           onChange={changeHandler}
           pickerId="date-picker-onchange"
+          {...props}
       />
       <LabelValue
           label="Date Object"
           marginBottom="lg"
           value={dateObj[0] ? dateObj[0].toString() : ''}
+          {...props}
       />
       <LabelValue
           label="Date String"
           value={dateString}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerRange = () => (
+const DatePickerRange = (props) => (
   <div>
     <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(6)]}
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
         mode="range"
         pickerId="date-picker-range"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerYearRange = () => (
+const DatePickerYearRange = (props) => (
   <div>
     <DatePicker
         defaultDate="05/05/2015"
@@ -9,6 +9,7 @@ const DatePickerYearRange = () => (
         minDate="01/01/2015"
         pickerId="date-picker-year-range"
         yearRange={[2015, 2018]}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -1,7 +1,9 @@
-Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly.  This is done with the following code.
+Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below).  This is done with the following code.
 
 `const fpInstance = document.querySelector('#pickerId')._flatpickr`
 
 `pickerId` is a prop passed to the date picker kit.  Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
 
-To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
+To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
+
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.

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

@@ -11,8 +11,10 @@ examples:
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
   - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_anti_patterns: Anti-Patterns
   
   
   react:
@@ -27,6 +29,6 @@ examples:
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
   - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
-  

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

@@ -10,4 +10,5 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 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'

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -5,52 +5,52 @@ const DateRangeInlineDefault = (props) => {
   return (
     <div>
       <DateRangeInline
-          {...props}
           endDate={new Date('20 Mar 2015')}
           size="xs"
           startDate={new Date('18 Jun 2013')}
+          {...props}
       />
       <DateRangeInline
-          {...props}
           endDate={new Date('20 Mar 2015')}
           size="sm"
           startDate={new Date('18 Jun 2013')}
+          {...props}
       />
       <br />
       <br />
       <DateRangeInline
-          {...props}
           align="center"
           endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
           icon
           size="xs"
           startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+          {...props}
       />
       <DateRangeInline
-          {...props}
           align="center"
           endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
           icon
           size="sm"
           startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+          {...props}
       />
       <br />
       <br />
       <DateRangeInline
-          {...props}
           align="right"
           endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
           icon
           size="xs"
           startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+          {...props}
       />
       <DateRangeInline
-          {...props}
           align="right"
           endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
           icon
           size="sm"
           startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { DateRangeStacked } from '../../'
 
-const DateRangeStackedDark = () => (
+const DateRangeStackedDark = (props) => (
   <div>
     <DateRangeStacked
         dark
         endDate={new Date('20 Mar 2020')}
         startDate={new Date('18 Jun 2019')}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { DateRangeStacked } from '../../'
 
-const DateRangeStackedDefault = () => (
+const DateRangeStackedDefault = (props) => (
   <div>
     <DateRangeStacked
         endDate={new Date('20 Mar 2020')}
         startDate={new Date('18 Jun 2019')}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedAlign = () => {
+const DateStackedAlign = (props) => {
   return (
     <div>
       <DateStacked
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const DateStackedAlign = () => {
       <DateStacked
           align="center"
           date={new Date()}
+          {...props}
       />
 
       <br />
@@ -21,6 +23,7 @@ const DateStackedAlign = () => {
       <DateStacked
           align="right"
           date={new Date()}
+          {...props}
       />
 
       <br />
@@ -28,6 +31,7 @@ const DateStackedAlign = () => {
       <DateStacked
           date={new Date()}
           size="md"
+          {...props}
       />
 
       <br />
@@ -36,6 +40,7 @@ const DateStackedAlign = () => {
           align="center"
           date={new Date()}
           size="md"
+          {...props}
       />
 
       <br />
@@ -44,6 +49,7 @@ const DateStackedAlign = () => {
           align="right"
           date={new Date()}
           size="md"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedDark = () => {
+const DateStackedDark = (props) => {
   return (
     <div>
       <DateStacked
           dark
           date={new Date().toLocaleString('en-US', { timeZone: 'Pacific/Tongatapu' })}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const DateStackedDark = () => {
           dark
           date={new Date().toLocaleString('en-US', { timeZone: 'America/New_York' })}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedDefault = () => {
+const DateStackedDefault = (props) => {
   return (
     <div>
 
@@ -9,6 +9,7 @@ const DateStackedDefault = () => {
           align="left"
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const DateStackedDefault = () => {
       <DateStacked
           date={new Date()}
           size="md"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedNotCurrentYear = () => {
+const DateStackedNotCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
           date={new Date('20 Mar 2018')}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const DateStackedNotCurrentYear = () => {
       <DateStacked
           date={new Date('20 Mar 2018')}
           size="md"
+          {...props}
       />
 
     </div>