Navlink component (#996)

* Implemented Navlink for internal navigation and use it Footer

* Refactor Footer and Navlink components to use MemoryRouter for improved routing context in tests

* Refactor Navlink component to use Link component as fallback

* Refactor imports in Footer and Navlink components to use 'react-router' instead of 'react-router-dom'

* Refactor Footer.spec.tsx to import MemoryRouter from 'react-router' instead of 'react-router-dom'

* Updated import sections

* Refactor Navlink component to remove forwardRef and simplify function definition

* Prettier code

* Add tests for Navlink component functionality and rendering

* Prettier code

* Update MemoryRouter import to use 'react-router' instead of 'react-router-dom'

* Update mock for Link component to include fallback text

Author: MikaelNordberg

packages/pxweb2/src/app/components/Footer/Footer.spec.tsx

@@ -2,17 +2,12 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
 import '@testing-library/jest-dom/vitest';
+import { MemoryRouter } from 'react-router';
 
 import { Footer, scrollToTop } from './Footer';
 import { useLocaleContent } from '../../util/hooks/useLocaleContent';
 
 let currentPathname = '/en/tables';
-const navigateMock = vi.fn();
-
-vi.mock('react-router', () => ({
-  useNavigate: () => navigateMock,
-  useLocation: () => ({ pathname: currentPathname }),
-}));
 
 vi.mock('../../util/hooks/useLocaleContent', () => ({
   useLocaleContent: vi.fn(),
@@ -64,26 +59,38 @@ describe('Footer', () => {
 
     it('renders footer columns and links from mocked hook', async () => {
       (useLocaleContent as Mock).mockReturnValue(footerContent);
-      render(<Footer />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer />
+        </MemoryRouter>,
+      );
 
-      footerContent.footer.columns.forEach((col) => {
+      for (const col of footerContent.footer.columns) {
         expect(screen.getByText(col.header)).toBeInTheDocument();
-        col.links.forEach((link) => {
+        for (const link of col.links) {
           expect(screen.getByText(link.text)).toBeInTheDocument();
-        });
-      });
+        }
+      }
     });
 
     it('applies variant--tableview on the <footer> when variant="tableview"', () => {
       (useLocaleContent as Mock).mockReturnValue(footerContent);
-      render(<Footer variant="tableview" />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer variant="tableview" />
+        </MemoryRouter>,
+      );
       const footer = screen.getByRole('contentinfo');
       expect(footer.className).toMatch(/variant--tableview/);
     });
 
     it('uses variant--generic by default', () => {
       (useLocaleContent as Mock).mockReturnValue(footerContent);
-      render(<Footer />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer />
+        </MemoryRouter>,
+      );
       const footer = screen.getByRole('contentinfo');
       expect(footer.className).toMatch(/variant--generic/);
     });
@@ -116,23 +123,35 @@ describe('Footer', () => {
       const ref = {
         current: document.createElement('div'),
       } as React.RefObject<HTMLDivElement>;
-      render(<Footer containerRef={ref} />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer containerRef={ref} />
+        </MemoryRouter>,
+      );
       expect(
         screen.getByRole('button', { name: /common.footer.top_button_text/i }),
       ).toBeInTheDocument();
     });
 
     it('shows Top button when enableWindowScroll is true (no containerRef)', () => {
       (useLocaleContent as Mock).mockReturnValue(footerContent);
-      render(<Footer enableWindowScroll />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer enableWindowScroll />
+        </MemoryRouter>,
+      );
       expect(
         screen.getByRole('button', { name: /common.footer.top_button_text/i }),
       ).toBeInTheDocument();
     });
 
     it('hides Top button when neither containerRef nor enableWindowScroll', () => {
       (useLocaleContent as Mock).mockReturnValue(footerContent);
-      render(<Footer />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer />
+        </MemoryRouter>,
+      );
       expect(
         screen.queryByRole('button', {
           name: /common.footer.top_button_text/i,
@@ -145,7 +164,11 @@ describe('Footer', () => {
       const scrollSpy = vi.spyOn(window, 'scrollTo').mockImplementation(() => {
         vi.fn();
       });
-      render(<Footer enableWindowScroll />);
+      render(
+        <MemoryRouter initialEntries={[currentPathname]}>
+          <Footer enableWindowScroll />
+        </MemoryRouter>,
+      );
 
       const btn = screen.getByRole('button', {
         name: /common.footer.top_button_text/i,

packages/pxweb2/src/app/components/Footer/Footer.tsx

@@ -8,6 +8,17 @@ import { getConfig } from '../../util/config/getConfig';
 import { getLanguagePath } from '../../util/language/getLanguagePath';
 import { BodyShort, Button, Heading, Link } from '@pxweb2/pxweb2-ui';
 import { useLocaleContent } from '../../util/hooks/useLocaleContent';
+import Navlink from '../Navlink/Navlink';
+
+function useSafeLocation(): { pathname: string } {
+  try {
+    // Attempt router location
+    return useLocation() as { pathname: string };
+  } catch {
+    // Fallback to global location when outside Router
+    return { pathname: globalThis.location?.pathname || '/' };
+  }
+}
 
 type FooterProps = {
   containerRef?: React.RefObject<HTMLDivElement | null>;
@@ -47,7 +58,7 @@ export const Footer: React.FC<FooterProps> = ({
   const footerContent = content?.footer;
   // Ref for the main scrollable container
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
-  const location = useLocation();
+  const location = useSafeLocation();
 
   const canShowTopButton = !!containerRef || enableWindowScroll;
 
@@ -122,8 +133,8 @@ export const Footer: React.FC<FooterProps> = ({
                           lang.shorthand,
                         );
                         return (
-                          <Link
-                            href={languageHref}
+                          <Navlink
+                            to={languageHref}
                             size="medium"
                             key={lang.shorthand}
                             lang={lang.shorthand}
@@ -132,11 +143,10 @@ export const Footer: React.FC<FooterProps> = ({
                               if (!isCurrent) {
                                 i18n.changeLanguage(lang.shorthand);
                               }
-                              // Allow default navigation (no preventDefault) so URL updates
                             }}
                           >
                             {lang.languageName || lang.shorthand.toUpperCase()}
-                          </Link>
+                          </Navlink>
                         );
                       },
                     )}

packages/pxweb2/src/app/components/Navlink/Navlink.spec.tsx

@@ -0,0 +1,76 @@
+import React, { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { MemoryRouter } from 'react-router';
+import '@testing-library/jest-dom/vitest';
+
+import Navlink from './Navlink';
+
+// Mock pxweb2-ui Link and Icon for fallback
+vi.mock('@pxweb2/pxweb2-ui', () => ({
+  Icon: (props: Record<string, unknown>) => (
+    <span data-testid="icon" {...props} />
+  ),
+  Link: (props: Record<string, unknown>) => (
+    <a data-testid="ui-link" {...props}>
+      test
+    </a>
+  ),
+}));
+
+describe('Navlink', () => {
+  it('renders as RouterNavLink inside router', () => {
+    render(
+      <MemoryRouter>
+        <Navlink to="/test">Test Link</Navlink>
+      </MemoryRouter>,
+    );
+    const link = screen.getByRole('link', { name: 'Test Link' });
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/test');
+  });
+
+  it('renders as pxweb2-ui Link outside router', () => {
+    render(<Navlink to="/plain">Plain Link</Navlink>);
+    const link = screen.getByTestId('ui-link');
+    expect(link).toBeInTheDocument();
+    expect(link.getAttribute('href')).toBe('/plain');
+  });
+
+  it('applies className and size', () => {
+    render(
+      <MemoryRouter>
+        <Navlink to="/class" size="medium" className="custom-class">
+          Class Link
+        </Navlink>
+      </MemoryRouter>,
+    );
+    const link = screen.getByRole('link', { name: 'Class Link' });
+    expect(link.className).toMatch(/custom-class/);
+    expect(link.className).toMatch(/bodyshort-medium/);
+  });
+
+  it('forwards ref to the link', () => {
+    const ref = createRef<HTMLAnchorElement>();
+    render(
+      <MemoryRouter>
+        <Navlink to="/ref" ref={ref}>
+          Ref Link
+        </Navlink>
+      </MemoryRouter>,
+    );
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    expect(ref.current?.getAttribute('href')).toBe('/ref');
+  });
+
+  it('renders icon if provided', () => {
+    render(
+      <MemoryRouter>
+        <Navlink to="/icon" icon="ExternalLink" iconPosition="start">
+          Icon Link
+        </Navlink>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+});

packages/pxweb2/src/app/components/Navlink/Navlink.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  NavLink as RouterNavLink,
+  NavLinkProps as RouterNavLinkProps,
+  useInRouterContext,
+} from 'react-router';
+import cl from 'clsx';
+
+import classes from '$ui/src/lib/components/Link/Link.module.scss';
+import { Icon, IconProps, Link as UiLink } from '@pxweb2/pxweb2-ui';
+
+interface NavlinkProps extends Omit<RouterNavLinkProps, 'to'> {
+  to: string;
+  size?: 'small' | 'medium';
+  icon?: IconProps['iconName'];
+  iconPosition?: 'start' | 'end';
+  children: React.ReactNode;
+  inline?: boolean;
+  noUnderline?: boolean;
+}
+
+export function Navlink({
+  children,
+  to,
+  size,
+  icon,
+  iconPosition,
+  inline = false,
+  noUnderline = false,
+  className,
+  ref,
+  ...rest
+}: NavlinkProps & { ref?: React.Ref<HTMLAnchorElement> }) {
+  const inRouter = useInRouterContext();
+
+  const commonClassName = cl(
+    classes.link,
+    {
+      [classes.no_underline]: noUnderline,
+      [classes.inline]: inline,
+      [classes[`bodyshort-${size}`]]: size,
+      [classes[`padding-${size}`]]: size,
+    },
+    className,
+  );
+
+  if (!inRouter) {
+    // Fallback to regular anchor if no router context (e.g., isolated component tests)
+    const { style, ...anchorRest } = rest as Record<string, unknown>;
+    const anchorStyle =
+      typeof style === 'function'
+        ? style({ isActive: false, isPending: false })
+        : style;
+    return (
+      <UiLink
+        href={to}
+        ref={ref}
+        className={commonClassName}
+        style={anchorStyle}
+        {...anchorRest}
+      >
+        {icon && iconPosition === 'start' && (
+          <Icon iconName={icon} className={cl(classes.icon)} />
+        )}
+        {children}
+        {icon && iconPosition === 'end' && (
+          <Icon iconName={icon} className={cl(classes.icon)} />
+        )}
+      </UiLink>
+    );
+  }
+
+  return (
+    <RouterNavLink
+      to={to}
+      className={({ isActive }) =>
+        cl(commonClassName, { [classes.active]: isActive })
+      }
+      ref={ref}
+      {...rest}
+    >
+      {icon && iconPosition === 'start' && (
+        <Icon iconName={icon} className={cl(classes.icon)} />
+      )}
+      {children}
+      {icon && iconPosition === 'end' && (
+        <Icon iconName={icon} className={cl(classes.icon)} />
+      )}
+    </RouterNavLink>
+  );
+}
+
+export default Navlink;