From 6a8ffcd3fc57771c9182ebc2fa14c52703668436 Mon Sep 17 00:00:00 2001
From: Renurose <renurose24022gmail.com>
Date: Wed, 14 Aug 2024 11:54:21 +1000
Subject: [PATCH 1/3] Added tooltip components

---
 src/components/Tooltip/Tooltip.stories.ts | 15 +++++++++++++
 src/components/Tooltip/Tooltip.style.ts   | 27 +++++++++++++++++++++++
 src/components/Tooltip/Tooltip.test.tsx   |  8 +++++++
 src/components/Tooltip/Tooltip.tsx        | 11 +++++++++
 4 files changed, 61 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..7a5353f
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import { Tooltip } from './Tooltip';
+ 
+describe('<Tooltip />', () =>{
+it('renders the tooltip component', () => {
+const { getByText } = render( <Tooltip text="Hover over me" tooltip="Tooltip text" /> ); expect(getByText('Hover over me')).toBeInTheDocument(); });
+});
+ 
\ No newline at end of file
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

From 80c39a085a45ebbe006eec6459a8cd052ec02148 Mon Sep 17 00:00:00 2001
From: Renurose <renurose24022gmail.com>
Date: Thu, 26 Sep 2024 20:19:02 +1000
Subject: [PATCH 2/3] corrected indentation and unit testing

---
 src/components/Tooltip/Tooltip.test.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 7a5353f..96fda05 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,8 +1,10 @@
 import { render } from '@testing-library/react';
 import { Tooltip } from './Tooltip';
- 
-describe('<Tooltip />', () =>{
-it('renders the tooltip component', () => {
-const { getByText } = render( <Tooltip text="Hover over me" tooltip="Tooltip text" /> ); expect(getByText('Hover over me')).toBeInTheDocument(); });
+
+describe('<Tooltip />', () => {
+	it('renders the tooltip component', () => {
+		const { getByText } = render(<Tooltip text="Hover over me" tooltip="Tooltip text" />);
+		expect(getByText('Hover over me')).toBeInTheDocument();
+	});
 });
  
\ No newline at end of file

From 4a6cf9e55e95ce85ed629e33587e41a02995aa87 Mon Sep 17 00:00:00 2001
From: Renurose <renurose24022gmail.com>
Date: Wed, 2 Oct 2024 18:09:13 +1000
Subject: [PATCH 3/3] Updated to implement jest-axe

---
 src/components/Tooltip/Tooltip.test.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 96fda05..21efd48 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,10 +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();
+	});
 });
- 
\ No newline at end of file