playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import {HomeAddressStreet} from "../../"
+import React from 'react'
+import { HomeAddressStreet } from '../../'
 
-function HomeAddressStreetDark() {
+const HomeAddressStreetDark = () => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -10,10 +10,10 @@ function HomeAddressStreetDark() {
         dark
         homeId={8250263}
         state="PA"
-        zipcode="19382"
         territory="PHL"
+        zipcode="19382"
     />
   )
 }
 
-export default HomeAddressStreetDark;
+export default HomeAddressStreetDark

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -1,7 +1,7 @@
-import React from "react"
-import {HomeAddressStreet} from "../../"
+import React from 'react'
+import { HomeAddressStreet } from '../../'
 
-function HomeAddressStreetDefault() {
+const HomeAddressStreetDefault = () => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -10,10 +10,10 @@ function HomeAddressStreetDefault() {
         homeId={8250263}
         houseStyle="Colonial"
         state="PA"
-        zipcode="19382"
         territory="PHL"
+        zipcode="19382"
     />
   )
 }
 
-export default HomeAddressStreetDefault;
+export default HomeAddressStreetDefault

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx

@@ -1,18 +1,16 @@
-import React from "react"
-import {HomeAddressStreet} from "../../"
+import React from 'react'
+import { HomeAddressStreet } from '../../'
 
-function HomeAddressStreetModified() {
+const HomeAddressStreetModified = () => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
         city="West Chester"
-        addressCont="M18"
-        homeId={8250263}
         state="PA"
-        zipcode="19382"
         territory="PHL"
+        zipcode="19382"
     />
   )
 }
 
-export default HomeAddressStreetModified;
+export default HomeAddressStreetModified

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

@@ -1,3 +1,3 @@
-export {default as HomeAddressStreetDefault} from './_home_address_street_default.jsx';
-export {default as HomeAddressStreetModified} from './_home_address_street_modified.jsx';
-export {default as HomeAddressStreetDark} from './_home_address_street_dark.jsx';
+export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
+export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
+export { default as HomeAddressStreetDark } from './_home_address_street_dark.jsx'

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -17,73 +17,48 @@ type IconProps = {
   pulse?: Boolean,
   rotation?: 90 | 180 | 270,
   size?: 'lg' | 'xs' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x',
-  spin?: Boolean
+  spin?: Boolean,
 }
 
