refactor: replace label elements with Label component

3 files changed, 12 insertions, 32 deletions

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}