From dc41d8bd112194f515205d2fc80e5b61ef86275c Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Fri, 13 Jan 2023 13:37:04 -0300
Subject: [PATCH] =?UTF-8?q?feat(home):=20realizando=20componentiza=C3=A7?=
 =?UTF-8?q?=C3=A3o=20do=20ButtonForm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Atoms/ButtonForm/ButtonForm.tsx | 18 ++++++++++++++++++
 .../molecules/FaleConosco/FaleConosco.tsx      |  9 +++++----
 .../Footer/FooterBottom/FooterBottom.tsx       |  6 +++++-
 .../FooterNewsletter/FooterNewsletter.tsx      |  9 ++++++---
 4 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Atoms/ButtonForm/ButtonForm.tsx

diff --git a/src/components/Atoms/ButtonForm/ButtonForm.tsx b/src/components/Atoms/ButtonForm/ButtonForm.tsx
new file mode 100644
index 0000000..5e82594
--- /dev/null
+++ b/src/components/Atoms/ButtonForm/ButtonForm.tsx
@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes } from "react";
+
+interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    type: "button" | "submit" | "reset";
+    disabled?: boolean;
+    text: string;
+}
+
+export const ButtonForm = (props: IButtonProps) => {
+    const { className, text, type, disabled } = props;
+
+    return (
+        <button className={className} type={type} disabled={disabled}>
+            {text}
+        </button>
+    );
+};
diff --git a/src/components/molecules/FaleConosco/FaleConosco.tsx b/src/components/molecules/FaleConosco/FaleConosco.tsx
index 63ff546..89335b2 100644
--- a/src/components/molecules/FaleConosco/FaleConosco.tsx
+++ b/src/components/molecules/FaleConosco/FaleConosco.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 
 import FormSchema from "../../../schema/FormSchema";
 import styles from "./FaleConosco.module.scss";
+import { ButtonForm } from "../../Atoms/ButtonForm/ButtonForm";
 
 interface IFormikValues {
     name: string;
@@ -202,13 +203,13 @@ const FaleConosco = () => {
                             <Field name="acceptTerms" type="checkbox" />
                         </div>
 
-                        <button
+                        <ButtonForm
                             className={styles["form__button"]}
                             disabled={!isValid}
                             type="submit"
-                        >
-                            CADASTRE-SE
-                        </button>
+                            text={"CADASTRE-SE"}
+                        />
+
                         {FormSuccess && (
                             <span className={styles["form__wrapper__success"]}>
                                 *Formulário enviado com sucesso*
diff --git a/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
index bf3e7e8..f69c2c5 100644
--- a/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
+++ b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
@@ -37,7 +37,11 @@ const FooterBottom = () => {
                 </ul>
                 <div className={styles["footer__bottom__payments__divider"]}></div>
                 <ul className={styles["footer__bottom__payments__security"]}>
-                    <Icone src={vtex} alt="Vtex PCI - SECURITY" />
+                    <Icone
+                        src={vtex}
+                        alt="Vtex PCI - SECURITY"
+                        className={styles["vtex-security"]}
+                    />
                 </ul>
             </div>
             <div className={styles["footer__bottom__development"]}>
diff --git a/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
index b595037..abf396f 100644
--- a/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
+++ b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
@@ -1,4 +1,5 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
+import { ButtonForm } from "../../../Atoms/ButtonForm/ButtonForm";
 import styles from "./FooterNewsletter.module.scss";
 
 interface IFormikValue {
@@ -36,9 +37,11 @@ const FooterNewsletter = () => {
                             className={styles["footer-newsletter__form__error"]}
                             component="span"
                         />
-                        <button type="submit" className={styles["footer-newsletter__form__btn"]}>
-                            ENVIAR
-                        </button>
+                        <ButtonForm
+                            type="submit"
+                            className={styles["footer-newsletter__form__btn"]}
+                            text={"ENVIAR"}
+                        />
                     </div>
                 </Form>
             </Formik>