SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(form): Adicionado estilos no form

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2023-01-15 13:15:47 -03:00
parent 87696220e3
commit d4c22e384c
5 changed files with 117 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@ -23,6 +23,7 @@
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
@ -15398,6 +15399,17 @@
}
}
},
"node_modules/react-text-mask": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
"dependencies": {
"prop-types": "^15.5.6"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@ -29686,6 +29698,14 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
"react-text-mask": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
"requires": {
"prop-types": "^15.5.6"
}
},
"react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

1
package.json
View File

@ -17,6 +17,7 @@
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"

28
src/components/FormInput/FormInput.tsx
View File

@ -8,6 +8,7 @@ import {
FormikHelpers,
} from "formik";
import * as Yup from "yup";
import styles from "./formInput.module.scss";
interface IFormikValues {
@ -66,8 +67,8 @@ const FormInput = () => {
nome: Yup.string()
.required("*Campo Obrigatório")
.test(
"is-full-name",
"Please enter both your first and last name",
"Nome Completo",
"Preencha com um nome e sobrenome válido.",
function (value: any) {
if (value === "" || value === undefined) {
return false;
@ -82,8 +83,9 @@ const FormInput = () => {
const handleFormikSubmit = (values: IFormikValues) => {
console.log(values);
};
return (
<div>
<div className={styles["form-wrapper"]}>
<h2>Preencha o formulário</h2>
<Formik
onSubmit={handleFormikSubmit}
@ -92,19 +94,29 @@ const FormInput = () => {
>
{({ errors, touched }) => (
<Form>
<div>
<div className={styles["form-col"]}>
<label htmlFor="nome">Nome</label>
<ErrorMessage component="span" name="nome" />
<Field
type="text"
id="nome"
name="nome"
placeholder="Seu nome completo"
className={errors.nome && touched.nome && "invalid"}
/>
<ErrorMessage component="span" name="nome" />
</div>
<div>
<label htmlFor="check">termos</label>
<Field type="checkbox" id="check" name="termos" className="" />
<div className={styles["form-col"]}>
<ErrorMessage component="span" name="termos" />
<label htmlFor="check">
<a href="/">Declaro que li e aceito</a>
</label>
<Field
type="checkbox"
id="check"
name="termos"
className={errors.termos && touched.termos && "invalid"}
/>
</div>
<button type="submit">Cadastre-se</button>
</Form>

68
src/components/FormInput/formInput.module.scss
View File

@ -1,4 +1,4 @@
.form {
/*.form {
display: flex;
flex-direction: column;
}
@ -15,3 +15,69 @@
margin-left: 80px;
color: red;
}
*/
.form-wrapper {
width: 100%;
max-width: 720px;
min-height: 100vh;
margin: 0 auto;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.form-wrapper h2 {
font-weight: 700;
font-size: 27px;
margin: 0 0 12px 0;
@media screen and (min-width: 2500px) {
font-size: 48px;
}
}
.form-wrapper form {
width: 100%;
}
.form-col {
display: flex;
flex-direction: column;
}
.form-col label {
font-weight: 400;
font-size: 14px;
color: #100d0e;
margin: 0 0 4px 0;
@media screen and (min-width: 2500px) {
font-size: 28px;
}
}
.form-col input {
background: #ffffff;
border: 1px solid #100d0e;
border-radius: 25px;
height: 46px;
padding: 15px 0 15px 20px;
&::placeholder {
font-family: "Roboto";
font-size: 14px;
color: #b9b7b7;
}
@media screen and (min-width: 2500px) {
height: 63px;
&::placeholder {
font-size: 28px;
}
}
}
.form-wrapper button {
width: 100%;
height: 52.44px;
background: #000000;
border-radius: 25px;
color: #ffffff;
font-family: "Roboto";
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 400;
}

11
yarn.lock
View File

@ -8183,7 +8183,7 @@
"react-is" "^16.3.2"
"warning" "^4.0.0"
"prop-types@^15.6.2", "prop-types@^15.8.1":
"prop-types@^15.5.6", "prop-types@^15.6.2", "prop-types@^15.8.1":
"integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
"version" "15.8.1"
@ -8449,6 +8449,13 @@
optionalDependencies:
"fsevents" "^2.3.2"
"react-text-mask@^5.5.0":
"integrity" "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw=="
"resolved" "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz"
"version" "5.5.0"
dependencies:
"prop-types" "^15.5.6"
"react-transition-group@^4.4.2":
"integrity" "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="
"resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@ -8459,7 +8466,7 @@
"loose-envify" "^1.4.0"
"prop-types" "^15.6.2"
"react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0":
"react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.14.0", "react@>=16.6.0", "react@>=16.8.0":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
"version" "18.2.0"