diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx new file mode 100644 index 0000000000..9d860c0102 --- /dev/null +++ b/site/src/components/FormFooter/FormFooter.stories.tsx @@ -0,0 +1,29 @@ +import { ComponentMeta, Story } from "@storybook/react" +import React from "react" +import { FormFooter, FormFooterProps } from "./FormFooter" + +export default { + title: "components/FormFooter", + component: FormFooter, + argTypes:{ + onCancel: { action: "cancel" } + } +} as ComponentMeta + +const Template: Story = (args) => + +export const Ready = Template.bind({}) +Ready.args = { + isLoading: false, +} + +export const Custom = Template.bind({}) +Custom.args = { + isLoading: false, + submitLabel: "Create", +} + +export const Loading = Template.bind({}) +Loading.args = { + isLoading: true, +} diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx new file mode 100644 index 0000000000..7107f7864b --- /dev/null +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -0,0 +1,37 @@ +import Button from "@material-ui/core/Button" +import { makeStyles } from "@material-ui/core/styles" +import React from "react" +import { LoadingButton } from "../LoadingButton/LoadingButton" + +export interface FormFooterProps { + onCancel: () => void + isLoading: boolean + submitLabel?: string +} + +const useStyles = makeStyles(() => ({ + footer: { + display: "flex", + flex: "0", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + button: { + margin: "1em", + }, +})) + +export const FormFooter: React.FC = ({ onCancel, isLoading, submitLabel = "Submit" }) => { + const styles = useStyles() + return ( +
+ + + {submitLabel} + +
+ ) +}