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

feature/challenge #1

Merged
BernardoWaldhelm merged 38 commits from feature/challenge into main 2023-01-15 15:25:18 +00:00
Conversation 0 Commits 38 Files Changed 83 +29 -33
3 changed files with 29 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d2db685cf6 - Show all commits

8
src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss
View File

@ -15,12 +15,6 @@
width: calc(100% - 32px);
}
&__formik {
display: flex;
align-items: center;
justify-content: center;
}
&__form {
display: flex;
flex-direction: column;
@ -79,7 +73,7 @@
font-weight: 400;
font-size: 28px;
line-height: 33px;
color: $color-primary-400;
color: $color-black;
background: #FFFFFF;
border: 1px solid $color-primary-600;
border-radius: 4px;

51
src/components/Footer/FooterNewsletter/FooterNewsletter.tsx
View File

@ -1,44 +1,49 @@
import { Formik, Form, Field, ErrorMessage } from 'formik';
import FormSchema from '../../../schema/FormSchema';
import styles from './FooterNewsletter.module.scss';
import { Formik, Form, Field, ErrorMessage } from "formik";
import styles from "./FooterNewsletter.module.scss";
interface IFormikValue {
email: string;
}
const initialValues = {
email: '',
}
email: "",
};
const FooterNewsletter = () => {
const handleFormikNewsletter = (values: IFormikValue) => {
console.log(values.email);
}
return (
<section className={styles["footer-newsletter"]}>
<Formik
initialValues={initialValues}
onSubmit={handleFormikNewsletter}
validationSchema={FormSchema}
className={styles["footer-newsletter__formik"]}
initialValues={initialValues}
onSubmit={(values: IFormikValue, actions) => {
console.log(values);
actions.resetForm();
actions.setSubmitting(false);
}}
>
<Form className={styles["footer-newsletter__form"]}>
<label htmlFor='email' className={styles["footer-newsletter__form__title"]}>
<label htmlFor="email" className={styles["footer-newsletter__form__title"]}>
ASSINE NOSSA NEWSLETTER
</label>
<div className={styles["footer-newsletter__form__input-btn"]}>
<Field id="email" name="email" placeholder="E-mail" className={styles["footer-newsletter__form__input"]}/>
<ErrorMessage name='email' className={styles["footer-newsletter__form__error"]} component="span"/>
<button type="submit" className={styles["footer-newsletter__form__btn"]}>ENVIAR</button>
<Field
id="email"
name="email"
placeholder="E-mail"
className={styles["footer-newsletter__form__input"]}
/>
<ErrorMessage
name="email"
className={styles["footer-newsletter__form__error"]}
component="span"
/>
<button type="submit" className={styles["footer-newsletter__form__btn"]}>
ENVIAR
</button>
</div>
</Form>
</Formik>
</section>
)
}
);
};
export { FooterNewsletter }
export { FooterNewsletter };

3
src/schema/FormSchema.ts
View File

@ -1,9 +1,6 @@
import * as Yup from 'yup';
import { cpf } from 'cpf-cnpj-validator';
// const phoneNumber = /\([1-9]{2}\) 9[0-9]\d{3}-\d{4}/;
// const cpfNumber = /\d{3}.\d{3}.\d{3}-\d{2}/;
export default Yup.object().shape({
name: Yup.string().required("*Campo Obrigatório").min(3, "*No mínimo 3 digitos"),
email: Yup.string().email("*Email inválido").required("*Campo Obrigatório"),