Create ItemTableAppBarAction component with docs

src/components/ItemTableAppBarAction/ItemTableAppBarAction.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import {Tooltip, IconButton, Zoom} from "@material-ui/core"
+import DefaultIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+
+export default function ItemTableAppBarAction({title, onClick, icon}) {
+	return (
+		<Tooltip title={title} 
+			arrow 
+			onClick={onClick} 
+			TransitionComponent={Zoom}
+		>
+			<IconButton color="inherit">
+				{icon}
+			</IconButton>
+		</Tooltip>
+	);
+}
+
+ItemTableAppBarAction.propTypes = {
+	/** The title of the action. */
+	"title": PropTypes.string,
+	/** Callback for clicking on action. */
+	"onClick": PropTypes.func.isRequired,
+	/** MUI Icon to go inside an <a href="https://material-ui.com/api/icon-button/">IconButton</a>. */
+	"icon": PropTypes.node
+};
+
+ItemTableAppBarAction.defaultProps = {
+	"title": "",
+	"icon": <DefaultIcon />
+};

src/components/ItemTableAppBarAction/ItemTableAppBarAction.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import ItemTableAppBarAction from "./ItemTableAppBarAction";
+import NotificationImportantIcon from '@material-ui/icons/NotificationImportant';
+import ItemTableAppBar from "../ItemTableAppBar";
+
+<Meta
+    title="Components/ItemTableAppBarAction" 
+    component={ItemTableAppBarAction}
+    argsTypes={{
+        onClick: {
+            control: {
+                type: "object"
+            }
+        },
+        icon: {
+            control: {
+                type: "object"
+            }
+        }
+    }}
+/>
+
+The ItemTableAppBarAction provides clickable toggles for global controls like dark mode and logout inside the [ItemTableAppBar](/?path=/docs/components-itemtableappbar). It accepts a title, an `onClick` function and an [MUI Icon](https://material-ui.com/components/material-icons/) element.
+
+<Canvas>
+    <Story
+        name="Default" 
+        args={{
+            title:"Alert User",
+            onClick: _ => alert("The British are coming!"),
+            icon: <NotificationImportantIcon />
+        }}
+    >
+        { args => <ItemTableAppBarAction {...args} /> }
+    </Story>
+</Canvas>
+
+To use the ItemTableAppBarAction in the [ItemTableAppBar](/?path=/docs/components-itemtableappbar), put one or more ItemTableAppBarActions in an array and pass that array to the [ItemTableAppBar](/?path=/docs/components-itemtableappbar).
+
+<Canvas>
+    <Story
+        name="Used In ItemTableAppBar" 
+        args={{
+            title:"Alert User",
+            onClick: _ => alert("The British are coming!"),
+            icon: <NotificationImportantIcon />
+        }}
+    >
+        { args => (
+            <ItemTableAppBar
+                title="webqueue2"
+                actions={[<ItemTableAppBarAction {...args} />]}
+            />
+        )}
+    </Story>
+</Canvas>
+
+<ArgsTable of={ItemTableAppBarAction} />

src/components/ItemTableAppBarAction/index.js

@@ -0,0 +1 @@
+export { default } from "./ItemTableAppBarAction";