-const Icon = (props: IconProps) => {
-  const {
-    aria,
-    border=false,
-    className,
-    fixedWidth=true,
-    flip=false,
-    icon,
-    id,
-    inverse=false,
-    listItem=false,
-    pull,
-    pulse=false,
-    rotation,
-    size,
-    spin=false
-  } = props
-
-  const hClass = "fa-flip-horizontal"
-  const vClass = "fa-flip-vertical"
-
-  const flipClass = (function(flip) {
-    switch(flip) {
-      case 'horizontal':
-        return hClass;
-      case 'vertical':
-        return vClass;
-      case 'both':
-        return `${vClass} ${hClass}`;
-      default:
-        return '';
-    }
-  })(flip)
-
-  const iconClass = icon !== '' && icon !== undefined ? `fa-${icon}` : ''
-  const borderClass = border ? 'fa-border' : ''
-  const fixedWidthClass = fixedWidth ? 'fa-fw' : ''
-  const inverseClass = inverse ? 'fa-inverse' : ''
-  const listItemClass = listItem ? 'fa-li' : ''
-  const pullClass = pull !== '' && pull !== undefined ? `fa-pull-${pull}` : ''
-  const pulseClass = pulse ? 'fa-pulse' : ''
-  const rotationClass = rotation !== '' && rotation !== undefined ? `fa-rotate-${rotation}` : ''
-  const sizeClass = size !== '' && size !== undefined ? `fa-${size}` : ''
-  const spinClass = spin ? 'fa-spin' : ''
+const flipMap = {
+  'horizontal': 'fa-flip-horizontal',
+  'vertical': 'fa-flip-vertical',
+  'both': 'fa-flip-horizontal fa-flip-vertical',
+}
 
-  const iconCss = classnames(
-    'pb_icon_kit',
-    'far',
-    iconClass,
-    borderClass,
-    fixedWidthClass,
-    flipClass,
-    inverseClass,
-    listItemClass,
-    pullClass,
-    pulseClass,
-    rotationClass,
-    sizeClass,
-    spinClass,
-    className
-  )
+const Icon = ({
+  border = false,
+  className,
+  fixedWidth = true,
+  flip = false,
+  icon,
+  id,
+  inverse = false,
+  listItem = false,
+  pull,
+  pulse = false,
+  rotation,
+  size,
+  spin = false,
+}: IconProps) => {
+  const classes = classnames(className, flipMap[flip], 'pb_icon_kit', 'far', {
+    'fa-border': border,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-li': listItem,
+    'fa-pulse': pulse,
+    'fa-spin': spin,
+    [`fa-${icon}`]: icon,
+    [`fa-${size}`]: size,
+    [`fa-pull-${pull}`]: pull,
+    [`fa-rotate-${rotation}`]: rotation,
+  })
 
   return (
-    <i id={id} className={iconCss}></i>
+    <i
+        className={classes}
+        id={id}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx

@@ -1,14 +1,32 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconAnimate() {
+const IconAnimate = () => {
   return (
     <div>
-      <p><Icon icon="spinner" size="2x" spin fixedWidth /> <span>Spin</span></p>
-      <br/>
-      <p><Icon icon="spinner" size="2x" pulse fixedWidth /> <span>Pulse</span></p>
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            size="2x"
+            spin
+        />
+        {' '}
+        <span>{'Spin'}</span>
+      </p>
+      <br />
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+            size="2x"
+        />
+        {' '}
+        <span>{'Pulse'}</span>
+      </p>
     </div>
   )
 }
 
-export default IconAnimate;
+export default IconAnimate

data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx

@@ -1,12 +1,17 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconBorder() {
+const IconBorder = () => {
   return (
     <div>
-      <Icon icon="user" size="2x" border fixedWidth />
+      <Icon
+          border
+          fixedWidth
+          icon="user"
+          size="2x"
+      />
     </div>
   )
 }
 
-export default IconBorder;
+export default IconBorder

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -1,12 +1,15 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconDefault() {
+const IconDefault = () => {
   return (
     <div>
-      <Icon icon="user" fixedWidth />
+      <Icon
+          fixedWidth
+          icon="user"
+      />
     </div>
   )
 }
 
-export default IconDefault;
+export default IconDefault

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -1,12 +1,15 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconDefaultDark() {
+const IconDefaultDark = () => {
   return (
     <div>
-      <Icon icon="user" fixedWidth />
+      <Icon
+          fixedWidth
+          icon="user"
+      />
     </div>
   )
 }
 
-export default IconDefaultDark;
+export default IconDefaultDark

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx

@@ -1,14 +1,29 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconFlip() {
+const IconFlip = () => {
   return (
     <div>
-      <Icon icon="question-circle" flip="horizontal" size="2x" fixedWidth />
-      <Icon icon="question-circle" flip="vertical" size="2x" fixedWidth />
-      <Icon icon="question-circle" flip="both" size="2x" fixedWidth />
+      <Icon
+          fixedWidth
+          flip="horizontal"
+          icon="question-circle"
+          size="2x"
+      />
+      <Icon
+          fixedWidth
+          flip="vertical"
+          icon="question-circle"
+          size="2x"
+      />
+      <Icon
+          fixedWidth
+          flip="both"
+          icon="question-circle"
+          size="2x"
+      />
     </div>
   )
 }
 
-export default IconFlip;
+export default IconFlip

data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx

@@ -1,13 +1,23 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconPull() {
+const IconPull = () => {
   return (
     <div>
-      <Icon icon="arrow-left" pull="left" size="2x" fixedWidth />
-      <Icon icon="arrow-right" pull="right" size="2x" fixedWidth />
+      <Icon
+          fixedWidth
+          icon="arrow-left"
+          pull="left"
+          size="2x"
+      />
+      <Icon
+          fixedWidth
+          icon="arrow-right"
+          pull="right"
+          size="2x"
+      />
     </div>
   )
 }
 
-export default IconPull;
+export default IconPull

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx

@@ -1,14 +1,29 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconRotate() {
+const IconRotate = () => {
   return (
     <div>
-      <Icon icon="user" rotation={90} size="2x" fixedWidth />
-      <Icon icon="user" rotation={180} size="2x" fixedWidth />
-      <Icon icon="user" rotation={270} size="2x" fixedWidth />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={90}
+          size="2x"
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={180}
+          size="2x"
+      />
+      <Icon
+          fixedWidth
+          icon="user"
+          rotation={270}
+          size="2x"
+      />
     </div>
   )
 }
 
-export default IconRotate;
+export default IconRotate

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.jsx

@@ -1,27 +1,119 @@
-import React from "react"
-import {Icon} from "../../"
+import React from 'react'
+import { Icon } from '../../'
 
-function IconSizes() {
+const IconSizes = () => {
   return (
     <div>
-      <p><Icon icon="user" size="lg" /> <span>Large</span></p>
-      <p><Icon icon="user" size="sm" /> <span>Small</span></p>
-      <p><Icon icon="user" size="xs" /> <span>XSmall</span></p>
+      <p>
+        <Icon
+            icon="user"
+            size="lg"
+        />
+        {' '}
+        <span>{'Large'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="sm"
+        />
+        {' '}
+        <span>{'Small'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="xs"
+        />
+        {' '}
+        <span>{'XSmall'}</span>
+      </p>
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <p><Icon icon="user" size="1x" /> <span>1x</span></p>
-      <p><Icon icon="user" size="2x" /> <span>2x</span></p>
-      <p><Icon icon="user" size="3x" /> <span>3x</span></p>
-      <p><Icon icon="user" size="4x" /> <span>4x</span></p>
-      <p><Icon icon="user" size="5x" /> <span>5x</span></p>
-      <p><Icon icon="user" size="6x" /> <span>6x</span></p>
-      <p><Icon icon="user" size="7x" /> <span>7x</span></p>
-      <p><Icon icon="user" size="8x" /> <span>8x</span></p>
-      <p><Icon icon="user" size="9x" /> <span>9x</span></p>
-      <p><Icon icon="user" size="10x" /> <span>10x</span></p>
+      <p>
+        <Icon
+            icon="user"
+            size="1x"
+        />
+        {' '}
+        <span>{'1x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="2x"
+        />
+        {' '}
+        <span>{'2x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="3x"
+        />
+        {' '}
+        <span>{'3x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="4x"
+        />
+        {' '}
+        <span>{'4x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="5x"
+        />
+        {' '}
+        <span>{'5x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="6x"
+        />
+        {' '}
+        <span>{'6x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="7x"
+        />
+        {' '}
+        <span>{'7x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="8x"
+        />
+        {' '}
+        <span>{'8x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="9x"
+        />
+        {' '}
+        <span>{'9x'}</span>
+      </p>
+      <p>
+        <Icon
+            icon="user"
+            size="10x"
+        />
+        {' '}
+        <span>{'10x'}</span>
+      </p>
     </div>
   )
 }
 
-export default IconSizes;
+export default IconSizes