Feat/add test to 80

.eslintrc.cjs

@@ -33,6 +33,8 @@ module.exports = {
     'react/function-component-definition': 0,
     'no-underscore-dangle': 0,
     'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/control-has-associated-label': 0,
+    'jsx-a11y/label-has-associated-control': 0,
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
     'import/order': [

src/components/DocsComp/ui/DocsModal.tsx

@@ -3,13 +3,16 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import DocsModalLayout from '@/layouts/DocsModalLayout';
 import { useAppContext } from '@/shared/Context/hooks';
 import { DocsExplorerType, SchemaTypeObj } from '@/shared/types';
-import CloseDocsBtn from '@components/DocsComp/ui/CloseDocsBtn';
+import Icon from '@shared/ui/Icon';
+import IconButton from '@shared/ui/IconButton';
+// import CloseDocsBtn from '@components/DocsComp/ui/CloseDocsBtn';
 
 import DocsLoader from './DocsLoader';
 import DocsRootComp from './DocsRootComp';
 import DocsTypeComp from './DocsTypeComp';
 import SchemaFallbackUi from './SchemaFallbackUi';
 import getEndpointSchema from '../lib/helpers/getEndpointSchema';
+// import CloseDocsBtn from './CloseDocsBtn';
 
 type PropsType = {
   setIsDocsShown: Dispatch<SetStateAction<boolean>>;
@@ -38,13 +41,24 @@ const DocsModal = ({ setIsDocsShown, explorer }: PropsType) => {
 
   return (
     <DocsModalLayout>
-      <CloseDocsBtn
+      {/* <CloseDocsBtn
         onClick={() => {
           setIsDocsShown((prev) => !prev);
           explorer.setInitState();
         }}
         className="absolute right-[20px] top-[20px] z-20"
-      />
+        dataTestId="closeDocs"
+      /> */}
+      <IconButton
+        onClick={() => {
+          setIsDocsShown((prev) => !prev);
+          explorer.setInitState();
+        }}
+        className="absolute right-[20px] top-[20px] z-20"
+        data-testid="closeDocs"
+      >
+        <Icon>close</Icon>
+      </IconButton>
       {content}
     </DocsModalLayout>
   );

src/components/DocsComp/ui/SchemaFallbackUi.tsx

@@ -1,8 +1,8 @@
 import { FC, SetStateAction } from 'react';
 
 import DocsModalLayout from '@/layouts/DocsModalLayout';
-
-import CloseDocsBtn from './CloseDocsBtn';
+import Icon from '@/shared/ui/Icon';
+import IconButton from '@/shared/ui/IconButton';
 
 type PropsType = {
   closeModal: (value: SetStateAction<boolean>) => void;
@@ -11,12 +11,15 @@ type PropsType = {
 const SchemaFallbackUi: FC<PropsType> = ({ closeModal }) => {
   return (
     <DocsModalLayout>
-      <CloseDocsBtn
+      <IconButton
         onClick={() => {
           closeModal((prev) => !prev);
         }}
         className="absolute right-[20px] top-[20px] z-20"
-      />
+        data-testid="closeDocs"
+      >
+        <Icon>close</Icon>
+      </IconButton>
       <div className="flex h-full w-full items-center p-6">
         <p className="w-full text-center text-on-surface">There is no schema at provided endpoint :(</p>
       </div>

src/components/Footer/Footer.tsx

@@ -1,5 +1,31 @@
+import ghIcon from '@assets/Github.svg';
+import rsLogo from '@assets/rs_school_js.svg';
+
 const Footer = () => {
-  return <footer>Here will be footer</footer>;
+  return (
+    <footer className="flex h-fit flex-col items-center justify-center">
+      <div className="flex gap-3">
+        <a href="https://github.com/Quiddlee" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Quiddle</span>
+        </a>
+        <a href="https://github.com/Tedzury" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Tedzury</span>
+        </a>
+        <a href="https://github.com/barrydilan" className="flex gap-[7px]">
+          <img src={ghIcon} alt="" />
+          <span>Barrydilan</span>
+        </a>
+      </div>
+      <div className="mt-[6px] flex items-center gap-3">
+        <span>2023</span>
+        <a href="https://rs.school/react/">
+          <img src={rsLogo} alt="" className="block w-[50px]" />
+        </a>
+      </div>
+    </footer>
+  );
 };
 
 export default Footer;

src/components/Header/Header.tsx

@@ -11,24 +11,30 @@ import ROUTES from '@shared/constants/routes';
 import viewTransition from '@shared/lib/helpers/viewTransition';
 import useScreen from '@shared/lib/hooks/useScreen';
 
+import LangSwitcher from './ui/LangSwitcher';
+
 const Header = () => {
   const [isDocsShown, setIsDocsShown] = useState(false);
-  const { translation } = useLanguage();
+  const { translation, language, changeLanguage } = useLanguage();
   const { pathname } = useLocation();
   const isSettings = pathname.slice(1) === ROUTES.SETTINGS;
   const navigate = useNavigate();
   const isMobile = useScreen() === 'mobile';
-  const { logOut } = useAuth();
+  const { logOut, isAuth } = useAuth();
 
-  const docsTooltip = translation.mainLayout.header.tooltips.docs;
+  const { docsTip, logOutTip, langTip, homeTip } = translation.mainLayout.header.tooltips;
 
   function handleClick() {
     viewTransition(() => navigate(-1));
   }
 
+  const isDocsToShow = isAuth;
+  const isLogOutToShow = isAuth;
+  const isHomeToShow = pathname !== '/';
+
   return (
     <>
-      <header className="col-start-1 col-end-2 flex w-full items-center justify-end py-2 pr-2 sm:col-end-3">
+      <header className="col-start-1 col-end-2 flex w-full items-center justify-end gap-3 py-2 pr-2 sm:col-end-3 sm:gap-8">
         {isSettings && !isMobile ? (
           <h1 style={{ viewTransitionName: 'title' }} className="mr-auto flex items-center pl-4 font-readex_pro">
             <button type="button" onClick={handleClick} className="flex h-12 w-12 items-center justify-center">
@@ -48,17 +54,27 @@ const Header = () => {
             <Link to={ROUTES.WELCOME_PAGE}>GraphiQL</Link>
           </h1>
         )}
-        <button type="button" onClick={() => logOut()}>
-          Log out
-        </button>
-        <IconButton
-          onClick={() => setIsDocsShown((prev) => !prev)}
-          data-tooltip={docsTooltip}
-          data-testid="show_docs"
-          className="tooltipElem"
-        >
-          <Icon>article</Icon>
-        </IconButton>
+        <LangSwitcher language={language} changeLanguage={changeLanguage} tip={langTip} />
+        {isHomeToShow && (
+          <IconButton data-tooltip={homeTip} className="tooltipElem" onClick={() => navigate(ROUTES.WELCOME_PAGE)}>
+            <Icon>home</Icon>
+          </IconButton>
+        )}
+        {isDocsToShow && (
+          <IconButton
+            onClick={() => setIsDocsShown((prev) => !prev)}
+            data-tooltip={docsTip}
+            data-testid="show_docs"
+            className="tooltipElem"
+          >
+            <Icon>article</Icon>
+          </IconButton>
+        )}
+        {isLogOutToShow && (
+          <IconButton onClick={() => logOut()} className="tooltipElem" data-tooltip={logOutTip}>
+            <Icon>door_open</Icon>
+          </IconButton>
+        )}
       </header>
       <DocsComp isShown={isDocsShown} setIsDocsShown={setIsDocsShown} />
     </>