From 8e00db21bab1d9d1eeba3bc52daa385bb608d083 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 21 Apr 2021 13:49:21 -0400
Subject: [PATCH] Add user image lookup examples to UserAvatar story

---
 .../UserAvatar/UserAvatar.stories.mdx          | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/UserAvatar/UserAvatar.stories.mdx b/src/components/UserAvatar/UserAvatar.stories.mdx
index 085e31b..1527c9e 100644
--- a/src/components/UserAvatar/UserAvatar.stories.mdx
+++ b/src/components/UserAvatar/UserAvatar.stories.mdx
@@ -31,8 +31,24 @@ If the `name` prop is passed, the UserAvatar will display the first letter of th
     </Story>
 </Canvas>
 
+## With An Alias
+If you pass a valid career account username, their corresponding picture will be loaded from ECNDB.
+
+**Note:** This is a [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) request and will only work when serving the docs from under engineering.purdue.edu. This means the CORS request will fail in development. You can use [this Chrome extension](https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc) or similar to temporarily disable CORS protections.
+
+<Canvas>
+    <Story 
+        name="With An Alias"
+        args={{
+            alias: "campb303"
+        }}
+    >
+        { args => <UserAvatar {...args} /> }
+    </Story>
+</Canvas>
+
 ## Forwarded Props
-All props other than `name` are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).
+All props not listed in the table below are passed to the underlying [MUI Avatar component](https://material-ui.com/api/avatar/).
 
 <Canvas>
     <Story