From c501b6a7b3e4602a517b6648345d0346c5539208 Mon Sep 17 00:00:00 2001 From: Presley Date: Mon, 25 Apr 2022 22:08:54 +0000 Subject: [PATCH 1/3] Add FormFooter --- .../FormFooter/FormFooter.stories.tsx | 29 +++++++++++++++ site/src/components/FormFooter/FormFooter.tsx | 37 +++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 site/src/components/FormFooter/FormFooter.stories.tsx create mode 100644 site/src/components/FormFooter/FormFooter.tsx 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} + +
+ ) +} From 5d6d0c116a848a1f6bdf63fdfe037526ebe66834 Mon Sep 17 00:00:00 2001 From: Presley Date: Mon, 25 Apr 2022 22:09:00 +0000 Subject: [PATCH 2/3] Add FullPageForm --- .../FullPageForm/FullPageForm.stories.tsx | 35 +++++++++++++++++++ .../components/FullPageForm/FullPageForm.tsx | 32 +++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 site/src/components/FullPageForm/FullPageForm.stories.tsx create mode 100644 site/src/components/FullPageForm/FullPageForm.tsx diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx new file mode 100644 index 0000000000..e34c90eb20 --- /dev/null +++ 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 + +const Template: Story = (args) => ( + +
{ + e.preventDefault() + }} + > + + + + + +
+ +) + +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 new file mode 100644 index 0000000000..dc45c2b923 --- /dev/null +++ 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 = ({ title, detail, onCancel, children }) => { + const styles = useStyles() + return ( +
+ + + + {children} +
+ ) +} From 861969eead1339a5161b3cfd06eba9ba6af9e2fe Mon Sep 17 00:00:00 2001 From: Presley Date: Mon, 25 Apr 2022 22:09:43 +0000 Subject: [PATCH 3/3] Lint --- site/src/components/FormFooter/FormFooter.stories.tsx | 6 +++--- site/src/components/FullPageForm/FullPageForm.stories.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx index 9d860c0102..4590a26301 100644 --- a/site/src/components/FormFooter/FormFooter.stories.tsx +++ b/site/src/components/FormFooter/FormFooter.stories.tsx @@ -5,9 +5,9 @@ import { FormFooter, FormFooterProps } from "./FormFooter" export default { title: "components/FormFooter", component: FormFooter, - argTypes:{ - onCancel: { action: "cancel" } - } + argTypes: { + onCancel: { action: "cancel" }, + }, } as ComponentMeta const Template: Story = (args) => diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index e34c90eb20..3a92bc64cc 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -31,5 +31,5 @@ export const Example = Template.bind({}) Example.args = { title: "My Form", detail: "Lorem ipsum dolor", - onCancel: action("cancel") + onCancel: action("cancel"), }