@tpzdsp/next-toolkit 1.12.1 → 1.14.0

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

@@ -0,0 +1,177 @@
+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/LinkButton/LinkButton.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+
+import NextLink from 'next/link';
+
+import type { ExtendProps } from '../../types/utils';
+import { cn } from '../../utils';
+
+type Props = {
+  /** URL to navigate to */
+  href: string;
+  /** Button variant styling */
+  variant?: 'primary' | 'secondary' | 'inverse';
+  /** Content to display in the button */
+  children: ReactNode;
+  /** Whether to open in a new tab (default: false) */
+  openInNewTab?: boolean;
+};
+
+export type LinkButtonProps = ExtendProps<'a', Props>;
+
+const VARIANTS = {
+  primary: 'bg-brand hover-enabled:bg-green-600 text-white',
+  secondary: 'bg-slate-100 hover-enabled:bg-slate-200 text-black',
+  inverse: 'bg-white hover-enabled:bg-slate-50 text-brand',
+};
+
+/**
+ * Determines if a URL is external (different origin or absolute URL)
+ */
+const isExternalUrl = (href: string): boolean => {
+  // Absolute URLs (http://, https://, //)
+  if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+    return true;
+  }
+
+  // mailto:, tel:, etc.
+  if (href.includes(':')) {
+    return true;
+  }
+
+  return false;
+};
+
+// NOTE: some of the styles are applied in `tailwind.css`, under `Button Styles`
+export const LinkButton = ({
+  href,
+  variant = 'primary',
+  openInNewTab = false,
+  className,
+  children,
+  ...props
+}: LinkButtonProps) => {
+  const buttonClasses = cn(
+    `sm:w-auto text-lg relative inline-flex w-full outline-none items-center border-transparent
+    justify-center border-2 text-center active-enabled:translate-y-[2px] focus:shadow-focus
+    focus:border-focus focus:shadow-[inset_0_0_0_1px] focus-idle:border-focus
+    focus-idle:text-focus-text focus-idle:bg-focus focus-idle:shadow-border-input
+    disabled:opacity-50 disabled:hover:cursor-not-allowed button`,
+    VARIANTS[variant],
+    className,
+  );
+
+  const isExternal = isExternalUrl(href);
+
+  // External link or forced new tab - use <a> tag with appropriate attributes
+  if (isExternal || openInNewTab) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={buttonClasses} {...props}>
+        {children}
+      </a>
+    );
+  }
+
+  // Internal link - use Next.js Link for client-side navigation
+  return (
+    <NextLink href={href} className={buttonClasses} {...props}>
+      {children}
+    </NextLink>
+  );
+};

package/src/components/index.ts

@@ -1,6 +1,7 @@
 // Default components - these can be used in server or client-side rendering
 export { BackToTop } from './backToTop/BackToTop';
 export { Button } from './Button/Button';
+export { ButtonLink } from './ButtonLink/ButtonLink';
 export { Card } from './Card/Card';
 export { Chip } from './chip/Chip';
 export { CookieBanner } from './cookieBanner/CookieBanner';
@@ -16,6 +17,7 @@ export { EaLogo } from './images/EaLogo';
 export { OglLogo } from './images/OglLogo';
 export { ExternalLink } from './link/ExternalLink';
 export { Link } from './link/Link';
+export { LinkButton } from './LinkButton/LinkButton';
 export { Paragraph } from './Paragraph/Paragraph';
 export { RuleDivider } from './divider/RuleDivider';
 export { SkipLink } from './skipLink/SkipLink';
@@ -25,6 +27,7 @@ export { TextArea } from './form/TextArea';
 // Export default component types
 export type { BackToTopProps } from './backToTop/BackToTop';
 export type { ButtonProps } from './Button/Button';
+export type { ButtonLinkProps } from './ButtonLink/ButtonLink';
 export type { CardProps } from './Card/Card';
 export type { ChipProps } from './chip/Chip';
 export type { ContainerProps } from './container/Container';
