From 07f10481ec80664b7826f3b4fb60c8ab2932d629 Mon Sep 17 00:00:00 2001
From: guiprj <guilhermecamargo90@hotmail.com>
Date: Tue, 17 Jan 2023 23:04:58 -0300
Subject: [PATCH] feat: criando o accordion e fazendo alguns ajustes no css
 mobile

---
 package.json                                  |   1 +
 src/assets/IconMore.svg                       |   3 +
 .../Footer/AccordionLinks/index.tsx           | 116 ++++++++++++++++++
 .../Footer/AccordionLinks/style.module.css    |  65 ++++++++++
 .../Footer/ContainerFooter/style.module.css   |  14 ++-
 src/components/Footer/index.tsx               |   2 +
 src/components/Icon/index.tsx                 |  18 ++-
 src/components/Main/style.module.css          |  10 +-
 src/pages/Contato/style.module.css            |  17 ++-
 src/pages/Entrega/style.module.css            |  19 +--
 src/pages/FormaPagamento/style.module.css     |  19 +--
 .../SegurancaPrivacidade/style.module.css     |  19 +--
 src/pages/Sobre/style.module.css              |  19 +--
 src/pages/TrocaDevolucao/style.module.css     |  19 +--
 yarn.lock                                     |   5 +
 15 files changed, 300 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/IconMore.svg
 create mode 100644 src/components/Footer/AccordionLinks/index.tsx
 create mode 100644 src/components/Footer/AccordionLinks/style.module.css

