playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx

@@ -1,38 +1,38 @@
-import React from "react";
-import { CircleIconButton } from "../../";
+import React from 'react'
+import { CircleIconButton } from '../../'
 
 const CircleIconButtonDark = () => (
   <div>
     <CircleIconButton
-      variant="primary"
-      icon="plus"
-      dark
+        dark
+        icon="plus"
+        variant="primary"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      variant="secondary"
-      icon="pen"
-      dark
+        dark
+        icon="pen"
+        variant="secondary"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      disabled={true}
-      icon="times"
-      dark
+        dark
+        disabled
+        icon="times"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      variant="link"
-      icon="user"
-      dark
+        dark
+        icon="user"
+        variant="link"
     />
   </div>
-);
+)
 
-export default CircleIconButtonDark;
+export default CircleIconButtonDark

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -1,34 +1,34 @@
-import React from "react";
-import { CircleIconButton } from "../../";
+import React from 'react'
+import { CircleIconButton } from '../../'
 
 const CircleIconButtonDefault = () => (
   <div>
     <CircleIconButton
-      variant="primary"
-      icon="plus"
+        icon="plus"
+        variant="primary"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      variant="secondary"
-      icon="pen"
+        icon="pen"
+        variant="secondary"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      disabled={true}
-      icon="times"
+        disabled
+        icon="times"
     />
 
-    <br/>
+    <br />
 
     <CircleIconButton
-      variant="link"
-      icon="user"
+        icon="user"
+        variant="link"
     />
   </div>
-);
+)
 
-export default CircleIconButtonDefault;
+export default CircleIconButtonDefault

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

@@ -1,2 +1,2 @@
-export {default as CircleIconButtonDefault} from './_circle_icon_button_default.jsx';
-export {default as CircleIconButtonDark} from './_circle_icon_button_dark.jsx';
+export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
+export { default as CircleIconButtonDark } from './_circle_icon_button_dark.jsx'

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -1,14 +1,30 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Body,
-  Caption,
-  Icon,
-} from '../'
+import { Body, Caption, Icon } from '../'
+
+const contactTypeMap = {
+  'cell': 'mobile',
+  'home': 'phone',
+  'work': 'phone-office',
+  'email': 'envelope',
+  'wrong number': 'slash-phone',
+}
+
+const formatContact = (contactString, contactType) => {
+  if (contactType == 'email') {
+    return contactString
+  }
+  const cleaned = contactString.replace(/\D/g, '')
+  const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
+  if (phoneNumber) {
+    const intlCode = phoneNumber[1] ? '+1 ' : ''
+    return [intlCode, '(', phoneNumber[2], ') ', phoneNumber[3], '-', phoneNumber[4]].join('')
+  }
+  return null
+}
 
 type ContactProps = {
   contactType?: 'cell' | 'home' | 'work' | 'email' | 'wrong number',
@@ -18,71 +34,34 @@ type ContactProps = {
   contactDetail?: String,
 }
 
-const kitClasses = ({}: ContactProps) => {
-  let classname = 'pb_contact_kit'
-  return classname
-}
-
 const Contact = ({
   contactType,
   className,
-  dark=false,
+  dark = false,
   contactValue,
-  contactDetail="",
-}: ContactProps) => {
-
-  const formatDetail = (contactDetail) => {
-    if (contactDetail !== undefined) {
-      return (
-        <Caption size="xs" text={contactDetail} tag="span" />
-      );
-    } else {
-      return contactDetail
-    }
-  }
-
-  const css = classnames(kitClasses({contactType}), className)
-
-  const formatContact = (contactString, contactType) => {
-    if (contactType == "email") {
-      return contactString
-    } else {
-      const cleaned = contactString.replace(/\D/g, '')
-      const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
-      if (phoneNumber) {
-        let intlCode = (phoneNumber[1] ? '+1 ' : '')
-        return [intlCode, '(', phoneNumber[2], ') ', phoneNumber[3], '-', phoneNumber[4]].join('')
-      }
-      return null
-    }
-  }
-
-  const contactTypeIcon = (function(contactType) {
-    switch(contactType) {
-      case 'cell':
-        return 'mobile';
-      case 'home':
-        return 'phone';
-      case 'work':
-        return 'phone-office';
-      case 'email':
-        return 'envelope';
-      case 'wrong number' :
-        return 'slash-phone';
-      default:
-        return 'phone';
-    }
-  })(contactType)
-
-
-  return (
-    <div className={css}>
-      <Body dark={dark} color="light" tag="span" className="pb_contact_kit" >
-        <Icon icon={contactTypeIcon} fixedWidth="true" />
-        {` ${formatContact(contactValue, contactType)} `}{formatDetail(contactDetail)}
-      </Body>
-    </div>
-  )
-}
+  contactDetail = '',
+}: ContactProps) => (
+  <div className={classnames('pb_contact_kit', className)}>
+    <Body
+        className="pb_contact_kit"
+        color="light"
+        dark={dark}
+        tag="span"
+    >
+      <Icon
+          fixedWidth
+          icon={contactTypeMap[contactType] || 'phone'}
+      />
+      {` ${formatContact(contactValue, contactType)} `}
+      <If condition={contactDetail}>
+        <Caption
+            size="xs"
+            tag="span"
+            text={contactDetail}
+        />
+      </If>
+    </Body>
+  </div>
+)
 
 export default Contact

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,23 +1,23 @@
-import React from "react"
-import {Contact} from "../../"
+import React from 'react'
+import { Contact } from '../../'
 
