fix(TextLink): Text link props & component usage (#285)

* stripping Link piece  from component

* stripping Link piece  from component

* type fix

package.json

@@ -24,8 +24,7 @@
   "peerDependencies": {
     "prop-types": ">=15.0.0",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-router-dom": ">=5.0.0"
+    "react-dom": ">=16.8.0"
   },
   "scripts": {
     "build": "BABEL_ENV=build NODE_ENV=production IS_PUBLISHING=true webpack --config webpack.config.js && tsc",

src/components/TextLink/TextLink.stories.mdx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Link } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import TextLink from './TextLink';
@@ -41,14 +41,14 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
 
 ## With React Router
 
-If you're doing in-app navigation and need to render a [React Router Link](https://reactrouter.com/web/api/Link) component, pass a `to`
-attribute as opposed to an href. NOTE: DO NOT pass these props simultaneously. The API for
+If you're doing in-app navigation and need to render a [React Router Link](https://reactrouter.com/web/api/Link) component,
+simply use React Router's `component` prop on the `Link` component. All Link props will be passed down to the anchor tag.
 
 <Canvas>
   <Story name="With React Router" decorators={[Story => <BrowserRouter><Story /></BrowserRouter>]}>
     {() => {
       return (
-        <TextLink to="/">Click me!</TextLink>
+        <Link to="/" component={TextLink}>Click me!</Link>
       );
     }}
   </Story>
@@ -75,7 +75,7 @@ APIs for each option
   <Story name="With Link props" decorators={[Story => <BrowserRouter><Story /></BrowserRouter>]}>
     {() => {
       return (
-        <TextLink to="/" replace>I will replace the current history entry</TextLink>
+        <Link to="/" replace component={TextLink}>I will replace the current history entry</Link>
       );
     }}
   </Story>

src/components/TextLink/TextLink.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import TextLink from './TextLink';
 
@@ -9,10 +8,6 @@ const ANCHOR_PROPS = {
   href: 'http://palmetto.com',
 };
 
-const ROUTER_LINK_PROPS = {
-  to: '/',
-};
-
 describe('TextTextLink', () => {
   describe('Default', () => {
     test('It renders an anchor tag with text and an href attribute', () => {
@@ -27,21 +22,6 @@ describe('TextTextLink', () => {
     });
   });
 
-  describe('With React Router Link', () => {
-    test('It renders an anchor with text and href', () => {
-      render(
-        <BrowserRouter>
-          <TextLink {...ROUTER_LINK_PROPS}>{LINK_TEXT}</TextLink>
-        </BrowserRouter>,
-      );
-
-      const link = screen.getByRole('link');
-      expect(link).toBeInTheDocument();
-      const linkText = screen.getByText(LINK_TEXT);
-      expect(linkText).toBeInTheDocument();
-    });
-  });
-
   describe('With anchor attributes', () => {
     test('It renders a link with anchor attributes if passed', () => {
       render(<TextLink target="_blank" {...ANCHOR_PROPS}>{LINK_TEXT}</TextLink>);

src/components/TextLink/TextLink.tsx

@@ -1,5 +1,5 @@
 import React, { FC, AnchorHTMLAttributes } from 'react';
-import { Link, LinkProps } from 'react-router-dom';
+import { LinkProps } from 'react-router-dom';
 import classNames from 'classnames';
 import styles from './TextLink.module.scss';
 
@@ -20,26 +20,28 @@ interface TextLinkAnchorProps extends TextLinkBaseProps, AnchorHTMLAttributes<HT
    */
   href: string;
   /**
-   * Target URL (React Router)
+   * `navigate` prop which is passed when using the `component` prop in a react router `Link`.
+   * This needs to be documented in the component interface but will be stripped out automatically
+   * from the anchor tag.
    */
-  to?: never;
+  navigate?: any // eslint-disable-line
 }
 
 interface TextLinkRouterProps extends TextLinkBaseProps, LinkProps {
   /**
    * Target URL
    */
   href?: never;
+  navigate?: any; // eslint-disable-line
 }
 
 type TextLinkProps = TextLinkAnchorProps | TextLinkRouterProps;
 
 const TextLink: FC<TextLinkProps> = ({
   children,
   className = null,
+  navigate = null, // eslint-disable-line
   variant = 'primary',
-  href = null,
-  to = '',
   ...restProps
 }) => {
   const linkClasses = classNames(
@@ -49,15 +51,9 @@ const TextLink: FC<TextLinkProps> = ({
   );
 
   return (
-    href ? (
-      <a href={href} className={linkClasses} {...restProps}>
-        {children}
-      </a>
-    ) : (
-      <Link to={to} className={linkClasses} {...restProps}>
-        {children}
-      </Link>
-    )
+    <a className={linkClasses} {...restProps}>
+      {children}
+    </a>
   );
 };