From a23179787f2918cf953ef149a3a03c9eadc5144b Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Sun, 9 Aug 2020 11:14:52 +0200
Subject: [PATCH] feat(FormField): add spacing option

---
 src/components/FormField/FormField.module.css |  4 ++++
 src/components/FormField/FormField.tsx        | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/FormField/FormField.module.css b/src/components/FormField/FormField.module.css
index 2b34cbac..f4a2b67f 100644
--- a/src/components/FormField/FormField.module.css
+++ b/src/components/FormField/FormField.module.css
@@ -16,3 +16,7 @@
   margin-top: 5px;
   color: var(--color-neutral-6);
 }
+
+.isSpaced {
+  margin-bottom: 15px;
+}
diff --git a/src/components/FormField/FormField.tsx b/src/components/FormField/FormField.tsx
index 0089fbb4..a3643cd3 100644
--- a/src/components/FormField/FormField.tsx
+++ b/src/components/FormField/FormField.tsx
@@ -10,10 +10,20 @@ type Props = {
   errorMessage?: string;
   className?: string;
   children: ReactNode;
+  isSpaced: boolean;
 };
 
-const FormField: React.FC<Props> = ({ label, className, children, hint, errorMessage }: Props) => {
-  const mergedClassNames = classNames(cssReset.ventura, className);
+const FormField: React.FC<Props> = ({
+  label,
+  className,
+  children,
+  hint,
+  errorMessage,
+  isSpaced = false,
+}: Props) => {
+  const mergedClassNames = classNames(cssReset.ventura, className, {
+    [styles.isSpaced]: isSpaced,
+  });
   return (
     <div className={mergedClassNames}>
       {Boolean(label) && <span className={styles.label}>{label}</span>}