Merge branch 'main' into page-header

src/components/MenuBar/MenuBar.stories.ts

@@ -0,0 +1,44 @@
+import { MenuBar } from './MenuBar';
+import { action } from '@storybook/addon-actions'; // Use 'action' instead of 'fn'
+import type { Meta, StoryObj } from '@storybook/react';
+import { themeColorSubset } from '../../types';
+
+const meta: Meta<typeof MenuBar> = {
+	title: 'Components/MenuBar',
+	component: MenuBar,
+	argTypes: {
+		color: { control: 'select', options: Object.keys(themeColorSubset) },
+	},
+	args: {
+		color: 'primary',
+		items: [
+			{ label: 'Home', link: '/', onClick: action('Home clicked') },
+			{ label: 'About', link: '/about', onClick: action('About clicked') },
+			{ label: 'Contact', link: '/contact', onClick: action('Contact clicked') },
+		],
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		color: 'primary',
+	},
+};
+
+export const Secondary: Story = {
+	args: {
+		color: 'secondary',
+	},
+};
+
+export const WithCustomItems: Story = {
+	args: {
+		items: [
+			{ label: 'Services', link: '/services', onClick: action('Services clicked') },
+			{ label: 'Blog', link: '/blog', onClick: action('Blog clicked') },
+		],
+	},
+};

src/components/MenuBar/MenuBar.style.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { ThemeColor } from '../../types';
+
+type StyledMenuBarProps = {
+  $color: ThemeColor;
+};
+
+export const StyledMenuBar = styled.div<StyledMenuBarProps>`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors[props.$color]};
+  padding: ${(props) => props.theme.spacing.md};
+  border-bottom: 1px solid ${(props) => props.theme.colors.subtle};
+  justify-content: space-between;
+`;
+
+export const MenuItem = styled.a`
+  color: ${(props) => props.theme.colors.dark};
+  margin: 0 ${(props) => props.theme.spacing.sm};
+  text-decoration: none;
+  font-size: ${(props) => props.theme.fontSizes.default};
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 768px) {
+    font-size: ${(props) => props.theme.fontSizes.sm};
+  }
+`;
+
+export const HamburgerIcon = styled.div`
+  cursor: pointer;
+  font-size: 1.5rem;
+  display: none;
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+`;
+
+export const IconImage = styled.img`
+  width: 40px;
+  height: 40px;
+  margin-right: ${(props) => props.theme.spacing.md};
+  cursor: pointer;
+
+  @media (max-width: 768px) {
+    width: 30px;
+    height: 30px;
+  }
+`;

src/components/MenuBar/MenuBar.test.tsx

@@ -0,0 +1,28 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils';
+import { MenuBar } from './MenuBar';
+
+const mockClick = jest.fn();
+
+describe('<MenuBar />', () => {
+	const menuItems = [
+		{ label: 'Home', link: '/', onClick: mockClick },
+		{ label: 'About', link: '/about', onClick: mockClick },
+		{ label: 'Contact', link: '/contact', onClick: mockClick },
+	];
+
+	it('renders the menu items', () => {
+		renderWithDeps(<MenuBar items={menuItems} />);
+
+		expect(screen.getByText('Home')).toBeVisible();
+		expect(screen.getByText('About')).toBeVisible();
+		expect(screen.getByText('Contact')).toBeVisible();
+	});
+
+	it('calls onClick when a menu item is clicked', () => {
+		renderWithDeps(<MenuBar items={menuItems} />);
+
+		fireEvent.click(screen.getByText('Home'));
+		expect(mockClick).toHaveBeenCalledTimes(1);
+	});
+});

src/components/MenuBar/MenuBar.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { StyledMenuBar, MenuItem, HamburgerIcon, IconImage } from './MenuBar.style';
+import { ThemeColor } from '../../types';
+
+type MenuBarItem = {
+  label: string;
+  link: string;
+  onClick?: () => void;
+};
+
+type MenuBarProps = {
+  items: MenuBarItem[];
+  color?: ThemeColor; // Added color prop like in the Button component
+};
+
+export const MenuBar: FC<MenuBarProps> = ({ items, color = 'primary' }) => {
+	return (
+		<StyledMenuBar $color={color}>
+			<IconImage src="/icon.svg" alt="Menu Icon" />
+
+			<HamburgerIcon aria-label="Toggle menu">☰</HamburgerIcon>
+
+			<nav>
+				<ul>
+					{items.map((item, index) => (
+						<li key={index}>
+							<MenuItem href={item.link} onClick={item.onClick}>
+								{item.label}
+							</MenuItem>
+						</li>
+					))}
+				</ul>
+			</nav>
+		</StyledMenuBar>
+	);
+};
+
+export default MenuBar;

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, },
+};
+

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;
+  }
+`;

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();
+	});
+});

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>
+);
+