From 43bd06c6b3f0e60b97683451caa0aec89bf85087 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Wed, 18 Jan 2023 23:57:34 -0300 Subject: [PATCH 1/2] chore: arrumado nome da pasta. --- src/components/{teste => header}/Form.module.scss | 0 src/components/{teste => header}/Form.tsx | 0 .../{teste => header}/HeaderWrapper.module.scss | 0 src/components/{teste => header}/Logo.module.scss | 0 src/components/{teste => header}/Logo.tsx | 0 src/components/{teste => header}/Menu.module.scss | 0 src/components/{teste => header}/Menu.tsx | 0 src/components/{teste => header}/MenuContext.tsx | 0 src/components/{teste => header}/MenuOpened.tsx | 0 src/components/{teste => header}/Nav.module.scss | 0 src/components/{teste => header}/Nav.tsx | 0 src/components/{teste => header}/User.module.scss | 0 src/components/{teste => header}/User.tsx | 0 src/pages/Header.tsx | 12 ++++++------ 14 files changed, 6 insertions(+), 6 deletions(-) rename src/components/{teste => header}/Form.module.scss (100%) rename src/components/{teste => header}/Form.tsx (100%) rename src/components/{teste => header}/HeaderWrapper.module.scss (100%) rename src/components/{teste => header}/Logo.module.scss (100%) rename src/components/{teste => header}/Logo.tsx (100%) rename src/components/{teste => header}/Menu.module.scss (100%) rename src/components/{teste => header}/Menu.tsx (100%) rename src/components/{teste => header}/MenuContext.tsx (100%) rename src/components/{teste => header}/MenuOpened.tsx (100%) rename src/components/{teste => header}/Nav.module.scss (100%) rename src/components/{teste => header}/Nav.tsx (100%) rename src/components/{teste => header}/User.module.scss (100%) rename src/components/{teste => header}/User.tsx (100%) diff --git a/src/components/teste/Form.module.scss b/src/components/header/Form.module.scss similarity index 100% rename from src/components/teste/Form.module.scss rename to src/components/header/Form.module.scss diff --git a/src/components/teste/Form.tsx b/src/components/header/Form.tsx similarity index 100% rename from src/components/teste/Form.tsx rename to src/components/header/Form.tsx diff --git a/src/components/teste/HeaderWrapper.module.scss b/src/components/header/HeaderWrapper.module.scss similarity index 100% rename from src/components/teste/HeaderWrapper.module.scss rename to src/components/header/HeaderWrapper.module.scss diff --git a/src/components/teste/Logo.module.scss b/src/components/header/Logo.module.scss similarity index 100% rename from src/components/teste/Logo.module.scss rename to src/components/header/Logo.module.scss diff --git a/src/components/teste/Logo.tsx b/src/components/header/Logo.tsx similarity index 100% rename from src/components/teste/Logo.tsx rename to src/components/header/Logo.tsx diff --git a/src/components/teste/Menu.module.scss b/src/components/header/Menu.module.scss similarity index 100% rename from src/components/teste/Menu.module.scss rename to src/components/header/Menu.module.scss diff --git a/src/components/teste/Menu.tsx b/src/components/header/Menu.tsx similarity index 100% rename from src/components/teste/Menu.tsx rename to src/components/header/Menu.tsx diff --git a/src/components/teste/MenuContext.tsx b/src/components/header/MenuContext.tsx similarity index 100% rename from src/components/teste/MenuContext.tsx rename to src/components/header/MenuContext.tsx diff --git a/src/components/teste/MenuOpened.tsx b/src/components/header/MenuOpened.tsx similarity index 100% rename from src/components/teste/MenuOpened.tsx rename to src/components/header/MenuOpened.tsx diff --git a/src/components/teste/Nav.module.scss b/src/components/header/Nav.module.scss similarity index 100% rename from src/components/teste/Nav.module.scss rename to src/components/header/Nav.module.scss diff --git a/src/components/teste/Nav.tsx b/src/components/header/Nav.tsx similarity index 100% rename from src/components/teste/Nav.tsx rename to src/components/header/Nav.tsx diff --git a/src/components/teste/User.module.scss b/src/components/header/User.module.scss similarity index 100% rename from src/components/teste/User.module.scss rename to src/components/header/User.module.scss diff --git a/src/components/teste/User.tsx b/src/components/header/User.tsx similarity index 100% rename from src/components/teste/User.tsx rename to src/components/header/User.tsx diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx index 2347149..5b2498f 100644 --- a/src/pages/Header.tsx +++ b/src/pages/Header.tsx @@ -3,14 +3,14 @@ import React from "react"; // Componentes // import { Menu } from "../components/header/Menu"; -import { Logo } from "../components/teste/Logo"; -import { Form } from "../components/teste/Form"; -import { User } from "../components/teste/User"; -import { Nav } from "../components/teste/Nav"; +import { Logo } from "../components/header/Logo"; +import { Form } from "../components/header/Form"; +import { User } from "../components/header/User"; +import { Nav } from "../components/header/Nav"; -import { Menu } from "../components/teste/Menu"; +import { Menu } from "../components/header/Menu"; -import { MenuProvider } from "../components/teste/MenuContext"; +import { MenuProvider } from "../components/header/MenuContext"; // Estilos import styleHeaderWrapper from "../components/header/HeaderWrapper.module.scss"; From ad6f20991e890f5c437f85dabcbf514c91f81089 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Thu, 19 Jan 2023 01:18:24 -0300 Subject: [PATCH 2/2] feat: criado accordion para dispositivos moveis. --- package-lock.json | 15 ++++ package.json | 1 + .../footer/AccordionFooterTop.module.scss | 76 +++++++++++++++++++ src/components/footer/AccordionFooterTop.tsx | 60 +++++++++++++++ src/components/footer/FooterTop.module.scss | 10 +-- src/components/footer/FooterTop.tsx | 2 +- src/pages/Footer.tsx | 4 +- 7 files changed, 158 insertions(+), 10 deletions(-) create mode 100644 src/components/footer/AccordionFooterTop.module.scss create mode 100644 src/components/footer/AccordionFooterTop.tsx diff --git a/package-lock.json b/package-lock.json index 0a8fe64..2ea3a69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,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.2", "react-scripts": "5.0.1", "sass": "^1.57.1", @@ -14055,6 +14056,14 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "node_modules/react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26866,6 +26875,12 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "react-headless-accordion": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz", + "integrity": "sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index ae3d239..8920ee1 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.2", "react-scripts": "5.0.1", "sass": "^1.57.1", diff --git a/src/components/footer/AccordionFooterTop.module.scss b/src/components/footer/AccordionFooterTop.module.scss new file mode 100644 index 0000000..856895c --- /dev/null +++ b/src/components/footer/AccordionFooterTop.module.scss @@ -0,0 +1,76 @@ +@import "../../styles/utils/variables.scss"; + +.accordionFooterTop { + padding: 24px 16px 0px 16px; + display: none; + justify-content: space-between; + + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + + button { + border: none; + outline: none; + background-color: transparent; + text-align: left; + + h3 { + margin-bottom: 12px; + font-size: 14px; + font-weight: 500; + line-height: 16px; + text-transform: capitalize; + position: relative; + font-family: Roboto; + text-transform: uppercase; + + &::after { + content: "+"; + position: absolute; + right: 0; + } + } + } + + div { + display: flex; + flex-direction: column; + + a { + margin-bottom: 12px; + font-size: 12px; + font-weight: 400; + line-height: 14px; + text-decoration: none; + color: $primary-100; + + &:last-child { + text-decoration: underline; + } + } + + p { + font-size: 12px; + line-height: 14px; + + &:nth-child(2), + &:nth-child(4) { + font-weight: 400; + line-height: 14px; + max-width: 20ch; + margin: 12px 0; + } + + &:nth-child(1), + &:nth-child(3) { + font-weight: 500; + } + + &:last-child { + text-decoration: underline; + } + } + } +} diff --git a/src/components/footer/AccordionFooterTop.tsx b/src/components/footer/AccordionFooterTop.tsx new file mode 100644 index 0000000..1e331c9 --- /dev/null +++ b/src/components/footer/AccordionFooterTop.tsx @@ -0,0 +1,60 @@ +// Bibliotecas +import React from "react"; +import { + Accordion, + AccordionBody, + AccordionHeader, + AccordionItem, +} from "react-headless-accordion"; + +// Estilos +import styleAccordionFooterTop from "./AccordionFooterTop.module.scss"; + +const AccordionFooterTop = () => { + return ( + + + +

