User Kit (React) (#456)

* User react kit created Almost done -- need to default online status to null * User react kit completed * Multiple users (#443) * multiple-users-wip * multiple-users-wip * added users * progress * multiple_users_wip * Multiple Users Support Branch (#444) * Changed snake-case to camelCase in js files
powerhome · Nov 22, 2019 · 8cfb850 · 8cfb850
1 parent 442fc77
commit 8cfb850
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 18 deletions.
diff --git a/app/pb_kits/playbook/_playbook.scss b/app/pb_kits/playbook/_playbook.scss
@@ -51,3 +51,4 @@
 @import 'pb_toggle/toggle';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
+@import 'pb_multiple_users/multiple_users';
diff --git a/app/pb_kits/playbook/pb_avatar/_avatar.jsx b/app/pb_kits/playbook/pb_avatar/_avatar.jsx
@@ -75,4 +75,4 @@ const Avatar = ({
   )
 }
 
-export default Avatar
+export default Avatar
diff --git a/app/pb_kits/playbook/pb_user/_user.jsx b/app/pb_kits/playbook/pb_user/_user.jsx
@@ -1,21 +1,66 @@
+/* @flow */
+
 import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class User extends React.Component {
-  render() {
-    return (
-      <div className="pb_user">
-        <span>USER CONTENT</span>
-      </div>
-    )
-  }
+import classnames from 'classnames';
+
+import {
+  Title,
+  Body,
+  Avatar
+} from '../'
+
+type UserProps = {
+  className?: String,
+  id?: String,
+  name: String,
+  title?: String,
+  size?: 'sm' | 'md' | 'lg',
+  align?: 'left' | 'center' | 'right',
+  orientation?: 'horiztonal' | 'vertical',
+  avatar?: Boolean,
+  avatarUrl?: String,
+}
+
+const userSizes = {
+  sm: 4,
+  md: 4,
+  lg: 3,
 }
 
-User.propTypes = propTypes;
+const avatarSizes = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'xl',
+}
+
+const User = (props: UserProps) => {
+  const {
+    name='Anna Black',
+    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}/>
+      )
+    }
+  }
+
+  return (
+    <div className={`pb_user_kit_${align}_${orientation}_${size}`}>
+      {print_avatar(avatar, avatarUrl)}
+      <div className="content_wrapper">
+        <Title size={userSizes[size]} text={`${name}`}/>
+        <Body color='light'>{`${title}`}</Body>
+      </div>
+    </div> 
+  )
+}
 
 export default User;
diff --git a/app/pb_kits/playbook/pb_user/docs/_user_default.jsx b/app/pb_kits/playbook/pb_user/docs/_user_default.jsx
@@ -3,7 +3,48 @@ import {User} from "../../"
 
 function UserDefault() {
   return (
-    <h1>{`Coming Soon...`}</h1>
+    <div class="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"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation="horizontal"
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+      </div>
+
+      <div>
+        <User
+          name='Anna Black'
+          orientation="horizontal"
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        />
+
+        <br/>
+
+        <User
+          name='Anna Black'
+          orientation="horizontal"
+          align="left"
+          avatar={true}
+        />
+      </div>
+
+    </div>
   )
 }
 

diff --git a/app/pb_kits/playbook/pb_user/docs/_user_size.jsx b/app/pb_kits/playbook/pb_user/docs/_user_size.jsx
@@ -0,0 +1,31 @@
+import React from "react"
+import {User} from "../../"
+
+function UserDefault() {
+  return (
+    <div class="pb--doc-demo-row">
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='sm'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='md'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          size='lg'
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+      />
+    </div> 
+  )
+}
+
+export default UserDefault;
diff --git a/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx b/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
@@ -0,0 +1,24 @@
+import React from "react"
+import {User} from "../../"
+
+function UserTextOnly() {
+  return (
+    <div class="pb--doc-demo-row">
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='center'
+          size='lg'
+      />
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='horizontal'
+          align='left'
+      />
+    </div> 
+  )
+}
+
+export default UserTextOnly;
diff --git a/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx b/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx
@@ -0,0 +1,37 @@
+import React from "react"
+import {User} from "../../"
+
+function 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'
+      />
+      <br/><br/>
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='vertical'
+          align='center'
+          size='md'
+          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+      />
+      <br/><br/>
+      <User
+          name='Anna Black'
+          title='Remodeling Consultant'
+          orientation='vertical'
+          align='center'
+          size='lg'
+          avatarUrl='https://randomuser.me/api/portraits/women/44.jpg'
+      />
+    </div> 
+  )
+}
+
+export default UserVerticalSize;
diff --git a/app/pb_kits/playbook/pb_user/docs/example.yml b/app/pb_kits/playbook/pb_user/docs/example.yml
@@ -9,3 +9,7 @@ examples:
 
   react:
   - user_default: Default
+  - user_text_only: Text Only
+  - user_size: Horizontal Size
+  - user_vertical_size: Vertical Size
+
diff --git a/app/pb_kits/playbook/pb_user/docs/index.js b/app/pb_kits/playbook/pb_user/docs/index.js
@@ -1 +1,5 @@
 export {default as UserDefault} from './_user_default.jsx';
+export {default as UserTextOnly} from './_user_text_only.jsx';
+export {default as UserSize} from './_user_size.jsx';
+export {default as UserVerticalSize} from './_user_vertical_size.jsx';
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,4 +75,4 @@ const Avatar = ({ @@
       )
     }
-    export default Avatar
+    export default Avatar