Update ItemTableFilter stories

src/components/ItemTableFilter/ItemTableFilter.stories.mdx

@@ -1,24 +1,24 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemTableFilter from "./ItemTableFilter";
 import { Box } from '@material-ui/core';
 
-This ItemTableFilter double as a column header and entry box for filtering in a column. At its core, it is a input element of type search.
+<Meta
+    title="Components/ItemTableFilter"
+    component={ItemTableFilter}
+/>
 
-<Meta title="Components/ItemTableFilter"
-      decorators={[  (Story) => (
-      <Box width="25%">
-            <Story/>
-      </Box>
-    ),]}
-      component={ItemTableFilter}/>
-
-# Default Usage
+A labeled search field used as the column headers for [ItemTable](http://localhost:6006/?path=/docs/components-itemtable). Based on a [destructured MUI input](https://material-ui.com/components/text-fields/#components).
 
 <Canvas>
-  <Story name="Default" args={{
-      label:"Search",
-      onChange:() => null
-  }}>
-     {args => <ItemTableFilter {...args} />}
+    <Story
+        name="Default"
+        args={{
+            label: "Check console as you type.",
+            onChange: (event) => console.log("New Value: ", event.target.value)
+        }}
+    >
+        { args => <ItemTableFilter {...args} /> }
     </Story>
-</Canvas>
+</Canvas>
+
+<ArgsTable of={ItemTableFilter} />