From e314bbd40f39cd415db964a99e0e0c5afae7d783 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Fri, 16 Jul 2021 14:21:58 -0400
Subject: [PATCH] Update ItemTableAppBar docs to include new actions prop

---
 .../ItemTableAppBar.stories.mdx               | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx b/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx
index ef6144f..66da043 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.stories.mdx
@@ -1,11 +1,14 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import ItemTableAppBar from "./ItemTableAppBar";
+import ItemTableAppBarAction from "../ItemTableAppBarAction";
+import Filter1Icon from '@material-ui/icons/Filter1';
+import Filter2Icon from '@material-ui/icons/Filter2';
 
-<Meta 
+<Meta
     title="Components/ItemTableAppBar" 
     component={ItemTableAppBar}
     argsTypes={{
-        setDarkMode: {
+        actions: {
             control: {
                 type: "object"
             }
@@ -20,7 +23,31 @@ The ItemTableAppBar is the primary toolbar for the [ItemTable](/?path=/docs/comp
         name="Default" 
         args={{
             title:"webqueue2",
-            setDarkMode: _ => alert("Use the darkmode toggle in the toolbar above.")
+        }}
+    >
+        { args => <ItemTableAppBar {...args} /> }
+    </Story>
+</Canvas>
+
+Actions can be added to the ItemTableAppBar by passing an array of [ItemTableAppBarAction](/?path=/docs/components-itemtableappbaraction) components to the `action` prop. They'll be rendered from left to right in the order their passed.
+
+<Canvas>
+    <Story
+        name="With Actions" 
+        args={{
+            title:"webqueue2",
+            actions: [
+                <ItemTableAppBarAction 
+                    title="First Action" 
+                    onClick={_ => alert("You've triggered to the first aciton,")}
+                    icon={<Filter1Icon />}
+                />,
+                <ItemTableAppBarAction 
+                    title="Second Action" 
+                    onClick={_ => alert("You've triggered to the second aciton,")}
+                    icon={<Filter2Icon />}
+                />
+            ]
         }}
     >
         { args => <ItemTableAppBar {...args} /> }