Create UserAvatar component w/ docs

src/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Avatar } from "@material-ui/core";
+
+export default function UserAvatar({userName, userAlias}){
+
+    return(
+        <Avatar>
+            {userName === "" ? null : userName.charAt(0)}
+        </Avatar>
+    );
+};
+
+UserAvatar.propTypes = {
+    /** The name of the user. */
+    "userName": PropTypes.string
+};
+
+UserAvatar.defaultProps = {
+    "userName": ""
+};

src/components/UserAvatar/UserAvatar.md

@@ -0,0 +1,23 @@
+The UserAvatar displays a graphical representation of a person and is meant to be used in conjunction with other identifiers like names or emails.
+
+---
+
+The UserAvatar will the first letter of the `userName` prop.
+```jsx
+import UserAvatar from "./UserAvatar";
+<UserAvatar userName="Justin Campbell" />
+```
+
+```jsx static
+<UserAvatar userName="Justin Campbell" />
+```
+
+If no value, a null value, or an empty string is passed to the UserAvatar, it will fall back to a generic icon.
+```jsx
+import UserAvatar from "./UserAvatar";
+<UserAvatar />
+```
+
+```jsx static
+<UserAvatar />
+```

src/components/UserAvatar/index.js

@@ -0,0 +1,3 @@
+import UserAvatar from "./UserAvatar";
+
+export default UserAvatar;