@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/Footer/Footer.test.tsx

@@ -5,7 +5,7 @@
  * @since 0.1.0
  *
  * Comprehensive test suite for the Footer component.
- * Tests rendering, props handling, navigation links, and accessibility.
+ * Tests rendering, props handling, and accessibility.
  */
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
@@ -13,10 +13,6 @@ import { screen } from '@testing-library/react';
 import { Footer } from './Footer';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
-vi.mock('../../utils/core/cn', () => ({
-  cn: (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
-}));
-
 // Mock Date for consistent year testing using fake timers
 const mockDate = new Date('2024-01-01T00:00:00Z');
 
@@ -35,14 +31,7 @@ describe('Footer Component', () => {
       
       const footer = screen.getByRole('contentinfo');
       expect(footer).toBeInTheDocument();
-      expect(footer).toHaveClass('mt-8', 'py-6', 'flex', 'justify-center', 'border-t', 'border-border', 'bg-main-100');
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(<Footer className="custom-footer-class" />);
-      
-      const footer = screen.getByRole('contentinfo');
-      expect(footer).toHaveClass('custom-footer-class');
+      expect(footer).toHaveClass('mt-8', 'w-full', 'border-t', 'border-border', 'bg-main-100');
     });
 
     it('renders with default company name and year', () => {
@@ -62,138 +51,6 @@ describe('Footer Component', () => {
       
       expect(screen.getByText(/© Copyright 2022–2025 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
     });
-
-    it('renders with custom copyright text', () => {
-      const customCopyright = '© 2024 Custom Company. All rights reserved.';
-      renderWithProviders(<Footer copyright={customCopyright} />);
-      
-      expect(screen.getByText(customCopyright)).toBeInTheDocument();
-    });
-
-    it('renders with logo when provided', () => {
-      renderWithProviders(<Footer logo="/test-logo.png" />);
-      
-      const logo = screen.getByAltText('Logo');
-      expect(logo).toBeInTheDocument();
-      expect(logo).toHaveAttribute('src', '/test-logo.png');
-      expect(logo).toHaveClass('h-8', 'w-auto');
-    });
-
-    it('renders with children content', () => {
-      renderWithProviders(
-        <Footer>
-          <section data-testid="custom-content">Custom footer content</section>
-        </Footer>
-      );
-      
-      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
-      expect(screen.getByText('Custom footer content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Navigation Links', () => {
-    it('renders navigation links when provided', () => {
-      const links = [
-        { label: 'Privacy Policy', href: '/privacy' },
-        { label: 'Terms of Service', href: '/terms' },
-        { label: 'Contact', href: '/contact' }
-      ];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      expect(screen.getByRole('link', { name: 'Privacy Policy' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Terms of Service' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Contact' })).toBeInTheDocument();
-    });
-
-    it('renders links with correct attributes and structure', () => {
-      const links = [
-        { label: 'Privacy Policy', href: '/privacy' },
-        { label: 'Contact', href: '/contact' }
-      ];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
-      const contactLink = screen.getByRole('link', { name: 'Contact' });
-      
-      expect(privacyLink).toHaveAttribute('href', '/privacy');
-      expect(contactLink).toHaveAttribute('href', '/contact');
-      expect(privacyLink).toHaveClass('text-muted-foreground', 'hover:text-foreground');
-      
-      const list = screen.getByRole('list');
-      expect(list).toHaveClass('flex', 'gap-4', 'mt-2', 'md:mt-0');
-      expect(screen.getAllByRole('listitem')).toHaveLength(2);
-    });
-
-    it.each([
-      { links: undefined, description: 'undefined' },
-      { links: [], description: 'empty array' },
-    ])('does not render navigation section when links is $description', ({ links }) => {
-      renderWithProviders(<Footer links={links} />);
-      
-      expect(screen.queryByRole('list')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Content Layout', () => {
-    it('renders content in proper semantic structure', () => {
-      renderWithProviders(
-        <Footer>
-          <section>Custom content</section>
-        </Footer>
-      );
-      
-      const section = document.querySelector('section');
-      expect(section).toBeInTheDocument();
-      expect(section).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'text-center');
-    });
-
-    it('renders logo before children content', () => {
-      renderWithProviders(
-        <Footer logo="/logo.png">
-          <section data-testid="children">Children content</section>
-        </Footer>
-      );
-      
-      const logo = screen.getByAltText('Logo');
-      const children = screen.getByTestId('children');
-      
-      // Logo should appear before children in the DOM
-      expect(logo.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-    });
-
-    it('renders copyright text after children content', () => {
-      renderWithProviders(
-        <Footer>
-          <section data-testid="children">Children content</section>
-        </Footer>
-      );
-      
-      const children = screen.getByTestId('children');
-      const copyright = screen.getByText(/© Copyright/);
-      
-      // Copyright should appear after children in the DOM
-      expect(copyright.compareDocumentPosition(children) & Node.DOCUMENT_POSITION_PRECEDING).toBeTruthy();
-    });
-
-    it('renders navigation links after copyright text', () => {
-      const links = [{ label: 'Test Link', href: '/test' }];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      const copyright = screen.getByText(/© Copyright/);
-      const link = screen.getByRole('link', { name: 'Test Link' });
-      
-      // Both elements should be present
-      expect(copyright).toBeInTheDocument();
-      expect(link).toBeInTheDocument();
-      
-      // The link should be in a ul element
-      const linkUl = link.closest('ul');
-      expect(linkUl).toBeInTheDocument();
-      expect(linkUl).toHaveClass('flex', 'gap-4', 'mt-2', 'md:mt-0');
-    });
   });
 
   describe('Accessibility', () => {
@@ -203,50 +60,6 @@ describe('Footer Component', () => {
       const footer = screen.getByRole('contentinfo');
       expect(footer).toBeInTheDocument();
     });
-
-    it('has proper heading structure when children contain headings', () => {
-      renderWithProviders(
-        <Footer>
-          <h3>About Us</h3>
-          <p>Company description</p>
-        </Footer>
-      );
-      
-      const heading = screen.getByRole('heading', { level: 3, name: 'About Us' });
-      expect(heading).toBeInTheDocument();
-    });
-
-    it('provides accessible navigation links', () => {
-      const links = [
-        { label: 'Privacy Policy', href: '/privacy' },
-        { label: 'Terms of Service', href: '/terms' }
-      ];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
-      const termsLink = screen.getByRole('link', { name: 'Terms of Service' });
-      
-      expect(privacyLink).toBeInTheDocument();
-      expect(termsLink).toBeInTheDocument();
-    });
-
-    it('has proper alt text for logo', () => {
-      renderWithProviders(<Footer logo="/logo.png" />);
-      
-      const logo = screen.getByAltText('Logo');
-      expect(logo).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation for links', () => {
-      const links = [{ label: 'Test Link', href: '/test' }];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      const link = screen.getByRole('link', { name: 'Test Link' });
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute('href', '/test');
-    });
   });
 
   describe('Edge Cases', () => {
@@ -266,13 +79,6 @@ describe('Footer Component', () => {
       expect(screen.getByText(expected)).toBeInTheDocument();
     });
 
-    it('handles empty copyright text', () => {
-      renderWithProviders(<Footer copyright="" />);
-      
-      // When copyright is empty string, it falls back to default copyright
-      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved, Solvera Solutions Pty Ltd\./)).toBeInTheDocument();
-    });
-
     it('handles special characters in company name', () => {
       renderWithProviders(<Footer companyName="Company & Co. (Ltd.)" />);
       
@@ -285,27 +91,6 @@ describe('Footer Component', () => {
       
       expect(screen.getByText(new RegExp(`© Copyright 2022–2024 all rights reserved, ${longName}\\.`))).toBeInTheDocument();
     });
-
-    it('handles links with special characters', () => {
-      const links = [
-        { label: 'Privacy & Terms', href: '/privacy?ref=footer&utm_source=web' },
-        { label: 'Contact Us', href: '/contact#support' }
-      ];
-      
-      renderWithProviders(<Footer links={links} />);
-      
-      expect(screen.getByRole('link', { name: 'Privacy & Terms' })).toHaveAttribute('href', '/privacy?ref=footer&utm_source=web');
-      expect(screen.getByRole('link', { name: 'Contact Us' })).toHaveAttribute('href', '/contact#support');
-    });
-
-    it.each([
-      { logo: '', description: 'empty string' },
-      { logo: undefined, description: 'undefined' },
-    ])('does not render logo when logo is $description', ({ logo }) => {
-      renderWithProviders(<Footer logo={logo} />);
-      
-      expect(screen.queryByAltText('Logo')).not.toBeInTheDocument();
-    });
   });
 
   describe('Props Validation', () => {
@@ -313,90 +98,19 @@ describe('Footer Component', () => {
       renderWithProviders(<Footer />);
       
       expect(screen.getByText(/Solvera Solutions Pty Ltd/)).toBeInTheDocument();
-      expect(screen.getByText(/2024/)).toBeInTheDocument();
+      // Check for copyright text which includes 2024 (more specific than just /2024/)
+      expect(screen.getByText(/© Copyright 2022–2024 all rights reserved/)).toBeInTheDocument();
     });
 
     it('overrides default values when props are provided', () => {
-      const links = [{ label: 'Test', href: '/test' }];
-      
       renderWithProviders(
         <Footer
           companyName="Test Company"
           year={2023}
-          links={links}
-          className="test-class"
-          logo="/test-logo.png"
-          copyright="Custom copyright text"
-        >
-          <section>Test children</section>
-        </Footer>
-      );
-      
-      expect(screen.getByText('Custom copyright text')).toBeInTheDocument();
-      expect(screen.getByText('Test children')).toBeInTheDocument();
-      expect(screen.getByAltText('Logo')).toHaveAttribute('src', '/test-logo.png');
-      expect(screen.getByRole('link', { name: 'Test' })).toBeInTheDocument();
-      
-      const footer = screen.getByRole('contentinfo');
-      expect(footer).toHaveClass('test-class');
-    });
-  });
-
-  describe('Integration', () => {
-    it('works with complex children content and multiple navigation links', () => {
-      const links = [
-        { label: 'Home', href: '/' },
-        { label: 'About', href: '/about' },
-        { label: 'Contact', href: '/contact' }
-      ];
-      
-      renderWithProviders(
-        <Footer links={links}>
-          <section>
-            <h3>About Us</h3>
-            <p>We provide innovative solutions for modern businesses.</p>
-          </section>
-        </Footer>
+        />
       );
       
-      expect(screen.getByRole('heading', { name: 'About Us' })).toBeInTheDocument();
-      expect(screen.getByText('We provide innovative solutions for modern businesses.')).toBeInTheDocument();
-      
-      links.forEach(link => {
-        expect(screen.getByRole('link', { name: link.label })).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: link.label })).toHaveAttribute('href', link.href);
-      });
-    });
-
-    it('maintains proper structure with all features combined', () => {
-      const links = [
-        { label: 'Privacy', href: '/privacy' },
-        { label: 'Terms', href: '/terms' }
-      ];
-      
-      renderWithProviders(
-        <Footer
-          companyName="Test Company"
-          year={2024}
-          links={links}
-          logo="/logo.png"
-          className="custom-footer"
-        >
-          <section data-testid="custom-content">Custom footer content</section>
-        </Footer>
-      );
-      
-      // Check all elements are present
-      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
-      expect(screen.getByAltText('Logo')).toBeInTheDocument();
-      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
-      expect(screen.getByText(/Test Company/)).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Privacy' })).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Terms' })).toBeInTheDocument();
-      
-      // Check styling
-      const footer = screen.getByRole('contentinfo');
-      expect(footer).toHaveClass('custom-footer');
+      expect(screen.getByText(/© Copyright 2022–2023 all rights reserved, Test Company\./)).toBeInTheDocument();
     });
   });
 });

package/src/components/Footer/Footer.tsx

@@ -4,18 +4,13 @@
  * @module Components/Footer
  * @since 0.1.0
  *
- * A flexible footer component for application layouts with copyright information,
- * navigation links, and customizable content.
+ * A footer component for application layouts with copyright information.
  *
  * Features:
  * - Copyright information with automatic year generation
  * - Customizable company name and branding
- * - Optional navigation links
- * - Logo display support
- * - Custom footer content via children
  * - Responsive design
  * - Accessibility compliant
- * - Flexible layout options
  * - Consistent styling with design system
  *
  * @example
@@ -28,64 +23,18 @@
  *   companyName="My Company Inc."
  *   year={2024}
  * />
- * 
- * // Footer with navigation links
- * <Footer
- *   companyName="My Company"
- *   links={[
- *     { label: 'Privacy Policy', href: '/privacy' },
- *     { label: 'Terms of Service', href: '/terms' },
- *     { label: 'Contact', href: '/contact' }
- *   ]}
- * />
- * 
- * // Footer with logo and custom copyright
- * <Footer
- *   logo="/logo.svg"
- *   copyright="© 2024 My Company. All rights reserved."
- * />
- * 
- * // Footer with custom content
- * <Footer companyName="My Company">
- *   <section className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
- *     <section>
- *       <h3 className="font-semibold mb-2">About Us</h3>
- *       <p className="text-sm text-muted-foreground">
- *         We provide innovative solutions for modern businesses.
- *       </p>
- *     </section>
- *     <section>
- *       <h3 className="font-semibold mb-2">Contact</h3>
- *       <p className="text-sm text-muted-foreground">
- *         Email: info@mycompany.com<br />
- *         Phone: (555) 123-4567
- *       </p>
- *     </section>
- *     <section>
- *       <h3 className="font-semibold mb-2">Follow Us</h3>
- *       <nav className="flex gap-2">
- *         <a href="#" className="text-muted-foreground hover:text-foreground">Twitter</a>
- *         <a href="#" className="text-muted-foreground hover:text-foreground">LinkedIn</a>
- *       </nav>
- *     </section>
- *   </section>
- * </Footer>
  * ```
  *
  * @accessibility
  * - WCAG 2.1 AA compliant
  * - Proper semantic HTML with role="contentinfo"
- * - Screen reader friendly navigation
- * - Keyboard navigation support
  * - High contrast support
- * - Clear link identification
  *
  * @dependencies
  * - React 19+ - Component framework
  * - Tailwind CSS - Styling
  */
 import React from 'react';
-import { cn } from '../../utils/core/cn';
 
 /**
  * Props for the Footer component.
@@ -101,95 +50,29 @@ export interface FooterProps {
    * @default current year
    */
   year?: number;
-
-  /**
-   * Optional array of navigation links to display
-   */
-  links?: Array<{
-    label: string;
-    href: string;
-  }>;
-
-  /**
-   * Optional CSS class name
-   */
-  className?: string;
-
-  /**
-   * Logo image URL (from UI version)
-   */
-  logo?: string;
-
-  /**
-   * Copyright text (from UI version)
-   */
-  copyright?: string;
-
-  /**
-   * Footer content - children to render inside footer
-   */
-  children?: React.ReactNode;
 }
 
 /**
- * Footer component that displays copyright information and navigation
+ * Footer component that displays copyright information
  * 
  * @example
  * ```tsx
  * // Basic usage
  * <Footer />
  * 
- * // With children
- * <Footer>
- *   <section>Custom footer content</section>
- * </Footer>
- * 
- * // With logo and copyright
- * <Footer logo="/logo.png" copyright="© 2024 Company. All rights reserved." />
+ * // With custom company name and year
+ * <Footer companyName="My Company" year={2024} />
  * ```
  */
 const FooterComponent: React.FC<FooterProps> = ({
   companyName = 'Solvera Solutions Pty Ltd',
-  year = new Date().getFullYear(),
-  links,
-  className = '',
-  logo,
-  copyright,
-  children
+  year = new Date().getFullYear()
 }) => {
-  // Use custom copyright if provided, otherwise generate default
-  const copyrightText = copyright || `© Copyright 2022–${year} all rights reserved, ${companyName}.`;
+  const copyrightText = `© Copyright 2022–${year} all rights reserved, ${companyName}.`;
 
   return (
-    <footer className={cn('mt-8 py-6 flex justify-center border-t border-border bg-main-100', className)}>
-
-      <section className='px-4 w-[min(var(--app-width),100%)] mx-auto text-center'>
-        {logo && (
-          <img src={logo} alt="Logo" className="h-8 w-auto" />
-        )}
-
-        {children && (
-          <>
-            {children}
-          </>
-        )}
-
-        <span className="text-muted-foreground">
-          {copyrightText}
-        </span>
-
-        {links && links.length > 0 && (
-          <ul className="flex gap-4 mt-2 md:mt-0">
-            {links.map((link, index) => (
-              <li key={index}>
-                <a href={link.href} className="text-muted-foreground hover:text-foreground">
-                  {link.label}
-                </a>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
+    <footer className="mt-8 py-6 w-full border-t border-border bg-main-100 text-center  text-muted-foreground print:hidden">
+      {copyrightText}
     </footer>
   );
 };

package/src/components/Form/Form.test.tsx

@@ -23,28 +23,45 @@ vi.mock('../../utils/core/cn', () => ({
   cn: (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
 }));
 
-// Mock the Label component
+// Mock the Label component (mirrors pace-core Label: required indicator and error message)
 vi.mock('../Label', () => ({
-  Label: ({ children, htmlFor, ...props }: any) => (
-    <label htmlFor={htmlFor} {...props}>
-      {children}
-    </label>
-  )
-}));
-
-// Mock the Alert component
-vi.mock('../Alert', () => ({
-  Alert: ({ children, variant, className, ...props }: any) => (
-    <div role="alert" className={`alert alert-${variant} ${className || ''}`} {...props}>
-      {children}
-    </div>
+  Label: ({
+    children,
+    htmlFor,
+    required,
+    error,
+    className,
+    ...props
+  }: {
+    children?: React.ReactNode;
+    htmlFor?: string;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    [key: string]: unknown;
+  }) => (
+    <>
+      <label htmlFor={htmlFor} className={className} {...props}>
+        {children}
+        {required && (
+          <span aria-label="required">
+            *
+          </span>
+        )}
+      </label>
+      {error && (
+        <p role="alert" aria-live="polite">
+          {error}
+        </p>
+      )}
+    </>
   )
 }));
 
 // Mock useSessionDraft for persistence testing
 const mockSetState = vi.fn();
 const mockClearDraft = vi.fn();
-let mockPersistedValues: Record<string, any> = {};
+let mockPersistedValues: Record<string, unknown> = {};
 
 vi.mock('../../hooks/useSessionDraft', () => ({
   useSessionDraft: vi.fn((_key, _initialState, _options) => {
@@ -68,7 +85,7 @@ vi.mock('../../utils/persistence/sensitiveFieldDetection', () => ({
   filterSensitiveFields: vi.fn((values, _fieldNames, _fieldTypes) => {
     // Filter out common sensitive fields
     const sensitiveFields = ['password', 'passwordConfirm', 'secret', 'token', 'apiKey'];
-    const filtered: Record<string, any> = {};
+    const filtered: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(values)) {
       if (!sensitiveFields.some(field => key.toLowerCase().includes(field))) {
         filtered[key] = value;
@@ -336,17 +353,18 @@ describe('Form Component', () => {
   describe('Accessibility', () => {
     it('has proper form structure', () => {
       const onSubmit = vi.fn();
-      
+
       renderWithProviders(
         <Form onSubmit={onSubmit}>
           <FormField name="name" label="Name" />
           <button type="submit">Submit</button>
         </Form>
       );
-      
+
       const form = document.querySelector('form');
       expect(form).toBeInTheDocument();
-      expect(form).toHaveAttribute('class', 'space-y-4');
+      expect(screen.getByLabelText('Name')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
     });
 
     it('provides form context to children', () => {
@@ -745,18 +763,20 @@ describe('FormField Component', () => {
       const schema = z.object({
         test: z.string().min(1, 'Field is required')
       });
-      
+
       renderWithProviders(
         <Form schema={schema} onSubmit={onSubmit}>
           <FormField name="test" label="Test Field" />
           <button type="submit">Submit</button>
         </Form>
       );
-      
+
       await user.click(screen.getByRole('button', { name: 'Submit' }));
-      
-      const input = screen.getByLabelText('Test Field');
-      expect(input).toHaveClass('border-destructive', 'focus-visible:ring-destructive');
+
+      // FormField shows error via Label (role="alert") and Input error state
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveTextContent('Required');
+      expect(screen.getByLabelText('Test Field')).toBeInTheDocument();
     });
 
     it('validates with custom validation rules', async () => {
@@ -977,9 +997,6 @@ describe('FormField Component', () => {
     });
   });
 
-  describe('Error Handling - Edge Cases', () => {
-  });
-
   describe('Edge Cases', () => {
     it('handles form without schema (uncontrolled)', () => {
       const onSubmit = vi.fn();