playbook_ui 4.17.0.pre.alpha1 → 4.17.0

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -0,0 +1,8 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { AvatarActionButton } from '../../'
+
+const AvatarActionButtonOnClick = () => (
+  <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!')}
+    />
+  </div>
+)
+
+export default AvatarActionButtonOnClick

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -0,0 +1,14 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -0,0 +1,27 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

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

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

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_1",
+  }) %>
+
+</div>

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

@@ -0,0 +1,16 @@
+examples:
+  
+  rails:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_tooltip: Tooltip
+  - avatar_action_button_onclick: On Click
+  
+  
+  react:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_on_click: On Click
+  

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

@@ -0,0 +1,4 @@
+export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
+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'

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,27 +3,33 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type BadgeProps = {
   className?: String,
   dark?: Boolean,
   id?: String,
   text?: String,
-  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
-  rounded?: Boolean
+  variant?: "success" | "warning" | "error" | "info" | "neutral",
+  rounded?: Boolean,
 }
-const Badge = ({
-  className,
-  dark = false,
-  id,
-  text,
-  variant = 'neutral',
-  rounded = false,
-}: BadgeProps) => {
-  const css = classnames(className, buildCss('pb_badge_kit', variant, {
-    'rounded': rounded,
-    'dark': dark,
-  }))
+const Badge = (props: BadgeProps) => {
+  const {
+    className,
+    dark = false,
+    id,
+    text,
+    variant = 'neutral',
+    rounded = false,
+  } = props
+  const css = classnames(
+    className,
+    buildCss('pb_badge_kit', variant, {
+      rounded: rounded,
+      dark: dark,
+    }),
+    spacing(props)
+  )
 
   return (
     <div

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

@@ -1,8 +1,9 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
 import { pbChart } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type BarGraphProps = {
   axisTitle: String,
@@ -69,7 +70,7 @@ export default class BarGraph extends React.Component {
 
     return (
       <div
-          className={className}
+          className={classnames(className, spacing(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Highlight } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type BodyProps = {
   className?: String,
@@ -44,7 +45,7 @@ const Body = (props: BodyProps) => {
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(bodyCSS(props), className)}>
+    <Tag className={classnames(bodyCSS(props), className, spacing(props))}>
       <If condition={highlighting}>
         <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
         <Else />

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

@@ -23,6 +23,10 @@ const BodyLight = () => {
           status="positive"
           text="I am a body kit (Status: positive)"
       />
+      <Body
+          status="positive"
+          text="I am a body kit (Status: positive)"
+      />
     </div>
   )
 }

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

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -83,7 +84,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className)
+  const css = classnames(buttonClassName(props), className, spacing(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

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

@@ -22,7 +22,13 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
     />
+    <Button
+        disabled
+        onClick={() => alert('button clicked!')}
+        text="Button Disabled"
+    />
   </div>
+
 )
 
 export default ButtonDefault

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -3,35 +3,37 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag: String,
   text: String,
 }
 
-const Caption = ({
-  className,
-  children,
-  dark = false,
-  size = 'md',
-  tag = 'div',
-  text,
-}: CaptionProps) => {
+const Caption = (props: CaptionProps) => {
+  const {
+    className,
+    children,
+    dark = false,
+    size = 'md',
+    tag = 'div',
+    text,
+  } = props
   const Tag = `${tag}`
 
-  const css = classnames(buildCss('pb_caption_kit', size, {
-    'dark': dark,
-  }), className)
-
-  return (
-    <Tag className={css}>
-      {text || children}
-    </Tag>
+  const css = classnames(
+    buildCss('pb_caption_kit', size, {
+      dark: dark,
+    }),
+    className,
+    spacing(props)
   )
+
+  return <Tag className={css}>{text || children}</Tag>
 }
 
 export default Caption

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -5,6 +5,6 @@
     aria: object.aria,
     dark: object.dark) do %>
   <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.padding, children: object.children }) %>
+    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -1,99 +1,96 @@
 /* @flow */
 
 import React from 'react'
+import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CardPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
-    position?: 'side' | 'top',
-    color?: String
+    position?: "side" | "top",
+    color?: String,
   },
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   selected?: Boolean,
-  shadow?: 'none' | 'deep' | 'deeper' | 'deepest',
+  shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
 }
 
 type CardHeaderProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   categoryColor?: Number,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
 }
 
 // Header component
-const Header = ({
-  children,
-  className,
-  padding = 'sm',
-  categoryColor = 1,
-}: CardHeaderProps) => {
-  const headerCSS = buildCss('pb_card_header_kit', padding, `category_${categoryColor}`)
+const Header = (props: CardHeaderProps) => {
+  const { children, className, categoryColor = 1 } = props
+  const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
+
+  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
   return (
-    <div className={classnames(headerCSS, className)}>
+    <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
     </div>
   )
 }
 
 // Body component
-const Body = ({
-  children,
-  className,
-  padding = 'sm',
-}: CardBodyProps) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Body = (props: CardBodyProps) => {
+  const { children, className } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
+  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
   return (
-    <div className={classnames(bodyCSS, className)}>
+    <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
     </div>
   )
 }
 
-const Card = ({
-  children,
-  className,
-  dark = false,
-  highlight = {},
-  padding = 'md',
-  selected = false,
-  shadow = 'none',
-}: CardPropTypes) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Card = (props: CardPropTypes) => {
+  const {
+    children,
+    className,
+    dark = false,
+    highlight = {},
+    selected = false,
+    shadow = 'none',
+  } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
-    'dark': dark,
+    dark: dark,
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
+  const cardSpacing = spacing(props) ? spacing(props) : 'p_md'
 
   // coerce to array
-  const cardChildren = typeof(children) === 'object' && children.length ? children : [children]
+  const cardChildren =
+    typeof children === 'object' && children.length ? children : [children]
 
   const subComponentTags = (tagName) => {
-    return cardChildren.filter((c) => {
-      return c.type && c.type.displayName === tagName
-    }).map((child, i) => {
+    return cardChildren.filter((c) => (
+      get(c, 'type.displayName') === tagName
+    )).map((child, i) => {
       return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
     })
   }
 
-  const nonHeaderChildren = cardChildren.filter((child) => !child.type || child.type.displayName !== 'Header')
+  const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
     <div className={classnames(cardCss, className)}>
       {subComponentTags('Header')}
-      <div className={bodyCSS}>
+      <div className={classnames(bodyCSS, cardSpacing)}>
         {nonHeaderChildren}
       </div>
     </div>