feat: ajusta seachbar para tamanho dos figma

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

src/components/Header/Header.tsx

@@ -16,7 +16,10 @@ const Header = () => {
   };
 
   return (
-    <header className={styles["page-header"]}>
+    <header
+      className={styles["page-header"]}
+      data-testid="header__container"
+    >
       <div className={styles["page-header__container"]}>
         <section className={styles["page-header__container-top"]}>
           <div className={styles["page-header__menu"]}>
@@ -35,24 +38,15 @@ const Header = () => {
               onClick={activeMenuMobile}
             />
           </div>
-          <a className={styles["page-header__logo"]} href="/">
+          <a
+            className={styles["page-header__logo"]}
+            href="/"
+            data-testid="header__logo"
+          >
             <img src={Logo} alt="" />
           </a>
           <SearchBar />
-          <div className={styles["page-header__container-login"]}>
-            <Link link="/" text="ENTRAR" className={styles["link"]} />
-            <a
-              href="/"
-              aria-label="Carrinho"
-              className={styles["page-header__cart"]}
-            >
-              <img
-                src={Cart}
-                alt=""
-                className={styles["page-header__cart-image"]}
-              />
-            </a>
-          </div>
+          <MenuTop />
         </section>
         <section className={styles["page-header__container-bottom-mobile"]}>
           <SearchBar />
@@ -65,4 +59,27 @@ const Header = () => {
   );
 };
 
+export function MenuTop() {
+  return (
+    <div
+      className={styles["page-header__container-login"]}
+      data-testid="header__menuTop" 
+    >
+            <Link link="/" text="ENTRAR" className={styles["link"]} testId="header__enter" />
+            <a
+              href="/"
+              aria-label="Carrinho"
+              className={styles["page-header__cart"]}
+            >
+              <img
+                src={Cart}
+                alt=""
+                className={styles["page-header__cart-image"]}
+                data-testid="header__cartIcon"
+              />
+            </a>
+          </div>
+  )
+}
+
 export { Header };

src/components/Header/HeaderLinks.tsx

@@ -3,11 +3,13 @@ import styles from "./header.module.scss";
 
 const HeaderLinks = () => {
   return (
-    <>
+    <div
+      data-testid="header__menuBottom"
+    >
       <Link className={styles["link"]} link="/" text="CURSOS" />
       <Link className={styles["link"]} link="/" text="SAIBA MAIS" />
       <Link className={styles["link"]} link="/" text="INSTITUCIONAIS" />
-    </>
+    </div>
   );
 };
 

src/components/Header/SearchBar.tsx

@@ -6,6 +6,7 @@ const SearchBar = () => {
   return (
     <div className={styles["page-header__busca"]}>
       <input
+        data-testid="header__searchBar"
         className={styles["page-header__busca-input"]}
         type="text"
         placeholder="Buscar..."

src/components/Header/header.module.scss

@@ -5,6 +5,22 @@
     flex-direction: column;
     background: $black;
 
+    @media  (min-width: 2500px) {
+        height: 180px;
+    }
+
+    @media (min-width: 1200px) and (max-width: 2000px) {
+        height: 154px;
+    }
+
+    @media  (min-width: 1000px) and (max-width: 1200px) {
+        height: 137px;
+    }
+
+    @media  (max-width: 700px) {
+        height: 129px;
+    }
+
     &__container-top {
         height: 76px;
         display: flex;
@@ -41,6 +57,27 @@
         outline: 0;
         padding-left: 16px;
 
+        @media  (min-width: 2500px) {
+            width: 600px;
+            height: 50px;
+            font-size: 26px;
+        }
+
+        @media (min-width: 1200px) and (max-width: 2000px) {
+            width: 400px;
+            height: 41px;
+            font-size: 20px;
+        }
+
+        @media  (min-width: 1000px) and (max-width: 1200px) {
+            height: 35px;
+            font-size: 16px;
+        }
+
+        @media  (max-width: 700px) {
+            height: 35px;
+        }
+
 
         &::placeholder {
             color: $gray-800;
@@ -173,11 +210,6 @@
             width: 22.4%;
         }
 
-        &__busca-input {
-            height: 57px;
-            font-size: 28px;
-            line-height: 33px;
-        }
 
         &__busca-icon {
             top: 50%;

src/components/Main/Main.tsx

@@ -1,21 +1,38 @@
 import iconHome from "./assets/iconHome.svg";
 import arrow from "./assets/arrow.svg";
 import { SubjectMain } from "./Subject/SubjectMain";
-
 import styles from "./main.module.scss";
 
-const Main = () => {
+export const Main = () => {
   return (
     <main className={styles["page-main"]}>
-      <div className={styles["page-main__menu"]}>
-        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
-        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
-        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
-      </div>
-      <h1 className={styles["page-main__title"]}>INSTITUCIONAL</h1>
+      <Breadcrumb />
+      <InstitucionalTitle />
       <SubjectMain />
     </main>
   );
 };
 
-export { Main };
+export const Breadcrumb = () => {
+  return (
+    <div
+      className={styles["page-main__menu"]}
+      data-testid="breadcrumb__container"
+    >
+        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
+        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
+        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
+      </div>
+  )
+}
+
+export const InstitucionalTitle = () => {
+  return (
+    <h1
+      className={styles["page-main__title"]}
+      data-testid="title"
+    >
+      INSTITUCIONAL
+    </h1>
+  )
+}

src/components/Main/Subject/Nav/Li/Li.tsx

@@ -4,14 +4,16 @@ import { NavLink, NavLinkProps } from "react-router-dom";
 
 interface LiProps extends NavLinkProps {
   text: string;
-  to: NavLinkProps["to"];
+  to: string;
 }
 
-const LiForm = (props: LiProps) => {
-  const { text, to } = props;
+const LiForm = ({ text, to }: LiProps) => {
+
+  console.log(geDataTestId(to));
   return (
     <li>
       <NavLink
+        data-testid={geDataTestId(to)}
         to={to}
         className={({ isActive }) =>
           isActive
@@ -25,4 +27,13 @@ const LiForm = (props: LiProps) => {
   );
 };
 
+function geDataTestId(url: string ) {
+  return `lateralMenu__item${isTextUrl() ? " lateralMenu__itemActive" : ""}`;
+
+  function isTextUrl() {
+    
+    return window.location.href.includes(url);
+  }
+}
+
 export { LiForm };

src/components/Main/Subject/Nav/Nav.tsx

@@ -10,9 +10,12 @@ const Nav = () => {
 
   return (
     <>
-      <nav className={styles["page-subject__nav"]}>
+      <nav
+        className={styles["page-subject__nav"]}
+        data-testid="lateralMenu__container" 
+      >
         <ul className={styles["page-subject__menu"]}>
-          <LiForm to="/" text="Sobre" />
+          <LiForm to="/Sobre" text="Sobre" />
           <LiForm to="/forma-de-pagamento" text="Forma de Pagamento" />
           <LiForm to="/entrega" text="Entrega" />
           <LiForm to="/troca-e-devolucao" text="Troca e Devolução" />

src/components/Main/Subject/SubjectMain.tsx

@@ -15,7 +15,7 @@ const SubjectMain = () => {
       <Router>
         <Nav />
         <Routes>
-          <Route path="/" element={<Sobre />} />
+          <Route path="/sobre" element={<Sobre />} />
           <Route path="/forma-de-pagamento" element={<FormaDePagamento />} />
           <Route path="/entrega" element={<Entrega />} />
           <Route path="/troca-e-devolucao" element={<TrocaEDevolucao />} />

src/components/Main/Subject/SubjectText.tsx

@@ -4,21 +4,25 @@ import styles from "./subject.module.scss";
 interface SubjectTextProps {
   title: string;
 }
-const SubjectText = (props: SubjectTextProps) => {
-  const { title } = props;
+const SubjectText = ({title}: SubjectTextProps) => {
+
   return (
-    <article className={styles["page-subject__container"]}>
-      <h2 className={styles["page-subject__title"]}>{title}</h2>
-      <p className={styles["page-subject__paragraph"]}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    <article
+      className={styles["page-subject__container"]}
+      data-testid="texts__container"
+    >
+      <Title title={title} />
+        <Text 
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
         commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
         velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
         occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p className={styles["page-subject__paragraph"]}>
+        mollit anim id est laborum."
+        />
+        <Text 
+          text="
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
         illo inventore veritatis et quasi architecto beatae vitae dicta sunt
@@ -27,17 +31,47 @@ const SubjectText = (props: SubjectTextProps) => {
         voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
         quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
         eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-        voluptatem.
-      </p>
-      <p className={styles["page-subject__paragraph"]}>
+        voluptatem." />
+        <Text 
+          text="
         Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
         suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
         autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
         nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
-        voluptas nulla pariatur?
-      </p>
+        voluptas nulla pariatur?" />
     </article>
   );
 };
 
+export type TitleProps = {
+  title: string;
+}
+
+export const Title = ({title}: TitleProps) => { 
+  return (
+    <h2
+      className={styles["texts__title"]}
+      data-testid="texts__title"
+    >
+      {title}
+    </h2>
+  )
+}
+
+export type TextProps = {
+  text: string;
+}
+
+export const Text = ({ text }: TextProps) => {
+  return (
+  <p
+    className={styles["page-subject__paragraph"]}
+    data-testid="texts__text"
+  >
+    {text}
+  </p>
+  )
+
+ }
+
 export { SubjectText };

src/components/button/Button.tsx

@@ -4,15 +4,17 @@ import styles from "../footer/footer.module.scss";
 
 interface ButtonProps {
   text: string;
+  testId?: string;
 }
 
-const Button = (props: ButtonProps) => {
-  const { text } = props;
-  return (
-    <button type="submit" className={styles["button"]}>
-      {props.text}
+const Button = ({ text, testId  }: ButtonProps) => (
+    <button
+      type="submit"
+      className={styles["button"]}
+      data-testid={testId} 
+    >
+      {text}
     </button>
   );
-};
 
 export { Button };

src/components/footer/Footer.tsx

@@ -8,7 +8,10 @@ import styles from "./footer.module.scss";
 
 const Footer = () => {
   return (
-    <footer className={styles["page-footer"]}>
+    <footer
+      className={styles["page-footer"]}
+      data-testid="footer__container"  
+    >
       <Newsletter />
       <FooterTop />
       <FooterBottom />

src/components/footer/footer-bottom/autores/autores.tsx

@@ -10,15 +10,31 @@ import styles from "../../footer.module.scss";
 const Autores = () => {
   return (
     <section className={styles["page-footer__footer-autores"]}>
-      <Text className={styles["page-footer__footer-text"]} text="Powered by" />
-      <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
-      <Text
-        className={styles["page-footer__footer-text"]}
-        text="Developed by"
-      />
-      <Img className={styles["autores-img"]} img={M3} text="M3" />
+      <PoweredBy />
+      <DevelopedBy />
     </section>
   );
 };
 
 export { Autores };
+
+export const PoweredBy = () => (
+  <div
+    data-testid="footer__vtex"
+  >
+    <Text className={styles["page-footer__footer-text"]} text="Powered by" />
+    <Img className={styles["autores-img"]} img={Vtex} text="vtex" />
+  </div>
+)
+
+export const DevelopedBy = () => (
+  <div
+    data-testid="footer__m3"
+  >
+  <Text
+        className={styles["page-footer__footer-text"]}
+        text="Developed by"
+      />
+      <Img className={styles["autores-img"]} img={M3} text="M3" />
+</div>
+)

src/components/footer/footer-bottom/footer-bottom.tsx

@@ -6,15 +6,12 @@ import { Imgs } from "./pagamento/imgs";
 import styles from "../footer.module.scss";
 const FooterBottom = () => {
   return (
-    <section className={styles["page-footer__footer-bottom"]}>
+    <section
+      className={styles["page-footer__footer-bottom"]}
+      data-testid="footer__bottomContainer" 
+    >
       <div className={styles["page-footer__footer-bottom-container"]}>
-        <section className={styles["page-footer__container-footer-text"]}>
-          <Text
-            className={styles["page-footer__footer-text"]}
-            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor"
-          />
-        </section>
+        <Copyright />
         <Imgs />
         <Autores />
       </div>
@@ -23,3 +20,14 @@ const FooterBottom = () => {
 };
 
 export { FooterBottom };
+
+export const Copyright = () => (
+  <section
+    className={styles["page-footer__container-footer-text"]}>
+    <Text
+      testId="footer__copyright"
+      className={styles["page-footer__footer-text"]}
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tecmpor"
+    />
+  </section>
+)

src/components/footer/footer-bottom/img-footer/img.tsx

@@ -1,14 +1,19 @@
 import React from "react";
 
-interface ButtonProps {
+export interface ImgProps {
   img: string;
   text: string;
   className: string;
+  testId?: string
 }
 
-const Img = (props: ButtonProps) => {
-  const { img, text, className } = props;
-  return <img className={className} src={img} alt={text} />;
-};
+const Img = ({ img, text, testId, className }: ImgProps) => (
+  <img
+    className={className}
+    src={img}
+    alt={text}
+    data-testid={testId}
+  />
+)
 
 export { Img };

src/components/footer/footer-bottom/pagamento/imgs.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "../../footer.module.scss";
-import { Img } from "../img-footer/img";
+import { Img, ImgProps } from "../img-footer/img";
 import Master from "../assets/img/Master.png";
 import Visa from "../assets/img/Visa.png";
 import Diners from "../assets/img/Diners.png";
@@ -11,24 +11,46 @@ import Pagseguro from "../assets/img/Pagseguro.png";
 import Boleto from "../assets/img/Boleto.png";
 import vtex from "../assets/img/vtex-pci-200.png";
 
-const Imgs = () => {
+const PaymentsMethods = () => {
   return (
-    <section className={styles["page-footer__imgs"]}>
-      <Img className={styles["img"]} img={Master} text="Cartão master" />
-      <Img className={styles["img"]} img={Visa} text="Cartão visa" />
+    <section
+      className={styles["page-footer__imgs"]}
+      data-testid="footer__paymentMethods"   
+    >
+      <PaymentMethod img={Master} text="Cartão master" />
+      <PaymentMethod img={Visa} text="Cartão visa" />
       <Img
         className={styles["img"]}
         img={Diners}
         text="Cartão american diners"
       />
-      <Img className={styles["img"]} img={Elo} text="Cartão elo" />
-      <Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
-      <Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
-      <Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
+      <PaymentMethod img={Elo} text="Cartão elo" />
+      <PaymentMethod img={Hiper} text="Cartão hiper" />
+      <PaymentMethod img={Pagseguro} text="Pague Seguro" />
+      <PaymentMethod img={Boleto} text="Pagamento boleto" />
       <div className={styles["divisor"]}></div>
-      <Img className={styles["img-grande"]} img={vtex} text="Vtex" />
+      <PaymentMethod isBig img={vtex} text="Vtex" />
     </section>
   );
 };
 
-export { Imgs };
+export type PaymentMethodProps = Pick<ImgProps, "img" | "text"> & {
+  isBig?: boolean;
+}
+
+export const PaymentMethod = ({ img, text, isBig }: PaymentMethodProps) => {
+  return (
+    <Img
+      className={getClassName()}
+      img={img}
+      text={text}
+      testId="footer__paymentMethod"
+    />
+  )
+
+  function getClassName() {
+    return isBig ? styles["img-grande"] : styles["img"]
+  }
+}
+
+export { PaymentsMethods as Imgs };

src/components/footer/footer-top/Institucional/Institucional.tsx

@@ -11,9 +11,15 @@ const Institucional = () => {
     setIsOpen(!isOpen);
   };
   return (
-    <section className={styles["page-footer__container"]}>
+    <section
+      data-testid="footer__menuContainer"
+      className={styles["page-footer__container"]}>
       <div className={styles["container-title"]} onClick={handleMenuFooter}>
-        <Title className={styles["title"]} text="INSTITUCIONAL" />
+        <Title
+          className={styles["title"]}
+          text="INSTITUCIONAL"
+          testId="footer__menuTitle"
+        />
         <ButtonFooterMobile
           className={
             isOpen ? styles["link-mobile-active"] : styles["link-mobile"]
@@ -22,13 +28,22 @@ const Institucional = () => {
       </div>
 
       <div className={isOpen ? styles["active"] : styles["container-link"]}>
-        <Link className={styles["link"]} link="/" text="Quem Somos" />
+        <Link
+          testId="footer__menuItem"
+          className={styles["link"]}
+          link="/"
+          text="Quem Somos"
+        />
         <Link
           className={styles["link"]}
           link="/"
           text="Política de Privacidade"
         />
-        <Link className={styles["link"]} link="/" text="Segurança" />
+        <Link
+          className={styles["link"]}
+          link="/"
+          text="Segurança"
+        />
         <Link
           className={styles["link-underline"]}
           link="/"

src/components/footer/footer-top/Rede-social/Icon/Icon.tsx

@@ -6,15 +6,17 @@ interface IconProps {
   img: string;
   text: string;
   href: string;
+  testId?: string;
 }
 
-const Icon = (props: IconProps) => {
-  const { img, text, href } = props;
-  return (
+const Icon = ({ img, text, href, testId }: IconProps) => (
     <a href={href} target="_blank" className={styles["icon"]} rel="noreferrer">
-      <img src={img} alt={text} />
+      <img
+        src={img}
+        alt={text}
+        data-testid={testId}
+      />
     </a>
-  );
-};
+)
 
 export { Icon };

src/components/footer/footer-top/Rede-social/RedeSociais.tsx

@@ -12,31 +12,45 @@ import styles from "../../footer.module.scss";
 
 const RedeSociais = () => {
   return (
-    <div className={styles["page-footer__rede-sociais"]}>
-      <div className={styles["page-footer__rede-sociais-icons"]}>
+    <div
+      className={styles["page-footer__rede-sociais"]}
+      data-testid="footer__socialContainer"
+    >
+      <div
+        data-testid="footer__socialIcons" 
+        className={styles["page-footer__rede-sociais-icons"]}>
         <Icon
           img={facebook}
           href="https://pt-br.facebook.com/digitalm3/"
           text="icone facebook"
+          testId="footer__socialIcon"
         />
         <Icon
           img={instagram}
           href="https://www.instagram.com/m3.ecommerce/"
           text="icone instagram"
+          testId="footer__socialIcon"
         />
         <Icon img={twitter} href="https://twitter.com/" text="icone facebook" />
         <Icon
           img={youtube}
           href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
           text="icone youtube"
+          testId="footer__socialIcon"
         />
         <Icon
           img={linkedin}
           href="https://www.linkedin.com/company/11412599/"
           text="icone linkedin"
+          testId="footer__socialIcon"
         />
       </div>
-      <Link className={styles["link"]} link="/" text="www.loremipsum.com" />
+      <Link
+        className={styles["link"]}
+        link="/"
+        text="www.loremipsum.com"
+        testId="footer__socialSite"
+      />
     </div>
   );
 };

src/components/footer/footer-top/title/Title.tsx

@@ -1,11 +1,16 @@
 export interface TitleProps {
   text: string;
   className: string;
+  testId?: string 
 }
 
-const Title = (props: TitleProps) => {
-  const { text, className } = props;
-  return <h3 className={className}>{text}</h3>;
+const Title = ({ text, className, testId }: TitleProps) => {
+  return <h3
+    className={className}
+    data-testid={testId}
+  >
+    {text}
+  </h3>;
 };
 
 export { Title };

src/components/footer/newsletter/Newsletter.tsx

@@ -16,14 +16,14 @@ const initialValues = {
 const Newsletter = () => {
   const [isSubmit, setIsSubmit] = useState(false);
   return (
-    <section className={styles["page-footer__newsletter"]}>
+    <section
+      data-testid="newsletter__container"
+      className={styles["page-footer__newsletter"]}
+    >
       <div className={styles["page-footer__newsletter-container"]}>
-        <h3 className={styles["page-footer__newsletter-title"]}>
-          ASSINE NOSSA NEWSLETTER
-        </h3>
+        <Title />   
         <Formik
           onSubmit={(values: FormikValues, { resetForm }) => {
-            console.log(values);
             setIsSubmit(!isSubmit);
             resetForm({ values: initialValues });
           }}
@@ -34,6 +34,7 @@ const Newsletter = () => {
             <div className={styles["page-footer__newsletter-form"]}>
               <Field
                 name="email"
+                data-testid="newsletter__input"
                 className={styles["input"]}
                 placeholder="E-mail"
               />
@@ -43,7 +44,7 @@ const Newsletter = () => {
                 className={styles["page-footer__newsletter-error"]}
               />
             </div>
-            <Button text="ENVIAR" />
+            <Button text="ENVIAR" testId="newsletter__submit" />
           </Form>
         </Formik>
       </div>
@@ -52,3 +53,14 @@ const Newsletter = () => {
 };
 
 export { Newsletter };
+
+export const Title = () => { 
+  return (
+    <h3
+      className={styles["page-footer__newsletter-title"]}
+      data-testid="newsletter__title"
+    >
+      ASSINE NOSSA NEWSLETTER
+    </h3>
+  )
+}

src/components/footer/text/Text.tsx

@@ -1,13 +1,16 @@
-import React from "react";
-
 interface TextProps {
   text: string;
   className: string;
+  testId?: string;
 }
 
-const Text = (props: TextProps) => {
-  const { text, className } = props;
-  return <p className={className}>{text}</p>;
-};
+const Text = ({ text, className, testId}: TextProps) => (
+  <p
+    className={className}
+    data-testid={testId}
+  >
+    {text}
+  </p>
+);
 
 export { Text };

src/components/link/Link.tsx

@@ -2,12 +2,17 @@ export interface LinkProps {
   link: string;
   text: string;
   className: string;
+  testId?: string;
 }
 
 const Link = (props: LinkProps) => {
   const { link, text, className } = props;
   return (
-    <a href={link} className={className}>
+    <a
+      href={link}
+      className={className}
+      data-testid={props.testId} 
+    >
       {text}
     </a>
   );