playbook_ui 3.1.0 → 3.2.0

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

@@ -1,4 +1,4 @@
-export {default as SelectableCardDefault} from './_selectable_card_default.jsx';
-export {default as SelectableCardSingleSelect} from './_selectable_card_single_select.jsx';
-export {default as SelectableCardDark} from './_selectable_card_dark.jsx';
-export {default as SelectableCardBlock} from './_selectable_card_block.jsx';
+export { default as SelectableCardDefault } from './_selectable_card_default.jsx'
+export { default as SelectableCardSingleSelect } from './_selectable_card_single_select.jsx'
+export { default as SelectableCardDark } from './_selectable_card_dark.jsx'
+export { default as SelectableCardBlock } from './_selectable_card_block.jsx'

data/app/pb_kits/playbook/pb_source/_source.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
-};
+  id: PropTypes.string,
+}
 
 class Source extends React.Component {
   render() {
     return (
       <div className="pb_source">
-        <span>SOURCE CONTENT</span>
+        <span>{'SOURCE CONTENT'}</span>
       </div>
     )
   }
 }
 
-Source.propTypes = propTypes;
+Source.propTypes = propTypes
 
-export default Source;
+export default Source

data/app/pb_kits/playbook/pb_source/docs/_source_default.jsx

@@ -1,10 +1,9 @@
-import React from "react"
-import {Source} from "../../"
+import React from 'react'
 
-function SourceDefault() {
+const SourceDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 
-export default SourceDefault;
+export default SourceDefault

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

@@ -1 +1 @@
-export {default as SourceDefault} from './_source_default.jsx';
+export { default as SourceDefault } from './_source_default.jsx'

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
 const propTypes = {
   className: PropTypes.string,
-  id: PropTypes.string
-};
+  id: PropTypes.string,
+}
 
 class StarRating extends React.Component {
   render() {
     return (
       <div className="pb_star_rating">
-        <span>STAR RATING CONTENT</span>
+        <span>{'STAR RATING CONTENT'}</span>
       </div>
     )
   }
 }
 
-StarRating.propTypes = propTypes;
+StarRating.propTypes = propTypes
 
-export default StarRating;
+export default StarRating

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -1,9 +1,8 @@
-import React from "react"
-import {StarRating} from "../../"
+import React from 'react'
 
-function StarRatingDefault() {
+const StarRatingDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <h1>{'Coming Soon...'}</h1>
   )
 }
 

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

