playbook_ui 7.11.1 → 7.14.0

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>

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>

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

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

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

@@ -1,17 +1,19 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedSizes = () => {
+const DateStackedSizes = (props) => {
   return (
     <div>
       <DateStacked
           date={new Date()}
           size="sm"
+          {...props}
       />
       <br />
       <DateStacked
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { DateTimeStacked } from '../../'
 
-const DateTimeStackedDark = () => (
+const DateTimeStackedDark = (props) => (
   <div>
     <DateTimeStacked
         dark
         date={new Date()}
+        {...props}
     />
   </div>
 )

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

@@ -1,9 +1,12 @@
 import React from 'react'
 import { DateTimeStacked } from '../../'
 
-const DateTimeStackedDefault = () => (
+const DateTimeStackedDefault = (props) => (
   <div>
-    <DateTimeStacked date={new Date()} />
+    <DateTimeStacked
+        date={new Date()}
+        {...props}
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import { DateYearStacked } from '../../'
 
-const DateYearStackedDark = () => {
+const DateYearStackedDark = (props) => {
   return (
     <div>
       <DateYearStacked
           dark
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="center"
           dark
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="right"
           dark
           date={new Date()}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { DateYearStacked } from '../../'
 
-const DateYearStackedDefault = () => {
+const DateYearStackedDefault = (props) => {
   return (
     <div>
       <DateYearStacked date={new Date()} />
       <DateYearStacked
           align="center"
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="right"
           date={new Date()}
+          {...props}
       />
     </div>
   )