refactor: replace label elements with Label component

5 files changed, 78 insertions, 72 deletions

diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index 762bb75..3539311 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 { Form, FormItem, Input, Label, TextArea } from '@components/Form';
 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}>
@@ -122,11 +150,7 @@ const CommentForm = (
           <Input
             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}
             ref={ref}
@@ -137,11 +161,7 @@ const CommentForm = (
             id="commenter-email"
             name="commenter-email"
             type="email"
-            label={intl.formatMessage({
-              defaultMessage: 'Email',
-              description: 'CommentForm: Email field label',
-            })}
-            required={true}
+            label={getLabel(emailLabelBody, 'commenter-email', true)}
             value={email}
             setValue={setEmail}
           />
@@ -150,10 +170,7 @@ const CommentForm = (
           <Input
             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}
           />
@@ -162,13 +179,9 @@ const CommentForm = (
           <TextArea
             id="commenter-comment"
             name="commenter-comment"
-            label={intl.formatMessage({
-              defaultMessage: 'Comment',
-              description: 'CommentForm: Comment field label',
-            })}
+            label={getLabel(commentLabelBody, 'commenter-comment', true)}
             value={comment}
             setValue={setComment}
-            required={true}
           />
         </FormItem>
         <FormItem>
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
index 6ab1e2b..d0e5ebe 100644
--- a/src/components/ContactForm/ContactForm.tsx
+++ b/src/components/ContactForm/ContactForm.tsx
@@ -1,5 +1,5 @@
 import { ButtonSubmit } from '@components/Buttons';
-import { Form, FormItem, Input, TextArea } from '@components/Form';
+import { Form, FormItem, Input, Label, TextArea } from '@components/Form';
 import { sendMail } from '@services/graphql/mutations';
 import { settings } from '@utils/config';
 import { FormEvent, useState } from 'react';
@@ -83,6 +83,34 @@ const ContactForm = () => {
     );
   };
 
+  const getLabel = (
+    body: string,
+    htmlFor: string,
+    required: boolean = false
+  ) => {
+    return <Label body={body} htmlFor={htmlFor} required={required} />;
+  };
+
+  const nameLabelBody = intl.formatMessage({
+    defaultMessage: 'Name',
+    description: 'ContactForm: name field label',
+  });
+
+  const emailLabelBody = intl.formatMessage({
+    defaultMessage: 'Email',
+    description: 'ContactForm: email field label',
+  });
+
+  const subjectLabelBody = intl.formatMessage({
+    defaultMessage: 'Subject',
+    description: 'ContactForm: subject field label',
+  });
+
+  const messageLabelBody = intl.formatMessage({
+    defaultMessage: 'Message',
+    description: 'ContactForm: message field label',
+  });
+
   return (
     <>
       <Form submitHandler={submitHandler}>
@@ -92,11 +120,7 @@ const ContactForm = () => {
             name="name"
             value={name}
             setValue={setName}
-            label={intl.formatMessage({
-              defaultMessage: 'Name',
-              description: 'ContactForm: name field label',
-            })}
-            required={true}
+            label={getLabel(nameLabelBody, 'contact-name', true)}
           />
         </FormItem>
         <FormItem>
@@ -106,11 +130,7 @@ const ContactForm = () => {
             name="email"
             value={email}
             setValue={setEmail}
-            label={intl.formatMessage({
-              defaultMessage: 'Email',
-              description: 'ContactForm: email field label',
-            })}
-            required={true}
+            label={getLabel(emailLabelBody, 'contact-email', true)}
           />
         </FormItem>
         <FormItem>
@@ -119,10 +139,7 @@ const ContactForm = () => {
             name="subject"
             value={subject}
             setValue={setSubject}
-            label={intl.formatMessage({
-              defaultMessage: 'Subject',
-              description: 'ContactForm: subject field label',
-            })}
+            label={getLabel(subjectLabelBody, 'contact-subject')}
           />
         </FormItem>
         <FormItem>
@@ -131,11 +148,7 @@ const ContactForm = () => {
             name="message"
             value={message}
             setValue={setMessage}
-            label={intl.formatMessage({
-              defaultMessage: 'Message',
-              description: 'ContactForm: message field label',
-            })}
-            required={true}
+            label={getLabel(messageLabelBody, 'contact-message', true)}
           />
         </FormItem>
         <FormItem>
diff --git a/src/components/Form/Form.module.scss b/src/components/Form/Form.module.scss
index e805c52..6ccdb11 100644
--- a/src/components/Form/Form.module.scss
+++ b/src/components/Form/Form.module.scss
@@ -27,14 +27,6 @@
   max-width: 45ch;
 }
 
-.label {
-  display: block;
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-}
-
 .field {
   width: 100%;
   padding: var(--spacing-2xs) var(--spacing-xs);
@@ -63,10 +55,6 @@
   min-height: fun.convert-px(200);
 }
 
-.required {
-  color: var(--color-secondary);
-}
-
 .wrapper--search {
   > input {
     padding-right: calc(var(--btn-size) + var(--spacing-2xs));
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 986ea63..07f0410 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -1,4 +1,10 @@
-import { ChangeEvent, ForwardedRef, forwardRef, SetStateAction } from 'react';
+import {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  SetStateAction,
+} from 'react';
 import styles from '../Form.module.scss';
 
 type InputType = 'text' | 'email' | 'number' | 'search';
@@ -10,7 +16,6 @@ const Input = (
     value,
     setValue,
     type = 'text',
-    required = false,
     label,
   }: {
     id: string;
@@ -18,8 +23,7 @@ const Input = (
     value: string;
     setValue: (value: SetStateAction<string>) => void;
     type?: InputType;
-    required?: boolean;
-    label?: string;
+    label?: ReactElement;
   },
   ref: ForwardedRef<HTMLInputElement>
 ) => {
@@ -29,12 +33,7 @@ const Input = (
 
   return (
     <>
-      {label && (
-        <label htmlFor={id} className={styles.label}>
-          {label}
-          {required && <span className={styles.required}> *</span>}
-        </label>
-      )}
+      {label}
       <input
         ref={ref}
         type={type}
diff --git a/src/components/Form/TextArea/TextArea.tsx b/src/components/Form/TextArea/TextArea.tsx
index e1e7e0f..b8894ab 100644
--- a/src/components/Form/TextArea/TextArea.tsx
+++ b/src/components/Form/TextArea/TextArea.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, SetStateAction } from 'react';
+import { ChangeEvent, ReactElement, SetStateAction } from 'react';
 import styles from '../Form.module.scss';
 
 const TextArea = ({
@@ -6,15 +6,13 @@ const TextArea = ({
   name,
   value,
   setValue,
-  required = false,
   label,
 }: {
   id: string;
   name: string;
   value: string;
   setValue: (value: SetStateAction<string>) => void;
-  required?: boolean;
-  label?: string;
+  label?: ReactElement;
 }) => {
   const updateValue = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
@@ -22,12 +20,7 @@ const TextArea = ({
 
   return (
     <>
-      {label && (
-        <label htmlFor={id} className={styles.label}>
-          {label}
-          {required && <span className={styles.required}> *</span>}
-        </label>
-      )}
+      {label}
       <textarea
         id={id}
         name={name}