playbook_ui 7.11.1 → 7.12.0

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

@@ -11,7 +11,6 @@ const FilterSingle = (props) => {
   ]
   return (
     <Filter
-        {...props}
         filters={{
           'Full Name': 'John Wick',
         }}
@@ -24,10 +23,12 @@ const FilterSingle = (props) => {
           manager_name: 'Manager\'s Name',
         }}
         sortValue={[{ name: 'popularity', dir: 'desc' }]}
+        {...props}
     >
       <TextInput
           label="Full Name"
           placeholder="Enter name"
+          {...props}
       />
 
       <Select
@@ -35,16 +36,20 @@ const FilterSingle = (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/_sort_only.jsx

@@ -3,7 +3,6 @@ import { Filter } from '../../'
 
 const SortOnly = (props) => (
   <Filter
-      {...props}
       sortOptions={{
         popularity: 'Popularity',
         // eslint-disable-next-line
@@ -12,6 +11,7 @@ const SortOnly = (props) => (
         manager_name: 'Manager\'s Name',
       }}
       sortValue={[{ name: 'popularity', dir: 'desc' }]}
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastClose = () => {
+const FixedConfirmationToastClose = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -19,6 +20,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -29,6 +31,7 @@ const FixedConfirmationToastClose = () => {
             closeable
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../..'
 
-const FixedConfirmationToastDark = () => {
+const FixedConfirmationToastDark = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -20,6 +21,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -31,6 +33,7 @@ const FixedConfirmationToastDark = () => {
             dark
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastDefault = () => {
+const FixedConfirmationToastDefault = (props) => {
   return (
     <div>
       <div>
@@ -9,6 +9,7 @@ const FixedConfirmationToastDefault = () => {
             closeable
             status="error"
             text="Error Message"
+            {...props}
         />
       </div>
 
@@ -18,6 +19,7 @@ const FixedConfirmationToastDefault = () => {
         <FixedConfirmationToast
             status="success"
             text="Items Successfully Moved"
+            {...props}
         />
       </div>
 
@@ -27,6 +29,7 @@ const FixedConfirmationToastDefault = () => {
         <FixedConfirmationToast
             status="neutral"
             text="Scan to Assign Selected Items"
+            {...props}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastMultiLine = () => {
+const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
           status="tip"
           text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { FixedConfirmationToast } from '../../'
 
-const FixedConfirmationToastMultiLineDark = () => {
+const FixedConfirmationToastMultiLineDark = (props) => {
   return (
     <div>
       <FixedConfirmationToast
           dark
           status="tip"
           text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../../'
 
-const FlexDefault = () => {
+const FlexDefault = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -31,11 +33,13 @@ const FlexDefault = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexHorizontal = () => {
+const FlexHorizontal = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={3}
             text="Row"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Left"
+            {...props}
         />
         <br />
         <Flex
             horizontal="left"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -38,11 +41,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
             horizontal="center"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -63,11 +68,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Right"
+            {...props}
         />
         <br />
         <Flex
             horizontal="right"
             orientation="row"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -88,16 +95,19 @@ const FlexHorizontal = () => {
         <Title
             size={3}
             text="Column"
+            {...props}
         />
         <br />
         <Title
             size={4}
             text="Left"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -118,11 +128,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Center"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="center"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -143,11 +155,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Right"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="right"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -168,11 +182,13 @@ const FlexHorizontal = () => {
         <Title
             size={4}
             text="Stretch"
+            {...props}
         />
         <br />
         <Flex
             orientation="column"
             vertical="stretch"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexInline = () => {
+const FlexInline = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             inline
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -32,12 +34,14 @@ const FlexInline = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             inline
             orientation="column"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexReverse = () => {
+const FlexReverse = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="Row"
+            {...props}
         />
         <br />
         <Flex
@@ -15,6 +16,7 @@ const FlexReverse = () => {
             horizontal="left"
             orientation="row"
             reverse
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -34,6 +36,7 @@ const FlexReverse = () => {
         <Title
             size={4}
             text="Column"
+            {...props}
         />
         <br />
         <Flex
@@ -41,6 +44,7 @@ const FlexReverse = () => {
             orientation="column"
             reverse
             vertical="left"
+            {...props}
         >
           <FlexItem>
             {'1'}

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx

@@ -1,18 +1,20 @@
 import React from 'react'
 import { Flex, FlexItem, Title } from  '../..'
 
-const FlexSpacing = () => {
+const FlexSpacing = (props) => {
   return (
     <>
       <div className="flex-doc-example">
         <Title
             size={4}
             text="None"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="none"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -33,11 +35,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Around"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="around"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -58,11 +62,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Between"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="between"
+            {...props}
         >
           <FlexItem>
             {'1'}
@@ -83,11 +89,13 @@ const FlexSpacing = () => {
         <Title
             size={4}
             text="Evenly"
+            {...props}
         />
         <br />
         <Flex
             className="bg_light"
             spacing="evenly"
+            {...props}
         >
           <FlexItem>
             {'1'}