playbook_ui 3.1.0 → 3.2.0

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_accessibility.jsx

@@ -1,11 +1,11 @@
 // @flow
 
-import React from "react"
-import { Toggle } from "../.."
+import React from 'react'
+import { Toggle } from '../..'
 
 const Example = () => {
   return (
-    <Toggle aria={{ label: "toggle", expanded: false }} />
+    <Toggle aria={{ label: 'toggle', expanded: false }} />
   )
 }
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_data.jsx

@@ -1,13 +1,13 @@
 // @flow
 
-import React from "react"
-import { Toggle } from "../.."
+import React from 'react'
+import { Toggle } from '../..'
 
 const Example = () => {
   return (
     <Toggle
         checked
-        data={{ id: "the-toggle", expanded: true }}
+        data={{ id: 'the-toggle', expanded: true }}
     />
   )
 }

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,43 +1,33 @@
 // @flow
 
-import React from "react"
-import { Toggle } from "../../"
+import React, { useState } from 'react'
+import { Toggle } from '../../'
 
-class Example extends React.Component {
-  state = {
-    toggle1: false,
-    toggle2: true,
-  }
+const Example = () => {
+  const [toggle1, setToggle1] = useState(false)
+  const [toggle2, setToggle2] = useState(false)
 
-  handleChange = event => {
-    this.setState({
-      [event.target.name]: event.target.checked
-    })
-  }
+  return (
+    <>
+      <Toggle
+          checked={toggle1}
+          name="toggle1"
+          onChange={(event) => setToggle1(event.target.value)}
+          onCheck={(event) => alert(`${event.target.name} checked!`)}
+          onUncheck={(event) => alert(`${event.target.name} unchecked!`)}
+      />
 
-  render() {
-    return (
-      <>
-        <Toggle
-            checked={this.state.toggle1}
-            name="toggle1"
-            onChange={this.handleChange}
-            onCheck={event => console.log(`${event.target.name} checked!`)}
-            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
-        />
+      <br />
 
-        <br />
-
-        <Toggle
-            checked={this.state.toggle2}
-            name="toggle2"
-            onChange={this.handleChange}
-            onCheck={event => console.log(`${event.target.name} checked!`)}
-            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
-        />
-      </>
-    )
-  }
+      <Toggle
+          checked={toggle2}
+          name="toggle2"
+          onChange={(event) => setToggle2(event.target.value)}
+          onCheck={(event) => alert(`${event.target.name} checked!`)}
+          onUncheck={(event) => alert(`${event.target.name} unchecked!`)}
+      />
+    </>
+  )
 }
 
 export default Example

data/app/pb_kits/playbook/pb_user/_user.html.erb

@@ -13,9 +13,8 @@
       class: "content_wrapper") do %>
     <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
-      text: object.name,
+      text: "#{object.details}",
       dark: object.dark,
-      text: object.title,
       color: "light"
     }) %>
   <% end %>

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -1,12 +1,11 @@
 /* @flow */
 
