From 7ac6ccb0940d94957be4652a157feb994cc229ad Mon Sep 17 00:00:00 2001
From: Nick Earwood <nick.earwood@palmetto.com>
Date: Fri, 18 Oct 2024 16:35:28 -0500
Subject: [PATCH] Add to prop to Button

---
 src/components/Button/Button.test.jsx |  2 +-
 src/components/Button/Button.tsx      | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/Button.test.jsx b/src/components/Button/Button.test.jsx
index 26dc9280d..f072c1830 100644
--- a/src/components/Button/Button.test.jsx
+++ b/src/components/Button/Button.test.jsx
@@ -427,7 +427,7 @@ describe('Button', () => {
         expect(buttonElement.getAttribute('type')).toBe(null);
       });
 
-      test('it renders a target attribute if one is passed, the element is an anchor, and there is a href', () => {
+      test('it renders a target attribute if one is passed, the element is an anchor, and there is an href', () => {
         render(
           <Button href="http://palmetto.com" as="a" target="_blank">
             hey there
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b3671cf03..0a9a2db2c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -8,6 +8,7 @@ import React, {
   ButtonHTMLAttributes,
 } from 'react';
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
 import { IconName, ResponsiveProp } from '../../types';
 import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
 import { handleReactRouterClick } from '../../lib/reactRouterClickHandler';
@@ -48,9 +49,11 @@ export interface BaseButtonProps {
   id?: string;
   /**
    * URL to navigate to when clicked. Passing this attribute automatically
-   * renders an anchor <a> tag, NOT a <button> element.
+   * renders an anchor <a> tag, NOT a <button> element, and does not use react-router.
    */
   href?: string;
+  /** URL to navigate to via react-router. */
+  to?: string;
   /**
    * Disables the button, making it inoperable.
    */
@@ -132,6 +135,7 @@ export const Button = forwardRef<
       fullWidth = false,
       id = undefined,
       href = undefined,
+      to = undefined,
       iconPrefix = undefined,
       iconSuffix = undefined,
       isDisabled = false,
@@ -257,8 +261,7 @@ export const Button = forwardRef<
     );
 
     const buttonElement = getElementType(Button, { as });
-
-    return createElement(
+    const button = createElement(
       buttonElement,
       {
         id,
@@ -276,5 +279,15 @@ export const Button = forwardRef<
       },
       buttonContent,
     );
+
+    if (to) {
+      return (
+        <Link to={to}>
+          {button}
+        </Link>
+      );
+    }
+
+    return button;
   },
 );