feat: adiciona modal scss

2023-01-19 21:27:37 -03:00 · 2023-01-19 21:27:37 -03:00 · 854f3bb934
commit 854f3bb934
parent 2f26aeafb8
9 changed files with 94 additions and 16 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "@types/node": "^16.18.11",
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.10",
+        "date-fns": "^2.29.3",
        "formik": "^2.2.9",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
@ -24,6 +25,7 @@
        "sass": "^1.57.1",
        "scss": "^0.2.4",
        "typescript": "^4.9.4",
+        "validations-br": "^1.3.0",
        "web-vitals": "^2.1.4",
        "yup": "^0.32.11",
        "yup-phone": "^1.3.2"
@ -6141,6 +6143,18 @@
        "node": ">=10"
      }
    },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -16306,6 +16320,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "node_modules/validations-br": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/validations-br/-/validations-br-1.3.0.tgz",
+      "integrity": "sha512-H6sNgcqiPDlSEJOtORjzg7XlMahlrl0lGhK2VGj1TjqBWO0+hxIr+8+77xBKCbEZMqsaeMrGHUvQwQTloI9RAg=="
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@ -21621,6 +21640,11 @@
        "whatwg-url": "^8.0.0"
      }
    },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
    "debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -28850,6 +28874,11 @@
        "spdx-expression-parse": "^3.0.0"
      }
    },
+    "validations-br": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/validations-br/-/validations-br-1.3.0.tgz",
+      "integrity": "sha512-H6sNgcqiPDlSEJOtORjzg7XlMahlrl0lGhK2VGj1TjqBWO0+hxIr+8+77xBKCbEZMqsaeMrGHUvQwQTloI9RAg=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
+    "date-fns": "^2.29.3",
    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@ -19,6 +20,7 @@
    "sass": "^1.57.1",
    "scss": "^0.2.4",
    "typescript": "^4.9.4",
+    "validations-br": "^1.3.0",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11",
    "yup-phone": "^1.3.2"
--- a/src/components/header/assets/close.png
+++ b/src/components/header/assets/close.png
--- a/src/components/header/header-hamburger/header-hamburger.module.scss
+++ b/src/components/header/header-hamburger/header-hamburger.module.scss
@ -18,12 +18,13 @@
    }
  }
  .headerHamburgerPlaceholder {
+    position: relative;
    padding: 0 16px 0 16px;

    .lupaIcon {
-      /* position: relative;
-      left: 955px;
-      top: -27px; */
+      position: absolute;
+      right: 32px;
+      top: 9px;
    }

    & input {
--- a/src/components/header/header-hamburger/header-hamburger.tsx
+++ b/src/components/header/header-hamburger/header-hamburger.tsx
@ -22,10 +22,7 @@ export function HeaderHamburger({ openModal }: HamburgerProps) {
      </div>
      <div className={style.headerHamburgerPlaceholder}>
        <input type="text" placeholder="Buscar..." />
-        <a href="/">
-          {" "}
-          <img className={style.lupaIcon} src={lupa} alt=""></img>
-        </a>
+        <img className={style.lupaIcon} src={lupa} alt=""></img>
      </div>
    </div>
  );
--- a/src/components/header/header-hamburger/menu-aberto.module.scss
+++ b/src/components/header/header-hamburger/menu-aberto.module.scss
@ -2,6 +2,8 @@
  background: white;
  width: 100%;
  height: 585px;
+  max-width: 100%;
+  max-height: 100%;
 }

 .modalOverlay {
@ -13,7 +15,33 @@
  left: 0;
  padding-right: 36px;
 }
+.modalOpen {
+  height: 78px;
+  background: #000000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;

-.cscs {
-  font-size: 50px;
+  & span {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #ffffff;
+  }
+}
+
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 31px 16px;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+  color: #c4c4c4;
 }
--- a/src/components/header/header-hamburger/menu-aberto.tsx
+++ b/src/components/header/header-hamburger/menu-aberto.tsx
@ -1,6 +1,7 @@
 import React from "react";
 import Modal from "react-modal";
 import style from "./menu-aberto.module.scss";
+import close from "../assets/close.png";

 interface MenuHamburgerProps {
  isOpen: boolean;
@ -16,7 +17,15 @@ export function MenuAberto({ isOpen, onRequestClose }: MenuHamburgerProps) {
      className={style.menuModal}
      ariaHideApp={false}
    >
-      <h1 className={style.cscs}>Hello World</h1>
+      <div className={style.modalOpen}>
+        <span>ENTRAR</span>
+        <img src={close} alt="" />
+      </div>
+      <div className={style.menu}>
+        <span>CURSOS</span>
+        <span>SAIBA MAIS</span>
+        <span>INSTITUCIONAL</span>
+      </div>
    </Modal>
  );
 }
--- a/src/components/header/header.module.scss
+++ b/src/components/header/header.module.scss
@ -34,6 +34,7 @@
      .headerSearch {
        display: flex;
        align-items: center;
+        position: relative;

        & input {
          box-sizing: border-box;
@ -60,9 +61,9 @@
        }

        & img {
-          position: relative;
-          right: 34px;
-          top: 2px;
+          position: absolute;
+          right: 18px;
+          top: 7px;

          @media (min-width: 2500px) {
            width: 35px;
--- a/src/components/main/form/schema/Formschema.tsx
+++ b/src/components/main/form/schema/Formschema.tsx
@ -1,5 +1,7 @@
 import * as Yup from "yup";
 import "yup-phone";
+import { validateCPF, validatePhone } from "validations-br";
+import { parse, isDate } from "date-fns";

 export default Yup.object().shape({
  Nome: Yup.string()
@ -13,9 +15,18 @@ export default Yup.object().shape({
      /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      "Email inválido."
    ),
-  CPF: Yup.number().required("*Campo Obrigatório"),
-  Nascimento: Yup.date().required("*Campo Obrigatório"),
-  /* .min(new Date(), "Não é possível incluir uma data que já passou.") */
+  CPF: Yup.string()
+    .required("* Campo obrigatório.")
+    .test("test-cpf", "* CPF inválido.", (cpf) => {
+      if (cpf) {
+        return validateCPF(cpf);
+      } else {
+        return false;
+      }
+    }),
+  Nascimento: Yup.date()
+    .required("*Campo Obrigatório")
+    .typeError("Data de nascimento inválida"),
  Telefone: Yup.string()
    .required("*Campo Obrigatório")
    .phone(undefined, false, "Número de telefone inválido"),