Update UserAvatar stories

src/components/UserAvatar/UserAvatar.stories.mdx

@@ -1,38 +1,51 @@
-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>
 
 ## With A Name
 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>
+</Canvas>
+
+<ArgsTable of={UserAvatar} />
+
+All other props are forwarded to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).