Institucional

+ + + + Quem Somos + Politica de Privacidade + Segurança + Seja um Revendedor + + + + + +

Dúvidas

+ + + + Entrega + Pagamento + Troca e Devoluções + Dúvidas Frequentes + + + + + +

Fale Conosco

+ + + +

Atendimento Ao Consumidor

+

(11) 4159-9504

+

Atendimento Online

+

(11) 99433-8825

+ + + + ); +}; + +export { AccordionFooterTop }; diff --git a/src/components/footer/FooterTop.module.scss b/src/components/footer/FooterTop.module.scss index 276373a..7e7143f 100644 --- a/src/components/footer/FooterTop.module.scss +++ b/src/components/footer/FooterTop.module.scss @@ -7,7 +7,7 @@ @media (max-width: 1024px) { display: block; - padding: 24px 16px; + padding: 0 16px 24px 16px; } h3 { @@ -23,13 +23,7 @@ } @media (max-width: 1024px) { - text-transform: capitalize; - position: relative; - &::after { - content: "+"; - position: absolute; - right: 0; - } + display: none; } } diff --git a/src/components/footer/FooterTop.tsx b/src/components/footer/FooterTop.tsx index b7a6a62..5bc4325 100644 --- a/src/components/footer/FooterTop.tsx +++ b/src/components/footer/FooterTop.tsx @@ -18,7 +18,7 @@ const FooterTop = () => {

Institucional