From 6bdb5cd549ce350ea3d2d9913879eddc052a5d48 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 4 Jan 2023 11:41:36 -0300 Subject: [PATCH] =?UTF-8?q?feat(Contato):=20Cria=20e=20estiliza=20o=20form?= =?UTF-8?q?ul=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio-react-typescript/package-lock.json | 105 +++++++++++++++- desafio-react-typescript/package.json | 4 +- .../components/Contato/Contato.module.scss | 101 ++++++++++++++++ .../Main/components/Contato/Contato.tsx | 114 ++++++++++++++++++ .../Main/components/Form/FormCustom.tsx | 9 -- .../Main/components/Informacoes.module.scss | 1 + .../Main/components/Informacoes.tsx | 7 +- .../src/styles/variaveis.scss | 3 + 8 files changed, 331 insertions(+), 13 deletions(-) create mode 100644 desafio-react-typescript/src/components/Main/components/Contato/Contato.module.scss create mode 100644 desafio-react-typescript/src/components/Main/components/Contato/Contato.tsx delete mode 100644 desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx diff --git a/desafio-react-typescript/package-lock.json b/desafio-react-typescript/package-lock.json index 654dfbf..8ac9419 100644 --- a/desafio-react-typescript/package-lock.json +++ b/desafio-react-typescript/package-lock.json @@ -15,12 +15,14 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" } }, "node_modules/@adobe/css-tools": { @@ -3802,6 +3804,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" + }, "node_modules/@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -7959,6 +7966,42 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz", + "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/formik/node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/formik/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -8334,6 +8377,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11404,6 +11460,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -11729,6 +11790,11 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -13631,6 +13697,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/property-expr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz", + "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==" + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -13940,6 +14011,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15483,6 +15559,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -15515,6 +15596,11 @@ "node": ">=0.6" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -16815,6 +16901,23 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "dependencies": { + "@babel/runtime": "^7.15.4", + "@types/lodash": "^4.14.175", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "nanoclone": "^0.2.1", + "property-expr": "^2.0.4", + "toposort": "^2.0.2" + }, + "engines": { + "node": ">=10" + } } } } diff --git a/desafio-react-typescript/package.json b/desafio-react-typescript/package.json index 8280cc0..7424f8c 100644 --- a/desafio-react-typescript/package.json +++ b/desafio-react-typescript/package.json @@ -10,12 +10,14 @@ "@types/node": "^16.18.11", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.10", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/desafio-react-typescript/src/components/Main/components/Contato/Contato.module.scss b/desafio-react-typescript/src/components/Main/components/Contato/Contato.module.scss new file mode 100644 index 0000000..9611b24 --- /dev/null +++ b/desafio-react-typescript/src/components/Main/components/Contato/Contato.module.scss @@ -0,0 +1,101 @@ +@import "../../../../styles/all.scss"; + +.contato { + width: 69.2592592%; + + @include mq($lg, max) { + width: 100%; + } + + @include mq($xl, min) { + width: 73.04347826%; + } + + &__title { + @include fontStyle(700, 24px, 28px, $black); + margin-bottom: 12px; + + @include mq($lg, max) { + text-align: center; + } + + @include mq($xl, min) { + @include fontStyleResponsive(48px, 56px); + } + } + + &__container { + display: flex; + flex-direction: column; + } + + &__label { + @include fontStyle(400, 14px, 16px, $black-500); + margin: 0 0 12px 15px; + + @include mq($xl, min) { + @include fontStyleResponsive(28px, 33px); + } + } + + &__input { + width: 100%; + height: 46px; + @include fontStyle(400, 14px, 16px, $gray-300); + @include borderStyle(1px, $black-500, 25px); + margin-bottom: 12px; + padding: 15px 20px; + + @include mq($xl, min) { + height: 63px; + @include fontStyleResponsive(28px, 33px); + } + } + + &__span-agree { + @include fontStyle(400, 14px, 16px, $primary-900); + margin-right: 3px; + } + + &__agree-wrapper { + @include display(flex, row, flex-end, center); + } + + &__label-agree { + text-decoration: underline; + @include fontStyle(400, 14px, 16px, $black-500); + margin-right: 4.28px; + + @include mq($xl, min) { + @include fontStyleResponsive(28px, 33px); + } + } + + &__agree { + width: 18.64px; + height: 18px; + + @include mq($xl, min) { + width: 36.4px; + height: 35.15px; + } + } + + &__button-submit { + width: 100%; + height: 52.44px; + background: $black; + + border-radius: 25px; + + padding: 17px 0 16.44px; + margin-top: 12px; + + @include fontStyle(400, 16px, 19px, $white); + + @include mq($xl, min) { + @include fontStyleResponsive(32px, 38px); + height: 71px; + } + } +} diff --git a/desafio-react-typescript/src/components/Main/components/Contato/Contato.tsx b/desafio-react-typescript/src/components/Main/components/Contato/Contato.tsx new file mode 100644 index 0000000..715d236 --- /dev/null +++ b/desafio-react-typescript/src/components/Main/components/Contato/Contato.tsx @@ -0,0 +1,114 @@ +import React from "react"; + +import { Formik, Form, Field } from "formik"; + +import styles from "./Contato.module.scss"; + +interface IForm { + name: string; + email: string; + cpf: string; + dateBirth: string; + telephone: string; + instagram: string; + agree: boolean; +} + +const initialValues = { + name: "", + email: "", + cpf: "", + dateBirth: "", + telephone: "", + instagram: "", + agree: false, +}; + +const Contato = () => { + const handleSubmit = (values: IForm) => { + console.log(values); + }; + + return ( +
+ +
+