@@ -34,6 +37,7 @@ export type { HintProps } from './Hint/Hint';
 export type { NotificationBannerProps } from './NotificationBanner/NotificationBanner';
 export type { ExternalLinkProps } from './link/ExternalLink';
 export type { LinkProps } from './link/Link';
+export type { LinkButtonProps } from './LinkButton/LinkButton';
 export type { ParagraphProps } from './Paragraph/Paragraph';
 export type { SlidingPanelProps } from './SlidingPanel/SlidingPanel';
 export type { SkipLinkProps } from './skipLink/SkipLink';
@@ -51,6 +55,7 @@ export { ErrorFallback } from './ErrorBoundary/ErrorFallback';
 // NOTE: Select components moved to separate entry point '@tpzdsp/next-toolkit/components/select'
 // export { Select } from './select/Select';
 // export { SelectSkeleton } from './select/SelectSkeleton';
+// NOTE: InfoBox moved to separate entry point '@tpzdsp/next-toolkit/components/info-box'
 
 // Export client component types
 export type { AccordionProps } from './accordion/Accordion';

package/src/components/link/ExternalLink.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from '@testing-library/react';
+
+import { ExternalLink } from './ExternalLink';
+
+describe('ExternalLink', () => {
+  it('renders with children', () => {
+    render(<ExternalLink href="https://example.com">Visit Example</ExternalLink>);
+
+    const link = screen.getByRole('link', { name: /Visit Example/i });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it('sets target="_blank" to open in new tab', () => {
+    render(<ExternalLink href="https://example.com">External Link</ExternalLink>);
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('sets rel="noopener noreferrer" for security', () => {
+    render(<ExternalLink href="https://example.com">External Link</ExternalLink>);
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('includes screen reader text indicating new tab', () => {
+    render(<ExternalLink href="https://example.com">Visit Site</ExternalLink>);
+
+    // The accessible name should include the "(opens in new tab)" text
+    const link = screen.getByRole('link', { name: /Visit Site\(opens in new tab\)/i });
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    render(
+      <ExternalLink href="https://example.com" className="custom-class">
+        Link
+      </ExternalLink>,
+    );
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveClass('custom-class');
+  });
+
+  it('preserves default link styling classes', () => {
+    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveClass('text-link');
+    expect(link).toHaveClass('underline');
+  });
+
+  it('applies href attribute correctly', () => {
+    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
+
+    const link = screen.getByRole('link');
+
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('forwards additional props to anchor element', () => {
+    render(
+      <ExternalLink href="https://example.com" data-testid="external-link">
+        Link
+      </ExternalLink>,
+    );
+
+    const link = screen.getByTestId('external-link');
+
+    expect(link).toBeInTheDocument();
+  });
+
+  it('renders with complex children', () => {
+    render(
+      <ExternalLink href="https://example.com">
+        <span>Complex </span>
+
+        <strong>Content</strong>
+      </ExternalLink>,
+    );
+
+    const link = screen.getByRole('link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveTextContent('Complex Content');
+  });
+
+  it('screen reader text is visually hidden but accessible', () => {
+    render(<ExternalLink href="https://example.com">Link</ExternalLink>);
+
+    const srText = screen.getByText('(opens in new tab)', { exact: false });
+
+    expect(srText).toHaveClass('sr-only');
+  });
+});

package/src/components/link/ExternalLink.tsx

@@ -24,5 +24,6 @@ export const ExternalLink = ({ href, className, children, ...props }: ExternalLi
     target="_blank"
   >
     {children}
+    <span className="sr-only"> (opens in new tab)</span>
   </a>
 );

package/src/map/FullScreenControl.ts

@@ -0,0 +1,126 @@
+/* eslint-disable no-restricted-syntax */
+import { Map } from 'ol';
+import { Control } from 'ol/control';
+import type { Options as ControlOptions } from 'ol/control/Control';
+
+import { CONTROL_ICONS, createControlButton } from './createControlButton';
+
+const FULL_SCREEN_CLASS = 'map-fullscreen';
+const ARIA_LABEL_TOGGLE = 'Toggle full screen';
+const ARIA_LABEL_EXIT = 'Exit full screen';
+
+export class FullScreenControl extends Control {
+  private isFullScreen = false;
+  private readonly button!: HTMLButtonElement;
+  liveRegion!: HTMLElement;
+  private mapContainer: HTMLElement | null = null;
+
+  constructor(options?: ControlOptions) {
+    const button = createControlButton({
+      ariaLabel: ARIA_LABEL_TOGGLE,
+      title: ARIA_LABEL_TOGGLE,
+      iconSvg: CONTROL_ICONS.EXPAND,
+      className: 'ol-fullscreen-toggle',
+    });
+
+    const element = document.createElement('div');
+
+    element.className = 'ol-fullscreen ol-unselectable ol-control';
+    element.appendChild(button);
+
+    // Create a live region for screen reader announcements
+    const liveRegion = document.createElement('div');
+
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('role', 'status');
+    liveRegion.className = 'ol-fullscreen-live-region';
+    liveRegion.style.position = 'absolute';
+    liveRegion.style.width = '1px';
+    liveRegion.style.height = '1px';
+    liveRegion.style.margin = '-1px';
+    liveRegion.style.border = '0';
+    liveRegion.style.padding = '0';
+    liveRegion.style.overflow = 'hidden';
+    liveRegion.style.clipPath = 'inset(50%)';
+    element.appendChild(liveRegion);
+
+    super({
+      element,
+      target: options?.target,
+    });
+
+    this.button = button;
+    this.liveRegion = liveRegion;
+
+    button.addEventListener('click', this.toggleFullScreen, false);
+  }
+
+  setMap(map: Map | null) {
+    super.setMap(map);
+
+    if (map) {
+      // Find the map container (the target element)
+      this.mapContainer = map.getTargetElement();
+    }
+  }
+
+  private readonly updateButtonIcon = (isFullScreen: boolean): void => {
+    // Update the SVG icon content
+    const svg = this.button.querySelector('svg');
+
+    if (svg) {
+      svg.innerHTML = isFullScreen ? CONTROL_ICONS.COLLAPSE : CONTROL_ICONS.EXPAND;
+    }
+  };
+
+  toggleFullScreen = (): void => {
+    if (!this.mapContainer) {
+      console.warn('Map container not found');
+
+      return;
+    }
+
+    this.isFullScreen = !this.isFullScreen;
+
+    if (this.isFullScreen) {
+      // Enter full screen mode
+      this.mapContainer.classList.add(FULL_SCREEN_CLASS);
+      this.updateButtonIcon(true);
+      this.button.setAttribute('aria-label', ARIA_LABEL_EXIT);
+      this.button.setAttribute('title', ARIA_LABEL_EXIT);
+      this.liveRegion.textContent = 'Full screen mode enabled';
+    } else {
+      // Exit full screen mode
+      this.mapContainer.classList.remove(FULL_SCREEN_CLASS);
+      this.updateButtonIcon(false);
+      this.button.setAttribute('aria-label', ARIA_LABEL_TOGGLE);
+      this.button.setAttribute('title', ARIA_LABEL_TOGGLE);
+      this.liveRegion.textContent = 'Full screen mode disabled';
+    }
+
+    // Force map to update its size after the transition
+    const map = this.getMap();
+
+    if (map) {
+      // Wait for CSS transition to complete before updating size
+      setTimeout(() => {
+        map.updateSize();
+      }, 300);
+    }
+  };
+
+  // Public method to exit full screen programmatically
+  exitFullScreen(): void {
+    if (this.isFullScreen) {
+      this.toggleFullScreen();
+    }
+  }
+
+  dispose(): void {
+    if (this.button) {
+      this.button.removeEventListener('click', this.toggleFullScreen);
+    }
+
+    super.dispose?.();
+  }
+}