From b6a6592605ea4b97d4f97b255a59cab5b990dd93 Mon Sep 17 00:00:00 2001
From: Renurose <139512121+Renurose@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:56:53 +1100
Subject: [PATCH] Added tooltip components (#24)

Co-authored-by: Renurose <renurose24022gmail.com>
Co-authored-by: ben-AI-cybersec <142491786+ben-AI-cybersec@users.noreply.github.com>
---
 src/components/Tooltip/Tooltip.stories.ts | 15 +++++++++++++
 src/components/Tooltip/Tooltip.style.ts   | 27 +++++++++++++++++++++++
 src/components/Tooltip/Tooltip.test.tsx   | 17 ++++++++++++++
 src/components/Tooltip/Tooltip.tsx        | 11 +++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 src/components/Tooltip/Tooltip.stories.ts
 create mode 100644 src/components/Tooltip/Tooltip.style.ts
 create mode 100644 src/components/Tooltip/Tooltip.test.tsx
 create mode 100644 src/components/Tooltip/Tooltip.tsx

diff --git a/src/components/Tooltip/Tooltip.stories.ts b/src/components/Tooltip/Tooltip.stories.ts
new file mode 100644
index 0000000..1de1d5e
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.stories.ts
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+ 
+const meta: Meta<typeof Tooltip> = { title: 'Components/Tooltip', component: Tooltip,
+};
+ 
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+ 
+const defaultProps = { text: 'Hover over me', tooltip: 'This is a tooltip',
+};
+ 
+export const Default: Story = { args: { ...defaultProps, },
+};
+ 
\ No newline at end of file
diff --git a/src/components/Tooltip/Tooltip.style.ts b/src/components/Tooltip/Tooltip.style.ts
new file mode 100644
index 0000000..78c3011
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+ 
+export const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+ 
+export const TooltipText = styled.div`
+  visibility: hidden;
+  width: 120px;
+  background-color: ${({ theme }) => theme?.colors?.tooltipBg || '#555'};
+  color: ${({ theme }) => theme?.colors?.tooltipText || '#fff'};
+  text-align: center;
+  padding: ${({ theme }) => theme?.spacing?.xs || '5px'};
+  border-radius: ${({ theme }) => theme?.borderRadius?.sm || '6px'};
+  position: absolute;
+  z-index: 1;
+  bottom: 20%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  ${TooltipContainer}:hover & {
+    visibility: visible;
+    opacity: 1;
+  }
+`;
\ No newline at end of file
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
new file mode 100644
index 0000000..21efd48
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { Tooltip } from './Tooltip';
+import { axe } from 'jest-axe';
+
+describe('<Tooltip />', () => {
+	it('renders the tooltip component', () => {
+		const { getByText } = render(<Tooltip text="Hover over me" tooltip="Tooltip text" />);
+		expect(getByText('Hover over me')).toBeInTheDocument();
+	});
+
+	it('has no accessibility violations', async () => {
+		const { container } = render(<Tooltip text="Hover over me" tooltip="Tooltip text" />);
+		const results = await axe(container);
+		
+		expect(results).toHaveNoViolations();
+	});
+});
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..32b5816
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { TooltipContainer, TooltipText } from './Tooltip.style';
+ 
+type TooltipProps = {
+  text: string;
+  tooltip: string;
+};
+ 
+export const Tooltip: FC<TooltipProps> = ({ text, tooltip }) => ( <TooltipContainer> {text} <TooltipText>{tooltip}</TooltipText> </TooltipContainer>
+);
+ 
\ No newline at end of file