Add FullPageForm

presleyp · presleyp · commit 5d6d0c116a84 · 2022-04-25T22:09:00.000Z
diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -0,0 +1,35 @@
+import TextField from "@material-ui/core/TextField"
+import { action } from "@storybook/addon-actions"
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { FormFooter } from "../FormFooter/FormFooter"
+import { Stack } from "../Stack/Stack"
+import { FullPageForm, FullPageFormProps } from "./FullPageForm"
+
+export default {
+  title: "components/FullPageForm",
+  component: FullPageForm,
+} as ComponentMeta<typeof FullPageForm>
+
+const Template: Story<FullPageFormProps> = (args) => (
+  <FullPageForm {...args}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+      }}
+    >
+      <Stack>
+        <TextField fullWidth variant="outlined" label="Field 1" name="field1" />
+        <TextField fullWidth variant="outlined" label="Field 2" name="field2" />
+        <FormFooter isLoading={false} onCancel={action("cancel")} />
+      </Stack>
+    </form>
+  </FullPageForm>
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  title: "My Form",
+  detail: "Lorem ipsum dolor",
+  onCancel: action("cancel")
+}
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -0,0 +1,32 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
+import { FormTitle } from "../FormTitle/FormTitle"
+
+export interface FullPageFormProps {
+  title: string
+  detail: React.ReactNode
+  onCancel: () => void
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    maxWidth: "1380px",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+}))
+
+export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
+  const styles = useStyles()
+  return (
+    <main className={styles.root}>
+      <FormTitle title={title} detail={detail} />
+      <FormCloseButton onClose={onCancel} />
+
+      {children}
+    </main>
+  )
+}
