Adds Controls example

src/Avatar/Avatar.stories.jsx

@@ -3,6 +3,18 @@ import { Avatar } from './Avatar';
 export default {
   title: 'Design System/Avatar',
   component: Avatar,
+  /*
+   * More on Storybook argTypes at:
+   * https://storybook.js.org/docs/react/api/argtypes
+   */
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['tiny', 'small', 'medium', 'large'],
+    },
+  },
 };
 
 export const Standard = {
@@ -66,3 +78,17 @@ export const Large = {
     </>
   ),
 };
+
+/*
+ * New story using Controls
+ * Read more about Storybook templates at:
+ * https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+ */
+export const Controls = {
+  args: {
+    loading: false,
+    size: 'tiny',
+    username: 'Dominic Nguyen',
+    src: 'https://avatars.githubusercontent.com/u/263385',
+  },
+};