Update ItemTableAppBar docs to include new actions prop

ECN · Jul 16, 2021 · e314bbd · e314bbd
1 parent ebb4e11
commit e314bbd
Showing 1 changed file with 30 additions and 3 deletions.
diff --git 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} /> }