Preencha o formulário

+
+ + + + + + + + + + + + +
+ * + + +
+
+ +
+ +
+ ); +}; + +export default Contato; diff --git a/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx b/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx deleted file mode 100644 index 210336c..0000000 --- a/desafio-react-typescript/src/components/Main/components/Form/FormCustom.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const FormCustom = () => { - return ( -

Form

- ) -} - -export default FormCustom; \ No newline at end of file diff --git a/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss index 3df5182..fc73c68 100644 --- a/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss +++ b/desafio-react-typescript/src/components/Main/components/Informacoes.module.scss @@ -10,6 +10,7 @@ .content-list { border-right: 1px solid $black; width: 27.96296296%; + max-height: 285px; @include mq($lg, max) { width: 100%; diff --git a/desafio-react-typescript/src/components/Main/components/Informacoes.tsx b/desafio-react-typescript/src/components/Main/components/Informacoes.tsx index f5fd2a4..bee8cd2 100644 --- a/desafio-react-typescript/src/components/Main/components/Informacoes.tsx +++ b/desafio-react-typescript/src/components/Main/components/Informacoes.tsx @@ -1,4 +1,5 @@ import React from "react"; +import Contato from "./Contato/Contato"; import styles from "./Informacoes.module.scss"; const Informacoes = () => { @@ -22,7 +23,7 @@ const Informacoes = () => { -
+ {/*

Sobre

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do @@ -51,7 +52,9 @@ const Informacoes = () => { nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-
+
*/} + + ); }; diff --git a/desafio-react-typescript/src/styles/variaveis.scss b/desafio-react-typescript/src/styles/variaveis.scss index 79c2cd6..da6264e 100644 --- a/desafio-react-typescript/src/styles/variaveis.scss +++ b/desafio-react-typescript/src/styles/variaveis.scss @@ -13,8 +13,11 @@ $primary-700: #f2f2f2; $primary-800: #f9f9f9; $primary-900: #ff0000; + +$gray-300: #B9B7B7; $gray-500: #7d7d7d; $gray-900: #292929; +$black-500: #100D0E; //media Queries $sm: 375px; $lg: 1024px; -- 2.34.1