HenriqueSantosSantana/desafio-react-e-typescript-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(footer): new names for html classes were created using BEM

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-01-05 20:57:10 -03:00
parent 51bbe55cf1
commit cf11adba3b
11 changed files with 167 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/template/Footer/@types/index.d.ts vendored Normal file
View File

@ -0,0 +1,15 @@
import { AccordionProps } from '../../../modules/components/Accordion/@types'
export interface InstitutionalListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
export interface ContactListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
export interface QuestionsListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
export interface ListProps {
accordionCurrentIsOpen: string | number | ''
handleSetCurrentAccordion: (customKey: string | number | '') => void
}

26
src/template/Footer/fragments/List.tsx → src/template/Footer/containers/_List.tsx
View File

@ -1,16 +1,14 @@
import { ListProps } from '../@types'
import { AccordionProviderItems } from '../../../modules/components/Accordion/context/Items'
import { ContactList } from './Lists/Contact'
import { InstitutionalList } from './Lists/Institutional'
import { QuestionsList } from './Lists/Question'
import { Socials } from './Lists/Socials'
import { ContactList } from './__Contact'
import { InstitutionalList } from './__Institutional'
import { QuestionsList } from './__Question'
import { Socials } from './__Socials'
import css from '../index.module.scss'
interface ListProps {
accordionCurrentIsOpen: string | number | ''
handleSetCurrentAccordion: (customKey: string | number | '') => void
}
export function List({
accordionCurrentIsOpen,
handleSetCurrentAccordion,
@ -23,19 +21,19 @@ export function List({
handleSetCurrent: handleSetCurrentAccordion,
}}
>
<ul className={css.lists}>
<ul className={`${css['footer__lists']} ${css['lists']}`}>
<li>
<InstitutionalList customKey={'1'} />
<InstitutionalList customKey={'institutional'} />
</li>
<li>
<QuestionsList customKey={'2'} />
<QuestionsList customKey={'question'} />
</li>
<li>
<ContactList customKey={'3'} />
<ContactList customKey={'contact'} />
</li>
</ul>
<div className={css.social}>
<div className={css['footer__network']}>
<Socials />
<a href="/">www.loremipsum.com</a>
</div>

38
src/template/Footer/containers/_Payment.tsx Normal file
View File

@ -0,0 +1,38 @@
import BoletoImg from '../../../assets/brands/Boleto.png'
import DinersBrandImg from '../../../assets/brands/Diners.png'
import EloBrandImg from '../../../assets/brands/Elo.png'
import HiperBrandImg from '../../../assets/brands/Hiper.png'
import PaypalBrandImg from '../../../assets/brands/Paypal.png'
import MasterCardBrandImg from '../../../assets/brands/Master.png'
import VisaBrandImg from '../../../assets/brands/Visa.png'
import VtexPCIImg from '../../../assets/brands/vtex-pci-200.png'
import styles from '../index.module.scss'
const assetsImg = [
MasterCardBrandImg,
VisaBrandImg,
DinersBrandImg,
EloBrandImg,
HiperBrandImg,
PaypalBrandImg,
BoletoImg,
]
export function PaymentsList() {
return (
<ul className={`${styles['footer__payments']} ${styles['payments']}`}>
{assetsImg.map((image, index) => {
return (
<li className={`${styles['payments__item']}`} key={index}>
<img className="payments__image" src={image} alt="" />
</li>
)
})}
<div className={`${styles['payments__divider']}`} role={'presentation'} />
<li className={`${styles['payments__item']}`}>
<img src={VtexPCIImg} alt="" />
</li>
</ul>
)
}

27
src/template/Footer/containers/__Contact.tsx Normal file
View File

@ -0,0 +1,27 @@
import { ContactListProps } from '../@types'
import { Accordion } from '../../../modules/components/Accordion'
import styles from '../index.module.scss'
export function ContactList({ customKey }: ContactListProps) {
return (
<Accordion className={styles.accordion} customKey={customKey}>
<Accordion.Header
customKey={customKey}
className={`${styles['lists__header']}`}
>
<h4>Fale Conosco</h4>
</Accordion.Header>
<Accordion.Content className={`${styles['lists__content']}`}>
<ul className={styles['lists__content-list']}>
<li>Atendimento ao Consumidor</li>
<li>(11) 4159 9504</li>
<li>Atendimento Online</li>
<li>(11) 99433-8825</li>
</ul>
</Accordion.Content>
</Accordion>
)
}

18
src/template/Footer/fragments/Lists/Institutional.tsx → src/template/Footer/containers/__Institutional.tsx
View File

@ -1,24 +1,22 @@
import { Accordion } from '../../../../modules/components/Accordion'
import { AccordionProps } from '../../../../modules/components/Accordion/@types'
import { Item } from '../../../../modules/common/Item'
import { InstitutionalListProps } from '../@types'
import css from '../../index.module.scss'
import { Accordion } from '../../../modules/components/Accordion'
import { Item } from '../../../modules/common/Item'
interface InstitutionalListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
import css from '../index.module.scss'
export function InstitutionalList({ customKey }: InstitutionalListProps) {
return (
<Accordion className={css.accordion} customKey={customKey}>
<Accordion.Header
customKey={customKey}
className={`${css['list-header']}`}
className={`${css['lists__header']}`}
>
<h4>Institucional</h4>
</Accordion.Header>
<Accordion.Content className={`${css.content}`}>
<ul className={css.institutional}>
<Item $container={{ className: 'k' }} href="/">
<Accordion.Content className={`${css['lists__content']}`}>
<ul className={css['lists__content-list']}>
<Item $container={{ className: '' }} href="/">
Quem somos nós
</Item>
<Item $container={{ className: '' }} href="/">

16
src/template/Footer/fragments/Lists/Question.tsx → src/template/Footer/containers/__Question.tsx
View File

@ -1,23 +1,21 @@
import { Accordion } from '../../../../modules/components/Accordion'
import { AccordionProps } from '../../../../modules/components/Accordion/@types'
import { Item } from '../../../../modules/common/Item'
import { QuestionsListProps } from '../@types'
import css from '../../index.module.scss'
import { Accordion } from '../../../modules/components/Accordion'
import { Item } from '../../../modules/common/Item'
interface QuestionsListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
import css from '../index.module.scss'
export function QuestionsList({ customKey }: QuestionsListProps) {
return (
<Accordion className={css.accordion} customKey={customKey}>
<Accordion.Header
customKey={customKey}
className={`${css['list-header']}`}
className={`${css['lists__header']}`}
>
<h4>Dúvidas</h4>
</Accordion.Header>
<Accordion.Content className={`${css.content}`}>
<ul className={`${css['quesitons-list']}`}>
<Accordion.Content className={`${css['lists__content']}`}>
<ul className={`${css['lists__content-list']}`}>
<Item $container={{ className: '' }} href="/">
Entrega
</Item>

12
src/template/Footer/fragments/Lists/Socials.tsx → src/template/Footer/containers/__Socials.tsx
View File

@ -1,10 +1,10 @@
import facebookIcon from '../../../../assets/icons/facebook.svg'
import instagramIcon from '../../../../assets/icons/instagram.svg'
import linkedinIcon from '../../../../assets/icons/linkedin.svg'
import twitterIcon from '../../../../assets/icons/twitter.svg'
import youtubeIcon from '../../../../assets/icons/youtube.svg'
import facebookIcon from '../../../assets/icons/facebook.svg'
import instagramIcon from '../../../assets/icons/instagram.svg'
import linkedinIcon from '../../../assets/icons/linkedin.svg'
import twitterIcon from '../../../assets/icons/twitter.svg'
import youtubeIcon from '../../../assets/icons/youtube.svg'
import css from '../../index.module.scss'
import css from '../index.module.scss'
export function Socials() {
return (

38
src/template/Footer/fragments/Lists/Contact.tsx
View File

@ -1,38 +0,0 @@
import { Accordion } from '../../../../modules/components/Accordion'
import { AccordionProps } from '../../../../modules/components/Accordion/@types'
import { Item } from '../../../../modules/common/Item'
import css from '../../index.module.scss'
interface ContactListProps
extends Omit<AccordionProps, 'setCurrentAccordion'> {}
export function ContactList({ customKey }: ContactListProps) {
return (
<Accordion className={css.accordion} customKey={customKey}>
<Accordion.Header
customKey={customKey}
className={`${css['list-header']}`}
>
<h4>Fale Conosco</h4>
</Accordion.Header>
<Accordion.Content className={`${css.content}`}>
<ul className={css.list}>
<Item $container={{ className: '' }} href="/">
Atendimento ao Consumidor
</Item>
<Item $container={{ className: '' }} href="/">
(11) 4159 9504
</Item>
<Item $container={{ className: '' }} href="/">
Atendimento Online
</Item>
<Item $container={{ className: '' }} href="/">
(11) 99433-8825
</Item>
</ul>
</Accordion.Content>
</Accordion>
)
}

40
src/template/Footer/fragments/Lists/Payment.tsx
View File

@ -1,40 +0,0 @@
import BoletoImg from '../../../../assets/brands/Boleto.png'
import DinersBrandImg from '../../../../assets/brands/Diners.png'
import EloBrandImg from '../../../../assets/brands/Elo.png'
import HiperBrandImg from '../../../../assets/brands/Hiper.png'
import PaypalBrandImg from '../../../../assets/brands/Paypal.png'
import MasterCardBrandImg from '../../../../assets/brands/Master.png'
import VisaBrandImg from '../../../../assets/brands/Visa.png'
import VtexPCIImg from '../../../../assets/brands/vtex-pci-200.png'
import css from '../../index.module.scss'
export function PaymentsList() {
let images = [
MasterCardBrandImg,
VisaBrandImg,
DinersBrandImg,
EloBrandImg,
HiperBrandImg,
PaypalBrandImg,
BoletoImg,
]
return (
<ul className={css.payments}>
{images.map((image, index) => {
return (
<li key={index}>
<img src={image} alt="" />
</li>
)
})}
<div className={css.divider}></div>
<li>
<img src={VtexPCIImg} alt="" />
</li>
</ul>
)
}

86
src/template/Footer/index.module.scss
View File

@ -2,19 +2,19 @@
.footer {
border-top: 1px solid var(--clr-common-black);
}
.container-top,
.container-bottom {
width: 100%;
padding: 0 16px;
&__container--top,
&__container--bottom {
width: 100%;
padding: 0 16px;
@media screen and (min-width: 1025px) {
padding: 0;
@media screen and (min-width: 1025px) {
padding: 0;
}
}
}
.container-top {
.footer__container--top {
padding-top: 17px;
padding-bottom: 24px;
@ -42,10 +42,10 @@
}
}
.container-bottom {
.footer__container--bottom {
background-color: var(--clr-common-black);
.phrase {
.footer__phrase {
width: function.fluid(258px, 343px);
&::before {
@ -75,15 +75,15 @@
}
}
.container-bottom {
.phrase::before,
.actions-bottom .credits li p {
.footer__container--bottom {
.footer__phrase::before,
.footer__actions--bottom .footer__credits li p {
font-size: var(--txt-xxs);
}
}
.actions-bottom {
.credits {
.footer__actions--bottom {
.footer__credits {
gap: 12.73px;
&,
@ -108,8 +108,8 @@
}
// moved container bottom actions footer for large, medium devices
.container-bottom {
.actions-bottom {
.footer__container--bottom {
.footer__actions--bottom {
width: 100%;
height: 100%;
padding: 15px 0;
@ -144,8 +144,8 @@
flex-direction: column;
gap: 12px;
.content {
ul {
.lists__content {
&-list {
display: flex;
align-items: flex-start;
flex-direction: column;
@ -187,7 +187,7 @@
width: function.fluid(155px, 707px);
}
.content {
.lists__content {
height: auto;
overflow: unset;
transform: translate(0, 0);
@ -203,7 +203,7 @@
}
}
.list-header {
.lists__header {
@media only screen and (min-width: 1025px) {
margin-bottom: 12px;
@ -230,8 +230,9 @@
.payments {
display: flex;
align-items: center;
color: red;
.divider {
&__divider {
height: 20.36px;
border-left: 1px solid var(--clr-gray-400);
@ -252,12 +253,12 @@
'7': 10.33px
)
{
li:nth-child(#{$index}) {
&__item:nth-child(#{$index}) {
margin-right: #{$value};
}
}
li:last-child {
&__item:last-child {
margin-left: 10.49px;
}
@ -265,13 +266,18 @@
width: function.fluid(398.61px, 1080px);
gap: 12px;
@each $index in('1', '2', '3', '4', '5', '6', '7') {
li:nth-child(#{$index}) {
margin: 0px;
}
&__item:nth-child(1),
&__item:nth-child(2),
&__item:nth-child(3),
&__item:nth-child(4),
&__item:nth-child(5),
&__item:nth-child(6),
&__item:nth-child(7) {
margin: 0px;
}
li {
&__item {
width: function.fluid(36px, 398.61px);
min-height: 20.2px;
@ -281,7 +287,7 @@
}
}
li:last-child {
&__item:last-child {
width: function.fluid(54.61px, 398.61px);
min-height: 34px;
margin: 0;
@ -291,19 +297,19 @@
@media screen and (min-width: 2500px) {
width: function.fluid(692px, 2299.68px);
li {
&__item {
width: function.fluid(70px, 692px);
min-height: 39.27px;
}
li:last-child {
&__item:last-child {
width: function.fluid(106px, 692px);
min-height: 66px;
}
}
}
.social {
.footer__network {
& > a {
display: none;
@ -351,23 +357,23 @@
}
// control view order components
.container-bottom {
.phrase {
.footer {
&__phrase {
order: 2;
}
.payments {
&__payments {
order: 1;
}
.credits {
&__credits {
order: 3;
}
@media only screen and (min-width: 1025px) {
.phrase,
.payments,
.credits {
&__phrase,
&__payments,
&__credits {
order: initial;
}
}

16
src/template/Footer/index.tsx
View File

@ -3,8 +3,8 @@ import { useState } from 'react'
import vtexIcon from '../../assets/brands/svgs/Vtex.svg'
import m3Icon from '../../assets/brands/svgs/M3.svg'
import { List } from './fragments/List'
import { PaymentsList } from './fragments/Lists/Payment'
import { List } from './containers/_List'
import { PaymentsList } from './containers/_Payment'
import css from './index.module.scss'
@ -24,19 +24,19 @@ export function Footer() {
}
return (
<footer className={css.footer}>
<div className={css['container-top']}>
<footer className={css['footer']}>
<div className={css['footer__container--top']}>
<List
accordionCurrentIsOpen={accordionCurrentIsOpen}
handleSetCurrentAccordion={handleSetCurrentAccordion}
/>
</div>
<div className={css['container-bottom']}>
<div className={css['actions-bottom']}>
<p className={css.phrase}></p>
<div className={css['footer__container--bottom']}>
<div className={css['footer__actions--bottom']}>
<p className={css['footer__phrase']}></p>
<PaymentsList />
<ul className={css.credits}>
<ul className={css['footer__credits']}>
<li>
<p>Powered by</p>
<img src={vtexIcon} alt="" />