Add 'to' prop to Link primitive (#1285)

* added 'to' prop to Link primitive

* update tests

* Create hip-numbers-lay.md

Co-authored-by: Joe Buono <joebuono@amazon.com>

.changeset/hip-numbers-lay.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+Add 'to' prop to Link primitive

packages/react/package.json

@@ -84,6 +84,7 @@
     "hygen": "^6.1.0",
     "jest": "^27.0.4",
     "jest-matchmedia-mock": "^1.1.0",
+    "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.3",
     "ts-morph": "^12.0.0",

packages/react/src/primitives/Link/Link.tsx

@@ -6,16 +6,17 @@ import { LinkProps, Primitive } from '../types';
 import { View } from '../View';
 
 const LinkPrimitive: Primitive<LinkProps, 'a'> = (
-  { as = 'a', children, className, isExternal, ...rest },
+  { as = 'a', children, className, isExternal, to, ...rest },
   ref
 ) => {
   return (
     <View
       as={as}
       className={classNames(ComponentClassNames.Link, className)}
+      ref={ref}
       rel={isExternal ? 'noopener noreferrer' : undefined}
       target={isExternal ? '_blank' : undefined}
-      ref={ref}
+      to={to}
       {...rest}
     >
       {children}

packages/react/src/primitives/Link/__tests__/Link.test.tsx

@@ -1,13 +1,51 @@
 import * as React from 'react';
 import kebabCase from 'lodash/kebabCase';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { ComponentClassNames } from '../../shared';
 import { ComponentPropsToStylePropsMap } from '../../types';
 import { Link } from '../Link';
 import { Text } from '../../Text/Text';
+import { Flex } from '../../Flex';
+import { Heading } from '../../Heading';
 
-describe('Text: ', () => {
+import {
+  BrowserRouter as Router,
+  Link as ReactRouterLink,
+  Routes,
+  Route,
+} from 'react-router-dom';
+
+function SampleRoutingApp() {
+  return (
+    <Router>
+      <Flex>
+        <Link as={ReactRouterLink} to="/">
+          Home
+        </Link>
+        <Link as={ReactRouterLink} to="/about">
+          About
+        </Link>
+      </Flex>
+
+      <Routes>
+        <Route path="/about" element={<About />} />
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </Router>
+  );
+}
+
+function Home() {
+  return <Heading level={2}>You are home</Heading>;
+}
+
+function About() {
+  return <Heading level={2}>You are on the about page</Heading>;
+}
+
+describe('Link: ', () => {
   const linkText = 'My Link';
 
   it('renders correct defaults', async () => {
@@ -80,4 +118,15 @@ describe('Text: ', () => {
       )
     ).toBe('underline');
   });
+
+  it('can integrate with react-router-dom using the "to" prop', async () => {
+    render(<SampleRoutingApp />);
+
+    expect(screen.getByText(/you are home/i)).toBeInTheDocument();
+
+    const leftClick = { button: 0 };
+    userEvent.click(screen.getByText(/about/i), leftClick);
+
+    expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
+  });
 });

packages/react/src/primitives/types/link.ts

@@ -2,16 +2,21 @@ import * as React from 'react';
 import { ViewProps } from './view';
 
 export interface LinkOptions {
+  /**
+   * Children to be rendered inside the Link component
+   */
+  children: React.ReactNode;
+
   /**
    * Boolean value indicating an external link
    * sets the rel attribute to "noopener noreferrer"
    */
   isExternal?: boolean;
 
   /**
-   * Children to be rendered inside the Link component
+   * A string representation of the URL path
    */
-  children: React.ReactNode;
+  to?: string;
 }
 
 export interface LinkProps extends ViewProps, LinkOptions {}