From 6281bb98b20753673a7267dc7d55bb193d54cc11 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Wed, 4 Jan 2023 17:57:34 -0300
Subject: [PATCH] refactor(header): new names for html classes were created
 using BEM

---
 .../Header/containers/@types/index.d.ts       |   2 +-
 src/template/Header/containers/_Bottom.tsx    |  20 +-
 src/template/Header/containers/_Search.tsx    |  18 +-
 src/template/Header/containers/_Top.tsx       |   8 +-
 src/template/Header/index.module.scss         | 173 ++++++++----------
 src/template/Header/index.tsx                 |   8 +-
 src/template/Sidebar/index.tsx                |  13 +-
 7 files changed, 124 insertions(+), 118 deletions(-)

diff --git a/src/template/Header/containers/@types/index.d.ts b/src/template/Header/containers/@types/index.d.ts
index ed73a83..6501935 100644
--- a/src/template/Header/containers/@types/index.d.ts
+++ b/src/template/Header/containers/@types/index.d.ts
@@ -6,5 +6,5 @@ export interface ITopProps {
 
 export interface IBottomProps {
 	isMenuOpen: boolean
-	handleClose: () => void
+	handleClickClose: () => void
 }
diff --git a/src/template/Header/containers/_Bottom.tsx b/src/template/Header/containers/_Bottom.tsx
index a97bb07..c08e9ab 100644
--- a/src/template/Header/containers/_Bottom.tsx
+++ b/src/template/Header/containers/_Bottom.tsx
@@ -4,11 +4,11 @@ import closeIcon from '../../../assets/icons/x.svg'
 
 import styles from '../index.module.scss'
 
-export function Bottom({ isMenuOpen, handleClose }: IBottomProps) {
+export function Bottom({ isMenuOpen, handleClickClose }: IBottomProps) {
 	function closeMenu(e: any) {
 		if (e.target.classList.contains(styles.menu)) {
 			if (e.target.children[0] !== e.target) {
-				handleClose()
+				handleClickClose()
 			}
 		}
 	}
@@ -16,17 +16,23 @@ export function Bottom({ isMenuOpen, handleClose }: IBottomProps) {
 	return (
 		<div
 			onClick={(e) => closeMenu(e)}
-			className={`${styles.menu} ${isMenuOpen ? styles.active : ''}`}
+			className={`${styles['menu']} ${
+				isMenuOpen ? styles['menu--active'] : ''
+			}`}
 		>
-			<div className={styles['menu-content']}>
-				<div className={styles['actions-bottom']}>
+			<div className={styles['menu__container']}>
+				<div className={styles['actions__bottom']}>
 					<a href="/">Entrar</a>
-					<button type="button" onClick={handleClose} className={styles.close}>
+					<button
+						type="button"
+						onClick={handleClickClose}
+						className={styles.close}
+					>
 						<img src={closeIcon} alt="ícone do botão para fechar o menu" />
 					</button>
 				</div>
 
-				<ul className={styles.list}>
+				<ul className={styles['menu__list']}>
 					{['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => {
 						return (
 							<li key={'header-bottom-list-' + index}>
diff --git a/src/template/Header/containers/_Search.tsx b/src/template/Header/containers/_Search.tsx
index 56cc287..85a4565 100644
--- a/src/template/Header/containers/_Search.tsx
+++ b/src/template/Header/containers/_Search.tsx
@@ -1,12 +1,26 @@
+import { useState } from 'react'
+
 import { ISearchProps } from './@types'
 
 import searchIcon from '../../../assets/icons/search.svg'
 
 export function Search({ ...props }: ISearchProps) {
+	const [searchData, setSearchData] = useState('')
+
+	const handleChangeValue = (e: any) => {
+		setSearchData(e.target.value)
+	}
+
 	return (
 		<div {...props}>
-			<input type="search" placeholder="Buscar..." />
-			<button type="button">
+			<input
+				type="search"
+				name="search"
+				placeholder="Buscar..."
+				value={searchData}
+				onChange={handleChangeValue}
+			/>
+			<button type="button" onClick={() => setSearchData('')}>
 				<img src={searchIcon} alt="Search icon" />
 			</button>
 		</div>
diff --git a/src/template/Header/containers/_Top.tsx b/src/template/Header/containers/_Top.tsx
index 61192c8..13a658a 100644
--- a/src/template/Header/containers/_Top.tsx
+++ b/src/template/Header/containers/_Top.tsx
@@ -11,7 +11,7 @@ import styles from '../index.module.scss'
 
 export function Top({ handleClickOpen }: ITopProps) {
 	return (
-		<div className={styles['content']}>
+		<div className={`${styles['l-header__top']}`}>
 			<button
 				type="button"
 				onClick={handleClickOpen}
@@ -20,16 +20,16 @@ export function Top({ handleClickOpen }: ITopProps) {
 				<img src={openIcon} alt="ícone do botão para abrir o menu" />
 			</button>
 
-			<a className={styles['logo']} href="/">
+			<a className="top__logo" href="/">
 				<picture>
 					<source media="(min-width:1025px)" srcSet={logoMediumImg} />
 					<img src={logoImg} alt="logo da M3 Academy" />
 				</picture>
 			</a>
 
-			<Search className={`${styles.search} ${styles['search-top']}`} />
+			<Search className={`${styles['search']} ${styles['search--top']}`} />
 
-			<div className={styles['actions-top']}>
+			<div className={styles['actions__top']}>
 				<a href="/">Entrar</a>
 
 				<button type="button">
diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss
index 4d8b07c..010870f 100644
--- a/src/template/Header/index.module.scss
+++ b/src/template/Header/index.module.scss
@@ -7,18 +7,16 @@ $containers: (
 	'xl': 2299.68px,
 );
 
-.component {
+.l-header {
 	padding: 25px 0;
 
-	position: sticky;
 	top: 0;
 	left: 0;
 	z-index: 1000;
+	position: sticky;
 
 	background-color: var(--clr-common-black);
-}
 
-.component {
 	@media only screen and (min-width: 1025px) {
 		padding: 25px 0 0;
 	}
@@ -28,16 +26,14 @@ $containers: (
 	}
 }
 
-.content {
+.l-header__top {
 	padding: 0px 16px;
 	margin-bottom: 27.14px;
 
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-}
 
-.content {
 	@media only screen and (min-width: 1025px) {
 		width: #{function.fluid(map-get($containers, 'md'), 1280px)};
 		padding: 0;
@@ -49,27 +45,29 @@ $containers: (
 	}
 }
 
-.logo {
-	$content: (
-		'md': 136px,
-		'xl': 265.62px,
-	);
+.l-header__top :global {
+	.top__logo {
+		$content: (
+			'md': 136px,
+			'xl': 265.62px,
+		);
 
-	// prettier-ignore
-	@media only screen and (min-width: 1025px) {
+		// prettier-ignore
+		@media only screen and (min-width: 1025px) {
 		width: function.fluid(
 			map-get($content, 'md'), 
 			map-get($containers, 'md')
 		);
 	}
 
-	// prettier-ignore
-	@media only screen and (min-width: 2500px) {
+		// prettier-ignore
+		@media only screen and (min-width: 2500px) {
 		width: function.fluid(
 			map-get($content, 'xl'), 
 			map-get($containers, 'xl')
 		);
 	}
+	}
 }
 
 .search {
@@ -86,6 +84,12 @@ $containers: (
 		justify-content: center;
 	}
 
+	button {
+		width: 36px;
+		height: 100%;
+		background-color: var(--clr-common-white);
+	}
+
 	input {
 		width: 100%;
 		padding: 0 9px 0 16px;
@@ -101,15 +105,6 @@ $containers: (
 	}
 }
 
-.search {
-	button {
-		width: 36px;
-		height: 100%;
-
-		background-color: var(--clr-common-white);
-	}
-}
-
 .search {
 	@media only screen and (min-width: 1025px) {
 		button {
@@ -125,17 +120,17 @@ $containers: (
 
 		button {
 			width: 56.85px;
+		}
 
-			img {
-				width: 35.15px;
-				height: 35.15px;
-			}
+		button img {
+			width: 35.15px;
+			height: 35.15px;
 		}
 	}
 }
 
-.actions-top,
-.actions-bottom {
+.actions__top,
+.actions__bottom {
 	display: flex;
 	align-items: center;
 
@@ -146,10 +141,9 @@ $containers: (
 
 		display: block;
 
-		text-transform: uppercase;
 		color: var(--clr-common-white);
-
 		transition: color 200ms linear;
+		text-transform: uppercase;
 
 		&:hover {
 			color: var(--clr-primary-blue-500);
@@ -161,9 +155,20 @@ $containers: (
 	}
 }
 
-.actions-top {
+.actions__top {
 	gap: 55px;
 
+	// remove action top link for small devices and added for large devices 1025 > x
+	a {
+		display: none;
+	}
+
+	@media only screen and (min-width: 1025px) {
+		a {
+			display: block;
+		}
+	}
+
 	@media only screen and (min-width: 2500px) {
 		img {
 			width: 54.68px;
@@ -181,16 +186,20 @@ $containers: (
 	}
 }
 
-// remove action top link for small devices and added for large devices 1025 > x
-.actions-top {
-	a {
-		display: none;
-	}
+.actions__bottom {
+	width: 100%;
+	height: 78px;
+	padding: 0 16px;
 
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	background-color: var(--clr-common-black);
+
+	// remove actions bottom for large devices
 	@media only screen and (min-width: 1025px) {
-		a {
-			display: block;
-		}
+		display: none;
 	}
 }
 
@@ -206,68 +215,55 @@ $containers: (
 		transition: 300ms ease;
 
 		&,
-		&-content {
+		&__container {
 			height: 100vh;
 		}
 
-		&-content {
+		&__container {
 			width: function.fluid(map-get($containers, 'sm'), 1024px);
 		}
 	}
-
-	@media screen and (min-width: 1025px) {
-		&-content {
-			border-top: 1px solid var(--clr-common-white);
-		}
-	}
 }
 
 .menu {
 	@media only screen and (max-width: 768px) {
-		&-content {
+		&__container {
 			width: function.fluid(map-get($containers, 'xs'), 375px);
 		}
 	}
 }
 
 .menu {
-	.actions-bottom {
-		width: 100%;
-		height: 78px;
-
-		background-color: var(--clr-common-black);
-	}
-
-	.list {
-		padding: 0 16px;
-
-		a {
-			display: block;
-			text-transform: uppercase;
-			transition: color 200ms linear;
-
-			&:hover {
-				color: var(--clr-primary-blue-500);
-			}
+	@media screen and (min-width: 1025px) {
+		&__container {
+			border-top: 1px solid var(--clr-common-white);
 		}
 	}
 }
 
 .menu {
-	.list {
+	&__list {
 		height: calc(100% - 78px);
-		padding-top: 31px;
+		padding: 31px 16px 0;
 
 		background-color: var(--clr-common-white);
 
 		a {
-			margin-bottom: 12px;
-
 			font-weight: 500;
 			font-size: var(--txt-normal);
 			line-height: 16.41px;
 
+			margin-bottom: 12px;
+
+			display: block;
+
 			color: var(--clr-gray-400);
+			transition: color 200ms linear;
+			text-transform: uppercase;
+
+			&:hover {
+				color: var(--clr-primary-blue-500);
+			}
 
 			@media screen and (min-width: 2500px) {
 				line-height: 32.81px;
@@ -276,18 +272,9 @@ $containers: (
 	}
 }
 
-.actions-bottom {
-	padding: 0 16px;
-
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
 // styles for menu is active
-
 .menu {
-	&.active {
+	&.menu--active {
 		left: 0;
 		background-color: #0004;
 	}
@@ -300,7 +287,9 @@ $containers: (
 
 		display: block;
 
-		.list {
+		background-color: var(--clr-common-black);
+
+		&__list {
 			width: function.fluid(map-get($containers, 'md'), 1280px);
 			padding: 14px 0;
 			margin: 0 auto;
@@ -317,22 +306,16 @@ $containers: (
 				margin: 0;
 			}
 		}
-
-		background-color: var(--clr-common-black);
-
-		.actions-bottom {
-			display: none;
-		}
 	}
 
 	@media screen and (min-width: 2500px) {
-		.list {
+		&__list {
 			width: function.fluid(map-get($containers, 'xl'), 2500px);
 		}
 	}
 }
 
-.search-top {
+.search--top {
 	$content: (
 		'md': 264px,
 		'xl': 515.62px,
@@ -360,7 +343,7 @@ $containers: (
 \*|[O]o-o-o-o[X]|*/
 
 //remove search top box for small, medium devices
-.search-top {
+.search--top {
 	display: none;
 
 	@media only screen and (min-width: 1025px) {
@@ -369,12 +352,12 @@ $containers: (
 }
 
 // added search bottom box for small devices, medium devices
-.search-bottom {
+.search__bottom {
 	padding: 0 16px;
 
 	display: flex;
 
-	&-content {
+	&--content {
 		width: 100%;
 	}
 
diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx
index e4c29dc..23ab6fe 100644
--- a/src/template/Header/index.tsx
+++ b/src/template/Header/index.tsx
@@ -21,7 +21,7 @@ export const Header = () => {
 
 	const bottomProps = {
 		isMenuOpen,
-		handleClose: useMemo(
+		handleClickClose: useMemo(
 			() =>
 				function () {
 					if (window.innerWidth <= 1024) setIsMenuOpen(false)
@@ -31,13 +31,13 @@ export const Header = () => {
 	}
 
 	return (
-		<header className={styles['component']}>
+		<header className={styles['l-header']}>
 			<nav>
 				<Top {...topProps} />
 
-				<div className={`${styles['search-bottom']}`}>
+				<div className={`${styles['search__bottom']}`}>
 					<Search
-						className={`${styles['search']} ${styles['search-bottom-content']}`}
+						className={`${styles['search']} ${styles['search__bottom--content']}`}
 					/>
 				</div>
 
diff --git a/src/template/Sidebar/index.tsx b/src/template/Sidebar/index.tsx
index 44fc68e..6947d38 100644
--- a/src/template/Sidebar/index.tsx
+++ b/src/template/Sidebar/index.tsx
@@ -1,6 +1,6 @@
 import { Link, useLocation } from 'react-router-dom'
 
-import css from './index.module.scss'
+import styles from './index.module.scss'
 
 export function Sidebar() {
 	const { pathname } = useLocation()
@@ -15,13 +15,16 @@ export function Sidebar() {
 	]
 
 	return (
-		<aside className={css.sidebar}>
-			<div className={css.container}>
-				<ul className={css.list}>
+		<aside className={styles['sidebar']}>
+			<div className={styles.container}>
+				<ul className={styles.list}>
 					{paths.map(({ path, name }) => {
 						return (
 							<li key={name + '-sidebar'}>
-								<Link className={pathname === path ? css.active : ''} to={path}>
+								<Link
+									className={pathname === path ? styles.active : ''}
+									to={path}
+								>
 									{name}
 								</Link>
 							</li>