Add ErrorMessageWrapper component and update Form.stories.tsx

AppQuality · Jan 3, 2024 · 7989bdc · 7989bdc
1 parent 1812cdd
commit 7989bdc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/src/stories/form/Form.stories.tsx b/src/stories/form/Form.stories.tsx
@@ -1,4 +1,4 @@
-import { Field } from "./Form";
+import { ErrorMessage, ErrorMessageWrapper, Field } from "./Form";
 import { Checkbox } from "./checkBox/Checkbox";
 import { Story, Meta } from "@storybook/react";
 import { Formik, Form, FormikProps } from "formik";
@@ -69,5 +69,8 @@ export const Template: Story = () => (
         </Form>
       )}
     </Formik>
+    <div className="aq-mb-3">
+      <ErrorMessageWrapper>Generic Error outside Formik</ErrorMessageWrapper>
+    </div>
   </>
 );
diff --git a/src/stories/form/Form.tsx b/src/stories/form/Form.tsx
@@ -1,4 +1,5 @@
 import {
+  ErrorMessageProps,
   FieldProps,
   ErrorMessage as FormikErrorMessage,
   Field as FormikField,
@@ -12,32 +13,21 @@ import FormLabel from "./formlabel/FormLabel";
 import Input from "./input/Input";
 import { Radio } from "./radio/Radio";
 
-const ErrorMessageWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${(props) => props.theme.grid.sizes[2]};
-`;
-
-const BasicErrorMessage = ({
-  name,
-  className,
+export const ErrorMessageWrapper = ({
+  children,
 }: {
-  name: string;
-  className?: string;
+  children: React.ReactNode;
 }) => (
-  <div className={className}>
-    <FormikErrorMessage name={name}>
-      {(msg) => (
-        <ErrorMessageWrapper>
-          <ExclamationCircle title="Error" size={16} />
-          {msg}
-        </ErrorMessageWrapper>
-      )}
-    </FormikErrorMessage>
-  </div>
+  <StyledErrorMessage>
+    <ExclamationCircle title="Error" size={16} />
+    {children}
+  </StyledErrorMessage>
 );
 
-export const ErrorMessage = styled(BasicErrorMessage)`
+const StyledErrorMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(props) => props.theme.grid.sizes[2]};
   color: ${(props) => props.theme.palette.danger};
   width: 100%;
   margin-top: 0.25rem;
@@ -47,6 +37,12 @@ export const ErrorMessage = styled(BasicErrorMessage)`
   }
 `;
 
+export const ErrorMessage = ({ ...props }: ErrorMessageProps) => (
+  <FormikErrorMessage {...props}>
+    {(msg) => <ErrorMessageWrapper>{msg}</ErrorMessageWrapper>}
+  </FormikErrorMessage>
+);
+
 export const Field = ({
   type = "text",
   placeholder,