From 0345c21d053c297d2946e74d3a5e8f12f8aa1ef2 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 3 Dec 2024 16:26:01 +0100
Subject: [PATCH] Extract submit button

---
 libs/form-renderer/src/FormRenderer.tsx          |  6 ++----
 libs/ui/src/SubmitButton/SubmitButton.module.css |  3 +++
 libs/ui/src/SubmitButton/SubmitButton.tsx        | 10 ++++++++++
 libs/ui/src/SubmitButton/index.ts                |  3 +++
 libs/ui/src/index.ts                             |  1 +
 5 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 libs/ui/src/SubmitButton/SubmitButton.module.css
 create mode 100644 libs/ui/src/SubmitButton/SubmitButton.tsx
 create mode 100644 libs/ui/src/SubmitButton/index.ts

diff --git a/libs/form-renderer/src/FormRenderer.tsx b/libs/form-renderer/src/FormRenderer.tsx
index a7981dac..0023f668 100644
--- a/libs/form-renderer/src/FormRenderer.tsx
+++ b/libs/form-renderer/src/FormRenderer.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@amsterdam/design-system-react'
 import type {
   FormCheckboxComponentOutput,
   FormRadioComponentOutput,
@@ -6,6 +5,7 @@ import type {
   FormTextAreaComponentOutput,
   FormTextFieldInputComponentOutput,
 } from '@meldingen/api-client'
+import { SubmitButton } from '@meldingen/ui'
 import type { FormEvent } from 'react'
 
 import { Checkbox, Radio, Select, TextArea, TextInput } from './components'
@@ -42,8 +42,6 @@ type Props = {
 export const FormRenderer = ({ formData, onSubmit }: Props) => (
   <form className="ams-gap--md" onSubmit={onSubmit}>
     {formData.map((component) => getComponent(component))}
-    <Button type="submit" style={{ width: 'fit-content' }}>
-      Volgende vraag
-    </Button>
+    <SubmitButton>Volgende vraag</SubmitButton>
   </form>
 )
diff --git a/libs/ui/src/SubmitButton/SubmitButton.module.css b/libs/ui/src/SubmitButton/SubmitButton.module.css
new file mode 100644
index 00000000..cd2a2ed6
--- /dev/null
+++ b/libs/ui/src/SubmitButton/SubmitButton.module.css
@@ -0,0 +1,3 @@
+.button {
+  width: fit-content;
+}
diff --git a/libs/ui/src/SubmitButton/SubmitButton.tsx b/libs/ui/src/SubmitButton/SubmitButton.tsx
new file mode 100644
index 00000000..7fc6f025
--- /dev/null
+++ b/libs/ui/src/SubmitButton/SubmitButton.tsx
@@ -0,0 +1,10 @@
+import type { ButtonProps } from '@amsterdam/design-system-react'
+import { Button } from '@amsterdam/design-system-react'
+
+import styles from './SubmitButton.module.css'
+
+export const SubmitButton = ({ children, ...restProps }: ButtonProps) => (
+  <Button {...restProps} className={styles.button} type="submit">
+    {children}
+  </Button>
+)
diff --git a/libs/ui/src/SubmitButton/index.ts b/libs/ui/src/SubmitButton/index.ts
new file mode 100644
index 00000000..fce9ae2a
--- /dev/null
+++ b/libs/ui/src/SubmitButton/index.ts
@@ -0,0 +1,3 @@
+'use client'
+
+export { SubmitButton } from './SubmitButton'
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 442f02ae..b4b1593a 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -2,3 +2,4 @@ export * from './Footer'
 export * from './Grid'
 export * from './Header'
 export * from './Screen'
+export * from './SubmitButton'