feat(FormField): add spacing option

kodiak-packages · Aug 9, 2020 · a231797 · a231797
1 parent 7c7bd05
commit a231797
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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>}