diff --git a/package.json b/package.json
index 02fcfdc..68926d1 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-headless-accordion": "^1.0.2",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
diff --git a/src/assets/IconMore.svg b/src/assets/IconMore.svg
new file mode 100644
index 0000000..d64bfd8
--- /dev/null
+++ b/src/assets/IconMore.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
+</svg>
diff --git a/src/components/Footer/AccordionLinks/index.tsx b/src/components/Footer/AccordionLinks/index.tsx
new file mode 100644
index 0000000..5b5dc5d
--- /dev/null
+++ b/src/components/Footer/AccordionLinks/index.tsx
@@ -0,0 +1,116 @@
+import {
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionItem,
+} from "react-headless-accordion";
+import { Icon } from "../../Icon";
+import { NavigationLinks } from "../../NavigationLinks";
+
+import style from "./style.module.css";
+
+export function AccordionLinks() {
+  const linksInfoInstitucional = [
+    {
+      slug: "quem-somos",
+      text: "Quem Somos",
+    },
+    {
+      slug: "politica-de-privacidade",
+      text: "Política de Privacidade",
+    },
+    {
+      slug: "seguranca",
+      text: "Segurança",
+    },
+    {
+      slug: "seja-um-Revendedor",
+      text: "Seja um Revendedor",
+    },
+  ];
+  const linksInfoDoubts = [
+    {
+      slug: "entrega",
+      text: "Entrega",
+    },
+    {
+      slug: "pagamento",
+      text: "Pagamento",
+    },
+    {
+      slug: "trocas-e-devoluções",
+      text: "Trocas e Devoluções",
+    },
+    {
+      slug: "duvidas-frequentes",
+      text: "Dúvidas Frequentes",
+    },
+  ];
+  const linksInfoContactUs = [
+    {
+      slug: "contato",
+      text: "Atendimento ao Consumidor",
+    },
+    {
+      slug: "contato",
+      text: "(11) 4159 9504",
+    },
+    {
+      slug: "whatsapp",
+      text: "Atendimento Online",
+    },
+    {
+      slug: "whatsapp",
+      text: "(11) 99433-8825",
+    },
+  ];
+  return (
+    <div className={style.containerAccordion}>
+      <Accordion>
+        <AccordionItem>
+          <AccordionHeader className={style.titleAccordionContent}>
+            <h3>Institucional</h3>
+            <Icon name="iconMore" />
+          </AccordionHeader>
+
+          <AccordionBody className={style.bodyAccordionContent}>
+            <NavigationLinks links={linksInfoInstitucional} />
+          </AccordionBody>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionHeader className={style.titleAccordionContent}>
+            <h3 className={`accordion-title`}>Dúvidas</h3>
+            <Icon name="iconMore" />
+          </AccordionHeader>
+
+          <AccordionBody className={style.bodyAccordionContent}>
+            <NavigationLinks links={linksInfoDoubts} />
+          </AccordionBody>
+        </AccordionItem>
+
+        <AccordionItem>
+          <AccordionHeader className={style.titleAccordionContent}>
+            <h3 className={`accordion-title`}>Fale Conosco</h3>
+            <Icon name="iconMore" />
+          </AccordionHeader>
+
+          <AccordionBody className={style.bodyAccordionContent}>
+            <NavigationLinks links={linksInfoContactUs} />
+          </AccordionBody>
+        </AccordionItem>
+      </Accordion>
+      <div className={style.contentListIcons}>
+        <div className={style.contentListIconsWrapper}>
+          <div className={style.listIcons}>
+            <Icon name="facebook" />
+            <Icon name="instagram" />
+            <Icon name="twitter" />
+            <Icon name="youtube" />
+            <Icon name="linkedin" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Footer/AccordionLinks/style.module.css b/src/components/Footer/AccordionLinks/style.module.css
new file mode 100644
index 0000000..a2f9a6f
--- /dev/null
+++ b/src/components/Footer/AccordionLinks/style.module.css
@@ -0,0 +1,65 @@
+@media only screen and (max-width: 1024px) {
+  .containerAccordion {
+    width: 100%;
+    padding: 0.75rem 0;
+  }
+
+  .titleAccordionContent {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 0.75rem 1rem;
+    background-color: transparent;
+    border: none;
+    font-family: "Roboto";
+    font-weight: 500;
+    font-size: 0.875rem;
+  }
+
+  .bodyAccordionContent {
+    padding: 0 1rem;
+  }
+
+  .bodyAccordionContent ul {
+    list-style: none;
+  }
+
+  .bodyAccordionContent a {
+    text-decoration: none;
+  }
+
+  .bodyAccordionContent a:last-child {
+    text-decoration: none;
+    text-decoration: underline;
+    text-decoration-color: var(--gray-1100);
+  }
+
+  .bodyAccordionContent li {
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: var(--gray-1100);
+    margin-bottom: 0.75rem;
+  }
+
+  .contentListIconsWrapper {
+    padding: 0 1rem;
+  }
+
+  .listIcons {
+    display: flex;
+    gap: 0.659rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .listIcons svg {
+    max-width: 35px;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .containerAccordion {
+   display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Footer/ContainerFooter/style.module.css b/src/components/Footer/ContainerFooter/style.module.css
index 16d62d1..f7a0440 100644
--- a/src/components/Footer/ContainerFooter/style.module.css
+++ b/src/components/Footer/ContainerFooter/style.module.css
@@ -1,6 +1,18 @@
+@media only screen and (max-width: 1024px) {
+  .containerFooter {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 1025px) {
+  .containerFooter {
+    display: flex;
+  }
+}
+
 .containerFooter {
   width: 100%;
-  display: flex;
+  
   justify-content: center;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 6abb28e..48b66bb 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,6 +1,7 @@
 import { ContainerNewsletter } from "./ContainerNewsLetter";
 import { ContainerFooter } from "./ContainerFooter";
 import { ContainerFooterInfo } from "./ContainerFooterInfo";
+import { AccordionLinks } from "./AccordionLinks";
 
 
 export function Footer() {
@@ -8,6 +9,7 @@ export function Footer() {
   return (
     <footer>
       <ContainerNewsletter />
+      <AccordionLinks />
       <ContainerFooter />
       <ContainerFooterInfo />
     </footer>
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 67570b7..3154e3a 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -13,6 +13,7 @@ import iconM3 from "../../assets/icon-m3.svg";
 interface IconProps {
   name:
     | "search"
+    | "iconMore"
     | "bars"
     | "exit"
     | "miniCart"
@@ -43,6 +44,21 @@ export function Icon(props: IconProps) {
   const { name } = props;
 
   switch (name) {
+    case "iconMore":
+      return (
+        <svg
+          width="8"
+          height="9"
+          viewBox="0 0 8 9"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z"
+            fill="#303030"
+          />
+        </svg>
+      );
     case "exit":
       return (
         <svg
@@ -62,7 +78,7 @@ export function Icon(props: IconProps) {
           />
         </svg>
       );
-      
+
     case "bars":
       return (
         <svg
diff --git a/src/components/Main/style.module.css b/src/components/Main/style.module.css
index d5a9a2f..c87afa6 100644
--- a/src/components/Main/style.module.css
+++ b/src/components/Main/style.module.css
@@ -19,7 +19,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 3fr;
-  grid-template-rows: 1fr 3fr;
+  grid-template-rows: auto auto;
   grid-template-areas: "title title"
     "aside contentInfo";
 }
@@ -57,6 +57,10 @@
 }
 
 @media only screen and (max-width: 1024px) {
+  .contentMain h1 {
+    margin: 5rem 0 2.5rem 0;
+  }
+
   .contentWrapper {
     width: 100%;
     padding: 0 1rem;
@@ -66,7 +70,7 @@
     width: 100%;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 3fr;
+    grid-template-rows: auto auto auto;
     grid-template-areas: 
       "title"
       "aside"
@@ -81,4 +85,4 @@
     grid-area: aside;
     border-right: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/Contato/style.module.css b/src/pages/Contato/style.module.css
index c0007a9..bea3a1a 100644
--- a/src/pages/Contato/style.module.css
+++ b/src/pages/Contato/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -128,4 +122,15 @@
 .contentCheckbox span {
   color: var(--red);
   font-size: 24px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
 }
\ No newline at end of file
diff --git a/src/pages/Entrega/style.module.css b/src/pages/Entrega/style.module.css
index 76f158d..1e2b462 100644
--- a/src/pages/Entrega/style.module.css
+++ b/src/pages/Entrega/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -21,4 +15,15 @@
   font-weight: 400;
   line-height: 30.47px;
   font-size: 26px;
-} 
\ No newline at end of file
+} 
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/FormaPagamento/style.module.css b/src/pages/FormaPagamento/style.module.css
index 76f158d..1e2b462 100644
--- a/src/pages/FormaPagamento/style.module.css
+++ b/src/pages/FormaPagamento/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -21,4 +15,15 @@
   font-weight: 400;
   line-height: 30.47px;
   font-size: 26px;
-} 
\ No newline at end of file
+} 
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/SegurancaPrivacidade/style.module.css b/src/pages/SegurancaPrivacidade/style.module.css
index 76f158d..1e2b462 100644
--- a/src/pages/SegurancaPrivacidade/style.module.css
+++ b/src/pages/SegurancaPrivacidade/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -21,4 +15,15 @@
   font-weight: 400;
   line-height: 30.47px;
   font-size: 26px;
-} 
\ No newline at end of file
+} 
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Sobre/style.module.css b/src/pages/Sobre/style.module.css
index 79533b4..d6aedcb 100644
--- a/src/pages/Sobre/style.module.css
+++ b/src/pages/Sobre/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -22,4 +16,15 @@
   line-height: 30.47px;
   font-size: 26px;
   margin-bottom: 1.87rem;
-} 
\ No newline at end of file
+} 
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/TrocaDevolucao/style.module.css b/src/pages/TrocaDevolucao/style.module.css
index 76f158d..1e2b462 100644
--- a/src/pages/TrocaDevolucao/style.module.css
+++ b/src/pages/TrocaDevolucao/style.module.css
@@ -3,12 +3,6 @@
   margin-left: 1.875rem;
 }
 
-@media only screen and (max-width: 1024px) {
-  .contentInfoList {
-    grid-area: contentInfo;
-  }
-}
-
 .contentInfoList h2 {
   margin: 0.75rem 0;
   font-weight: 700;
@@ -21,4 +15,15 @@
   font-weight: 400;
   line-height: 30.47px;
   font-size: 26px;
-} 
\ No newline at end of file
+} 
+
+@media only screen and (max-width: 1024px) {
+  .contentInfoList {
+    grid-area: contentInfo;
+  }
+
+  .contentInfoList h2{
+    text-align: center;
+    margin-top: 1.875rem;
+  }
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 08b2185..ef5007c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7376,6 +7376,11 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-headless-accordion@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz#df45168fc379a9014bd7becc2f4be100af456b6e"
+  integrity sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"