From 6da1963f1fdea4471e9f4ef907c31d0aae5c65d8 Mon Sep 17 00:00:00 2001
From: Iacopo Leardini <iacopo.lea@gmail.com>
Date: Wed, 17 Jan 2024 15:04:04 +0100
Subject: [PATCH] Refactor(ErrorMessage): accept additional props

---
 src/stories/form/Form.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/stories/form/Form.tsx b/src/stories/form/Form.tsx
index 5493fc4..6a9a9de 100644
--- a/src/stories/form/Form.tsx
+++ b/src/stories/form/Form.tsx
@@ -1,5 +1,4 @@
 import {
-  ErrorMessageProps,
   FieldProps,
   ErrorMessage as FormikErrorMessage,
   Field as FormikField,
@@ -14,13 +13,11 @@ import Input from "./input/Input";
 import { Radio } from "./radio/Radio";
 
 export const ErrorMessageWrapper = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => (
-  <StyledErrorMessage>
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <StyledErrorMessage {...props}>
     <ExclamationCircle className="error-message-icon" title="Error" size={16} />
-    {children}
+    {props.children}
   </StyledErrorMessage>
 );
 
@@ -41,9 +38,11 @@ const StyledErrorMessage = styled.div`
   }
 `;
 
-export const ErrorMessage = ({ ...props }: ErrorMessageProps) => (
-  <FormikErrorMessage {...props}>
-    {(msg) => <ErrorMessageWrapper>{msg}</ErrorMessageWrapper>}
+export const ErrorMessage = ({
+  ...props
+}: { name: string } & React.HTMLAttributes<HTMLDivElement>) => (
+  <FormikErrorMessage name={props.name}>
+    {(msg) => <ErrorMessageWrapper {...props}>{msg}</ErrorMessageWrapper>}
   </FormikErrorMessage>
 );