Add FormFooter

presleyp · presleyp · commit c501b6a7b3e4 · 2022-04-25T22:08:54.000Z
diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx 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<typeof FormFooter>
+
+const Template: Story<FormFooterProps> = (args) => <FormFooter {...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
@@ -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<FormFooterProps> = ({ onCancel, isLoading, submitLabel = "Submit" }) => {
+  const styles = useStyles()
+  return (
+    <div className={styles.footer}>
+      <Button className={styles.button} onClick={onCancel} variant="outlined">
+        Cancel
+      </Button>
+      <LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">
+        {submitLabel}
+      </LoadingButton>
+    </div>
+  )
+}
