playbook_ui 6.6.1 → 6.7.0.pre.alpha1

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarDefault = () => {
+const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
@@ -9,6 +9,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="xs"
           status="online"
+          {...props}
       />
       <br />
       <Avatar
@@ -16,6 +17,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="sm"
           status="online"
+          {...props}
       />
       <br />
       <Avatar
@@ -23,6 +25,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="md"
           status="away"
+          {...props}
       />
       <br />
       <Avatar
@@ -30,6 +33,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="lg"
           status="offline"
+          {...props}
       />
       <br />
       <Avatar
@@ -37,6 +41,7 @@ const AvatarDefault = () => {
           name="Terry Johnson"
           size="xl"
           status="offline"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,28 +1,33 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarDefault = () => {
+const AvatarDefault = (props) => {
   return (
     <div>
       <Avatar
           name="Terry Johnson"
           size="xs"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="sm"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="md"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="lg"
+          {...props}
       />
       <Avatar
           name="Terry Johnson"
           size="xl"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Avatar } from '../../'
 
-const AvatarStatus = () => {
+const AvatarStatus = (props) => {
   return (
     <>
       <Avatar
           imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
           name="Terry Johnson"
           size="sm"
+          {...props}
       />
 
       <br />
@@ -17,6 +18,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="online"
+          {...props}
       />
 
       <br />
@@ -26,6 +28,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="away"
+          {...props}
       />
 
       <br />
@@ -35,6 +38,7 @@ const AvatarStatus = () => {
           name="Terry Johnson"
           size="sm"
           status="offline"
+          {...props}
       />
 
       <br />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonActions = () => (
+const AvatarActionButtonActions = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         action="add"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
     <AvatarActionButton
         action="remove"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonDefault = () => (
+const AvatarActionButtonDefault = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
+        {...props}
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
     />

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonOnClick = () => (
+const AvatarActionButtonOnClick = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         linkUrl="https://www.google.com"
         name="Sophia Carden"
         onClick={() => alert('clicked!')}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -1,27 +1,31 @@
 import React from 'react'
 import { AvatarActionButton } from '../../'
 
-const AvatarActionButtonPlacement = () => (
+const AvatarActionButtonPlacement = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="bottom_left"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="bottom_right"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="top_left"
+        {...props}
     />
     <AvatarActionButton
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
         name="Sophia Carden"
         placement="top_right"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml

@@ -6,18 +6,10 @@ examples:
   - avatar_action_button_actions: Actions
   - avatar_action_button_onclick: On Click
   - avatar_action_button_tooltip: Tooltip
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark
-  - avatar_action_button_tooltip_dark: Tooltip Dark
+
   
   react:
   - avatar_action_button_default: Default
   - avatar_action_button_placement: Placement
   - avatar_action_button_actions: Actions
   - avatar_action_button_on_click: On Click
-  - avatar_action_button_dark: Dark
-  - avatar_action_button_placement_dark: Placement Dark
-  - avatar_action_button_actions_dark: Actions Dark
-  - avatar_action_button_on_click_dark: On Click Dark

data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js

@@ -2,7 +2,3 @@ export { default as AvatarActionButtonDefault } from './_avatar_action_button_de
 export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
 export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
 export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'
-export { default as AvatarActionButtonDark } from './_avatar_action_button_dark.jsx'
-export { default as AvatarActionButtonPlacementDark } from './_avatar_action_button_placement_dark.jsx'
-export { default as AvatarActionButtonOnClickDark } from './_avatar_action_button_on_click_dark.jsx'
-export { default as AvatarActionButtonActionsDark } from './_avatar_action_button_actions_dark.jsx'

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeColors = () => {
+const BadgeColors = (props) => {
   return (
     <div>
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="primary"
@@ -14,6 +15,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="primary"
         />
@@ -21,6 +23,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="primary"
         />
@@ -28,6 +31,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="success"
@@ -36,6 +40,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="success"
         />
@@ -43,6 +48,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="success"
         />
@@ -50,6 +56,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="warning"
@@ -58,6 +65,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="warning"
         />
@@ -65,6 +73,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="warning"
         />
@@ -72,6 +81,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="error"
@@ -80,6 +90,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="error"
         />
@@ -87,6 +98,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="error"
         />
@@ -94,6 +106,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="info"
@@ -102,6 +115,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="info"
         />
@@ -109,6 +123,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="info"
         />
@@ -116,6 +131,7 @@ const BadgeColors = () => {
 
       <div>
         <Badge
+            {...props}
             rounded
             text="+1"
             variant="neutral"
@@ -124,6 +140,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+4"
             variant="neutral"
         />
@@ -131,6 +148,7 @@ const BadgeColors = () => {
         &nbsp;
 
         <Badge
+            {...props}
             text="+1000"
             variant="neutral"
         />

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeDefault = () => {
+const BadgeDefault = (props) => {
   return (
     <div>
       <Badge
+          {...props}
           text="+1"
           variant="primary"
       />
@@ -12,6 +13,7 @@ const BadgeDefault = () => {
       &nbsp;
 
       <Badge
+          {...props}
           text="+4"
           variant="primary"
       />
@@ -19,6 +21,7 @@ const BadgeDefault = () => {
       &nbsp;
 
       <Badge
+          {...props}
           text="+1000"
           variant="primary"
       />

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import Badge from '../_badge.jsx'
 
-const BadgeRounded = () => {
+const BadgeRounded = (props) => {
   return (
     <div>
       <Badge
+          {...props}
           rounded
           text="+1"
           variant="primary"
@@ -13,6 +14,7 @@ const BadgeRounded = () => {
       &nbsp;
 
       <Badge
+          {...props}
           rounded
           text="+4"
           variant="primary"
@@ -21,6 +23,7 @@ const BadgeRounded = () => {
       &nbsp;
 
       <Badge
+          {...props}
           rounded
           text="+1000"
           variant="primary"

data/app/pb_kits/playbook/pb_badge/docs/example.yml

@@ -3,10 +3,9 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark
+ 
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
-  - badge_dark: Dark