From cf11adba3bd57b4e891730ad4d70ba316b24b9c3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Thu, 5 Jan 2023 20:57:10 -0300
Subject: [PATCH] refactor(footer): new names for html classes were created
 using BEM

---
 src/template/Footer/@types/index.d.ts         | 15 ++++
 .../List.tsx => containers/_List.tsx}         | 26 +++---
 src/template/Footer/containers/_Payment.tsx   | 38 ++++++++
 src/template/Footer/containers/__Contact.tsx  | 27 ++++++
 .../__Institutional.tsx}                      | 18 ++--
 .../__Question.tsx}                           | 16 ++--
 .../Socials.tsx => containers/__Socials.tsx}  | 12 +--
 .../Footer/fragments/Lists/Contact.tsx        | 38 --------
 .../Footer/fragments/Lists/Payment.tsx        | 40 ---------
 src/template/Footer/index.module.scss         | 86 ++++++++++---------
 src/template/Footer/index.tsx                 | 16 ++--
 11 files changed, 167 insertions(+), 165 deletions(-)
 create mode 100644 src/template/Footer/@types/index.d.ts
 rename src/template/Footer/{fragments/List.tsx => containers/_List.tsx} (51%)
 create mode 100644 src/template/Footer/containers/_Payment.tsx
 create mode 100644 src/template/Footer/containers/__Contact.tsx
 rename src/template/Footer/{fragments/Lists/Institutional.tsx => containers/__Institutional.tsx} (53%)
 rename src/template/Footer/{fragments/Lists/Question.tsx => containers/__Question.tsx} (57%)
 rename src/template/Footer/{fragments/Lists/Socials.tsx => containers/__Socials.tsx} (57%)
 delete mode 100644 src/template/Footer/fragments/Lists/Contact.tsx
 delete mode 100644 src/template/Footer/fragments/Lists/Payment.tsx

diff --git a/src/template/Footer/@types/index.d.ts b/src/template/Footer/@types/index.d.ts
new file mode 100644
index 0000000..6cda59f
--- /dev/null
+++ b/src/template/Footer/@types/index.d.ts
@@ -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
+}
diff --git a/src/template/Footer/fragments/List.tsx b/src/template/Footer/containers/_List.tsx
similarity index 51%
rename from src/template/Footer/fragments/List.tsx
rename to src/template/Footer/containers/_List.tsx
index 4b1b7cd..a012880 100644
--- a/src/template/Footer/fragments/List.tsx
+++ b/src/template/Footer/containers/_List.tsx
@@ -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>
diff --git a/src/template/Footer/containers/_Payment.tsx b/src/template/Footer/containers/_Payment.tsx
new file mode 100644
index 0000000..c182961
--- /dev/null
+++ b/src/template/Footer/containers/_Payment.tsx
@@ -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>
+	)
+}
diff --git a/src/template/Footer/containers/__Contact.tsx b/src/template/Footer/containers/__Contact.tsx
new file mode 100644
index 0000000..05617e3
--- /dev/null
+++ b/src/template/Footer/containers/__Contact.tsx
@@ -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>
+	)
+}
diff --git a/src/template/Footer/fragments/Lists/Institutional.tsx b/src/template/Footer/containers/__Institutional.tsx
similarity index 53%
rename from src/template/Footer/fragments/Lists/Institutional.tsx
rename to src/template/Footer/containers/__Institutional.tsx
index a88dfcc..eb6c78a 100644
--- a/src/template/Footer/fragments/Lists/Institutional.tsx
+++ b/src/template/Footer/containers/__Institutional.tsx
@@ -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="/">
diff --git a/src/template/Footer/fragments/Lists/Question.tsx b/src/template/Footer/containers/__Question.tsx
similarity index 57%
rename from src/template/Footer/fragments/Lists/Question.tsx
rename to src/template/Footer/containers/__Question.tsx
index b6396d5..2ebd688 100644
--- a/src/template/Footer/fragments/Lists/Question.tsx
+++ b/src/template/Footer/containers/__Question.tsx
@@ -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>
diff --git a/src/template/Footer/fragments/Lists/Socials.tsx b/src/template/Footer/containers/__Socials.tsx
similarity index 57%
rename from src/template/Footer/fragments/Lists/Socials.tsx
rename to src/template/Footer/containers/__Socials.tsx
index b30ddad..24f20f3 100644
--- a/src/template/Footer/fragments/Lists/Socials.tsx
+++ b/src/template/Footer/containers/__Socials.tsx
@@ -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 (
diff --git a/src/template/Footer/fragments/Lists/Contact.tsx b/src/template/Footer/fragments/Lists/Contact.tsx
deleted file mode 100644
index 6a5271f..0000000
--- a/src/template/Footer/fragments/Lists/Contact.tsx
+++ /dev/null
@@ -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>
-	)
-}
diff --git a/src/template/Footer/fragments/Lists/Payment.tsx b/src/template/Footer/fragments/Lists/Payment.tsx
deleted file mode 100644
index 0a6cbee..0000000
--- a/src/template/Footer/fragments/Lists/Payment.tsx
+++ /dev/null
@@ -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>
-	)
-}
diff --git a/src/template/Footer/index.module.scss b/src/template/Footer/index.module.scss
index ed1eaed..d6ffaf5 100644
--- a/src/template/Footer/index.module.scss
+++ b/src/template/Footer/index.module.scss
@@ -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;
 		}
 	}
diff --git a/src/template/Footer/index.tsx b/src/template/Footer/index.tsx
index f6fd09a..51a8f33 100644
--- a/src/template/Footer/index.tsx
+++ b/src/template/Footer/index.tsx
@@ -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="" />