From ad6f20991e890f5c437f85dabcbf514c91f81089 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Thu, 19 Jan 2023 01:18:24 -0300 Subject: [PATCH] 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