refactor: split form styles and combine components

I think it is better to keep styles close to the
corresponding components. So I splitted the unique
stylesheet.
I also combine select, textarea and input components
into a single one since they share the same logic and
the same styles.

1 files changed, 42 insertions, 25 deletions

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index 762bb75..c409d04 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -1,5 +1,5 @@
 import { ButtonSubmit } from '@components/Buttons';
-import { Form, FormItem, Input, TextArea } from '@components/Form';
+import { Field, Form, FormItem, Label } from '@components/FormElements';
 import Notice from '@components/Notice/Notice';
 import Spinner from '@components/Spinner/Spinner';
 import { createComment } from '@services/graphql/mutations';
@@ -106,6 +106,34 @@ const CommentForm = (
     isReply ? styles['wrapper--reply'] : ''
   }`;
 
+  const getLabel = (
+    body: string,
+    htmlFor: string,
+    required: boolean = false
+  ) => {
+    return <Label body={body} htmlFor={htmlFor} required={required} />;
+  };
+
+  const nameLabelBody = intl.formatMessage({
+    defaultMessage: 'Name',
+    description: 'CommentForm: Name field label',
+  });
+
+  const emailLabelBody = intl.formatMessage({
+    defaultMessage: 'Email',
+    description: 'CommentForm: Email field label',
+  });
+
+  const websiteLabelBody = intl.formatMessage({
+    defaultMessage: 'Website',
+    description: 'CommentForm: Website field label',
+  });
+
+  const commentLabelBody = intl.formatMessage({
+    defaultMessage: 'Comment',
+    description: 'CommentForm: Comment field label',
+  });
+
   return (
     <div className={wrapperClasses}>
       <h2 className={styles.title}>
@@ -116,56 +144,45 @@ const CommentForm = (
       </h2>
       <Form
         submitHandler={submitHandler}
-        modifier={isReply ? 'centered' : undefined}
+        kind={isReply ? 'centered' : undefined}
       >
         <FormItem>
-          <Input
+          <Field
             id="commenter-name"
             name="commenter-name"
-            label={intl.formatMessage({
-              defaultMessage: 'Name',
-              description: 'CommentForm: Name field label',
-            })}
-            required={true}
+            label={getLabel(nameLabelBody, 'commenter-name', true)}
             value={name}
             setValue={setName}
+            required={true}
             ref={ref}
           />
         </FormItem>
         <FormItem>
-          <Input
+          <Field
             id="commenter-email"
             name="commenter-email"
-            type="email"
-            label={intl.formatMessage({
-              defaultMessage: 'Email',
-              description: 'CommentForm: Email field label',
-            })}
-            required={true}
+            kind="email"
+            label={getLabel(emailLabelBody, 'commenter-email', true)}
             value={email}
             setValue={setEmail}
+            required={true}
           />
         </FormItem>
         <FormItem>
-          <Input
+          <Field
             id="commenter-website"
             name="commenter-website"
-            label={intl.formatMessage({
-              defaultMessage: 'Website',
-              description: 'CommentForm: Website field label',
-            })}
+            label={getLabel(websiteLabelBody, 'commenter-website')}
             value={website}
             setValue={setWebsite}
           />
         </FormItem>
         <FormItem>
-          <TextArea
+          <Field
             id="commenter-comment"
             name="commenter-comment"
-            label={intl.formatMessage({
-              defaultMessage: 'Comment',
-              description: 'CommentForm: Comment field label',
-            })}
+            kind="textarea"
+            label={getLabel(commentLabelBody, 'commenter-comment', true)}
             value={comment}
             setValue={setComment}
             required={true}