From 517c370373f4d01f64039db9318a1df4d322edcf Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sat, 31 Dec 2022 11:16:04 -0300 Subject: [PATCH 1/2] feat(form): created initial component --- src/pages/Institutional/Contact/index.module.scss | 0 src/pages/Institutional/Contact/index.tsx | 11 +++++++++++ src/settings/routes/index.tsx | 3 ++- src/template/Sidebar/index.tsx | 2 +- 4 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 src/pages/Institutional/Contact/index.module.scss create mode 100644 src/pages/Institutional/Contact/index.tsx diff --git a/src/pages/Institutional/Contact/index.module.scss b/src/pages/Institutional/Contact/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Institutional/Contact/index.tsx b/src/pages/Institutional/Contact/index.tsx new file mode 100644 index 0000000..3fcefe5 --- /dev/null +++ b/src/pages/Institutional/Contact/index.tsx @@ -0,0 +1,11 @@ +export function Contact() { + return ( +
+
+

+ Preencha o formulário +

+
+
+ ) +} diff --git a/src/settings/routes/index.tsx b/src/settings/routes/index.tsx index 5981a21..bdfc441 100644 --- a/src/settings/routes/index.tsx +++ b/src/settings/routes/index.tsx @@ -2,6 +2,7 @@ import { useMemo } from 'react' import { Outlet, Route, Routes } from 'react-router-dom' import { Breadcrumb } from '../../components/Breadcrumb' import { About } from '../../pages/Institutional/About' +import { Contact } from '../../pages/Institutional/Contact' import { Footer } from '../../template/Footer' import { Header } from '../../template/Header' import { Sidebar } from '../../template/Sidebar' @@ -47,7 +48,7 @@ export function Router() { } > } /> - Preencha o formulário} /> + } /> Formas de pagamentos} /> Troca e Devolução} /> Privacidade} /> diff --git a/src/template/Sidebar/index.tsx b/src/template/Sidebar/index.tsx index f367cf2..44fc68e 100644 --- a/src/template/Sidebar/index.tsx +++ b/src/template/Sidebar/index.tsx @@ -11,7 +11,7 @@ export function Sidebar() { { name: 'Entrega', path: '/shipping' }, { name: 'Troca e Devolução', path: '/exchange' }, { name: 'Segurança e Privacidade', path: '/privacity' }, - { name: 'Contact', path: '/contact' }, + { name: 'Contato', path: '/contact' }, ] return ( From 5b6ea1aeb7280a63377757f51760bb840c516e75 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sun, 1 Jan 2023 08:21:49 -0300 Subject: [PATCH 2/2] feat(form): created initial styles for medium, small devices --- package-lock.json | 195 +++++++++++++++++- package.json | 4 +- .../Institutional/About/index.module.scss | 4 + .../Institutional/Contact/fragments/Input.tsx | 29 +++ .../Institutional/Contact/index.module.scss | 86 ++++++++ src/pages/Institutional/Contact/index.tsx | 104 +++++++++- .../Contact/schema/FormSchema.tsx | 15 ++ src/template/Sidebar/index.module.scss | 1 + 8 files changed, 432 insertions(+), 6 deletions(-) create mode 100644 src/pages/Institutional/Contact/fragments/Input.tsx create mode 100644 src/pages/Institutional/Contact/schema/FormSchema.tsx diff --git a/package-lock.json b/package-lock.json index 906c5b4..a3915a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,14 @@ "version": "0.1.0", "dependencies": { "@types/react-router-dom": "^5.3.3", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "sass": "^1.57.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.5", @@ -3840,6 +3842,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", @@ -8020,6 +8027,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", @@ -8395,6 +8438,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", @@ -11472,6 +11528,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", @@ -11799,6 +11860,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", @@ -13702,6 +13768,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", @@ -14011,6 +14082,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", @@ -15586,6 +15662,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", @@ -15618,6 +15699,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", @@ -16920,6 +17006,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" + } } }, "dependencies": { @@ -19537,6 +19640,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==" + }, "@types/mime": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz", @@ -22639,6 +22747,32 @@ "mime-types": "^2.1.12" } }, + "formik": { + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz", + "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==", + "requires": { + "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" + }, + "dependencies": { + "deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -22897,6 +23031,21 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "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==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "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==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25117,6 +25266,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "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==" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -25364,6 +25518,11 @@ "thunky": "^1.0.2" } }, + "nanoclone": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", + "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==" + }, "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -26549,6 +26708,11 @@ } } }, + "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==" + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -26771,6 +26935,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "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==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -27926,6 +28095,11 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "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==" + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -27949,6 +28123,11 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "tough-cookie": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", @@ -28944,6 +29123,20 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" + }, + "yup": { + "version": "0.32.11", + "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz", + "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==", + "requires": { + "@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" + } } } } diff --git a/package.json b/package.json index 072b043..78869bf 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,14 @@ }, "dependencies": { "@types/react-router-dom": "^5.3.3", + "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "sass": "^1.57.1", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", diff --git a/src/pages/Institutional/About/index.module.scss b/src/pages/Institutional/About/index.module.scss index 90b399c..ba940a0 100644 --- a/src/pages/Institutional/About/index.module.scss +++ b/src/pages/Institutional/About/index.module.scss @@ -1,3 +1,7 @@ +.about { + margin-bottom: 81px; +} + .descriptions { display: flex; align-items: flex-start; diff --git a/src/pages/Institutional/Contact/fragments/Input.tsx b/src/pages/Institutional/Contact/fragments/Input.tsx new file mode 100644 index 0000000..c8ac759 --- /dev/null +++ b/src/pages/Institutional/Contact/fragments/Input.tsx @@ -0,0 +1,29 @@ +import { ErrorMessage, Field } from 'formik' +import { InputHTMLAttributes } from 'react' + +interface InputProps extends InputHTMLAttributes { + name: string + label: string + error?: any +} + +export function Input({ label, name, error, ...props }: InputProps) { + return ( +
+
+ + +
+ +
+ ) +} diff --git a/src/pages/Institutional/Contact/index.module.scss b/src/pages/Institutional/Contact/index.module.scss index e69de29..1dfe57b 100644 --- a/src/pages/Institutional/Contact/index.module.scss +++ b/src/pages/Institutional/Contact/index.module.scss @@ -0,0 +1,86 @@ +.contact { + width: 100%; + height: 100%; + + margin-bottom: 69.56px; +} + +.form { + fieldset { + width: 100%; + border: none; + } +} + +.form :global { + .form-group { + margin-bottom: 12px; + } + + .form-group-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + label { + display: block; + } + + .error-message { + color: red; + } + } + + .form-input { + display: block; + + width: 100%; + height: 46px; + padding: 20px; + + border: 1px solid var(--clr-gray-1000); + border-radius: 25px; + } + + .form-check { + display: flex; + align-items: center; + justify-content: center; + gap: 4.28px; + margin-bottom: 12px; + + text-align: center; + + label { + text-decoration: underline; + + span { + display: inline-block; + + text-decoration: none; + color: var(--clr-common-red); + } + } + + input[type='checkbox'] { + width: 18.64px; + height: 18px; + border-radius: 3px; + border: 1px solid var(--clr-common-black); + } + } + + button[type='submit'] { + width: 100%; + height: 52.44px; + border-radius: 25px; + + display: flex; + align-items: center; + justify-content: center; + background-color: var(--clr-common-black); + color: var(--clr-common-white); + + text-transform: uppercase; + } +} diff --git a/src/pages/Institutional/Contact/index.tsx b/src/pages/Institutional/Contact/index.tsx index 3fcefe5..da402f2 100644 --- a/src/pages/Institutional/Contact/index.tsx +++ b/src/pages/Institutional/Contact/index.tsx @@ -1,10 +1,106 @@ +import { Field, Form, Formik } from 'formik' +import { useMemo } from 'react' +import { Input } from './fragments/Input' + +import validadeShema from './schema/FormSchema' + +import css from './index.module.scss' + export function Contact() { + const initialValues = useMemo(() => { + return { + fullname: '', + email: '', + cpf: '', + date: '', + tel: '', + socials_instagram: '', + terms: false, + } + }, []) + return ( -
+
-

- Preencha o formulário -

+

Preencha o formulário

+ + { + e.validateField('email') + + e.resetForm({ + isSubmitting: true, + }) + }} + initialValues={initialValues} + validationSchema={validadeShema} + > + {({ errors, touched }) => { + return ( +
+
+ + + + + + + + + + +
+ + +
+ + +
+
+ ) + }} +
) diff --git a/src/pages/Institutional/Contact/schema/FormSchema.tsx b/src/pages/Institutional/Contact/schema/FormSchema.tsx new file mode 100644 index 0000000..ffa4c1c --- /dev/null +++ b/src/pages/Institutional/Contact/schema/FormSchema.tsx @@ -0,0 +1,15 @@ +import * as Yup from 'yup' + +const messages = { + required: '*Campo Obrigatório', +} + +export default Yup.object().shape({ + fullname: Yup.string().required(messages.required), + email: Yup.string().required(messages.required).email('Email ínvalido'), + cpf: Yup.string().required(messages.required), + tel: Yup.string().required(messages.required), + date: Yup.string().required(messages.required), + socials_instagram: Yup.string(), + terms: Yup.boolean().required('*'), +}) diff --git a/src/template/Sidebar/index.module.scss b/src/template/Sidebar/index.module.scss index 22ac627..d899511 100644 --- a/src/template/Sidebar/index.module.scss +++ b/src/template/Sidebar/index.module.scss @@ -6,6 +6,7 @@ @media screen and (min-width: 1025px) { margin-top: 0; border-right: 1px solid var(--clr-common-black); + max-height: 285px; } .container {