feat: add tooltips. Remove redundant files.

Quiddlee · Dec 29, 2023 · f09879b · f09879b
1 parent 753ee7a
commit f09879b
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 141 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,16 +1,27 @@
 import { useState } from 'react';
 
+import useLanguage from '@/shared/Context/hooks';
+import Icon from '@/shared/ui/Icon';
+import IconButton from '@/shared/ui/IconButton';
 import DocsComp from '@components/DocsComp/DocsComp';
-import ShowDocsBtn from '@components/Header/ui/ShowDocsBtn';
 
 const Header = () => {
   const [isDocsShown, setIsDocsShown] = useState(false);
+  const { translation } = useLanguage();
+  const docsTooltip = translation.mainLayout.header.tooltips.docs;
   return (
     <>
       <header className="col-span-full flex justify-between">
         <p>Here is still header</p>
         <div>
-          <ShowDocsBtn onClick={() => setIsDocsShown((prev) => !prev)} />
+          <IconButton
+            onClick={() => setIsDocsShown((prev) => !prev)}
+            data-tooltip={docsTooltip}
+            data-testid="show_docs"
+            className="tooltipElem"
+          >
+            <Icon>article</Icon>
+          </IconButton>
         </div>
       </header>
       <DocsComp isShown={isDocsShown} setIsDocsShown={setIsDocsShown} />

diff --git a/src/components/Header/ui/ShowDocsBtn.tsx b/src/components/Header/ui/ShowDocsBtn.tsx
diff --git a/src/components/RequestEditor/ui/Controls.tsx b/src/components/RequestEditor/ui/Controls.tsx
@@ -2,6 +2,7 @@ import { FC, HTMLAttributes } from 'react';
 
 import { toast } from 'react-toastify';
 
+import useLanguage from '@/shared/Context/hooks';
 import urlParams from '@shared/constants/urlParams';
 import cn from '@shared/lib/helpers/cn';
 import useScreen from '@shared/lib/hooks/useScreen';
@@ -19,6 +20,8 @@ type ControlsProps = HTMLAttributes<HTMLUListElement> & {
 const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) => {
   const { readUrl } = useUrl();
   const screenType = useScreen();
+  const { translation } = useLanguage();
+  const { copy, play, prettify, openResp } = translation.mainPage.requestEditor.controlsTooltips;
   const isAnimationsDisabled = screenType === 'tablet' || screenType === 'mobile';
 
   const handleCopyText = async () => {
@@ -39,7 +42,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <Fab data-testid="fab" variant="primary">
+        <Fab data-testid="fab" variant="primary" data-tooltip={play} className="tooltipElem">
           <Icon slot="icon">play_arrow</Icon>
         </Fab>
       </li>
@@ -49,7 +52,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="copy-text" onClick={handleCopyText}>
+        <FilledIconButton data-testid="copy-text" onClick={handleCopyText} data-tooltip={copy} className="tooltipElem">
           <Icon>content_copy</Icon>
         </FilledIconButton>
       </li>
@@ -59,7 +62,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="prettify">
+        <FilledIconButton data-testid="prettify" data-tooltip={prettify} className="tooltipElem">
           <Icon>mop</Icon>
         </FilledIconButton>
       </li>
@@ -69,7 +72,12 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="open-response" onClick={() => onResponseOpen?.((prevState) => !prevState)}>
+        <FilledIconButton
+          data-testid="open-response"
+          onClick={() => onResponseOpen?.((prevState) => !prevState)}
+          data-tooltip={openResp}
+          className="tooltipElem"
+        >
           <Icon>info</Icon>
         </FilledIconButton>
       </li>

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -52,6 +52,23 @@ const en = {
 			},
 		},
 	},
+	mainPage: {
+		requestEditor: {
+			controlsTooltips: {
+				play: 'Send request',
+				copy: 'Copy text',
+				prettify: 'Prettify',
+				openResp: 'Open response',
+			},
+		},
+	},
+	mainLayout: {
+		header: {
+			tooltips: {
+				docs: 'Show docs',
+			},
+		},
+	},
 };
 
 export default en;
diff --git a/src/locales/ru.ts b/src/locales/ru.ts
@@ -52,6 +52,23 @@ const ru = {
 			},
 		},
 	},
+	mainPage: {
+		requestEditor: {
+			controlsTooltips: {
+				play: 'Отправить запрос',
+				copy: 'Копир. текст',
+				prettify: 'Притификация',
+				openResp: 'Открыть ответ',
+			},
+		},
+	},
+	mainLayout: {
+		header: {
+			tooltips: {
+				docs: 'Документация',
+			},
+		},
+	},
 };
 
 export default ru;
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -376,3 +376,31 @@
 .toasttest {
   background-color: red;
 }
+
+.tooltipElem {
+  position: relative;
+}
+
+.tooltipElem::before {
+  --scale: 0;
+  position: absolute;
+  top: 0;
+  right: 65px;
+  transform: translateY(30%) scale(var(--scale));
+  transition: 150ms transform 300ms;
+  transform-origin: center right;
+  content: attr(data-tooltip);
+  width: max-content;
+  z-index: 20;
+  border-radius: 2px;
+  height: 24px;
+  background-color: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: 0 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.tooltipElem:hover::before {
+  --scale: 1;
+}
diff --git a/src/styles/theme.dark.css b/src/styles/theme.dark.css
diff --git a/src/styles/theme.light.css b/src/styles/theme.light.css
diff --git a/src/test/docsComponent/DocsComp.test.tsx b/src/test/docsComponent/DocsComp.test.tsx
@@ -6,7 +6,7 @@ import App from '@/app/App';
 describe('Testing for docs component', () => {
   it('Should render docs components after clicking on show docs btn', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     expect(screen.queryByTestId('overlay')).toBeNull();
     expect(screen.queryByText('Docs')).toBeNull();
     expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull();
@@ -21,7 +21,7 @@ describe('Testing for docs component', () => {
   });
   it('Should close docs section after clicking on overlay', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     expect(screen.queryByTestId('overlay')).toBeNull();
     expect(screen.queryByText('Docs')).toBeNull();
     expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull();
@@ -45,7 +45,7 @@ describe('Testing for docs component', () => {
   });
   it('Should close docs section after clicking on close docs button', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     expect(screen.queryByTestId('overlay')).toBeNull();
     expect(screen.queryByText('Docs')).toBeNull();
     expect(screen.queryByText('A GraphQL schema provides a root type for each kind of operation')).toBeNull();
@@ -69,7 +69,7 @@ describe('Testing for docs component', () => {
   });
   it('Should navigate and display info about proper type after cliking on that type', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     await act(async () => {
       fireEvent.click(showDocsBtn);
     });
@@ -82,7 +82,7 @@ describe('Testing for docs component', () => {
   });
   it('Should navigate and display info about proper info about root type after cliking on that type', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     await act(async () => {
       fireEvent.click(showDocsBtn);
     });
@@ -94,7 +94,7 @@ describe('Testing for docs component', () => {
   });
   it('Should navigate and display info about proper info about root type after cliking on that type and all following clicked types as well as navigating back', async () => {
     render(<App />);
-    const showDocsBtn = screen.getByText('show docs');
+    const showDocsBtn = screen.getByTestId('show_docs');
     await act(async () => {
       fireEvent.click(showDocsBtn);
     });