Update UserAvatar and docs to accept arbitrary props

src/components/UserAvatar/UserAvatar.js

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

src/components/UserAvatar/UserAvatar.md

@@ -1,23 +1,36 @@
-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 displays a graphical representation of a person.
 
 ---
 
-The UserAvatar will the first letter of the `userName` prop.
+## Default Usage
+Used without any props, the UserAvatar will display a generic person icon.
 ```jsx
 import UserAvatar from "./UserAvatar";
-<UserAvatar userName="Justin Campbell" />
-```
 
+<UserAvatar />
+```
 ```jsx static
-<UserAvatar userName="Justin Campbell" />
+<UserAvatar />
 ```
 
-If no value, a null value, or an empty string is passed to the UserAvatar, it will fall back to a generic icon.
+## With A Name
+If the `name` prop is passed, the UserAvatar will display the first letter of the name.
 ```jsx
 import UserAvatar from "./UserAvatar";
-<UserAvatar />
+
+<UserAvatar name="Jane Doe" />
 ```
+```jsx static
+<UserAvatar name="Jane Doe" />
+```
+
+## Other Props
+All props other than `name` are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).
+```jsx
+import UserAvatar from "./UserAvatar";
 
+<UserAvatar name="Jane Doe" variant="square" />
+```
 ```jsx static
-<UserAvatar />
+<UserAvatar name="Jane Doe" variant="square" />
 ```