playbook_ui 7.11.1 → 7.12.0

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

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import DistributionBar from '../_distribution_bar.jsx'
 
-const DistributionBarDefault = () => {
+const DistributionBarDefault = (props) => {
   return (
     <React.Fragment>
       <div>
         <DistributionBar
             widths={[1, 2, 3, 4, 5, 3, 3, 7]}
+            {...props}
         />
       </div>
       <br />
@@ -15,6 +16,7 @@ const DistributionBarDefault = () => {
         <DistributionBar
             size="sm"
             widths={[1, 2, 3, 4, 5, 3, 3, 7]}
+            {...props}
         />
       </div>
     </React.Fragment>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -15,7 +15,7 @@ const AcceptedFilesList = ({ files }: FileList) => (
   </List>
 )
 
-const FileUploadAccept = () => {
+const FileUploadAccept = (props) => {
   const [filesToUpload, setFilesToUpload] = useState([])
 
   const handleOnFilesAccepted = (files) => {
@@ -24,10 +24,14 @@ const FileUploadAccept = () => {
 
   return (
     <div>
-      <AcceptedFilesList files={filesToUpload} />
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
       <FileUpload
           accept={['image/svg+xml']}
           onFilesAccepted={handleOnFilesAccepted}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -15,7 +15,7 @@ const AcceptedFilesList = ({ files }: FileList) => (
   </List>
 )
 
-const FileUploadDefault = () => {
+const FileUploadDefault = (props) => {
   const [filesToUpload, setFilesToUpload] = useState([])
 
   const handleOnFilesAccepted = (files) => {
@@ -24,9 +24,13 @@ const FileUploadDefault = () => {
 
   return (
     <div>
-      <AcceptedFilesList files={filesToUpload} />
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
       <FileUpload
           onFilesAccepted={handleOnFilesAccepted}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -11,7 +11,6 @@ const FilterDefault = (props) => {
   ]
   return (
     <Filter
-        {...props}
         double
         filters={{
           'Full Name': 'John Wick',
@@ -26,10 +25,12 @@ const FilterDefault = (props) => {
           manager_name: 'Manager\'s Name',
         }}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -37,16 +38,20 @@ const FilterDefault = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -12,7 +12,52 @@ const FilterNoBackground = (props) => {
   return (
     <>
       <Filter
+          background={false}
+          filters={{
+          'Full Name': 'John Wick',
+          'City': 'Las Vegas',
+        }}
+          results={3}
+          sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
+      >
+        <TextInput
+            label="Full Name"
+            placeholder="Enter name"
+            {...props}
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+            {...props}
+        />
+        <Flex
+            spacing="between"
+            {...props}
+        >
+          <Button
+              text="Apply"
+              {...props}
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+              {...props}
+          />
+        </Flex>
+      </Filter>
+
+      <Filter
           background={false}
           double
           filters={{
@@ -28,10 +73,12 @@ const FilterNoBackground = (props) => {
           manager_name: 'Manager\'s Name',
         }}
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          {...props}
       >
         <TextInput
             label="Full Name"
             placeholder="Enter name"
+            {...props}
         />
 
         <Select
@@ -39,16 +86,20 @@ const FilterNoBackground = (props) => {
             label="Territory"
             name="location"
             options={options}
+            {...props}
         />
         <Flex
             spacing="between"
+            {...props}
         >
           <Button
               text="Apply"
+              {...props}
           />
           <Button
               text="Clear"
               variant="secondary"
+              {...props}
           />
         </Flex>
       </Filter>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -11,16 +11,17 @@ const FilterNoSort = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{
           'Full Name': 'John Wick',
         }}
         results={546}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -28,16 +29,20 @@ const FilterNoSort = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -11,12 +11,13 @@ const FilterOnly = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{ 'Full Name': 'John Wick' }}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -24,16 +25,20 @@ const FilterOnly = (props) => {
           label="Territory"
           name="location"
           options={options}
+          {...props}
       />
       <Flex
           spacing="between"
+          {...props}
       >
         <Button
             text="Apply"
+            {...props}
         />
         <Button
             text="Clear"
             variant="secondary"
+            {...props}
         />
       </Flex>
     </Filter>