playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx

@@ -1,24 +1,24 @@
-import React from "react"
-import DateStacked from "../_date_stacked.jsx"
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
 
-function DateStackedDark() {
+const DateStackedDark = () => {
   return (
     <div>
-      <DateStacked 
-        date={new Date()}
-        size='sm'
-        dark={true}
+      <DateStacked
+          dark
+          date={new Date()}
+          size="sm"
       />
 
-      <br></br>
+      <br />
 
-      <DateStacked 
-        date={new Date()}
-        size='md'
-        dark={true}
+      <DateStacked
+          dark
+          date={new Date()}
+          size="md"
       />
     </div>
   )
 }
 
-export default DateStackedDark;
+export default DateStackedDark

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,18 +1,25 @@
-import React from "react"
-import DateStacked from "../_date_stacked.jsx"
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
 
-function DateStackedDefault() {
+const DateStackedDefault = () => {
   return (
     <div>
-      
-      <DateStacked date={new Date()} align='left' size='sm'/>
 
-      <br/>
+      <DateStacked
+          align="left"
+          date={new Date()}
+          size="sm"
+      />
 
-      <DateStacked date={new Date()} size='md'/>
+      <br />
+
+      <DateStacked
+          date={new Date()}
+          size="md"
+      />
 
     </div>
   )
 }
 
-export default DateStackedDefault;
+export default DateStackedDefault

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,18 +1,24 @@
-import React from "react"
-import DateStacked from "../_date_stacked.jsx"
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
 
-function DateStackedNotCurrentYear() {
+const DateStackedNotCurrentYear = () => {
   return (
     <div>
-      
-      <DateStacked date={new Date('20 Mar 2018')} size='sm'/>
 
-      <br/>
+      <DateStacked
+          date={new Date('20 Mar 2018')}
+          size="sm"
+      />
 
-      <DateStacked date={new Date('20 Mar 2018')} size='md'/>
+      <br />
+
+      <DateStacked
+          date={new Date('20 Mar 2018')}
+          size="md"
+      />
 
     </div>
   )
 }
 
-export default DateStackedNotCurrentYear;
+export default DateStackedNotCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,18 +1,27 @@
-import React from "react"
-import DateStacked from "../_date_stacked.jsx"
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
 
-function DateStackedDefault() {
+const DateStackedDefault = () => {
   return (
     <div>
-      
-      <DateStacked date={new Date()} align='left' size='sm' reverse={true}/>
 
-      <br/>
+      <DateStacked
+          align="left"
+          date={new Date()}
+          reverse
+          size="sm"
+      />
 
-      <DateStacked date={new Date()} size='md'reverse={true}/>
+      <br />
+
+      <DateStacked
+          date={new Date()}
+          reverse
+          size="md"
+      />
 
     </div>
   )
 }
 
-export default DateStackedDefault;
+export default DateStackedDefault

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,19 +1,20 @@
-import React from "react"
-import DateStacked from "../_date_stacked.jsx"
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
 
-function DateStackedSizes() {
+const DateStackedSizes = () => {
   return (
     <div>
-      <DateStacked 
-        date={new Date()}
-        size='sm'
-      /><br></br>
-      <DateStacked 
-        date={new Date()}
-        size='md'
+      <DateStacked
+          date={new Date()}
+          size="sm"
+      />
+      <br />
+      <DateStacked
+          date={new Date()}
+          size="md"
       />
     </div>
   )
 }
 
-export default DateStackedSizes;
+export default DateStackedSizes

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

@@ -1,7 +1,7 @@
-export {default as DateStackedDefault} from './_date_stacked_default.jsx';
-export {default as DateStackedNotCurrentYear} from './_date_stacked_not_current_year.jsx';
-export {default as DateStackedReverse} from './_date_stacked_reverse.jsx';
-export {default as DateStackedSizes} from './_date_stacked_sizes.jsx';
-export {default as DateStackedAlign} from './_date_stacked_align.jsx';
-export {default as DateStackedDark} from './_date_stacked_dark.jsx';
+export { default as DateStackedDefault } from './_date_stacked_default.jsx'
+export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
+export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
+export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
+export { default as DateStackedAlign } from './_date_stacked_align.jsx'
+export { default as DateStackedDark } from './_date_stacked_dark.jsx'
 

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -1,9 +1,9 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
+import { buildCss } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime.js'
 
 import {
@@ -20,28 +20,21 @@ type DateYearStackedProps = {
   id?: String,
 }
 
-const kitClasses = ({align='left'}: DateYearStackedProps) => {
-  let classname = 'pb_date_year_stacked'
-  classname += `_${align}`
-  return classname
-}
-
 const DateYearStacked = ({
   align,
   className,
-  dark=false,
+  dark = false,
   date,
 }: DateYearStackedProps) => {
-
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(kitClasses({align}), className)
+  const css = classnames(className, buildCss('pb_date_year_stacked', align))
 
   return (
     <div className={css}>
       <Title
-        dark={dark}
-        size={4}
-        text={`${dateTimestamp.toDay()} ${dateTimestamp.toMonth().toUpperCase()}`}
+          dark={dark}
+          size={4}
+          text={`${dateTimestamp.toDay()} ${dateTimestamp.toMonth().toUpperCase()}`}
       />
       <Body color="light">{ dateTimestamp.toYear() }</Body>
     </div>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx

@@ -1,12 +1,23 @@
-import React from "react"
-import { DateYearStacked } from "../../"
+import React from 'react'
+import { DateYearStacked } from '../../'
 
-function DateYearStackedDark() {
+const DateYearStackedDark = () => {
   return (
     <div>
-      <DateYearStacked date={new Date() } dark />
-      <DateYearStacked align='center' date={new Date() } dark />
-      <DateYearStacked align='right' date={new Date() } dark />
+      <DateYearStacked
+          dark
+          date={new Date()}
+      />
+      <DateYearStacked
+          align="center"
+          dark
+          date={new Date()}
+      />
+      <DateYearStacked
+          align="right"
+          dark
+          date={new Date()}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,14 +1,20 @@
-import React from "react"
-import { DateYearStacked } from "../../"
+import React from 'react'
+import { DateYearStacked } from '../../'
 
-function DateYearStackedDefault() {
+const DateYearStackedDefault = () => {
   return (
     <div>
-      <DateYearStacked date={new Date() } />
-      <DateYearStacked align='center' date={new Date() } />
-      <DateYearStacked align='right' date={new Date() } />
+      <DateYearStacked date={new Date()} />
+      <DateYearStacked
+          align="center"
+          date={new Date()}
+      />
+      <DateYearStacked
+          align="right"
+          date={new Date()}
+      />
     </div>
   )
 }
 
-export default DateYearStackedDefault;
+export default DateYearStackedDefault

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

@@ -1,2 +1,2 @@
-export {default as DateYearStackedDefault} from './_date_year_stacked_default.jsx';
-export {default as DateYearStackedDark} from './_date_year_stacked_dark.jsx';
+export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'
+export { default as DateYearStackedDark } from './_date_year_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -1,5 +1,4 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 
@@ -12,39 +11,36 @@ type DistributionBarProps = {
 }
 
 const normalizeCharacters = (widths) => {
-  return widths.map(width => {
+  return widths.map((width) => {
     return parseInt(width.toString().replace(/[^0-9.]/gi, ''))
   })
 }
 
 const barValues = (normalizedValues) => {
-  let arrSum = value => value.reduce((a,b) => (a + b), 0)
-  let widthSum = arrSum(normalizedValues)
-  return normalizedValues.map((value,i) => {
-    return(
+  const arrSum = (value) => value.reduce((a, b) => (a + b), 0)
+  const widthSum = arrSum(normalizedValues)
+  return normalizedValues.map((value, i) => {
+    return (
       <div
+          className="pb_distribution_width"
           key={i}
-          className={`pb_distribution_width`}
-          style={{width:`${value*100/widthSum}%`}}
+          style={{ width: `${value * 100 / widthSum}%` }}
       />
     )
   })
 }
 
 const DistributionBar = ({
-    className,
-    data,
-    id,
-    size='lg',
-    widths=[1]
-  }: DistributionBarProps) => {
-    const normalizedValues = normalizeCharacters(widths)
+  size = 'lg',
+  widths = [1],
+}: DistributionBarProps) => {
+  const normalizedValues = normalizeCharacters(widths)
 
-    return(
-      <div className={`pb_distribution_bar_${size}`}>
-        {barValues(normalizedValues)}
-      </div>
-    )
+  return (
+    <div className={`pb_distribution_bar_${size}`}>
+      {barValues(normalizedValues)}
+    </div>
+  )
 }
 
 export default DistributionBar

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -1,24 +1,24 @@
-import React from "react"
-import DistributionBar from "../_distribution_bar.jsx"
+import React from 'react'
+import DistributionBar from '../_distribution_bar.jsx'
 
-function DistributionBarDefault() {
+const DistributionBarDefault = () => {
   return (
     <React.Fragment>
       <div>
         <DistributionBar
-          widths={[1,2,3,4,5,3,3,7]}
+            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
         />
       </div>
-      <br/>
-      <br/>
+      <br />
+      <br />
       <div>
         <DistributionBar
-          size='sm'
-          widths={[1,2,3,4,5,3,3,7]}
+            size="sm"
+            widths={[1, 2, 3, 4, 5, 3, 3, 7]}
         />
       </div>
     </React.Fragment>
   )
 }
 
-export default DistributionBarDefault;
+export default DistributionBarDefault

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

@@ -1 +1 @@
-export {default as DistributionBarDefault} from './_distribution_bar_default.jsx';
+export { default as DistributionBarDefault } from './_distribution_bar_default.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

@@ -2,6 +2,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon" }) %>
-  <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text?%>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon" }) %>
+    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text?%>
 <% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -1,59 +1,47 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Icon,
-  Title,
-} from '../'
+import { Icon, Title } from '../'
+
+const iconMap = {
+  'success': 'check',
+  'error': 'exclamation-triangle',
+  'neutral': 'info-circle',
+  'tip': 'info-circle',
+}
 
 type FixedConfirmationToastProps = {
   className?: String,
   data?: String,
   id?: String,
-  status?: 'success' | 'error' | 'neutral',
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: String,
 }
 
 const FixedConfirmationToast = ({
   className,
-  data,
-  id,
-  status='neutral',
-  text
+  status = 'neutral',
+  text,
 }: FixedConfirmationToastProps) => {
-  const css = classnames([
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    className,
-  ])
-
-const icon = (function(status) {
-  switch(status) {
-    case "success":
-      return "check";
-    case "error":
-      return "exclamation-triangle";
-    case "neutral":
-      return "info-circle";
-    default:
-      return null;
-  }
-})(status)
-
-const displayIcon = function(icon) {
-  if (icon) {
-    return (
-      <Icon icon={icon} fixed_width={true} className="pb_icon"/>
-    )
-  }
-}
-
-return (
-  <div className={css}>
-    {displayIcon(icon)}
-    <Title size={4} className="pb_fixed_confirmation_toast_text" text={text} />
+  const css = classnames(className, `pb_fixed_confirmation_toast_kit_${status}`)
+  const icon = iconMap[status]
+
+  return (
+    <div className={css}>
+      <If condition={icon}>
+        <Icon
+            className="pb_icon"
+            fixed_width
+            icon={icon}
+        />
+      </If>
+      <Title
+          className="pb_fixed_confirmation_toast_text"
+          size={4}
+          text={text}
+      />
     </div>
   )
 }