playbook_ui 3.1.0 → 3.2.0

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

@@ -1,8 +1,8 @@
-export {default as IconDefault} from './_icon_default.jsx';
-export {default as IconRotate} from './_icon_rotate.jsx';
-export {default as IconFlip} from './_icon_flip.jsx';
-export {default as IconAnimate} from './_icon_animate.jsx';
-export {default as IconPull} from './_icon_pull.jsx';
-export {default as IconBorder} from './_icon_border.jsx';
-export {default as IconSizes} from './_icon_sizes.jsx';
-export {default as IconDefaultDark} from './_icon_default_dark.jsx';
+export { default as IconDefault } from './_icon_default.jsx'
+export { default as IconRotate } from './_icon_rotate.jsx'
+export { default as IconFlip } from './_icon_flip.jsx'
+export { default as IconAnimate } from './_icon_animate.jsx'
+export { default as IconPull } from './_icon_pull.jsx'
+export { default as IconBorder } from './_icon_border.jsx'
+export { default as IconSizes } from './_icon_sizes.jsx'
+export { default as IconDefaultDark } from './_icon_default_dark.jsx'

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 
-import React from 'react';
-import {Icon} from "../";
+import React from 'react'
+import { Icon } from '../'
 
 const IconCircleProps = {
   className: String,
@@ -9,12 +9,12 @@ const IconCircleProps = {
   id: String,
   size: String,
   variant: String,
-};
+}
 
 const IconCircle = ({
   icon,
-  size='md',
-  variant='default'
+  size = 'md',
+  variant = 'default',
 }: IconCircleProps) => (
   <div className={`pb_icon_circle_kit_${size}_${variant}`}>
     <Icon icon={icon} />

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -1,19 +1,52 @@
 import React from 'react'
-import classnames from 'classnames'
-import {IconCircle} from '../../'
+import { IconCircle } from '../../'
 
-function IconCircleColor() {
+const IconCircleColor = () => {
   return (
     <div>
-      <IconCircle icon="rocket" size="sm" variant="royal" /><br />
-      <IconCircle icon="rocket" size="sm" variant="blue" /><br />
-      <IconCircle icon="rocket" size="sm" variant="purple" /><br />
-      <IconCircle icon="rocket" size="sm" variant="teal" /><br />
-      <IconCircle icon="rocket" size="sm" variant="red" /><br />
-      <IconCircle icon="rocket" size="sm" variant="yellow" /><br />
-      <IconCircle icon="rocket" size="sm" variant="green" />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="royal"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="blue"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="purple"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="teal"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="red"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="yellow"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="sm"
+          variant="green"
+      />
     </div>
   )
 }
 
-export default IconCircleColor;
+export default IconCircleColor

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import classnames from 'classnames'
-import {IconCircle} from '../../'
+import { IconCircle } from '../../'
 
-function IconCircleDefault() {
+const IconCircleDefault = () => {
   return (
     <div>
-      <IconCircle icon="rocket" size="md"/>
+      <IconCircle
+          icon="rocket"
+          size="md"
+      />
     </div>
   )
 }
 
-export default IconCircleDefault;
+export default IconCircleDefault

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_size.jsx

@@ -1,16 +1,30 @@
 import React from 'react'
-import classnames from 'classnames'
-import {IconCircle} from '../..'
+import { IconCircle } from '../..'
 
-function IconCircleSize() {
+const IconCircleSize = () => {
   return (
     <div>
-      <IconCircle icon="rocket" size="sm"/><br />
-      <IconCircle icon="rocket" size="md"/><br />
-      <IconCircle icon="rocket" size="lg"/><br />
-      <IconCircle icon="rocket" size="xl"/>
+      <IconCircle
+          icon="rocket"
+          size="sm"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="md"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="lg"
+      />
+      <br />
+      <IconCircle
+          icon="rocket"
+          size="xl"
+      />
     </div>
   )
 }
 
-export default IconCircleSize;
+export default IconCircleSize

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

@@ -1,3 +1,3 @@
-export {default as IconCircleColor} from './_icon_circle_color.jsx';
-export {default as IconCircleDefault} from './_icon_circle_default.jsx';
-export {default as IconCircleSize} from './_icon_circle_size.jsx';
+export { default as IconCircleColor } from './_icon_circle_color.jsx'
+export { default as IconCircleDefault } from './_icon_circle_default.jsx'
+export { default as IconCircleSize } from './_icon_circle_size.jsx'

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -1,21 +1,57 @@
-import React from 'react';
-import PropTypes from "prop-types";
+/* @flow */
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
+import React from 'react'
+import classnames from 'classnames'
+import {
+  Body,
+  Icon,
+} from '../'
 
-class IconValue extends React.Component {
-  render() {
-    return (
-      <div className="pb_icon_value">
-        <span>ICON VALUE CONTENT</span>
-      </div>
-    )
-  }
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type IconValueProps = {
+  align?: 'left' | 'center' | 'right',
+  aria?: object,
+  className?: string,
+  data?: object,
+  icon: string,
+  id?: number,
+  text: string,
 }
 
-IconValue.propTypes = propTypes;
+const IconValue = ({
+  align = 'left',
+  aria = {},
+  className,
+  data = {},
+  icon,
+  id,
+  text,
+}: IconValueProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_icon_value_kit', align)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(className, pbCss)}
+        id={id}
+    >
+      <Body color="light">
+        <Icon
+            fixedWidth
+            icon={icon}
+        />
+        {text}
+      </Body>
+    </div>
+  )
+}
 
-export default IconValue;
+export default IconValue

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx

@@ -1,9 +1,28 @@
-import React from "react"
-import {IconValue} from "../../"
+import React from 'react'
+import { IconValue } from '../../'
 
-function IconValueDefault() {
+const IconValueDefault = () => {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <div>
+      <IconValue
+          icon="clipboard"
+          text="33-123456"
+      />
+
+      <br />
+
+      <IconValue
+          icon="heart"
+          text="93"
+      />
+
+      <br />
+
+      <IconValue
+          icon="clock"
+          text="15min"
+      />
+    </div>
   )
 }
 

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

@@ -1 +1 @@
-export {default as IconValueDefault} from './_icon_value_default.jsx';
+export { default as IconValueDefault } from './_icon_value_default.jsx'

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -1,32 +1,21 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+/* @flow */
 
+import React from 'react'
 
-const propTypes = {
-  url: PropTypes.string.isRequired,
-  alt: PropTypes.string
-};
-
-const defaultProps = {
-  alt: '',
-  url: ''
-};
-
-
-class Image extends Component {
-  render() {
-    const { alt, url } = this.props;
-    return (
-      <img
-          alt={alt}
-          className={"pb_image lazyload blur_up"}
-          data-src={url}
-      />
-    );
-  }
+type ImageProps = {
+  url: string,
+  alt?: string,
 }
 
-Image.propTypes = propTypes;
-Image.defaultProps = defaultProps;
+const Image = ({
+  alt = '',
+  url = '',
+}: ImageProps) => (
+  <img
+      alt={alt}
+      className="pb_image lazyload blur_up"
+      data-src={url}
+  />
+)
 
-export default Image;
+export default Image

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import {Image} from "../../"
+import React from 'react'
+import { Image } from '../../'
 
-function DefaultImage() {
+const DefaultImage = () => {
   return (
     <div>
       <Image url="https://unsplash.it/500/400/?image=634" />

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

@@ -1 +1 @@
-export {default as DefaultImage} from './_default_image.jsx';
+export { default as DefaultImage } from './_default_image.jsx'

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -11,7 +11,7 @@ type DateTimeType = {
 }
 
 export default class DateTime {
-  constructor({ value, zone='America/New_York' }: DateTimeType) {
+  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
     this.value = this.convertToTimestampZone(value, zone)
   }
 
@@ -19,31 +19,31 @@ export default class DateTime {
     return moment(value).tz(zone)
   }
 
-  convertToTimezone(zone='America/New_York') {
+  convertToTimezone() {
     return this.value.strftime('%a')
   }
 
   toYear() {
-    return this.value.strftime("%Y")
+    return this.value.strftime('%Y')
   }
 
   toMonth() {
-    return this.value.strftime("%b")
+    return this.value.strftime('%b')
   }
 
   toMonthFull() {
-    return this.value.strftime("%B")
+    return this.value.strftime('%B')
   }
 
   toDay() {
-    return this.value.strftime("%e")
+    return this.value.strftime('%e')
   }
 
   toWeekday() {
-    return this.value.strftime("%a")
+    return this.value.strftime('%a')
   }
 
   toIso() {
-    return this.value.toISOString();
+    return this.value.toISOString()
   }
 }

data/app/pb_kits/playbook/pb_label_pill/_label_pill.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 LabelPill extends React.Component {
   render() {
     return (
       <div className="pb_label_pill">
-        <span>LABEL PILL CONTENT</span>
+        <span>{'LABEL PILL CONTENT'}</span>
       </div>
     )
   }
 }
 
-LabelPill.propTypes = propTypes;
+LabelPill.propTypes = propTypes
 
-export default LabelPill;
+export default LabelPill

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx

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