playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -1,28 +1,28 @@
-import React from "react"
-import {PersonContact} from "../../"
+import React from 'react'
+import { PersonContact } from '../../'
 
-function PersonContactDefault() {
+const PersonContactDefault = () => {
   return (
     <div>
       <PersonContact
-        firstName="Pauline"
-        lastName="Smith"
-        contacts={[
+          contacts={[
           {
-            contactType: "email",
-            contactValue: "email@example.com",
+            contactType: 'email',
+            contactValue: 'email@example.com',
           },
           {
-            contactValue: "5555555555",
+            contactValue: '5555555555',
           },
           {
-            contactType: "work",
-            contactValue: "3245627482",
-          }
+            contactType: 'work',
+            contactValue: '3245627482',
+          },
         ]}
+          firstName="Pauline"
+          lastName="Smith"
       />
     </div>
   )
 }
 
-export default PersonContactDefault;
+export default PersonContactDefault

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx

@@ -1,37 +1,37 @@
-import React from "react"
-import {PersonContact} from "../../"
+import React from 'react'
+import { PersonContact } from '../../'
 
-function PersonContactMultiple() {
+const PersonContactMultiple = () => {
   return (
     <div>
       <PersonContact
-        firstName="Harvey"
-        lastName="Walters"
-        contacts={[
+          contacts={[
           {
-            contactType: "email",
-            contactValue: "email@example.com",
+            contactType: 'email',
+            contactValue: 'email@example.com',
           },
           {
-            contactValue: "5555555555",
+            contactValue: '5555555555',
           },
           {
-            contactType: "work",
-            contactValue: "3245627482",
-          }
+            contactType: 'work',
+            contactValue: '3245627482',
+          },
         ]}
+          firstName="Harvey"
+          lastName="Walters"
       />
       <PersonContact
-        firstName="Brenda"
-        lastName="Walters"
-        contacts={[
+          contacts={[
           {
-            contactValue: "5555555555",
-          }
+            contactValue: '5555555555',
+          },
         ]}
+          firstName="Brenda"
+          lastName="Walters"
       />
     </div>
   )
 }
 
-export default PersonContactMultiple;
+export default PersonContactMultiple

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx

@@ -1,30 +1,30 @@
-import React from "react"
-import {PersonContact} from "../../"
+import React from 'react'
+import { PersonContact } from '../../'
 
-function PersonContactWithDetail() {
+const PersonContactWithDetail = () => {
   return (
     <div>
       <PersonContact
-        firstName="Harvey"
-        lastName="Walters"
-        contacts={[
+          contacts={[
           {
-            contactType: "email",
-            contactValue: "email@example.com",
+            contactType: 'email',
+            contactValue: 'email@example.com',
           },
           {
-            contactValue: "5555555555",
-            contactDetail: "Home",
+            contactValue: '5555555555',
+            contactDetail: 'Home',
           },
           {
-            contactType: "work",
-            contactValue: "3245627482",
-            contactDetail: "Work",
-          }
+            contactType: 'work',
+            contactValue: '3245627482',
+            contactDetail: 'Work',
+          },
         ]}
+          firstName="Harvey"
+          lastName="Walters"
       />
     </div>
   )
 }
 
-export default PersonContactWithDetail;
+export default PersonContactWithDetail

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

@@ -1,3 +1,3 @@
-export {default as PersonContactDefault} from './_person_contact_default.jsx';
-export {default as PersonContactMultiple} from './_person_contact_multiple.jsx';
-export {default as PersonContactWithDetail} from './_person_contact_with_detail.jsx';
+export { default as PersonContactDefault } from './_person_contact_default.jsx'
+export { default as PersonContactMultiple } from './_person_contact_multiple.jsx'
+export { default as PersonContactWithDetail } from './_person_contact_with_detail.jsx'

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -1,5 +1,4 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 
@@ -15,9 +14,8 @@ type PillProps = {
 
 const Pill = ({
   className,
-  id,
   text,
-  variant='neutral'
+  variant = 'neutral',
 }: PillProps) => {
   const css = classnames([
     `pb_pill_kit_${variant}`,
@@ -26,7 +24,11 @@ const Pill = ({
 
   return (
     <div className={css}>
-      <Title size={4} className="pb_pill_text" text={text} />
+      <Title
+          className="pb_pill_text"
+          size={4}
+          text={text}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx

@@ -1,36 +1,60 @@
-import React from "react"
-import Pill from "../_pill.jsx"
+import React from 'react'
+import Pill from '../_pill.jsx'
 
-function PillDefault() {
+const PillDefault = () => {
   return (
     <div>
       <Pill text="default" />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="success" variant="success" />
+      <Pill
+          text="success"
+          variant="success"
+      />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="error" variant="error" />
+      <Pill
+          text="error"
+          variant="error"
+      />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="warning" variant="warning" />
+      <Pill
+          text="warning"
+          variant="warning"
+      />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="info" variant="info" />
+      <Pill
+          text="info"
+          variant="info"
+      />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="neutral" variant="neutral" />
+      <Pill
+          text="neutral"
+          variant="neutral"
+      />
 
-      <br/><br/>
+      <br />
+      <br />
 
-      <Pill text="primary" variant="primary" />
+      <Pill
+          text="primary"
+          variant="primary"
+      />
     </div>
   )
 }
 
-export default PillDefault;
+export default PillDefault

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

@@ -1 +1 @@
-export {default as PillDefault} from './_pill_default.jsx';
+export { default as PillDefault } from './_pill_default.jsx'

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -1,9 +1,7 @@
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
-import { Body,Title } from '../'
-
+import { Body, Title } from '../'
 
 type ProgressPillsProps = {
   active?: Number,
@@ -15,37 +13,52 @@ type ProgressPillsProps = {
 }
 
 const showSteps = (steps, active, dark) => {
-  let items = []
+  const items = []
 
-  for(let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({step,active,dark}))
+  for (let step = 1; step <= steps; step++) {
+    items.push(ProgressPill({ step, active, dark }))
   }
 
   return items
 }
 
 const ProgressPill = ({
-    active,
-    dark,
-    step,
-}: ProgressPillProps) => (<div className={`pb_progress_pill${step <= active ? "_active" : "_inactive"}${dark ? "_dark" : null}`} key={step}></div>)
-
-const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark=false } : ProgressPillsProps) => {
+  active,
+  dark,
+  step,
+}: ProgressPillProps) => (
+  <div
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? '_dark' : null}`}
+      key={step}
+  />
+)
 
-  const darkClass = dark ? "_dark" : ""
+const ProgressPills = ({ active = 0, steps = 3, title = null, value = null, dark = false }: ProgressPillsProps) => {
+  const darkClass = dark ? '_dark' : ''
 
-  return(
+  return (
     <div className={`pb_progress_pills_kit${darkClass}`}>
-      {title ?
-      <div className="progress_pills_status">
-        <Title text={title} size={4} tag="h4" dark={dark}/>
-        <Body color="light" text={value} dark={dark}/>
-      </div> : null}
-
-    <div className="progress_pills">
-      {showSteps(steps, active, dark)}
+      <If condition={title}>
+        <div className="progress_pills_status">
+          <Title
+              dark={dark}
+              size={4}
+              tag="h4"
+              text={title}
+          />
+          <Body
+              color="light"
+              dark={dark}
+              text={value}
+          />
+        </div>
+      </If>
+
+      <div className="progress_pills">
+        {showSteps(steps, active, dark)}
+      </div>
     </div>
-  </div>
-)}
+  )
+}
 
 export default ProgressPills

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.jsx

@@ -1,21 +1,20 @@
 
-import React from "react"
-import ProgressPills from "../_progress_pills.jsx"
+import React from 'react'
+import ProgressPills from '../_progress_pills.jsx'
 
+const ProgressPillsDark = () => {
+  return (
+    <div>
+      <ProgressPills
+          active={2}
+          dark
+          steps={3}
+          title="Status:"
+          value="Orientation"
+      />
 
-function ProgressPillsDark() {
-return (
-  <div>
-    <ProgressPills
-        active={2}
-        dark
-        title="Status:"
-        steps={3}
-        value="Orientation"
-    />
-
-  </div>
-)
+    </div>
+  )
 }
 
-export default ProgressPillsDark;
+export default ProgressPillsDark

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -1,18 +1,17 @@
 
-import React from "react"
-import ProgressPills from "../_progress_pills.jsx"
+import React from 'react'
+import ProgressPills from '../_progress_pills.jsx'
 
+const ProgressPillsDefault = () => {
+  return (
+    <div>
+      <ProgressPills
+          active={2}
+          steps={3}
+      />
 
-function ProgressPillsDefault() {
-return (
-  <div>
-    <ProgressPills
-        active={2}
-        steps={3}
-    />
-
-  </div>
-)
+    </div>
+  )
 }
 
-export default ProgressPillsDefault;
+export default ProgressPillsDefault

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -1,20 +1,19 @@
 
-import React from "react"
-import ProgressPills from "../_progress_pills.jsx"
+import React from 'react'
+import ProgressPills from '../_progress_pills.jsx'
 
+const ProgressPillsStatus = () => {
+  return (
+    <div>
+      <ProgressPills
+          active={2}
+          steps={3}
+          title="Status:"
+          value="Orientation"
+      />
 
-function ProgressPillsStatus() {
-return (
-  <div>
-    <ProgressPills
-        active={2}
-        title="Status:"
-        steps={3}
-        value="Orientation"
-    />
-
-  </div>
-)
+    </div>
+  )
 }
 
-export default ProgressPillsStatus;
+export default ProgressPillsStatus