BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): realizando componentização do ButtonForm

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-13 13:37:04 -03:00
parent 596858810e
commit dc41d8bd11
4 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Atoms/ButtonForm/ButtonForm.tsx Normal file
View File

@ -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>
);
};

9
src/components/molecules/FaleConosco/FaleConosco.tsx
View File

@ -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*

6
src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
View File

@ -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"]}>

9
src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
View File

@ -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>