Update EmailHeader stories

src/components/EmailHeader/EmailHeader.stories.mdx

@@ -1,52 +1,66 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import  EmailHeader  from './EmailHeader';
 
-Displays an email header with name, email, time sent, and recipients if present.
-
-<Meta title="Components/EmailHeader" component={EmailHeader} />
+<Meta 
+    title="Components/EmailHeader" 
+    component={EmailHeader}
+    argTypes={{
+        datetime: {
+            control: {
+                type: "date"
+            }
+        }
+    }}
+/>
 
-Default usage, without props.
+Displays an email header with name, email, time sent, and recipients if present.
 
+### Basic Usage w/o Props
 <Canvas>
-  <Story name="Default without props" >
-     {args => <EmailHeader {...args} />}
+    <Story name="Basic Usage w/o Props" >
+        {args => <EmailHeader {...args} />}
     </Story>
-  </Canvas>
-
-With `datetime`, `from_name` and `from_email` props. When `first_name` is passed, the [UserAvatar](/?path=/story/authprovider--page) will display the first letter of the name.
+</Canvas>
 
+### Single Sender and Recipient
+When the `first_name` prop is passed, the user's avatar is replaced with the first letter of that prop.
 <Canvas>
-    <Story name="With `datetime`, `from_name`, and `from_email` props" args={{
-        datetime: "2020-05-11T13:44:12+0000",
-        from_name: "Di Wang",
-        from_email: "wang2039@purdue.edu",
-        to:[],
-        cc:[]
-    }}>
-     {args => <EmailHeader {...args} />}
+    <Story 
+        name="Single Sender and Recipient" 
+        args={{
+            "datetime": "2020-05-11T13:44:12+0000",
+            "from_name": "Di Wang",
+            "from_email": "wang2039@purdue.edu" 
+        }}    
+    >
+        {args => <EmailHeader {...args} />}
     </Story>
 </Canvas>
 
-You can add to/cc data by passing `to` and `cc` props.
-
+### To and Cc Fields
 <Canvas>
-    <Story name="With `to` and `cc` props" args={{
-          datetime: "2020-05-11T13:44:12+0000",
-        from_name: "Di Wang",
-        from_email: "wang2039@purdue.edu",
-        to: [
-        {
-            "name": "'cesite@ecn.purdue.edu'",
-            "email": "cesite@ecn.purdue.edu"
-        }
-        ],
-        cc: [
-        {
-            "name": "Zavattieri, Pablo D",
-            "email": "zavattie@purdue.edu"
-        }
-        ]
-    }}>
+    <Story 
+        name="To and Cc Fields" 
+        args={{
+            "datetime": "2020-05-11T13:44:12+0000",
+            "from_name": "Di Wang",
+            "from_email": "wang2039@purdue.edu",
+            "to": [
+                {
+                    "name": "'cesite@ecn.purdue.edu'",
+                    "email": "cesite@ecn.purdue.edu"
+                }
+            ],
+            "cc": [
+                {
+                    "name": "Zavattieri, Pablo D",
+                    "email": "zavattie@purdue.edu"
+                }
+            ]
+        }}    
+    >
         {args => <EmailHeader {...args} />}
     </Story>
-</Canvas>
+</Canvas>
+
+<ArgsTable of={EmailHeader} />