Allow users to configure custom link component

src/components/Breadcrumb/breadcrumb.test.tsx

@@ -13,7 +13,7 @@ describe('<Breadcrumb />', () => {
       <Breadcrumb
         crumbs={[
           {
-            href: '/home',
+            to: '/home',
             label: 'Home',
           },
         ]}
@@ -32,8 +32,8 @@ describe('<Breadcrumb />', () => {
     render(
       <Breadcrumb
         crumbs={[
-          { href: '/home', label: 'Home' },
-          { href: '/section', label: 'Section' },
+          { to: '/home', label: 'Home' },
+          { to: '/section', label: 'Section' },
         ]}
       />,
     );
@@ -49,8 +49,8 @@ describe('<Breadcrumb />', () => {
     render(
       <Breadcrumb
         crumbs={[
-          { href: '/home', label: 'Home' },
-          { href: '/current', label: 'Current', isCurrent: true },
+          { to: '/home', label: 'Home' },
+          { to: '/current', label: 'Current', isCurrent: true },
         ]}
       />,
     );

src/components/Breadcrumb/breadcrumb.tsx

@@ -3,9 +3,10 @@ import type { HTMLAttributes } from 'react';
 import { Fragment } from 'react';
 import './breadcrumb.scss';
 import { JSXElement } from '../../types/jsx-element';
+import Link from '~/src/components/Link/link';
 
 export interface BreadcrumbCrumb {
-  href: string;
+  to: string;
   label: string;
   isCurrent?: boolean;
 }
@@ -34,16 +35,16 @@ export const Breadcrumb = ({
     >
       <nav className='m-breadcrumbs' aria-label={ariaLabel}>
         {crumbs.map((crumb) => (
-          <Fragment key={`${crumb.href}-${crumb.label}`}>
+          <Fragment key={`${crumb.to}-${crumb.label}`}>
             {` / `}
             {crumb.isCurrent ? (
               <span className='m-breadcrumbs__crumb' aria-current='page'>
                 {` ${crumb.label} `}
               </span>
             ) : (
-              <a className='m-breadcrumbs__crumb' href={crumb.href}>
+              <Link className='m-breadcrumbs__crumb' to={crumb.to}>
                 {` ${crumb.label} `}
-              </a>
+              </Link>
             )}
           </Fragment>
         ))}

src/components/Header/responsive-menu.tsx

@@ -17,7 +17,7 @@ export function CfpbLogo({
   return (
     <Link
       data-testid='CfpbLogoLink'
-      href={href}
+      to={href}
       title='Home'
       aria-label='Home'
       className='o-header__logo'
@@ -140,18 +140,18 @@ export default function ResponsiveMenu({
   );
 }
 
-export const ExampleLinks: ReactNode[] = [
-  <Link key='home' href='/' label='Home' />,
+export const ExampleLinks: React.ReactNode[] = [
+  <Link key='home' to='/' label='Home' />,
   <Link
     key='filing'
     className='nav-item active'
-    href='/filing'
+    to='/filing'
     label='Filing'
   />,
   <Link
     key='profile'
     className='nav-item profile'
-    href='/profile'
+    to='/profile'
     label='John Sample'
   />,
   <Button

src/components/Link/base-link.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import type { JSXElement } from "~/src/types/jsx-element";
+
+export interface BaseLinkProperties {
+  to: string | undefined;
+  children: ReactNode;
+  [key: string]: unknown;
+}
+
+export const BaseLink = ({
+  to,
+  children,
+  ...others
+}: BaseLinkProperties): JSXElement | null => {
+  return (
+    <a href={to} {...others}>
+      {children}
+    </a>
+  );
+};

src/components/Link/link.test.tsx

@@ -1,16 +1,35 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
 import Link, { LinkText, ListLink } from './link';
+import { DSRContext } from '~/src/context/dsr-context';
+import { ReactNode } from 'react';
+import type { JSXElement } from "~/src/types/jsx-element";
 
 describe('<Link />', () => {
   const linkBaseProperties = {
-    href: '/foo/bar',
+    to: '/foo/bar',
     'data-testid': 'link-test-id',
     label: 'some link',
   };
   const testId = linkBaseProperties['data-testid'];
 
+  interface CustomLinkProperties {
+      to: string | undefined;
+      children: ReactNode;
+  }
+
+  const CustomLinkComponent = ({
+    to,
+    children,
+    ...others
+  }: CustomLinkProperties): JSXElement | null => {
+    return (
+      <a href={to} {...others} data-testid='link-component-from-context'>
+        {children}
+      </a>
+    );
+  };
+
   it('Type: "default"', () => {
     render(<Link {...linkBaseProperties} />);
     const link = screen.getByTestId(testId);
@@ -79,42 +98,28 @@ describe('<Link />', () => {
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('Option: isRouterLink - it renders a router link', () => {
+  it('Context: uses link component configured in context', () => {
     render(
-      <MemoryRouter initialEntries={['/foo/bar']}>
-        <Link {...linkBaseProperties} isRouterLink />
-      </MemoryRouter>,
+      <DSRContext value={{LinkComponent:CustomLinkComponent}}>
+        <Link {...linkBaseProperties}>
+          <span data-testid='link-child'>Child</span>
+        </Link>
+      </DSRContext>,
     );
 
-    const link = screen.getByRole('link', { name: /some link/i });
-    expect(link).toHaveAttribute('href', '/foo/bar');
+    expect(screen.getByTestId('link-component-from-context')).toBeInTheDocument();
+
   });
 
-  it('Option: isRouterLink - it renders children and icons', async () => {
+  it('Context: uses base link component by default', () => {
     render(
-      <MemoryRouter initialEntries={['/foo/bar']}>
-        <Link {...linkBaseProperties} isRouterLink iconLeft='left'>
+        <Link {...linkBaseProperties}>
           <span data-testid='link-child'>Child</span>
-        </Link>
-      </MemoryRouter>,
+        </Link>,
     );
 
-    const link = screen.getByRole('link', { name: /some link/i });
-    expect(link).toHaveClass('a-link');
-    expect(screen.getByTestId('link-child')).toBeInTheDocument();
-    expect(screen.getByText('some link')).toHaveClass('a-link__text');
-    expect(await screen.findByTestId('link-icon-left')).toBeInTheDocument();
-  });
-
-  it('Option: isRouterLink - it requires href', () => {
-    const brokenProperties = {
-      ...linkBaseProperties,
-      href: undefined as unknown as string,
-    };
+    expect(screen.queryByTestId('link-component-from-context')).not.toBeInTheDocument();
 
-    expect(() => render(<Link {...brokenProperties} isRouterLink />)).toThrow(
-      'Link component: href is a required attribute when isRouterLink is true',
-    );
   });
 });
 
@@ -131,7 +136,7 @@ describe('<ListLink>', () => {
   const testId = 'list-link';
 
   it('includes all expected elements', () => {
-    render(<ListLink data-testid={testId} href='/foo/bar' label='Test text' />);
+    render(<ListLink data-testid={testId} to='/foo/bar' label='Test text' />);
     // ListItem
     const listItem = screen.getByRole('listitem');
     expect(listItem).toBeInTheDocument();

src/components/Link/link.tsx

@@ -1,9 +1,8 @@
 import { JSX } from 'react';
-import { Link as RouterLink } from 'react-router';
 import type { JSXElement } from '../../types/jsx-element';
-
 import classnames from 'classnames';
 import type { HTMLProps, ReactNode, Ref } from 'react';
+import { useDSRContext } from '~/src/context/dsr-context';
 import { Icon } from '../Icon/icon';
 import ListItem from '../List/list-item';
 import './link.scss';
@@ -20,7 +19,7 @@ export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
   /**
    * The link's destination URL.
    */
-  href: string;
+  to: string | undefined;
   /**
    * Name of icon to display left of link text
    */
@@ -33,10 +32,6 @@ export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
    * Whether the link is a standalone link
    */
   isJump?: boolean;
-  /**
-   * Whether the link is a react router link
-   */
-  isRouterLink?: boolean;
   /**
    * The link's text content, not required if children are provided
    */
@@ -57,11 +52,10 @@ export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
 export default function Link({
   isButton = false,
   children,
-  href,
+  to,
   iconLeft,
   iconRight,
   isJump = false,
-  isRouterLink = false,
   label,
   type = 'default',
   ...others
@@ -80,47 +74,26 @@ export default function Link({
     'a-link': shouldUseLinkStyles,
   });
 
+  const { LinkComponent } = useDSRContext();
+
   if (hasLeftIcon && hasRightIcon) {
     throw new Error(
       'Link component: only one of iconLeft or iconRight can be provided',
     );
   }
 
-  if (isRouterLink) {
-    if (!href) {
-      throw new Error(
-        'Link component: href is a required attribute when isRouterLink is true',
-      );
-    }
-    return (
-      <RouterLink to={href} {...others} className={cname}>
-        {children}
-        {!!iconLeft && (
-          <Icon name={iconLeft} isPresentational data-testid='link-icon-left' />
-        )}
-        {labelNode}
-        {!!iconRight && (
-          <Icon
-            name={iconRight}
-            isPresentational
-            data-testid='link-icon-right'
-          />
-        )}
-      </RouterLink>
-    );
-  }
-
   return (
-    <a {...others} className={cname} href={href}>
+    <LinkComponent {...others} className={cname} to={to}>
       {children}
+
       {!!iconLeft && (
         <Icon name={iconLeft} isPresentational data-testid='link-icon-left' />
       )}
       {labelNode}
       {!!iconRight && (
         <Icon name={iconRight} isPresentational data-testid='link-icon-right' />
       )}
-    </a>
+    </LinkComponent>
   );
 }
 

src/components/SecondaryNav/secondary-nav.test.tsx

@@ -5,9 +5,9 @@ import type { SecondaryNavItem } from './secondary-nav';
 
 describe('<SecondaryNav />', () => {
   const defaultItems: SecondaryNavItem[] = [
-    { href: '/a', label: 'Link A' },
-    { href: '/b', label: 'Link B', isActive: true },
-    { href: '/c', label: 'Link C' },
+    { to: '/a', label: 'Link A' },
+    { to: '/b', label: 'Link B', isActive: true },
+    { to: '/c', label: 'Link C' },
   ];
 
   it('renders a nav with the default aria-label', () => {
@@ -62,8 +62,8 @@ describe('<SecondaryNav />', () => {
         label: 'Parent',
         isActive: true,
         children: [
-          { href: '/child-a', label: 'Child A', isActive: true },
-          { href: '/child-b', label: 'Child B' },
+          { to: '/child-a', label: 'Child A', isActive: true },
+          { to: '/child-b', label: 'Child B' },
         ],
       },
     ];

src/components/SecondaryNav/secondary-nav.tsx

@@ -5,13 +5,13 @@ import Link from '../Link/link';
 import './secondary-nav.scss';
 
 export interface SecondaryNavChildItem {
-  href: string;
+  to: string;
   label: string;
   isActive?: boolean;
 }
 
 export interface SecondaryNavItem {
-  href?: string;
+  to?: string;
   label: string;
   /**
    * Whether this item is the current page. Ignored when the item has children;
@@ -61,13 +61,13 @@ export const SecondaryNav = ({
 
             return (
               <li
-                key={item.href ?? item.label}
+                key={item.to ?? item.label}
                 className='o-secondary-nav__item'
                 data-nav-is-active={sectionHasActive ? 'true' : undefined}
               >
-                {item.href ? (
+                {item.to ? (
                   <Link
-                    href={item.href}
+                    to={item.to}
                     className={classnames(
                       'o-secondary-nav__link o-secondary-nav__link--parent',
                       parentIsActive && 'o-secondary-nav__link--current',
@@ -88,9 +88,9 @@ export const SecondaryNav = ({
                 {item.children && item.children.length > 0 ? (
                   <ul className='o-secondary-nav__list o-secondary-nav__list--children'>
                     {item.children.map((child) => (
-                      <li key={child.href} className='o-secondary-nav__item'>
+                      <li key={child.to} className='o-secondary-nav__item'>
                         <Link
-                          href={child.href}
+                          to={child.to}
                           className={classnames(
                             'o-secondary-nav__link',
                             child.isActive && 'o-secondary-nav__link--current',