From f3d742a7aa9fda82437e3d7d8c509c778f77db6e Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Mon, 19 Oct 2020 21:36:31 -0400
Subject: [PATCH] Update UserAvatar and docs to accept arbitrary props

---
 src/components/UserAvatar/UserAvatar.js | 10 ++++-----
 src/components/UserAvatar/UserAvatar.md | 29 ++++++++++++++++++-------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
index 5bf3e57..2a0103d 100644
--- a/src/components/UserAvatar/UserAvatar.js
+++ b/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": ""
 };
\ No newline at end of file
diff --git a/src/components/UserAvatar/UserAvatar.md b/src/components/UserAvatar/UserAvatar.md
index 40c9a48..36669b6 100644
--- a/src/components/UserAvatar/UserAvatar.md
+++ b/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" />
 ```
\ No newline at end of file