-function ContactDefault() {
+const ContactDefault = () => {
   return (
     <div>
       <Contact
-        contactType="cell"
-        contactValue="349-185-9988"
+          contactType="cell"
+          contactValue="349-185-9988"
       />
       <Contact
-        contactValue="5555555555"
+          contactValue="5555555555"
       />
       <Contact
-        contactType="email"
-        contactValue="email@example.com"
+          contactType="email"
+          contactValue="email@example.com"
       />
       <Contact
-        contactType="work"
-        contactValue="3245627482"
+          contactType="work"
+          contactValue="3245627482"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,22 +1,22 @@
-import React from "react"
-import {Contact} from "../../"
+import React from 'react'
+import { Contact } from '../../'
 
-function ContactDefault() {
+const ContactDefault = () => {
   return (
     <div>
       <Contact
-        contactType="cell"
-        contactValue="349-185-9988"
-        contactDetail="Cell"
+          contactDetail="Cell"
+          contactType="cell"
+          contactValue="349-185-9988"
       />
       <Contact
-        contactValue="5555555555"
-        contactDetail="Home"
+          contactDetail="Home"
+          contactValue="5555555555"
       />
       <Contact
-        contactType="work"
-        contactValue="3245627482"
-        contactDetail="Work"
+          contactDetail="Work"
+          contactType="work"
+          contactValue="3245627482"
       />
     </div>
   )

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

@@ -1,2 +1,2 @@
-export {default as ContactDefault} from './_contact_default.jsx';
-export {default as ContactWithDetail} from './_contact_with_detail.jsx';
+export { default as ContactDefault } from './_contact_default.jsx'
+export { default as ContactWithDetail } from './_contact_with_detail.jsx'

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -3,37 +3,23 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Body,
-  Caption,
-  Title,
-} from '../'
+import { Body, Caption, Title } from '../'
+import { buildCss } from '../utilities/props'
 
 type CurrencyProps = {
   align?: 'left' | 'center' | 'right',
   className: String,
-  currencySymbol: '$',
+  currencySymbol: String,
   label?: String,
   separator?: '.' | ',',
   size?: 'sm' | 'lg',
   value?: String,
-  unit?: '00',
-}
-
-const kitCSS = ({align='left'}: CurrencyProps) => {
-  let css = 'pb_currency_kit'
-  css += `_${align}`
-  return css
-}
-
-const bodyCSS = ({}: CurrencyProps) => {
-  let css = ''
-  return css
+  units?: String,
 }
 
 const symbolCSS = (currencySymbol) => {
   return classnames({
-    dollar_sign: currencySymbol === '$',
+    'dollar_sign': currencySymbol === '$',
   })
 }
 
@@ -42,31 +28,28 @@ const sizes = {
   sm: 2,
 }
 
-const Currency = (props: CurrencyProps) => {
-  const {
-    currencySymbol='$',
-    label='',
-    separator='.',
-    size='sm',
-    units='00',
-    value,
-  } = props
-
-  return (
-    <div className={kitCSS(props)}>
-      <Caption>{label}</Caption>
-      <div className='pb_currency_wrapper'>
-        <Body className={symbolCSS(currencySymbol)}>{currencySymbol}</Body>
-        <Title
-            className='pb_currency_value'
-            size={sizes[size]}
-        >
-          {`${value}${separator}`}
-        </Title>
-        <Body className='unit'>{units}</Body>
-      </div>
+const Currency = ({
+  align = 'left',
+  currencySymbol = '$',
+  label = '',
+  separator = '.',
+  size = 'sm',
+  units = '00',
+  value,
+}: CurrencyProps) => (
+  <div className={buildCss('pb_currency_kit', align)}>
+    <Caption>{label}</Caption>
+    <div className="pb_currency_wrapper">
+      <Body className={symbolCSS(currencySymbol)}>{currencySymbol}</Body>
+      <Title
+          className="pb_currency_value"
+          size={sizes[size]}
+      >
+        {`${value}${separator}`}
+      </Title>
+      <Body className="unit">{units}</Body>
     </div>
-  )
-}
+  </div>
+)
 
 export default Currency

data/app/pb_kits/playbook/pb_currency/docs/_currency_default.jsx

@@ -1,25 +1,25 @@
-import React from "react"
-import {Currency} from "../../"
+import React from 'react'
+import { Currency } from '../../'
 
-function CurrencyDefault() {
+const CurrencyDefault = () => {
   return (
     <div>
       <Currency
-          label='Caption'
-          value='2,000'
+          label="Caption"
+          value="2,000"
       />
       <Currency
-          align='center'
-          label='Caption'
-          value='2,000'
+          align="center"
+          label="Caption"
+          value="2,000"
       />
       <Currency
-          align='right'
-          label='Caption'
-          value='2,000'
+          align="right"
+          label="Caption"
+          value="2,000"
       />
     </div>
   )
 }
 
-export default CurrencyDefault;
+export default CurrencyDefault