playbook_ui 6.6.1 → 6.8.2.pre.alpha1

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -7,12 +7,13 @@ import { map } from 'lodash'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
-import { Image } from '../'
+import { Image, OnlineStatus } from '../'
 
 type AvatarProps = {
   aria?: object,
   className?: string,
   data?: object,
+  dark?: boolean,
   id?: string,
   imageUrl: string,
   name: string,
@@ -26,10 +27,14 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
+  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_avatar_kit', size),
+    globalProps(props),
+    className
+  )
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials
@@ -53,7 +58,11 @@ const Avatar = (props: AvatarProps) => {
         </If>
       </div>
       <If condition={status}>
-        <div className={`pb_online_status_kit_${status} size_${size}`} />
+        <OnlineStatus
+            className={`size_${size}`}
+            dark={dark}
+            status={status}
+        />
       </If>
     </div>
   )

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/_badge.jsx

@@ -32,8 +32,10 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
-    globalProps(props))
+    buildCss('pb_badge_kit', variant, { rounded }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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"
       />