playbook_ui 7.11.1 → 7.12.0

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx

@@ -2,24 +2,28 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const SubtleNoHighlightNav = () => {
+const SubtleNoHighlightNav = (props) => {
   return (
     <Nav
         highlight={false}
         variant="subtle"
+        {...props}
     >
       <NavItem
           link="#"
           text="Dashboard"
+          {...props}
       />
       <NavItem
           active
           link="#"
           text="Statistics"
+          {...props}
       />
       <NavItem
           link="#"
           text="Pages"
+          {...props}
       />
     </Nav>
   )

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx

@@ -2,46 +2,53 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const SubtleWithIconsNav = () => {
+const SubtleWithIconsNav = (props) => {
   return (
     <Nav variant="subtle">
       <NavItem
           iconLeft="city"
           link="#"
           text="City"
+          {...props}
       />
       <NavItem
           iconLeft="user-friends"
           iconRight="angle-down"
           link="#"
           text="People"
+          {...props}
       />
       <NavItem
           active
           iconLeft="user-tie"
           link="#"
           text="Business"
+          {...props}
       />
       <NavItem
           iconLeft="theater-masks"
           link="#"
           text="Entertainment"
+          {...props}
       />
       <NavItem
           iconLeft="salad"
           iconRight="angle-down"
           link="#"
           text="Food"
+          {...props}
       />
       <NavItem
           iconLeft="sunglasses"
           link="#"
           text="Style"
+          {...props}
       />
       <NavItem
           iconLeft="child"
           link="#"
           text="Childern"
+          {...props}
       />
     </Nav>
   )

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx

@@ -2,38 +2,44 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const WithIconsNav = () => {
+const WithIconsNav = (props) => {
   return (
     <Nav
         link="#"
         title="Browse"
+        {...props}
     >
       <NavItem
           iconLeft="newspaper"
           text="News Feed"
+          {...props}
       />
       <NavItem
           active
           iconLeft="comments-alt"
           link="#"
           text="Messages"
+          {...props}
       />
       <NavItem
           iconLeft="calendar-check"
           iconRight="angle-down"
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           iconLeft="users"
           link="#"
           text="Friends"
+          {...props}
       />
       <NavItem
           iconLeft="users-class"
           iconRight="angle-down"
           link="#"
           text="Groups"
+          {...props}
       />
     </Nav>
   )

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx

@@ -2,38 +2,44 @@ import React from 'react'
 import { Nav } from '../../'
 import NavItem from '../_item.jsx'
 
-const WithImageNav = () => {
+const WithImageNav = (props) => {
   return (
     <Nav
         link="#"
         title="Browse"
+        {...props}
     >
       <NavItem
           imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
           text="News Feed"
+          {...props}
       />
       <NavItem
           active
           imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
           link="#"
           text="Messages"
+          {...props}
       />
       <NavItem
           iconRight="angle-down"
           imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
           link="#"
           text="Events"
+          {...props}
       />
       <NavItem
           imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
           link="#"
           text="Friends"
+          {...props}
       />
       <NavItem
           iconRight="angle-down"
           imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
           link="#"
           text="Groups"
+          {...props}
       />
     </Nav>
   )

data/app/pb_kits/playbook/pb_person/docs/_person_default.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Person } from '../../'
 
-const PersonDefault = () => {
+const PersonDefault = (props) => {
   return (
     <Person
         firstName="Kyle"
         lastName="Fadigan"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactDefault = () => {
+const PersonContactDefault = (props) => {
   return (
     <div>
       <PersonContact
@@ -20,6 +20,7 @@ const PersonContactDefault = () => {
         ]}
           firstName="Pauline"
           lastName="Smith"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactMultiple = () => {
+const PersonContactMultiple = (props) => {
   return (
     <div>
       <PersonContact
@@ -20,6 +20,7 @@ const PersonContactMultiple = () => {
         ]}
           firstName="Harvey"
           lastName="Walters"
+          {...props}
       />
       <PersonContact
           contacts={[
@@ -29,6 +30,7 @@ const PersonContactMultiple = () => {
         ]}
           firstName="Brenda"
           lastName="Walters"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactWithDetail = () => {
+const PersonContactWithDetail = (props) => {
   return (
     <div>
       <PersonContact
@@ -22,6 +22,7 @@ const PersonContactWithDetail = () => {
         ]}
           firstName="Harvey"
           lastName="Walters"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PersonContact } from '../../'
 
-const PersonContactWithWrongNumbers = () => {
+const PersonContactWithWrongNumbers = (props) => {
   return (
     <>
       <PersonContact
@@ -25,6 +25,7 @@ const PersonContactWithWrongNumbers = () => {
           firstName="Pauline"
           key="person-contact-1"
           lastName="Smith"
+          {...props}
       />
     </>
   )

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverClose = () => {
+const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
@@ -67,6 +67,7 @@ const PopoverClose = () => {
           reference={insidePopoverTrigger}
           shouldClosePopover={handleInsideShouldClosePopover}
           show={showInsidePopover}
+          {...props}
       >
         {'Click on me!'}
       </PbReactPopover>
@@ -78,6 +79,7 @@ const PopoverClose = () => {
           reference={outsidePopoverTrigger}
           shouldClosePopover={handleOutsideShouldClosePopover}
           show={showOutsidePopover}
+          {...props}
       >
         {'Click anywhere but me!'}
       </PbReactPopover>
@@ -89,6 +91,7 @@ const PopoverClose = () => {
           reference={anyPopoverTrigger}
           shouldClosePopover={handleAnyShouldClosePopover}
           show={showAnyPopover}
+          {...props}
       >
         {'Click anything!'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx

@@ -5,7 +5,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverCloseDark = () => {
+const PopoverCloseDark = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
@@ -70,6 +70,7 @@ const PopoverCloseDark = () => {
           reference={insidePopoverTrigger}
           shouldClosePopover={handleInsideShouldClosePopover}
           show={showInsidePopover}
+          {...props}
       >
         {'Click on me!'}
       </PbReactPopover>
@@ -81,6 +82,7 @@ const PopoverCloseDark = () => {
           reference={outsidePopoverTrigger}
           shouldClosePopover={handleOutsideShouldClosePopover}
           show={showOutsidePopover}
+          {...props}
       >
         {'Click anywhere but me!'}
       </PbReactPopover>
@@ -92,6 +94,7 @@ const PopoverCloseDark = () => {
           reference={anyPopoverTrigger}
           shouldClosePopover={handleAnyShouldClosePopover}
           show={showAnyPopover}
+          {...props}
       >
         {'Click anything!'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx

@@ -6,7 +6,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverDark = () => {
+const PopoverDark = (props) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
@@ -26,10 +26,12 @@ const PopoverDark = () => {
         dark
         orientation="row"
         vertical="center"
+        {...props}
     >
       <Body
           dark
           text="Click info for more details"
+          {...props}
       />
       &nbsp;
       <PbReactPopover
@@ -38,6 +40,7 @@ const PopoverDark = () => {
           placement="top"
           reference={popoverReference}
           show={showPopover}
+          {...props}
       >
         {'I\'m a popover. I can show content of any size.'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -6,7 +6,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverDefault = () => {
+const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
@@ -24,6 +24,7 @@ const PopoverDefault = () => {
     <Flex
         orientation="row"
         vertical="center"
+        {...props}
     >
       <Body text="Click info for more details" />
       &nbsp;
@@ -32,6 +33,7 @@ const PopoverDefault = () => {
           placement="top"
           reference={popoverReference}
           show={showPopover}
+          {...props}
       >
         {'I\'m a popover. I can show content of any size.'}
       </PbReactPopover>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -7,7 +7,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverWithButton = () => {
+const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
@@ -33,6 +33,7 @@ const PopoverWithButton = () => {
         placement="bottom"
         reference={popoverReference}
         show={showPopover}
+        {...props}
     >
       <List xpadding>
         <ListItem><a>{'Popularity'}</a></ListItem>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx

@@ -7,7 +7,7 @@ import {
   PbReactPopover,
 } from '../..'
 
-const PopoverWithButton = () => {
+const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
@@ -19,12 +19,14 @@ const PopoverWithButton = () => {
         dark
         onClick={handleTogglePopover}
         variant="primary"
+        {...props}
     >
       {'Filter By'}
       <Icon
           dark
           fixedWidth
           icon="angle-down"
+          {...props}
       />
     </Button>
   )
@@ -36,6 +38,7 @@ const PopoverWithButton = () => {
         placement="bottom"
         reference={popoverReference}
         show={showPopover}
+        {...props}
     >
       <List xpadding>
         <ListItem><a>{'Popularity'}</a></ListItem>

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -6,7 +6,7 @@ import {
   Title,
 } from '../..'
 
-const PopoverScrollHeight = () => {
+const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)
 
   const handleTogglePopover = () => {
@@ -35,6 +35,7 @@ const PopoverScrollHeight = () => {
         reference={popoverTrigger}
         shouldClosePopover={handleShouldClosePopover}
         show={showPopover}
+        {...props}
     >
       <Body
           marginBottom="sm"
@@ -43,10 +44,12 @@ const PopoverScrollHeight = () => {
           conditioned to a life of security, conformity, and conservation, all of
           which may appear to give one peace of mind, but in reality, nothing is
           more damaging to the adventurous spirit."
+          {...props}
       />
       <Title
           size={4}
           text="- Christopher McCandless"
+          {...props}
       />
 
     </PbReactPopover>