playbook_ui 7.11.1 → 7.12.0

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

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerDefault = () => (
+const DatePickerDefault = (props) => (
   <div>
     <DatePicker
         pickerId="date-picker-default"
+        {...props}
     />
   </div>
 )

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

@@ -1,27 +1,31 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerDefaultDate = () => (
+const DatePickerDefaultDate = (props) => (
   <div>
     <DatePicker
         defaultDate="07/31/2020"
         label="Default Date String"
         pickerId="date-picker-default-date1"
+        {...props}
     />
     <DatePicker
-        defaultDate={new Date()}
+        defaultDate={new Date().fp_incr(1)}
         label="Default Date Dynamic"
         pickerId="date-picker-default-date2"
+        {...props}
     />
     <DatePicker
         defaultDate={[new Date(), new Date().fp_incr(7)]}
         label="Default Date Range"
         mode="range"
         pickerId="date-picker-default-date3"
+        {...props}
     />
     <DatePicker
         label="Default Behavior"
         pickerId="date-picker-default-date4"
+        {...props}
     />
   </div>
 )

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

@@ -1,17 +1,19 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerDisabled = () => (
+const DatePickerDisabled = (props) => (
   <div>
     <DatePicker
         disableDate={[new Date().fp_incr(1)]}
         label="Disable Single Date"
         pickerId="single-disabled-date"
+        {...props}
     />
     <DatePicker
         disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
         label="Disable Multiple Dates"
         pickerId="multiple-disabled-dates"
+        {...props}
     />
     <DatePicker
         disableRange={[
@@ -22,6 +24,7 @@ const DatePickerDisabled = () => (
         ]}
         label="Disable Single Range"
         pickerId="single-date-range"
+        {...props}
     />
     <DatePicker
         disableRange={[
@@ -36,11 +39,13 @@ const DatePickerDisabled = () => (
         ]}
         label="Disable Multiple Ranges"
         pickerId="multiple-date-ranges"
+        {...props}
     />
     <DatePicker
         disableWeekdays={['Sunday', 'Saturday']}
         label="Disable Specific Weekdays"
         pickerId="disabled-weekdays"
+        {...props}
     />
   </div>
 )

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerError = () => (
+const DatePickerError = (props) => (
   <div>
     <DatePicker
         error="Invalid date. Please pick a valid date."
         pickerId="date-picker-error"
+        {...props}
     />
   </div>
 )

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

@@ -1,27 +1,31 @@
 import React from 'react'
 import { DatePicker } from '../../'
 
-const DatePickerFormat = () => (
+const DatePickerFormat = (props) => (
   <div>
     <DatePicker
         defaultDate={new Date()}
         format="m-d-Y"
         pickerId="date-picker-format1"
+        {...props}
     />
     <DatePicker
         defaultDate={new Date()}
         format="m/d/y"
         pickerId="date-picker-format2"
+        {...props}
     />
     <DatePicker
         defaultDate={new Date()}
         format="n-j-y"
         pickerId="date-picker-format3"
+        {...props}
     />
     <DatePicker
         defaultDate={new Date()}
         format="Y-d-m"
         pickerId="date-picker-format4"
+        {...props}
     />
   </div>
 )

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.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.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(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_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>