Merge branch 'main' of github.com:cfpb/design-system-react into check…

…box-radiobuttons-sidemenu-update
cfpb · Jan 30, 2024 · 4a3845c · 4a3845c
2 parents e522706 + d3888b7
commit 4a3845c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter } from 'react-router-dom';
 import {
   DestructiveLink,
   Icon,
@@ -138,3 +139,24 @@ export const JumpLinkIconLeft: Story = {
     </Link>
   )
 };
+
+export const LinkWithReactRouterLink: Story = {
+  name: 'Link using React Router Link',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'See [React Router Link docs](https://reactrouter.com/en/main/components/link) for usage information'
+      }
+    }
+  },
+  render: () => (
+    <BrowserRouter>
+      <p>
+        <Link href='/#' isRouterLink>
+          Link using React Router Link
+        </Link>
+      </p>
+    </BrowserRouter>
+  )
+};
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -1,13 +1,19 @@
-import classnames from 'classnames';
+import { Link as RouterLink } from 'react-router-dom';
 import type { JSXElement } from '../../types/jsxElement';
+
+import classnames from 'classnames';
 import ListItem from '../List/ListItem';
 
-interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
-  type?: 'default' | 'destructive' | 'list';
+export interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
+  children?: React.ReactNode;
   hasIcon?: boolean;
-  noWrap?: boolean;
+  href?: string;
   isJump?: boolean;
   isJumpLeft?: boolean;
+  isRouterLink?: boolean;
+  noWrap?: boolean;
+  ref?: React.Ref<HTMLAnchorElement>;
+  type?: 'default' | 'destructive' | 'list';
 }
 
 /**
@@ -17,11 +23,13 @@ interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
  */
 export default function Link({
   children,
-  type = 'default',
   hasIcon = false,
-  noWrap = false,
+  href,
   isJump = false,
   isJumpLeft = false,
+  isRouterLink = false,
+  noWrap = false,
+  type = 'default',
   ...others
 }: LinkProperties): JSXElement {
   const cname = [others.className];
@@ -38,8 +46,21 @@ export default function Link({
   if (isJump) cname.push('a-link__jump a-link__icon-after-text');
   if (isJumpLeft) cname.push('a-link__jump a-link__icon-before-text');
 
+  if (isRouterLink) {
+    if (!href) {
+      throw new Error(
+        'Link component: href is a required attribute when isRouterLink is true'
+      );
+    }
+    return (
+      <RouterLink to={href} {...others} className={classnames(cname)}>
+        {children}
+      </RouterLink>
+    );
+  }
+
   return (
-    <a {...others} className={classnames(cname)}>
+    <a {...others} className={classnames(cname)} href={href}>
       {children}
     </a>
   );

diff --git a/src/index.ts b/src/index.ts
@@ -29,6 +29,7 @@ export {
   LinkText,
   ListLink
 } from './components/Link/Link';
+export type { LinkProperties } from './components/Link/Link';
 export { default as List } from './components/List/List';
 export {
   default as ListItem,

diff --git a/vite.config.ts b/vite.config.ts
@@ -48,16 +48,17 @@ export default defineConfig(() => ({
       fileName: (format): string => `${name}.${format}.js`
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: ['react', 'react-dom', 'react-router-dom'],
       output: {
         globals: {
           react: 'React',
-          'react-dom': 'ReactDOM'
+          'react-dom': 'ReactDOM',
+          'react-router-dom': 'ReactRouterDOM'
         }
       }
     },
     optimizeDeps: {
-      exclude: ['react']
+      exclude: ['react', 'react-dom', 'react-router-dom']
     },
     esbuild: {
       minify: true