feat: Adiciona icone de menos no accordion aberto

react-project/src/components/Footer/Newsletter.tsx

@@ -1,7 +1,7 @@
-import newsletter from "./assets/modules/Newsletter.module.scss";
-
 import { Formik, Form, Field, ErrorMessage } from "formik";
+import { useState } from "react";
 
+import newsletter from "./assets/modules/Newsletter.module.scss";
 import NewsletterSchema from "./assets/schemas/NewsletterSchema";
 
 interface IEmailType {
@@ -9,30 +9,44 @@ interface IEmailType {
 }
 
 const Newsletter = () => {
+  const [feedback, setFeedback] = useState(false);
+  const Feedback = () => {
+    setFeedback(!feedback);
+  };
+
   return (
     <div className={newsletter["newsletter"]}>
       <div className={newsletter["newsletter__wrapper"]}>
         <h3>ASSINE NOSSA NEWSLETTER</h3>
         <Formik
           onSubmit={(values: IEmailType, actions) => {
+            Feedback();
             actions.resetForm();
-            const sent = document.querySelector(
-              "#emailsent"
-            ) as HTMLSpanElement;
-            sent.innerHTML = "Email cadastrado com sucesso!";
           }}
           initialValues={{ email: "" }}
           validationSchema={NewsletterSchema}
         >
           <Form>
-            <Field placeholder="E-mail" id="email" name="email" />
+            <Field
+              placeholder="E-mail"
+              id="email"
+              name="email"
+              onBlur={() => {
+                setFeedback(false);
+              }}
+            />
             <ErrorMessage
               component="span"
               name="email"
               className={newsletter["invalid"]}
             />
             <button type="submit">ENVIAR</button>
-            <span id="emailsent" className={newsletter["success"]}></span>
+
+            {feedback ? (
+              <span className={newsletter["success"]}>
+                Email cadastrado com sucesso!
+              </span>
+            ) : undefined}
           </Form>
         </Formik>
       </div>

react-project/src/components/Footer/SitemapAccordion.tsx

@@ -4,6 +4,7 @@ import {
   AccordionHeader,
   AccordionItem,
 } from "react-headless-accordion";
+import { useState } from "react";
 import { Link } from "./Link";
 
 import links from "./assets/modules/SitemapAccordion.module.scss";
@@ -11,12 +12,26 @@ import links from "./assets/modules/SitemapAccordion.module.scss";
 import more from "./assets/svgs/more.svg";
 
 const SitemapAccordion = () => {
+  const [institucional, setInstitucional] = useState(false);
+  const [duvidas, setDuvidas] = useState(false);
+  const [faleConosco, setFaleConosco] = useState(false);
+
+  const changeIcon1 = () => {
+    setInstitucional(!institucional);
+  };
+  const changeIcon2 = () => {
+    setDuvidas(!duvidas);
+  };
+  const changeIcon3 = () => {
+    setFaleConosco(!faleConosco);
+  };
+
   return (
     <Accordion className={links["accordion"]} alwaysOpen={true}>
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon1}>
           <h4>Institucional</h4>
-          <img src={more} alt="Icone de +" />
+          {institucional ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>
@@ -30,9 +45,9 @@ const SitemapAccordion = () => {
       </AccordionItem>
 
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon2}>
           <h4>Dúvidas</h4>
-          <img src={more} alt="Icone de +" />
+          {duvidas ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>
@@ -46,9 +61,9 @@ const SitemapAccordion = () => {
       </AccordionItem>
 
       <AccordionItem>
-        <AccordionHeader>
+        <AccordionHeader onClick={changeIcon3}>
           <h4>Fale Conosco</h4>
-          <img src={more} alt="Icone de +" />
+          {faleConosco ? <span>-</span> : <img src={more} alt="Icone de +" />}
         </AccordionHeader>
 
         <AccordionBody>

react-project/src/components/Footer/assets/modules/SitemapAccordion.module.scss

@@ -20,6 +20,12 @@
       line-height: 16px;
       color: var(--black-200);
     }
+
+    span {
+      font-size: 21px;
+      font-weight: bold;
+      color: var(--black-200);
+    }
   }
 
   ul {

react-project/src/components/Header/assets/modules/Hamburguer.module.scss

@@ -11,7 +11,7 @@
 .content {
   position: absolute;
   background-color: var(--white);
-  width: 97.4609%;
+  width: 96.4845%;
   height: 585px;
 
   @media screen and (max-width: 599px) {

react-project/src/components/MainInstitucional/Contato.tsx

@@ -1,5 +1,6 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import MaskedInput from "react-text-mask";
+import { useState } from "react";
 
 import FormSchema from "./assets/schemas/FormSchema";
 
@@ -23,10 +24,20 @@ const initialValues = {
   telefone: "",
   instagram: "",
   terms: false,
-  /*sent: false,*/
 };
 
-const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
+const dateMask = [
+  /[0-3]/,
+  /\d/,
+  ".",
+  /[0-1]/,
+  /\d/,
+  ".",
+  /[1-2]/,
+  /\d/,
+  /\d/,
+  /\d/,
+];
 const cpfMask = [
   /\d/,
   /\d/,
@@ -62,16 +73,20 @@ const phoneNumberMask = [
 ];
 
 const Contato = () => {
+  const [feedback, setFeedback] = useState(false);
+  const Feedback = () => {
+    setFeedback(true);
+  };
+
   return (
     <div className={contato["forms"]}>
       <h2>Preencha o formulário</h2>
 
       <Formik
         onSubmit={(values: IFormikValues, actions) => {
+          Feedback();
           console.log(values);
           actions.resetForm();
-          const sent = document.querySelector("#sent") as HTMLSpanElement;
-          sent.innerHTML = "*Formulário enviado com sucesso!";
         }}
         initialValues={initialValues}
         validationSchema={FormSchema}
@@ -80,7 +95,14 @@ const Contato = () => {
           <Form>
             <div className={contato["forms__form-col"]}>
               <label htmlFor="name">Nome</label>
-              <Field placeholder="Seu nome completo" id="name" name="name" />
+              <Field
+                onBlur={() => {
+                  setFeedback(false);
+                }}
+                placeholder="Seu nome completo"
+                id="name"
+                name="name"
+              />
               <ErrorMessage
                 component="span"
                 name="name"
@@ -183,7 +205,12 @@ const Contato = () => {
             </div>
 
             <button type="submit">CADASTRE-SE</button>
-            <span id="sent" className={contato["forms__success"]}></span>
+
+            {feedback ? (
+              <span className={contato["forms__success"]}>
+                *Formulário enviado com sucesso!
+              </span>
+            ) : undefined}
           </Form>
         )}
       </Formik>