Merge pull request 'feat: Valida input do Newsletter e adiciona a url no FooterTop' (#12) from development into main

Reviewed-on: #12

desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss

@@ -24,7 +24,6 @@
     @include mq($lg, max) {
       flex-direction: column;
       width: 100%;
-      gap: 12px;
     }
 
     @include mq($xl, min) {
@@ -33,7 +32,6 @@
   }
 
   &__redes-sociais-wrapper {
-    width: 19.9075%;
 
     @include mq($xl, min) {
       width: 16.956521739%;

desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss

@@ -14,13 +14,16 @@
   &__title-wrapper {
     @include display(flex, row, center, space-between);
 
-    img {
-      display: none;
-
-      @include mq($lg, max) {
+    @include mq($lg, max) {
+      margin-bottom: 12px;
+      img {
         display: block;
       }
     }
+
+    img {
+      display: none;
+    }
   }
 
   &__title {
@@ -49,6 +52,11 @@
     margin-bottom: 12px;
     &:last-child {
       margin-bottom: 0;
+
+      @include mq($lg, max) {
+        margin-bottom: 12px;
+      }
+
       a {
         text-decoration: underline;
       }

desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/RedesSociais.module.scss

@@ -19,10 +19,6 @@
     margin-top: 12px;
     @include fontStyle(400, 14px, 16px, $primary-200);
 
-    @include mq($lg, max) {
-      display: none;
-    }
-
     @include mq($xl, min) {
       @include fontStyleResponsive(28px, 33px);
     }

desafio-react-typescript/src/components/Footer/components/Newsletter/Newsletter.tsx

@@ -1,22 +1,40 @@
-import React, { useState } from "react";
-
+import React from "react";
+import { Formik, Form, Field } from "formik";
+import FormikSchema from "../../../../schema/NewsletterSchema";
 import styles from "./Newsletter.module.scss";
 
+interface INewsletterForm {
+  email: string;
+}
+
+const initialValues = {
+  email: "",
+};
+
 export const Newsletter = () => {
-  const [value, setValue] = useState("");
   return (
     <div className={styles["newsletter"]}>
       <div className={styles["newsletter__wrapper"]}>
         <h3 className={styles["newsletter__title"]}>Assine Nossa Newsletter</h3>
         <div className={styles["newsletter__input-container"]}>
-          <input
-            value={value}
-            className={styles["newsletter__input"]}
-            type="email"
-            placeholder="E-mail"
-            onChange={(e) => setValue(e.target.value)}
-          />
-          <button className={styles["newsletter__button"]} onClick={() => setValue("")}>Enviar</button>
+          <Formik
+            onSubmit={(values: INewsletterForm, actions) => {
+              actions.resetForm();
+            }}
+            initialValues={initialValues}
+            validationSchema={FormikSchema}
+          >
+            <Form>
+              <Field
+                className={styles["newsletter__input"]}
+                type="email"
+                placeholder="E-mail"
+                id="email"
+                name="email"
+              />
+              <button className={styles["newsletter__button"]}>Enviar</button>
+            </Form>
+          </Formik>
         </div>
       </div>
     </div>

desafio-react-typescript/src/schema/NewsletterSchema.ts

@@ -0,0 +1,5 @@
+import * as yup from "yup";
+
+export default yup.object().shape({
+    email: yup.string().required("*Campo obrigatório").email("*E-mail Inválido")
+})