luizfelipe9627/desafio-react-e-typescript-luiz-felipe
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat: criado accordion para dispositivos moveis.' (#22) from feature/footer into development

Browse Source 
Reviewed-on: #22
This commit is contained in:
Luiz Felipe Silva 2023-01-19 04:20:54 +00:00
commit 0615b6b80d
7 changed files with 158 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

76
src/components/footer/AccordionFooterTop.module.scss Normal file
View File

@ -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;
}
}
}
}

60
src/components/footer/AccordionFooterTop.tsx Normal file
View File

@ -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 (
<Accordion className={styleAccordionFooterTop["accordionFooterTop"]}>
<AccordionItem>
<AccordionHeader
className={styleAccordionFooterTop["accordionFooterTop-title"]}
>
<h3>Institucional</h3>
</AccordionHeader>
<AccordionBody>
<a href="#quem-somos">Quem Somos</a>
<a href="#politica-de-privacidade">Politica de Privacidade</a>
<a href="#seguranca">Segurança</a>
<a href="#seja-revendedor">Seja um Revendedor</a>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<h3>Dúvidas</h3>
</AccordionHeader>
<AccordionBody>
<a href="#entrega">Entrega</a>
<a href="#pagamento">Pagamento</a>
<a href="#seguranca">Troca e Devoluções</a>
<a href="#duvidas-frequentes">Dúvidas Frequentes</a>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<h3>Fale Conosco</h3>
</AccordionHeader>
<AccordionBody>
<p>Atendimento Ao Consumidor</p>
<p>(11) 4159-9504</p>
<p>Atendimento Online</p>
<p>(11) 99433-8825</p>
</AccordionBody>
</AccordionItem>
</Accordion>
);
};
export { AccordionFooterTop };

10
src/components/footer/FooterTop.module.scss
View File

@ -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;
}
}

2
src/components/footer/FooterTop.tsx
View File

@ -18,7 +18,7 @@ const FooterTop = () => {
<h3>Institucional</h3>
<ul>
<li>
<a href="#quem-somos">Quem somos</a>
<a href="#quem-somos">Quem Somos</a>
</li>
<li>
<a href="#politica-de-privacidade">Politica de Privacidade</a>

4
src/pages/Footer.tsx
View File

@ -5,12 +5,14 @@ import React from "react";
import { Newsletter } from "../components/footer/Newsletter";
import { FooterTop } from "../components/footer/FooterTop";
import { FooterBottom } from "../components/footer/FooterBottom";
import { AccordionFooterTop } from "../components/footer/AccordionFooterTop";
const Footer = () => {
return (
<footer>
<Newsletter />
<FooterTop />
<AccordionFooterTop />
<FooterTop/>
<FooterBottom/>
</footer>
);