@tpzdsp/next-toolkit 2.5.0 → 3.0.0

package/src/components/LinkButton/LinkButton.test.tsx

@@ -1,177 +0,0 @@
-import { LinkButton } from './LinkButton';
-import { render, screen } from '../../test/renderers';
-
-// Mock next/link
-vi.mock('next/link', () => ({
-  default: ({
-    href,
-    children,
-    className,
-    ...props
-  }: {
-    href: string;
-    children: React.ReactNode;
-    className?: string;
-  }) => (
-    <a href={href} className={className} data-testid="next-link" {...props}>
-      {children}
-    </a>
-  ),
-}));
-
-describe('LinkButton', () => {
-  describe('rendering', () => {
-    it('should render with children', () => {
-      render(<LinkButton href="/test">Click me</LinkButton>);
-
-      expect(screen.getByRole('link', { name: 'Click me' })).toBeInTheDocument();
-    });
-
-    it('should render as a link with correct href', () => {
-      render(<LinkButton href="/explore">Explore</LinkButton>);
-
-      const link = screen.getByRole('link', { name: 'Explore' });
-
-      expect(link).toHaveAttribute('href', '/explore');
-    });
-
-    it('should apply primary variant by default', () => {
-      render(<LinkButton href="/test">Button</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveClass('bg-brand');
-    });
-
-    it('should apply secondary variant when specified', () => {
-      render(
-        <LinkButton href="/test" variant="secondary">
-          Button
-        </LinkButton>,
-      );
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveClass('bg-slate-100');
-    });
-
-    it('should apply inverse variant when specified', () => {
-      render(
-        <LinkButton href="/test" variant="inverse">
-          Button
-        </LinkButton>,
-      );
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveClass('bg-white');
-    });
-
-    it('should merge custom className', () => {
-      render(
-        <LinkButton href="/test" className="custom-class">
-          Button
-        </LinkButton>,
-      );
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveClass('custom-class');
-      expect(link).toHaveClass('bg-brand'); // Still has base classes
-    });
-  });
-
-  describe('external links', () => {
-    it('should automatically detect external URLs', () => {
-      render(<LinkButton href="https://example.com">External</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
-    it('should detect protocol-relative URLs as external', () => {
-      render(<LinkButton href="//example.com">External</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveAttribute('target', '_blank');
-    });
-
-    it('should detect mailto links as external', () => {
-      render(<LinkButton href="mailto:test@example.com">Email</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveAttribute('target', '_blank');
-    });
-
-    it('should use Next.js Link for internal URLs', () => {
-      render(<LinkButton href="/internal">Internal</LinkButton>);
-
-      expect(screen.getByTestId('next-link')).toBeInTheDocument();
-
-      const link = screen.getByRole('link');
-
-      expect(link).not.toHaveAttribute('target');
-      expect(link).not.toHaveAttribute('rel');
-    });
-  });
-
-  describe('openInNewTab', () => {
-    it('should open in new tab when openInNewTab is true', () => {
-      render(
-        <LinkButton href="/internal" openInNewTab>
-          Open in new tab
-        </LinkButton>,
-      );
-
-      const link = screen.getByRole('link');
-
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-
-    it('should use regular anchor tag when openInNewTab is true', () => {
-      render(
-        <LinkButton href="/internal" openInNewTab>
-          Open in new tab
-        </LinkButton>,
-      );
-
-      // Should not use Next.js Link when opening in new tab
-      expect(screen.queryByTestId('next-link')).not.toBeInTheDocument();
-    });
-
-    it('should not open in new tab by default for internal links', () => {
-      render(<LinkButton href="/internal">Internal</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).not.toHaveAttribute('target');
-    });
-  });
-
-  describe('accessibility', () => {
-    it('should have link role', () => {
-      render(<LinkButton href="/test">Button</LinkButton>);
-
-      const link = screen.getByRole('link');
-
-      expect(link).toBeInTheDocument();
-    });
-
-    it('should accept aria attributes', () => {
-      render(
-        <LinkButton href="/test" aria-label="Custom label">
-          Button
-        </LinkButton>,
-      );
-
-      const link = screen.getByRole('link', { name: 'Custom label' });
-
-      expect(link).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Modal/Modal.test.tsx

@@ -1,246 +0,0 @@
-import { Modal } from './Modal';
-import { render, screen, userEvent } from '../../test/renderers';
-
-const MODAL_CONTENT = 'Modal content';
-const MODAL_ROOT_ID = 'modal-root';
-const BACKDROP_SELECTOR = '[aria-modal="true"]';
-
-// Mock the useClickOutside hook
-vi.mock('../../hooks/useClickOutside', () => ({
-  useClickOutside: vi.fn(),
-}));
-
-describe.todo('Modal', () => {
-  // Setup modal root element for each test
-  beforeEach(() => {
-    const modalRoot = document.createElement('div');
-
-    modalRoot.id = MODAL_ROOT_ID;
-    document.body.appendChild(modalRoot);
-  });
-
-  afterEach(() => {
-    const modalRoot = document.getElementById(MODAL_ROOT_ID);
-
-    if (modalRoot) {
-      modalRoot.remove();
-    }
-  });
-
-  it('should render modal when isOpen is true', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    expect(screen.getByText(MODAL_CONTENT)).toBeInTheDocument();
-
-    // Check for the backdrop with aria-modal attribute instead of role
-    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
-
-    expect(backdrop).toBeInTheDocument();
-  });
-
-  it('should not render modal when isOpen is false', () => {
-    render(
-      <Modal isOpen={false} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
-  });
-
-  it('should not render modal when modal root is missing', () => {
-    // Remove modal root
-    const modalRoot = document.getElementById(MODAL_ROOT_ID);
-
-    if (modalRoot) {
-      document.body.removeChild(modalRoot);
-    }
-
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    expect(screen.queryByText(MODAL_CONTENT)).not.toBeInTheDocument();
-  });
-
-  it('should have proper accessibility attributes', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
-
-    expect(backdrop).toHaveAttribute('aria-modal', 'true');
-
-    const closeButton = screen.getByRole('button', { name: /close modal/i });
-
-    expect(closeButton).toHaveAttribute('aria-label', 'Close modal');
-  });
-
-  it('should call onClose when close button is clicked', async () => {
-    const user = userEvent.setup();
-    const onCloseMock = vi.fn();
-
-    render(
-      <Modal isOpen={true} onClose={onCloseMock}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    const closeButton = screen.getByRole('button', { name: /close modal/i });
-
-    await user.click(closeButton);
-
-    expect(onCloseMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call onClose when Escape key is pressed', async () => {
-    const user = userEvent.setup();
-    const onCloseMock = vi.fn();
-
-    render(
-      <Modal isOpen={true} onClose={onCloseMock}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    await user.keyboard('{Escape}');
-
-    expect(onCloseMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('should not call onClose when other keys are pressed', async () => {
-    const user = userEvent.setup();
-    const onCloseMock = vi.fn();
-
-    render(
-      <Modal isOpen={true} onClose={onCloseMock}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    await user.keyboard('{Enter}');
-    await user.keyboard('{Space}');
-    await user.keyboard('a');
-
-    expect(onCloseMock).not.toHaveBeenCalled();
-  });
-
-  it('should render complex content correctly', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>
-          <h2>Modal Title</h2>
-
-          <p>Modal description</p>
-
-          <button>Action Button</button>
-
-          <ul>
-            <li>Item 1</li>
-
-            <li>Item 2</li>
-          </ul>
-        </div>
-      </Modal>,
-    );
-
-    expect(screen.getByText('Modal Title')).toBeInTheDocument();
-    expect(screen.getByText('Modal description')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
-  });
-
-  it('should have correct styling classes', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    const backdrop = screen.getByText(MODAL_CONTENT).closest(BACKDROP_SELECTOR);
-
-    expect(backdrop).toHaveClass(
-      'fixed',
-      'inset-0',
-      'z-50',
-      'flex',
-      'items-center',
-      'justify-center',
-      'bg-black',
-      'bg-opacity-50',
-    );
-
-    const modalContent = backdrop?.firstChild as HTMLElement;
-
-    expect(modalContent).toHaveClass(
-      'bg-white',
-      'rounded-lg',
-      'p-6',
-      'relative',
-      'max-w-md',
-      'w-full',
-      'shadow-lg',
-      'z-10',
-    );
-  });
-
-  it('should render close icon correctly', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    const closeButton = screen.getByRole('button', { name: /close modal/i });
-    const closeIcon = closeButton.querySelector('svg');
-
-    expect(closeIcon).toBeInTheDocument();
-    expect(closeButton).toHaveClass(
-      'text-static-xl',
-      'absolute',
-      'top-2',
-      'right-2',
-      'text-gray-600',
-      'hover:text-black',
-    );
-  });
-
-  it('should clean up event listeners when unmounted', () => {
-    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
-    const onCloseMock = vi.fn();
-
-    const { unmount } = render(
-      <Modal isOpen={true} onClose={onCloseMock}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    unmount();
-
-    expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
-
-    removeEventListenerSpy.mockRestore();
-  });
-
-  it('should have modal content with correct tabIndex', () => {
-    render(
-      <Modal isOpen={true} onClose={vi.fn()}>
-        <div>{MODAL_CONTENT}</div>
-      </Modal>,
-    );
-
-    const modalContent = screen.getByText(MODAL_CONTENT).closest('div[tabIndex="-1"]');
-
-    expect(modalContent).toHaveAttribute('tabIndex', '-1');
-  });
-});

package/src/components/NotificationBanner/NotificationBanner.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { NotificationBanner } from './NotificationBanner';
-
-export default {
-  title: 'Components/NotificationBanner',
-  component: NotificationBanner,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A notification banner for displaying important messages. Follows the GOV.UK Design System notification banner pattern. Commonly used wrapped in a <noscript> tag to inform users when JavaScript is required.',
-      },
-    },
-  },
-} as Meta<typeof NotificationBanner>;
-
-export const Default: StoryObj<typeof NotificationBanner> = {
-  args: {
-    message: 'This is an important notification message for users.',
-  },
-};
-
-export const CustomTitle: StoryObj<typeof NotificationBanner> = {
-  args: {
-    title: 'Service Update',
-    message:
-      'This service will be undergoing maintenance on Saturday 15th January from 9am to 5pm.',
-  },
-};
-
-export const JavaScriptRequired: StoryObj<typeof NotificationBanner> = {
-  args: {
-    title: 'Important: JavaScript is required',
-    message:
-      'This application requires JavaScript to display the interactive map and data. Please enable JavaScript in your browser settings to use this service.',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Example usage for a noscript fallback message.',
-      },
-    },
-  },
-};

package/src/components/NotificationBanner/NotificationBanner.test.tsx

@@ -1,58 +0,0 @@
-import { NotificationBanner } from './NotificationBanner';
-import { render, screen } from '../../test/renderers';
-
-describe('NotificationBanner Component', () => {
-  it('renders with default title and provided message', () => {
-    render(<NotificationBanner message="Test message content" />);
-
-    const heading = screen.getByRole('heading', { name: 'Important' });
-    const message = screen.getByText('Test message content');
-
-    expect(heading).toHaveAttribute('id', 'notification-banner-title');
-    expect(heading).toBeInTheDocument();
-    expect(message).toBeInTheDocument();
-  });
-
-  it('renders with custom title and message', () => {
-    render(<NotificationBanner title="Custom Title" message="Custom message content" />);
-
-    const heading = screen.getByRole('heading', { name: 'Custom Title' });
-    const message = screen.getByText('Custom message content');
-
-    expect(heading).toBeInTheDocument();
-    expect(message).toBeInTheDocument();
-  });
-
-  it('renders as a section with aria-labelledby', () => {
-    render(<NotificationBanner message="Test message" />);
-
-    const section = screen.getByRole('region', { name: 'Important' });
-
-    expect(section).toBeInTheDocument();
-    expect(section).toHaveAttribute('aria-labelledby', 'notification-banner-title');
-  });
-
-  it('applies default styling classes', () => {
-    render(<NotificationBanner message="Test message" />);
-
-    const section = screen.getByRole('region');
-
-    expect(section).toHaveClass('bg-brand', 'text-white', 'font-gds');
-  });
-
-  it('allows custom className to be merged', () => {
-    render(<NotificationBanner message="Test message" className="custom-class" />);
-
-    const section = screen.getByRole('region');
-
-    expect(section).toHaveClass('bg-brand', 'text-white', 'font-gds', 'custom-class');
-  });
-
-  it('spreads additional props to section element', () => {
-    render(<NotificationBanner message="Test message" data-testid="notification-banner" />);
-
-    const section = screen.getByTestId('notification-banner');
-
-    expect(section).toBeInTheDocument();
-  });
-});

package/src/components/NotificationBanner/NotificationBanner.tsx

@@ -1,45 +0,0 @@
-import type { ExtendProps } from '../../types';
-import { cn } from '../../utils';
-import { Heading } from '../Heading/Heading';
-import { Paragraph } from '../Paragraph/Paragraph';
-
-type Props = {
-  title?: string;
-  message: string;
-  /** Explicitly disallow children as we use title and message props instead */
-  children?: never;
-};
-
-export type NotificationBannerProps = ExtendProps<'section', Props>;
-
-/**
- * A notification banner component for displaying important messages.
- * Follows the GOV.UK Design System notification banner pattern.
- *
- * Common use cases:
- * - Wrapped in <noscript> to inform users that JavaScript is required
- * - Service announcements or maintenance notices
- * - Important information that needs prominent display
- */
-export const NotificationBanner = ({
-  title = 'Important',
-  message,
-  className,
-  ...props
-}: NotificationBannerProps) => (
-  <section
-    aria-labelledby="notification-banner-title"
-    className={cn('bg-brand text-white font-gds', className)}
-    {...props}
-  >
-    <div className="px-4 py-2 border-b border-white/30">
-      <Heading type="h2" id="notification-banner-title" className="text-lg text-white py-2">
-        {title}
-      </Heading>
-    </div>
-
-    <div className="p-4">
-      <Paragraph className="text-lg text-white pb-0">{message}</Paragraph>
-    </div>
-  </section>
-);

package/src/components/Paragraph/Paragraph.test.tsx

@@ -1,10 +0,0 @@
-import { Paragraph } from './Paragraph';
-import { render, screen } from '../../test/renderers';
-
-describe('Paragraph', () => {
-  it('renders with text', () => {
-    render(<Paragraph>Some test text</Paragraph>);
-
-    expect(screen.getByRole('paragraph')).toBeInTheDocument();
-  });
-});