From bceeb5afc4137b888d0ad69b031c447b6eb6e769 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Mon, 19 Apr 2021 00:23:03 -0400
Subject: [PATCH] Update UserAvatar stories

---
 .../UserAvatar/UserAvatar.stories.mdx         | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/UserAvatar/UserAvatar.stories.mdx b/src/components/UserAvatar/UserAvatar.stories.mdx
index f644f7c..085e31b 100644
--- a/src/components/UserAvatar/UserAvatar.stories.mdx
+++ b/src/components/UserAvatar/UserAvatar.stories.mdx
@@ -1,16 +1,19 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import UserAvatar from "./UserAvatar";
 
-The UserAvatar displays a graphical representation of a person.
+<Meta
+    title="Components/UserAvatar"
+    component={UserAvatar}
+/>
 
-<Meta title="Components/UserAvatar" component={UserAvatar}/>
+The UserAvatar displays a graphical representation of a person.
 
 ## Default Usage
 Used without any props, the UserAvatar will display a generic person icon.
 
 <Canvas>
-  <Story name="Default">
-     {args => <UserAvatar {...args} />}
+    <Story name="Default">
+        { args => <UserAvatar {...args} /> }
     </Story>
 </Canvas>
 
@@ -18,21 +21,31 @@ Used without any props, the UserAvatar will display a generic person icon.
 If the `name` prop is passed, the UserAvatar will display the first letter of the name.
 
 <Canvas>
-  <Story name="With a name" args={{
-      name:"Jane Doe"
-  }}>
-     {args => <UserAvatar {...args} />}
+    <Story 
+        name="With A name"
+        args={{
+            name:"Jane Doe"
+        }}
+    >
+        { args => <UserAvatar {...args} /> }
     </Story>
 </Canvas>
 
-## Other Props
+## Forwarded Props
 All props other than `name` are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).
 
 <Canvas>
-  <Story name="With Additional Props" args={{
-        name:"Jane Doe",
-        variant:"square"
-  }}>
-     {args => <UserAvatar {...args} />}
+    <Story
+        name="Forwarded Props"
+        args={{
+            name:"Jane Doe",
+            variant:"square"
+        }}
+    >
+        { args => <UserAvatar {...args} /> }
     </Story>
-</Canvas>
\ No newline at end of file
+</Canvas>
+
+<ArgsTable of={UserAvatar} />
+
+All other props are forwarded to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).
\ No newline at end of file