import { Button } from "theme-ui"; import Popup from "./popup"; const metadata = { title: "Components/Popup", component: Popup, argTypes: { arrow: { type: "boolean", description: "Whether to show an arrow or not.", table: { type: { summary: "boolean", }, }, defaultValue: false, }, sx: { type: "object", description: "Theme UI sx prop.", table: { type: { summary: "object", }, }, }, "...rest": { type: "object", description: "[Reactjs-popup](https://react-popup.elazizi.com) props.", table: { type: { summary: "object", }, }, control: null, }, }, }; export default metadata; function Template(args) { return ( <Popup trigger={<Button>Trigger</Button>} {...args}> Content </Popup> ); } export const Tooltip = Template.bind(); Tooltip.args = {}; export const Modal = Template.bind(); Modal.args = { modal: true, };