diff --git a/src/components/ItemTableAppBarAction/ItemTableAppBarAction.js b/src/components/ItemTableAppBarAction/ItemTableAppBarAction.js new file mode 100644 index 0000000..4b55b24 --- /dev/null +++ b/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 ( + + + {icon} + + + ); +} + +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 IconButton. */ + "icon": PropTypes.node +}; + +ItemTableAppBarAction.defaultProps = { + "title": "", + "icon": +}; \ No newline at end of file diff --git a/src/components/ItemTableAppBarAction/ItemTableAppBarAction.stories.mdx b/src/components/ItemTableAppBarAction/ItemTableAppBarAction.stories.mdx new file mode 100644 index 0000000..c8739ce --- /dev/null +++ b/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"; + + + +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. + + + alert("The British are coming!"), + icon: + }} + > + { args => } + + + +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). + + + alert("The British are coming!"), + icon: + }} + > + { args => ( + ]} + /> + )} + + + + \ No newline at end of file diff --git a/src/components/ItemTableAppBarAction/index.js b/src/components/ItemTableAppBarAction/index.js new file mode 100644 index 0000000..bc193be --- /dev/null +++ b/src/components/ItemTableAppBarAction/index.js @@ -0,0 +1 @@ +export { default } from "./ItemTableAppBarAction"; \ No newline at end of file