playbook_ui 7.11.1 → 7.14.0

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableCardIcon } from '../../'
 
-const SelectableCardIconSingleSelect = () => {
+const SelectableCardIconSingleSelect = (props) => {
   const [selectedFormat, toggleFormat] = useState(null)
 
   return (
@@ -14,6 +14,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('car')}
           titleText="Car"
           value="car"
+          {...props}
       />
       <SelectableCardIcon
           checked={selectedFormat === 'bus'}
@@ -23,6 +24,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('bus')}
           titleText="Bus"
           value="bus"
+          {...props}
       />
       <SelectableCardIcon
           checked={selectedFormat === 'subway'}
@@ -32,6 +34,7 @@ const SelectableCardIconSingleSelect = () => {
           onChange={() => toggleFormat('subway')}
           titleText="Subway"
           value="subway"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableIcon } from '../../'
 
-const SelectableIconDefault = () => {
+const SelectableIconDefault = (props) => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
+          {...props}
       />
 
       <SelectableIcon
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
+          {...props}
       />
 
       <SelectableIcon
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { SelectableIcon } from '../../'
 
-const SelectableIconSingleSelect = () => {
+const SelectableIconSingleSelect = (props) => {
   const [ selectedFormat, toggleFormat ] = useState(null)
 
   return (
@@ -16,6 +16,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
+          {...props}
       />
 
       <SelectableIcon
@@ -27,6 +28,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
+          {...props}
       />
 
       <SelectableIcon
@@ -38,6 +40,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { SelectableList } from '../..'
 
-const SelectableListDefault = () => {
+const SelectableListDefault = (props) => {
   return (
     <div>
       <SelectableList variant="checkbox">
@@ -9,17 +9,20 @@ const SelectableListDefault = () => {
             label="Mild"
             name="checkbox-name-1"
             value="1"
+            {...props}
         />
         <SelectableList.Item
             checked
             label="Medium"
             name="checkbox-name-2"
             value="2"
+            {...props}
         />
         <SelectableList.Item
             label="Hot"
             name="checkbox-name-3"
             value="3"
+            {...props}
         />
       </SelectableList>
     </div>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { SelectableList } from '../..'
 
-const SelectableListDefault = () => {
+const SelectableListDefault = (props) => {
   return (
     <div>
       <SelectableList variant="radio">
@@ -9,17 +9,20 @@ const SelectableListDefault = () => {
             label="Small"
             name="radio"
             value="1"
+            {...props}
         />
         <SelectableList.Item
             defaultChecked
             label="Medium"
             name="radio"
             value="2"
+            {...props}
         />
         <SelectableList.Item
             label="Large"
             name="radio"
             value="3"
+            {...props}
         />
       </SelectableList>
     </div>

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Source } from '../../'
 
-const SourceDefault = () => (
+const SourceDefault = (props) => (
   <>
     <Source
         source="BJ's Johnston-208"
         type="retail"
+        {...props}
     />
 
     <br />
@@ -14,6 +15,7 @@ const SourceDefault = () => (
     <Source
         source="Referral-phrg"
         type="inbound"
+        {...props}
     />
 
     <br />
@@ -30,6 +32,7 @@ const SourceDefault = () => (
                 userId: '48582',
               }
             }
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_source/docs/_source_noicon.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Source } from '../../'
 
-const SourceNoicon = () => (
+const SourceNoicon = (props) => (
   <>
     <Source
         hideIcon
         source="BJ's Johnston-208"
         type="retail"
+        {...props}
     />
 
     <br />
@@ -16,6 +17,7 @@ const SourceNoicon = () => (
         hideIcon
         source="Referral-phrg"
         type="inbound"
+        {...props}
     />
 
     <br />
@@ -33,6 +35,7 @@ const SourceNoicon = () => (
                 userId: '48582',
                 }
               }
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_source/docs/_source_types.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Source } from '../../'
 
-const SourceTypes = () => (
+const SourceTypes = (props) => (
   <>
     <Source
         source="BJ's Johnston-208"
         type="retail"
+        {...props}
     />
 
     <br />
@@ -14,6 +15,7 @@ const SourceTypes = () => (
     <Source
         source="Referral-phrg"
         type="inbound"
+        {...props}
     />
 
     <br />
@@ -22,6 +24,7 @@ const SourceTypes = () => (
     <Source
         source="B.B.B. Outbound"
         type="outbound"
+        {...props}
     />
 
     <br />
@@ -30,6 +33,7 @@ const SourceTypes = () => (
     <Source
         source="Contractor.com"
         type="prospecting"
+        {...props}
     />
 
     <br />
@@ -38,6 +42,7 @@ const SourceTypes = () => (
     <Source
         source="Beards, Beers and Brats"
         type="events"
+        {...props}
     />
 
     <br />
@@ -46,6 +51,7 @@ const SourceTypes = () => (
     <Source
         source="BJ's Johnston-208"
         type="referral"
+        {...props}
     />
 
     <br />
@@ -62,6 +68,7 @@ const SourceTypes = () => (
                 userId: '48582',
               }
             }
+        {...props}
     />
 
     <br />
@@ -78,6 +85,7 @@ const SourceTypes = () => (
                 userId: '48582',
               }
             }
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StarRating } from '../../'
 
-const StarRatingDefault = () => (
+const StarRatingDefault = (props) => (
   <>
     <StarRating />
 
@@ -9,18 +9,21 @@ const StarRatingDefault = () => (
 
     <StarRating
         rating={3}
+        {...props}
     />
 
     <br />
 
     <StarRating
         rating={1.5}
+        {...props}
     />
 
     <br />
 
     <StarRating
         rating={5}
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { StarRating } from '../../'
 
-const StarRatingHide = () => (
+const StarRatingHide = (props) => (
 
   <StarRating
       hideRating
       rating={3.5}
+      {...props}
   />
 
 )

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { StatChange } from '../../'
 
-const StatChangeDefault = () => {
+const StatChangeDefault = (props) => {
   return (
     <div>
       <StatChange
           change="increase"
           value="28.4"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const StatChangeDefault = () => {
       <StatChange
           change="decrease"
           value={6.1}
+          {...props}
       />
 
       <br />
@@ -21,6 +23,7 @@ const StatChangeDefault = () => {
       <StatChange
           change="neutral"
           value={102}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { StatChange } from '../../'
 
-const StatChangeUnit = () => {
+const StatChangeUnit = (props) => {
   return (
     <div>
       <StatChange
           icon="chart-line"
           value="28.4"
+          {...props}
       />
 
       <br />
@@ -14,12 +15,14 @@ const StatChangeUnit = () => {
       <StatChange
           icon="chart-line-down"
           value={6.1}
+          {...props}
       />
 
       <br />
 
       <StatChange
           value={102}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { StatChange } from '../../'
 
-const StatChangeUnitTwo = () => {
+const StatChangeUnitTwo = (props) => {
   return (
     <div>
       <StatChange
           change="increase"
           icon="level-up"
           value="28.4"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const StatChangeUnitTwo = () => {
           change="decrease"
           icon="level-down"
           value={6.1}
+          {...props}
       />
 
       <br />
@@ -23,6 +25,7 @@ const StatChangeUnitTwo = () => {
       <StatChange
           change="neutral"
           value={102}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -1,13 +1,19 @@
 import React from 'react'
 import { StatValue } from '../../'
 
-const StatValueDefault = () => {
+const StatValueDefault = (props) => {
   return (
     <>
-      <StatValue value={1048} />
+      <StatValue
+          value={1048}
+          {...props}
+      />
       <br />
       <br />
-      <StatValue value={0} />
+      <StatValue
+          value={0}
+          {...props}
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import StatValue from '../_stat_value.jsx'
 
-const StatValueUnit = () => {
+const StatValueUnit = (props) => {
   return (
     <StatValue
         unit="appt"
         value="5,294"
+        {...props}
     />
   )
 }