playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

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

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

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

@@ -1,4 +1,3 @@
 export { default as BadgeDefault } from './_badge_default.jsx'
 export { default as BadgeRounded } from './_badge_rounded.jsx'
 export { default as BadgeColors } from './_badge_colors.jsx'
-export { default as BadgeDark } from './_badge_dark.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Body } from '../../'
 
-const BodyBlock = () => {
+const BodyBlock = (props) => {
   return (
     <div>
-      <Body>
+      <Body {...props}>
         {'I am a body kit'}
       </Body>
     </div>

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -1,25 +1,30 @@
 import React from 'react'
 import { Body } from '../../'
 
-const BodyLight = () => {
+const BodyLight = (props) => {
   return (
     <div>
       <Body
+          {...props}
           text="I am a body kit (Default)"
       />
       <Body
+          {...props}
           color="light"
           text="I am a body kit (Light)"
       />
       <Body
+          {...props}
           color="lighter"
           text="I am a body kit (Lighter)"
       />
       <Body
+          {...props}
           status="negative"
           text="I am a body kit (Status: negative)"
       />
       <Body
+          {...props}
           status="positive"
           text="I am a body kit (Status: positive)"
       />

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

@@ -1,9 +1,7 @@
 examples:
   rails:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block
   react:
-  - body_light: Light UI
-  - body_dark: Dark UI
+  - body_light: Default
   - body_block: Block

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

@@ -1,3 +1,2 @@
-export { default as BodyDark } from './_body_dark.jsx'
 export { default as BodyLight } from './_body_light.jsx'
 export { default as BodyBlock } from './_body_block.jsx'

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonAccessibility = () => (
+const ButtonAccessibility = (props) => (
   <div>
     <Button
+        {...props}
         aria={{ label: 'button' }}
         link="https://google.com"
         tag="a"

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonBlockContent = () => (
+const ButtonBlockContent = (props) => (
   <div>
     <Button
+        {...props}
         fixedWidth
         icon="users"
         text="Button with Block Content"

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonDefault = () => (
+const ButtonDefault = (props) => (
   <div>
     <Button
+        {...props}
+        marginRight="xl"
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
@@ -12,18 +14,20 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
+        {...props}
     />
     {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"
         variant="link"
+        {...props}
     />
-    {' '}
     <Button
         disabled
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
+        {...props}
     />
   </div>
 

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonFullWidth = () => (
+const ButtonFullWidth = (props) => (
   <div>
     <Button
+        {...props}
         fullWidth
         text="Button Full Width"
     />

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonLink = () => (
+const ButtonLink = (props) => (
   <div>
     <Button
+        {...props}
         link="https://google.com"
         text="A Tag Button"
     />
     {' '}
     <Button
+        {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
     {' '}
     <Button
+        {...props}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import { Button } from '../../'
 
-const ButtonLoading = () => (
+const ButtonLoading = (props) => (
   <div>
     <Button
+        {...props}
         loading
         text="Button Primary"
     />
     {' '}
     <Button
+        {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
     {' '}
     <Button
+        {...props}
         loading
         text="A Tag Button Disabled"
         variant="link"

data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import Button from '../_button.jsx'
 
-const ButtonOptions = () => (
+const ButtonOptions = (props) => (
   <div>
     <Button
+        {...props}
         htmlType="submit"
         onClick={() => alert('Click!')}
         text="Button with options"