Merge pull request #4 from teambit/header-component

feat: header component

Author: nachoaldamav

.bitmap

@@ -16,6 +16,20 @@
         "mainFile": "index.ts",
         "rootDir": "design/patterns/form"
     },
+    "patterns/header": {
+        "name": "patterns/header",
+        "scope": "",
+        "version": "",
+        "defaultScope": "automations.design",
+        "mainFile": "index.ts",
+        "rootDir": "design/patterns/header",
+        "config": {
+            "bitdev.react/react-env@0a734828d968c74e981ef0ca77acb414e90ea08d": {},
+            "teambit.envs/envs": {
+                "env": "bitdev.react/react-env"
+            }
+        }
+    },
     "ui/button": {
         "name": "ui/button",
         "scope": "automations.design",

design/patterns/header/header.composition.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Header } from './header.js';
+
+export const BasicHeader = () => {
+  const navItems = [
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+    { label: 'Services', href: '/services' },
+    { label: 'Contact', href: '/contact' },
+  ];
+
+  const userMenuItems = [
+    { label: 'Profile', onClick: () => console.log('Profile clicked') },
+    { label: 'Settings', onClick: () => console.log('Settings clicked') },
+    { label: 'Logout', onClick: () => console.log('Logout clicked') },
+  ];
+
+  return (
+    <Header
+      logo={<div style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>Logo</div>}
+      navItems={navItems}
+      userMenuItems={userMenuItems}
+    />
+  );
+};

design/patterns/header/header.docs.mdx

@@ -0,0 +1,39 @@
+---
+description: A responsive header component with navigation and user menu
+labels: ['react', 'header', 'navigation', 'ui']
+---
+
+import { Header } from './header.js';
+import { BasicHeader } from './header.composition.js';
+
+# Header Component
+
+A flexible and responsive header component that includes a logo area, navigation menu, and user menu.
+
+## Usage
+
+```jsx
+import { Header } from '@your-scope/design.patterns.header';
+
+const navItems = [
+  { label: 'Home', href: '/' },
+  { label: 'About', href: '/about' },
+  { label: 'Services', href: '/services' },
+];
+
+const userMenuItems = [
+  { label: 'Profile', onClick: () => console.log('Profile clicked') },
+  { label: 'Settings', onClick: () => console.log('Settings clicked') },
+];
+
+<Header
+  logo={<YourLogo />}
+  navItems={navItems}
+  userMenuItems={userMenuItems}
+  fixed={true}
+/>
+```
+
+## Example
+
+<BasicHeader />

design/patterns/header/header.module.css

@@ -0,0 +1,63 @@
+.header {
+    width: 100%;
+    background-color: #ffffff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 1rem 0;
+}
+
+.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.nav {
+    display: flex;
+    gap: 2rem;
+    margin: 0 2rem;
+}
+
+.navItem {
+    color: #333;
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.navItem:hover {
+    color: #007bff;
+}
+
+.userMenu {
+    display: flex;
+    gap: 1rem;
+}
+
+.userMenuItem {
+    background: none;
+    border: none;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    color: #333;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.userMenuItem:hover {
+    color: #007bff;
+}

design/patterns/header/header.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { BasicHeader } from './header.composition.js';
+
+describe('Header component', () => {
+  it('should render navigation items correctly', () => {
+    render(<BasicHeader />);
+    
+    // Check if navigation items are rendered
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('About')).toBeInTheDocument();
+    expect(screen.getByText('Services')).toBeInTheDocument();
+    expect(screen.getByText('Contact')).toBeInTheDocument();
+  });
+
+  it('should render user menu items correctly', () => {
+    render(<BasicHeader />);
+    
+    // Check if user menu items are rendered
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('should render logo correctly', () => {
+    render(<BasicHeader />);
+    
+    // Check if logo is rendered
+    expect(screen.getByText('Logo')).toBeInTheDocument();
+  });
+});

design/patterns/header/header.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import styles from './header.module.css';
+
+export type HeaderProps = {
+  /**
+   * The logo to display in the header
+   */
+  logo?: React.ReactNode;
+  /**
+   * Navigation items to display in the header
+   */
+  navItems?: Array<{
+    label: string;
+    href: string;
+  }>;
+  /**
+   * User menu items to display in the header
+   */
+  userMenuItems?: Array<{
+    label: string;
+    onClick: () => void;
+  }>;
+  /**
+   * Whether the header is fixed at the top
+   */
+  fixed?: boolean;
+  /**
+   * Optional data-testid for testing
+   */
+  'data-testid'?: string;
+};
+
+export function Header({
+  logo,
+  navItems = [],
+  userMenuItems = [],
+  fixed = false,
+  'data-testid': testId,
+}: HeaderProps) {
+  return (
+    <header 
+      className={`${styles.header} ${fixed ? styles.fixed : ''}`}
+      data-testid={testId}
+    >
+      <div className={styles.container}>
+        {logo && (
+          <div className={styles.logo}>
+            {logo}
+          </div>
+        )}
+        
+        {navItems.length > 0 && (
+          <nav className={styles.nav}>
+            {navItems.map((item, index) => (
+              <a
+                key={index}
+                href={item.href}
+                className={styles.navItem}
+              >
+                {item.label}
+              </a>
+            ))}
+          </nav>
+        )}
+
+        {userMenuItems.length > 0 && (
+          <div className={styles.userMenu}>
+            {userMenuItems.map((item, index) => (
+              <button
+                key={index}
+                onClick={item.onClick}
+                className={styles.userMenuItem}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

design/patterns/header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './header.js';
+export type { HeaderProps } from './header.js';