playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,34 +1,36 @@
-import React from "react"
-import {DashboardValue} from "../../"
+import React from 'react'
+import { DashboardValue } from '../../'
 
-function DashboardValueAlign() {
+const DashboardValueAlign = () => {
   return (
     <div>
       <DashboardValue
-          statChange={{change: "decrease", value: "26.1"}}
+          statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
-          statValue={{value: "1,428", unit: "appts"}}
+          statValue={{ value: '1,428', unit: 'appts' }}
       />
 
-      <br/><br/>
+      <br />
+      <br />
 
       <DashboardValue
           align="center"
-          statChange={{change: "decrease", value: 56.1}}
+          statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
-          statValue={{value: "1,428", unit: "appts"}}
+          statValue={{ value: '1,428', unit: 'appts' }}
       />
 
-      <br/><br/>
+      <br />
+      <br />
 
       <DashboardValue
           align="right"
-          statChange={{change: "decrease", value: 86}}
+          statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"
-          statValue={{value: "1,428", unit: "appts"}}
+          statValue={{ value: '1,428', unit: 'appts' }}
       />
     </div>
   )
 }
 
-export default DashboardValueAlign;
+export default DashboardValueAlign

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,32 +1,34 @@
-import React from "react"
-import {DashboardValue} from "../../"
+import React from 'react'
+import { DashboardValue } from '../../'
 
-function DashboardValueDefault() {
+const DashboardValueDefault = () => {
   return (
     <div>
       <DashboardValue
-          statChange={{change: "decrease", value: "26.1"}}
+          statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
-          statValue={{value: "1,428", unit: "appts"}}
+          statValue={{ value: '1,428', unit: 'appts' }}
       />
 
-      <br/><br/>
+      <br />
+      <br />
 
       <DashboardValue
-          statChange={{change: "increase", value: 56.1}}
+          statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
-          statValue={{value: "938", unit: "homes"}}
+          statValue={{ value: '938', unit: 'homes' }}
       />
 
-      <br/><br/>
+      <br />
+      <br />
 
       <DashboardValue
-          statChange={{value: 86}}
+          statChange={{ value: 86 }}
           statLabel="Neutral Value"
-          statValue={{value: "261", unit: "windows"}}
+          statValue={{ value: '261', unit: 'windows' }}
       />
     </div>
   )
 }
 
-export default DashboardValueDefault;
+export default DashboardValueDefault

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

@@ -1,2 +1,2 @@
-export {default as DashboardValueDefault} from './_dashboard_value_default.jsx';
-export {default as DashboardValueAlign} from './_dashboard_value_align.jsx';
+export { default as DashboardValueDefault } from './_dashboard_value_default.jsx'
+export { default as DashboardValueAlign } from './_dashboard_value_align.jsx'

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -1,17 +1,10 @@
 /* @flow */
 
-import React from 'react';
+import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import moment from 'moment'
-import {Icon} from '../'
+import { Icon } from '../'
 
-type DateProps = {
-  size?: 'xs' | 'sm' | 'lg',
-  value?: String,
-}
-
-
-const defaultDateString = value => {
+const defaultDateString = (value: DateTime) => {
   const weekday = value.toWeekday().toUpperCase()
   const month = value.toMonth().toUpperCase()
   const day = value.toDay()
@@ -19,37 +12,49 @@ const defaultDateString = value => {
   return `${weekday} · ${month} ${day}`
 }
 
-const largeDateString = value => {
+const largeDateString = (value: DateTime) => {
   const month = value.toMonth().toUpperCase()
   const day = value.toDay()
 
   return `${month} ${day}`
 }
 
+type DateSubcomponent = {
+  value: DateTime
+}
 
-const ExtraSmallDate = ({ value }) => (
-  <h3 className='pb_title_kit_4'>{defaultDateString(value)}</h3>
+const ExtraSmallDate = ({ value }: DateSubcomponent) => (
+  <h3 className="pb_title_kit_4">{defaultDateString(value)}</h3>
 )
 
-const SmallDate = ({ value }) => (
-  <h3 className='pb_title_kit_4'><Icon icon="calendar" fixedWidth="true" />{defaultDateString(value)}</h3>
+const SmallDate = ({ value }: DateSubcomponent) => (
+  <h3 className="pb_title_kit_4">
+    <Icon
+        fixedWidth
+        icon="calendar"
+    />
+    {defaultDateString(value)}
+  </h3>
 )
 
-const LargeDate = ({ value }) => (
-  <h3 className='pb_title_kit_3'>{largeDateString(value)}</h3>
+const LargeDate = ({ value }: DateSubcomponent) => (
+  <h3 className="pb_title_kit_3">{largeDateString(value)}</h3>
 )
 
+type PbDateProps = {
+  size?: 'xs' | 'sm' | 'lg',
+  value?: String,
+}
 
-export default function Date(props: DateProps) {
-  const {
-    size,
-    value,
-  } = props
-
-  const dateTimeValue = new DateTime({ value: value });
-
-  if (size == 'xs') return <ExtraSmallDate value={dateTimeValue} />
-  if (size == 'lg') return <LargeDate value={dateTimeValue} />
+const PbDate = ({
+  size,
+  value,
+}: PbDateProps) => {
+  const date = new DateTime({ value: value })
 
-  return <SmallDate value={dateTimeValue} />
+  if (size == 'xs') return <ExtraSmallDate value={date} />
+  if (size == 'lg') return <LargeDate value={date} />
+  return <SmallDate value={date} />
 }
+
+export default PbDate

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,20 +1,26 @@
-import React from "react"
-import {Date} from "../../"
+import React from 'react'
+import { Date } from '../../'
 
-function DateDefault() {
+const DateDefault = () => {
   return (
     <div>
-      <Date size='lg' value='1995-12-25' />
+      <Date
+          size="lg"
+          value="1995-12-25"
+      />
 
-      <br/>
+      <br />
 
-      <Date value='17 Mar 69' />
+      <Date value="17 Mar 69" />
 
-      <br/>
+      <br />
 
-      <Date size='xs' value='2020-04-20T04:20:00.000Z' />
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
+      />
     </div>
   )
 }
 
-export default DateDefault;
+export default DateDefault

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

@@ -1 +1 @@
-export {default as DateDefault} from './_date_default.jsx';
+export { default as DateDefault } from './_date_default.jsx'

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -1,5 +1,4 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
@@ -9,7 +8,6 @@ import {
   Icon,
 } from '../'
 
-
 type DateRangeInlineProps = {
   className?: String,
   data?: String,
@@ -19,34 +17,43 @@ type DateRangeInlineProps = {
 }
 
 const dateTimestamp = (dateValue) => {
-  let date = new DateTime({ value: dateValue })
+  const date = new DateTime({ value: dateValue })
   return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
 }
 
 const dateTimeIso = (dateValue) => {
-  let date = new DateTime({ value: dateValue })
+  const date = new DateTime({ value: dateValue })
   return date.toIso()
 }
 
 const DateRangeInline = ({
-  className,
-  data,
   endDate,
-  id,
-  startDate
+  startDate,
 }: DateRangeInlineProps) => (
   <div>
-    <Body tag="span" color="light">
-      <Icon icon="calendar-alt" fixedWidth="true" />
+    <Body
+        color="light"
+        tag="span"
+    >
+      <Icon
+          fixedWidth
+          icon="calendar-alt"
+      />
     </Body>
     <Body tag="span">
-      <time dateTime={dateTimeIso(startDate)} >{` ${dateTimestamp(startDate)} `}</time>
+      <time dateTime={dateTimeIso(startDate)}>{` ${dateTimestamp(startDate)} `}</time>
     </Body>
-    <Body tag="span" color="light">
-      <Icon icon="long-arrow-right" fixedWidth="true" />
+    <Body
+        color="light"
+        tag="span"
+    >
+      <Icon
+          fixedWidth
+          icon="long-arrow-right"
+      />
     </Body>
     <Body tag="span">
-      <time dateTime={dateTimeIso(endDate)} >{` ${dateTimestamp(endDate)} `}</time>
+      <time dateTime={dateTimeIso(endDate)}>{` ${dateTimestamp(endDate)} `}</time>
     </Body>
   </div>
 )

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx

@@ -1,12 +1,15 @@
-import React from "react"
-import DateRangeInline from "../_date_range_inline.jsx"
+import React from 'react'
+import DateRangeInline from '../_date_range_inline.jsx'
 
-function DateRangeInlineDefault() {
+const DateRangeInlineDefault = () => {
   return (
     <div>
-      <DateRangeInline startDate={new Date('18 Jun 2019')} endDate={new Date('20 Mar 2020')} />
+      <DateRangeInline
+          endDate={new Date('20 Mar 2020')}
+          startDate={new Date('18 Jun 2019')}
+      />
     </div>
   )
 }
 
-export default DateRangeInlineDefault;
+export default DateRangeInlineDefault

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

@@ -1 +1 @@
-export {default as DateRangeInlineDefault} from './_date_range_inline_default.jsx';
+export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -2,15 +2,13 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
 
-import {
-  Title,
-  Caption
-} from '../'
+import DateTime from '../pb_kit/dateTime.js'
+import { buildCss } from '../utilities/props'
+import { Caption, Title } from '../'
 
 type DateStackedProps = {
-  align?: 'center' | 'right',
+  align?: 'left' | 'center' | 'right',
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
@@ -20,64 +18,45 @@ type DateStackedProps = {
   reverse?: Boolean,
 }
 
-const kitClasses = ({
-  align='left',
-  size='sm',
-  dark=false,
-  reverse=false,
-
-}: DateStackedProps) => {
-  const alignStyle = align !== '' ? `_${align}` : ''
-  const sizeStyle = size !== '' ? `_${size}` : ''
-  const themeStyle = dark === true ? '_dark' : ''
-  const reverseStyle = reverse === true ? '_reverse' : ''
-  return 'pb_date_stacked_kit' + alignStyle + sizeStyle + themeStyle + reverseStyle
-}
-
 const sizes = {
   sm: 4,
   md: 3,
 }
 
-const DateStacked = (props: DateStackedProps) => {
-  const {
-    align='left',
-    className,
-    dark=false,
-    reverse=false,
-    date,
-    size='sm'
-  } = props
+const DateStacked = ({
+  align = 'left',
+  reverse = false,
+  className,
+  dark = false,
+  date,
+  size = 'sm',
+}: DateStackedProps) => {
+  const classes = classnames(className, buildCss('pb_date_stacked_kit', align, size, {
+    'dark': dark,
+    'reverse': reverse,
+  }))
 
+  const currentYear = new Date().getFullYear().toString()
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(kitClasses(props), className)
-
-  const current_year = new Date().getFullYear().toString()
-  const input_year = dateTimestamp.toYear().toString()
-
-  const print_year = dateTimestamp => {
-    if (current_year != input_year) {
-      return (
-        <Caption size='xs'>{input_year}</Caption>
-      )
-    }
-  }
+  const inputYear = dateTimestamp.toYear().toString()
 
   return (
-    <div className={css}>
-      <div class="pb_date_stacked_day_month">
+    <div className={classes}>
+      <div className="pb_date_stacked_day_month">
         <Caption
-          text={`${dateTimestamp.toMonth().toUpperCase()}`}
+            text={dateTimestamp.toMonth().toUpperCase()}
         />
         <Title
-          dark={dark}
-          size={sizes[size]}
-          text={`${dateTimestamp.toDay()}`}
+            dark={dark}
+            size={sizes[size]}
+            text={dateTimestamp.toDay()}
         />
       </div>
-        {print_year(date)}
+      <If condition={currentYear != inputYear}>
+        <Caption size="xs">{inputYear}</Caption>
+      </If>
     </div>
   )
 }
 
-export default DateStacked
+export default DateStacked

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

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