-import React from 'react';
-import classnames from 'classnames';
+import React from 'react'
 
 import {
-  Title,
+  Avatar,
   Body,
-  Avatar
+  Title,
 } from '../'
 
 type UserProps = {
@@ -22,60 +21,35 @@ type UserProps = {
   avatarUrl?: String,
 }
 
-const userSizes = {
-  sm: 4,
-  md: 4,
-  lg: 3,
-}
-
-const avatarSizes = {
-  sm: 'sm',
-  md: 'md',
-  lg: 'xl',
-}
-
-const User = (props: UserProps) => {
-  const {
-    name='Anna Black',
-    territory='',
-    title='',
-    align='left',
-    orientation='horizontal',
-    size='sm',
-    avatar=false,
-    avatarUrl,
-  } = props 
-
-  const print_avatar = (avatar, avatarUrl) => {
-    if (avatar == true | avatarUrl != null ) {
-      return (
-        <Avatar name={name} size={avatarSizes[size]} image_url={avatarUrl}/>
-      )
-    }
-  }
-
-  const print_details = (territory="") => {
-    if (territory !== "") {
-      return (
-        <Body color='light'>{`${territory} • ${title}`}</Body>
-      )
-    }
-    else {
-      return (
-        <Body color='light'>{`${title}`}</Body>
-      )
-    }
-  }
-
-  return (
-    <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
-      {print_avatar(avatar, avatarUrl)}
-      <div className="content_wrapper">
-        <Title size={userSizes[size]} text={`${name}`}/>
-        {print_details(territory)}
-      </div>
-    </div> 
-  )
-}
-
-export default User;
+const User = ({
+  name = '',
+  territory = '',
+  title = '',
+  align = 'left',
+  orientation = 'horizontal',
+  size = 'sm',
+  avatar = false,
+  avatarUrl,
+}: UserProps) => (
+  <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
+    <If condition={avatar || avatarUrl}>
+      <Avatar
+          imageUrl={avatarUrl}
+          name={name}
+          size={size}
+      />
+    </If>
+
+    <div className="content_wrapper">
+      <Title
+          size={size == 'lg' ? 3 : 4}
+          text={name}
+      />
+      <Body color="light">
+        {territory == '' ? title : `${territory} • ${title}`}
+      </Body>
+    </div>
+  </div>
+)
+
+export default User

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -1,46 +1,46 @@
-import React from "react"
-import {User} from "../../"
+import React from 'react'
+import { User } from '../../'
 
-function UserDefault() {
+const UserDefault = () => {
   return (
-    <div class="pb--doc-demo-row">
+    <div className="pb--doc-demo-row">
 
       <div>
         <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation="vertical"
-          align="center"
-          size='lg'
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            title="Remodeling Consultant"
         />
       </div>
 
       <div>
         <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation="horizontal"
-          align="left"
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
         />
       </div>
 
       <div>
         <User
-          name='Anna Black'
-          orientation="horizontal"
-          align="left"
-          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
         />
 
-        <br/>
+        <br />
 
         <User
-          name='Anna Black'
-          orientation="horizontal"
-          align="left"
-          avatar={true}
+            align="left"
+            avatar
+            name="Anna Black"
+            orientation="horizontal"
         />
       </div>
 
@@ -48,4 +48,4 @@ function UserDefault() {
   )
 }
 
-export default UserDefault;
+export default UserDefault

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -1,31 +1,31 @@
-import React from "react"
-import {User} from "../../"
+import React from 'react'
+import { User } from '../../'
 
-function UserDefault() {
+const UserDefault = () => {
   return (
-    <div class="pb--doc-demo-row">
+    <div className="pb--doc-demo-row">
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          size='sm'
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="sm"
+          title="Remodeling Consultant"
       />
 
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          size='md'
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="md"
+          title="Remodeling Consultant"
       />
 
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          size='lg'
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="lg"
+          title="Remodeling Consultant"
       />
-    </div> 
+    </div>
   )
 }
 
-export default UserDefault;
+export default UserDefault

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -1,24 +1,24 @@
-import React from "react"
-import {User} from "../../"
+import React from 'react'
+import { User } from '../../'
 
-function UserTextOnly() {
+const UserTextOnly = () => {
   return (
-    <div class="pb--doc-demo-row">
+    <div className="pb--doc-demo-row">
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation='horizontal'
-          align='center'
-          size='lg'
+          align="center"
+          name="Anna Black"
+          orientation="horizontal"
+          size="lg"
+          title="Remodeling Consultant"
       />
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation='horizontal'
-          align='left'
+          align="left"
+          name="Anna Black"
+          orientation="horizontal"
+          title="Remodeling Consultant"
       />
-    </div> 
+    </div>
   )
 }
 
-export default UserTextOnly;
+export default UserTextOnly

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

@@ -1,37 +1,39 @@
-import React from "react"
-import {User} from "../../"
+import React from 'react'
+import { User } from '../../'
 
-function UserVerticalSize() {
+const UserVerticalSize = () => {
   return (
     <div>
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation='vertical'
-          align='center'
-          size='sm'
-          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="sm"
+          title="Remodeling Consultant"
       />
-      <br/><br/>
+      <br />
+      <br />
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation='vertical'
-          align='center'
-          size='md'
-          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="md"
+          title="Remodeling Consultant"
       />
-      <br/><br/>
+      <br />
+      <br />
       <User
-          name='Anna Black'
-          title='Remodeling Consultant'
-          orientation='vertical'
-          align='center'
-          size='lg'
-          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          title="Remodeling Consultant"
       />
-    </div> 
+    </div>
   )
 }
 
-export default UserVerticalSize;
+export default UserVerticalSize