@@ -1 +1 @@
-export {default as StarRatingDefault} from './_star_rating_default.jsx';
+export { default as StarRatingDefault } from './_star_rating_default.jsx'

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -3,10 +3,18 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Body,
-  Icon,
-} from '../'
+import { buildCss } from '../utilities/props'
+import { Body, Icon } from '../'
+
+const statusMap = {
+  'increase': 'positive',
+  'decrease': 'negative',
+}
+
+const iconMap = {
+  'increase': 'arrow-up',
+  'decrease': 'arrow-down',
+}
 
 type StatChangeProps = {
   change?: 'increase' | 'decrease' | 'neutral',
@@ -15,69 +23,33 @@ type StatChangeProps = {
   value?: String | Number
 }
 
-const statChangeCSS = ({}: StatChangeProps, status) => {
-
-  const statusStyle = status !== '' ? `_${status}` : ''
-
-  return 'pb_stat_change_kit' + statusStyle
-}
-
-const StatChange = (props: StatChangeProps) => {
-  const {
-    change='neutral',
-    className,
-    id,
-    value,
-  } = props
-
-  const status = (function(change) {
-    switch(change) {
-      case 'increase':
-        return 'positive';
-      case 'decrease':
-        return 'negative';
-      default:
-        return 'neutral';
-    }
-  })(change)
-
-  const icon = (function(change) {
-    switch(change) {
-      case 'increase':
-        return 'arrow-up';
-      case 'decrease':
-        return 'arrow-down';
-      default:
-        return null;
-    }
-  })(change)
-
-  const displayIcon = function(icon) {
-    if (icon) {
-      return (
-        <span>
-          <Icon icon={icon} fixed_width={true} />
-          &nbsp;
-        </span>
-      )
-    }
-  }
+const StatChange = ({
+  change = 'neutral',
+  className,
+  id,
+  value,
+}: StatChangeProps) => {
+  const status = statusMap[change] || 'neutral'
+  const icon = iconMap[change]
 
-  const displayValue = function(status, value) {
-    if (value) {
-      return (
+  return (
+    <If condition={value}>
+      <div
+          className={classnames(className, buildCss('pb_stat_change_kit', status))}
+          id={id}
+      >
         <Body status={status}>
-          {displayIcon(icon)}
-          {value}%
+          <If condition={icon}>
+            <Icon
+                fixed_width
+                icon={icon}
+            />
+            {' '}
+          </If>
+          {`${value}%`}
         </Body>
-      )
-    }
-  }
-
-  return (
-    <div id={id} className={classnames(statChangeCSS(props, status), className)}>
-      {displayValue(status, value)}
-    </div>
+      </div>
+    </If>
   )
 }
 

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,20 +1,29 @@
-import React from "react"
-import {StatChange} from "../../"
+import React from 'react'
+import { StatChange } from '../../'
 
-function StatChangeDefault() {
+const StatChangeDefault = () => {
   return (
     <div>
-      <StatChange change="increase" value="28.4" />
+      <StatChange
+          change="increase"
+          value="28.4"
+      />
 
-      <br/>
+      <br />
 
-      <StatChange change="decrease" value={6.1} />
+      <StatChange
+          change="decrease"
+          value={6.1}
+      />
 
-      <br/>
+      <br />
 
-      <StatChange change="neutral" value={98} />
+      <StatChange
+          change="neutral"
+          value={98}
+      />
     </div>
   )
 }
 
-export default StatChangeDefault;
+export default StatChangeDefault

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

@@ -1 +1 @@
-export {default as StatChangeDefault} from './_stat_change_default.jsx';
+export { default as StatChangeDefault } from './_stat_change_default.jsx'

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import {Title} from '../'
+import { Title } from '../'
 
 type StatValueProps = {
   className?: String,
@@ -16,13 +16,16 @@ const StatValue = (props: StatValueProps) => {
     className,
     id,
     unit,
-    value=0
+    value = 0,
   } = props
 
   const displayValue = function(value) {
     if (value) {
       return (
-        <Title size={1} text={value} />
+        <Title
+            size={1}
+            text={value}
+        />
       )
     }
   }
@@ -30,13 +33,19 @@ const StatValue = (props: StatValueProps) => {
   const displayUnit = function(unit) {
     if (unit) {
       return (
-        <Title size={3} text={unit} />
+        <Title
+            size={3}
+            text={unit}
+        />
       )
     }
   }
 
   return (
-    <div id={id} className={classnames('pb_stat_value_kit', className)}>
+    <div
+        className={classnames('pb_stat_value_kit', className)}
+        id={id}
+    >
       <div className="pb_stat_value_wrapper">
         {displayValue(value)}
         &nbsp;

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -1,10 +1,10 @@
-import React from "react"
-import {StatValue} from "../../"
+import React from 'react'
+import { StatValue } from '../../'
 
-function StatValueDefault() {
+const StatValueDefault = () => {
   return (
     <StatValue value={1048} />
   )
 }
 
-export default StatValueDefault;
+export default StatValueDefault

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx

@@ -1,10 +1,13 @@
-import React from "react"
-import StatValue from "../_stat_value.jsx"
+import React from 'react'
+import StatValue from '../_stat_value.jsx'
 
-function StatValueUnit() {
+const StatValueUnit = () => {
   return (
-    <StatValue value="5,294" unit="appt" />
+    <StatValue
+        unit="appt"
+        value="5,294"
+    />
   )
 }
 
-export default StatValueUnit;
+export default StatValueUnit

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

@@ -1,2 +1,2 @@
-export {default as StatValueDefault} from './_stat_value_default.jsx';
-export {default as StatValueUnit} from './_stat_value_unit.jsx';
+export { default as StatValueDefault } from './_stat_value_default.jsx'
+export { default as StatValueUnit } from './_stat_value_unit.jsx'

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -1,61 +1,51 @@
-import React from 'react';
-import classnames from 'classnames';
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-  ]),
-  className: PropTypes.string,
-  container: PropTypes.bool,
-  dark: PropTypes.bool,
-  disable_hover: PropTypes.bool,
-  single_line: PropTypes.bool,
-  size: PropTypes.oneOf(["sm", "md", "lg"])
-};
+import React, { type Node } from 'react'
+import classnames from 'classnames'
 
-const defaultProps = {
-  container: true,
-  dark: false,
-  disable_hover: false,
-  single_line: false,
-  size: "sm"
-};
+type TableProps = {
+  children: Array<Node> | Node,
+  className: string,
+  container: boolean,
+  dark: boolean,
+  dataTable: boolean,
+  // @deprecated disable_hover since version 3.2.0, please use `disableHover`
+  disable_hover: boolean, // eslint-disable-line camelcase
+  disableHover: boolean,
+  // @deprecated single_line since version 3.2.0, please use `singleLine`
+  single_line: boolean, // eslint-disable-line camelcase
+  singleLine: boolean,
+  size: "sm" | "md" | "lg",
+}
 
-class Table extends React.Component {
-  render() {
-    const {
-      children,
-      className,
-      container,
-      dark,
-      disable_hover,
-      single_line,
-      size
-    } = this.props;
+const Table = ({
+  children,
+  className,
+  container = true,
+  dark = false,
+  dataTable = false,
+  disable_hover = false, // eslint-disable-line camelcase
+  disableHover = false,
+  single_line = false, // eslint-disable-line camelcase
+  singleLine = false,
+  size = 'sm',
+}: TableProps) => {
+  disableHover = disableHover || disable_hover // eslint-disable-line camelcase
+  singleLine = singleLine || single_line // eslint-disable-line camelcase
 
-    const css = classnames([
-      'pb_table',
-      `table-${size}`,
-      container ? `table-card` : null,
-      dark ? `table-dark` : null,
-      single_line ? `single-line` : null,
-      disable_hover ? `no-hover` : null,
-      className,
-    ])
+  const classes = classnames(className, 'pb_table', `table-${size}`, {
+    'table-card': container,
+    'table-dark': dark,
+    'data_table': dataTable,
+    'single-line': singleLine,
+    'no-hover': disableHover,
+  })
 
-    return (
-      <div>
-        <table className={css}>
-          {children}
-        </table>
-      </div>
-    )
-  }
+  return (
+    <table className={classes}>
+      {children}
+    </table>
+  )
 }
 
-Table.propTypes = propTypes;
-Table.defaultProps = defaultProps;
-
-export default Table;
+export default Table