playbook_ui 4.17.0.pre.alpha1 → 4.17.0

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx

@@ -3,17 +3,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+import { Avatar, Badge } from '../'
 
-import {
-  Avatar,
-  Badge,
-} from '../'
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type MultipleUsersStackedProps = {
   className?: String,
@@ -23,13 +16,8 @@ type MultipleUsersStackedProps = {
   users: Array<Object>,
 }
 
-const MultipleUsersStacked = ({
-  className,
-  id,
-  aria = {},
-  data = {},
-  users,
-}: MultipleUsersStackedProps) => {
+const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
+  const { className, id, aria = {}, data = {}, users } = props
   const moreThanTwo = users.length > 2
   const onlyOne = users.length == 1
   const displayCount = () => {
@@ -39,7 +27,7 @@ const MultipleUsersStacked = ({
   const dataProps = buildDataProps(data)
   const css = buildCss({
     'pb_multiple_users_stacked_kit': true,
-    'single': onlyOne,
+    single: onlyOne,
   })
 
   const firstUser = () => {
@@ -87,7 +75,7 @@ const MultipleUsersStacked = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className)}
+        className={classnames(css, className, spacing(props))}
         id={id}
     >
       {firstUser()}

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -1,34 +1,37 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { Caption } from '../'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type NavProps = {
   title: String,
-  orientation?: 'vertical' | 'horizontal',
+  orientation?: "vertical" | "horizontal",
   link: String,
   children?: React.Node,
   className?: String | Array<String>,
   highlight?: Boolean,
-  variant?: 'normal' | 'subtle',
+  variant?: "normal" | "subtle",
   onClick?: EventHandler,
 }
-const Nav = ({
-  title = '',
-  orientation = 'vertical',
-  link = '',
-  children,
-  className,
-  highlight = true,
-  variant = 'normal',
-  onClick = () => {},
-}: NavProps) => {
+const Nav = (props: NavProps) => {
+  const {
+    title = '',
+    orientation = 'vertical',
+    link = '',
+    children,
+    className,
+    highlight = true,
+    variant = 'normal',
+    onClick = () => {},
+  } = props
   const cardCss = buildCss('pb_nav_list', variant, orientation, className, {
-    'highlight': highlight,
+    highlight: highlight,
   })
   return (
-    <div className={cardCss}>
+    <div className={classnames(cardCss, spacing(props))}>
       <If condition={title}>
         <div className="pb_nav_list_title">
           <a

data/app/pb_kits/playbook/pb_online_status/_online_status.jsx

@@ -2,10 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  buildDataProps,
-} from '../utilities/props'
+import { buildDataProps } from '../utilities/props'
 
 type OnlineStatusProps = {
   className?: String,
@@ -14,17 +13,10 @@ type OnlineStatusProps = {
   status?: "online" | "offline" | "away",
 }
 
-const OnlineStatus = ({
-  id,
-  data = {},
-  className,
-  status = 'offline',
-}: OnlineStatusProps) => {
+const OnlineStatus = (props: OnlineStatusProps) => {
+  const { id, data = {}, className, status = 'offline' } = props
   const dataProps = buildDataProps(data)
-  const css = classnames([
-    `pb_online_status_kit_${status}`,
-    className,
-  ])
+  const css = classnames([`pb_online_status_kit_${status}`, className], spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -2,11 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
 type PersonProps = {
   className?: String | Array<String>,
@@ -15,14 +13,10 @@ type PersonProps = {
   lastName: String,
 }
 
-const Person = ({
-  className,
-  dark = false,
-  firstName,
-  lastName,
-}: PersonProps) => {
+const Person = (props: PersonProps) => {
+  const { className, dark = false, firstName, lastName } = props
   return (
-    <div className={classnames('pb_person_kit', className)}>
+    <div className={classnames('pb_person_kit', className, spacing(props))}>
       <Body
           className="pb_person_first"
           dark={dark}

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 import { Contact, Person } from '../'
 
@@ -19,26 +20,25 @@ type PersonContactProps = {
   contacts?: Array<ContactItem>,
 }
 
-const PersonContact = ({
-  className,
-  firstName,
-  lastName,
-  contacts,
-}: PersonContactProps) => (
-  <div className={classnames('pb_person_contact_kit', className)}>
-    <Person
-        firstName={firstName}
-        lastName={lastName}
-    />
-    {contacts.map((contactObject, index) => (
-      <Contact
-          contactDetail={contactObject.contactDetail}
-          contactType={contactObject.contactType}
-          contactValue={contactObject.contactValue}
-          key={index}
+const PersonContact = (props: PersonContactProps) => {
+  const { className, firstName, lastName, contacts } = props
+
+  return (
+    <div className={classnames('pb_person_contact_kit', className, spacing(props))}>
+      <Person
+          firstName={firstName}
+          lastName={lastName}
       />
-    ))}
-  </div>
-)
+      {contacts.map((contactObject, index) => (
+        <Contact
+            contactDetail={contactObject.contactDetail}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={index}
+        />
+      ))}
+    </div>
+  )
+}
 
 export default PersonContact

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -4,23 +4,18 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
+import { spacing } from '../utilities/spacing.js'
 
 type PillProps = {
   className?: String,
   id?: String,
   text: String,
-  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
+  variant?: "success" | "warning" | "error" | "info" | "neutral",
 }
 
-const Pill = ({
-  className,
-  text,
-  variant = 'neutral',
-}: PillProps) => {
-  const css = classnames([
-    `pb_pill_kit_${variant}`,
-    className,
-  ])
+const Pill = (props: PillProps) => {
+  const { className, text, variant = 'neutral' } = props
+  const css = classnames([`pb_pill_kit_${variant}`, className], spacing(props))
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -10,16 +10,16 @@ import {
   Reference as PopperReference,
 } from 'react-popper'
 
-import {
-  buildCss,
-  noop,
-} from '../utilities/props'
+import { buildCss, noop } from '../utilities/props'
+
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 import { Card } from '../'
 
 type PbPopoverProps = {
   className?: String,
-  closeOnClick?: 'outside' | 'inside',
+  closeOnClick?: "outside" | "inside",
   offset?: Boolean,
   reference: PopperReference,
   show?: Boolean,
@@ -30,7 +30,8 @@ type PbPopoverProps = {
 // https://popper.js.org/docs/v2/modifiers
 
 const POPOVER_MODIFIERS = {
-  offset: { //https://popper.js.org/docs/v2/modifiers/offset/
+  offset: {
+    //https://popper.js.org/docs/v2/modifiers/offset/
     enabled: true,
     name: 'offset',
     options: {
@@ -44,38 +45,47 @@ const popoverModifiers = ({ modifiers, offset }) => {
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
 }
 
-const Popover = ({
-  children,
-  className,
-  modifiers,
-  offset,
-  placement,
-  referenceElement,
-}: PbPopoverProps) => (
-  <Popper
-      modifiers={popoverModifiers({ modifiers, offset })}
-      placement={placement}
-      referenceElement={referenceElement}
-  >
-    {({ placement, ref, style }) => {
-      return (
-        <div
-            className={`${buildCss('pb_popover_kit')} ${className}`}
-            data-placement={placement}
-            ref={ref}
-            style={style}
-        >
-          <div className={`${buildCss('popover_tooltip')} show`}>
-            <Card shadow="deeper">
-              { children }
-            </Card>
+const Popover = (props: PbPopoverProps) => {
+  const {
+    children,
+    className,
+    modifiers,
+    offset,
+    placement,
+    referenceElement,
+  } = props
+  return (
+    <Popper
+        modifiers={popoverModifiers({ modifiers, offset })}
+        placement={placement}
+        referenceElement={referenceElement}
+    >
+      {({ placement, ref, style }) => {
+        return (
+          <div
+              className={`${buildCss('pb_popover_kit')} ${className}`}
+              data-placement={placement}
+              ref={ref}
+              style={style}
+          >
+            <div
+                className={classnames(
+                `${buildCss('popover_tooltip')} show`
+              )}
+            >
+              <Card
+                  className={spacing(props)}
+                  shadow="deeper"
+              >
+                {children}
+              </Card>
+            </div>
           </div>
-        </div>
         )
-      }
-    }
-  </Popper>
-)
+      }}
+    </Popper>
+  )
+}
 
 export default class PbReactPopover extends React.Component<PbPopoverProps> {
   static defaultProps = {
@@ -94,8 +104,10 @@ export default class PbReactPopover extends React.Component {
     if (!closeOnClick) return
 
     document.body.addEventListener('click', ({ target }) => {
-      const targetIsPopover = target.closest('[class^=popover_tooltip]') !== null
-      const targetIsReference = target.closest('.pb_popover_reference_wrapper') !== null
+      const targetIsPopover =
+        target.closest('[class^=popover_tooltip]') !== null
+      const targetIsReference =
+        target.closest('.pb_popover_reference_wrapper') !== null
 
       if (targetIsReference) return
 
@@ -135,6 +147,7 @@ export default class PbReactPopover extends React.Component {
 
     const popoverComponent = (
       <Popover
+          {...this.props}
           className={className}
           modifiers={modifiers}
           offset={offset}
@@ -154,9 +167,7 @@ export default class PbReactPopover extends React.Component {
                   className="pb_popover_reference_wrapper"
                   ref={ref}
               >
-                <reference.type
-                    {...reference.props}
-                />
+                <reference.type {...reference.props} />
               </span>
             )}
           </PopperReference>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -2,6 +2,8 @@
 
 import React from 'react'
 import { Body, Title } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressPillsProps = {
   active?: Number,
@@ -9,7 +11,6 @@ type ProgressPillsProps = {
   title?: String,
   value?: String,
   dark?: Boolean,
-
 }
 
 const showSteps = (steps, active, dark) => {
@@ -22,22 +23,27 @@ const showSteps = (steps, active, dark) => {
   return items
 }
 
-const ProgressPill = ({
-  active,
-  dark,
-  step,
-}: ProgressPillProps) => (
+const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
   <div
-      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? '_dark' : null}`}
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${
+      dark ? '_dark' : null
+    }`}
       key={step}
   />
 )
 
-const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark = false }: ProgressPillsProps) => {
+const ProgressPills = (props: ProgressPillsProps) => {
+  const {
+    active = 0,
+    steps = 3,
+    title = null,
+    value = null,
+    dark = false,
+  } = props
   const darkClass = dark ? '_dark' : ''
 
   return (
-    <div className={`pb_progress_pills_kit${darkClass}`}>
+    <div className={classnames(`pb_progress_pills_kit${darkClass}`, spacing(props))}>
       <If condition={title}>
         <div className="progress_pills_status">
           <Title
@@ -54,9 +60,7 @@ const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark
         </div>
       </If>
 
-      <div className="progress_pills">
-        {showSteps(steps, active, dark)}
-      </div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }