playbook_ui 7.11.1 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -5,29 +5,28 @@ const ContactDefault = (props) => {
   return (
     <div>
       <Contact
-          {...props}
           contactType="cell"
           contactValue="349-185-9988"
+          {...props}
       />
       <Contact
-          {...props}
           contactValue="5555555555"
+          {...props}
       />
       <Contact
-          {...props}
           contactType="email"
           contactValue="email@example.com"
+          {...props}
       />
       <Contact
-          {...props}
           contactType="work"
           contactValue="3245627482"
-
+          {...props}
       />
       <Contact
-          {...props}
           contactType="work-cell"
           contactValue="3245627482"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -5,27 +5,27 @@ const ContactDefault = (props) => {
   return (
     <div>
       <Contact
-          {...props}
           contactDetail="Cell"
           contactType="cell"
           contactValue="349-185-9988"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Home"
           contactValue="5555555555"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Work"
           contactType="work"
           contactValue="3245627482"
+          {...props}
       />
       <Contact
-          {...props}
           contactDetail="Work-Cell"
           contactType="work-cell"
           contactValue="3245627482"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx

@@ -5,26 +5,26 @@ const CurrencyAlignment = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           label="Left"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           align="center"
           amount="342"
           label="Center"
           size="sm"
           symbol="€"
+          {...props}
       />
       <Currency
-          {...props}
           align="right"
           amount="45"
           label="Right"
           size="sm"
           unit="/mo"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -4,12 +4,12 @@ import { Currency } from '../../'
 const CurrencyNoSymbol = (props) => {
   return (
     <Currency
-        {...props}
         amount="309"
         label="Sales"
         size="md"
         symbol=""
         unit="/week"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx

@@ -5,26 +5,26 @@ const CurrencySize = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           label="Small"
           marginBottom="md"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           amount="342"
           label="Medium"
           marginBottom="md"
           size="md"
           symbol="€"
+          {...props}
       />
       <Currency
-          {...props}
           amount="45"
           label="Large"
           size="lg"
           unit="/mo"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,29 +5,29 @@ const CurrencyVariants = (props) => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           emphasized={false}
           label="Emphasized False"
           marginBottom="md"
           size="sm"
+          {...props}
       />
       <Currency
-          {...props}
           amount="342"
           label="Light"
           marginBottom="md"
           size="sm"
           symbol="€"
           variant="light"
+          {...props}
       />
       <Currency
-          {...props}
           amount="45"
           label="Bold"
           size="sm"
           unit="/mo"
           variant="bold"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -5,32 +5,32 @@ const DashboardValueAlign = (props) => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -5,30 +5,30 @@ const DashboardValueDefault = (props) => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
+          {...props}
       />
 
       <br />
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}
+          {...props}
       />
     </div>
   )

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>
 )