feat(Button Wrapper component): Uses new 'secondary' styling (#494)

closes #466 
Needed for #491
#448

## Changes
- feat(Button Wrapper): Added Button wrapper with new secondary styling
- chore: Replaced FilingNavButtons with the new button wrapper

## How to test
- Verify styling in Upload and the other steps
- Verify hover, focus and disabled

## Screenshot
<img width="792" alt="Screenshot 2024-05-11 at 12 15 51 PM"
src="https://github.com/cfpb/sbl-frontend/assets/13324863/eea2722c-a0b0-4541-9f75-915b3e72c8fb">

src/components/Button.tsx

@@ -0,0 +1,29 @@
+import { Button as ButtonDSR } from 'design-system-react';
+import type { ComponentProps } from 'react';
+
+type ButtonProperties = ComponentProps<typeof ButtonDSR>;
+
+/* Handles new secondary styling */
+
+const newSecondaryStyle =
+  'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none';
+
+export function Button({
+  children,
+  className,
+  appearance,
+  ...rest
+}: ButtonProperties): JSX.Element {
+  return (
+    <ButtonDSR
+      {...rest}
+      className={`${
+        appearance === 'secondary' ? newSecondaryStyle : ''
+      } ${className}`}
+    >
+      {children}
+    </ButtonDSR>
+  );
+}
+
+export default Button;

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import useUploadMutation from 'utils/useUploadMutation';
 
+import { Button } from 'components/Button';
 import FieldGroup from 'components/FieldGroup';
 import FieldGroupDivider from 'components/FieldGroupDivider';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
@@ -10,7 +11,7 @@ import InlineStatus from 'components/InlineStatus';
 import Input from 'components/Input';
 import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
-import { Button, Heading, TextIntroduction } from 'design-system-react';
+import { Heading, TextIntroduction } from 'design-system-react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -251,17 +252,14 @@ export function FileSubmission(): JSX.Element {
                     disabled={isLoadingUpload || isFetchingGetSubmissionLatest}
                   />
                   <Button
-                    appearance='primary'
+                    appearance={
+                      dataGetSubmissionLatest?.state ? 'secondary' : 'primary'
+                    }
                     onClick={onHandleUploadClick}
                     label={buttonLabel}
                     aria-label={inputAriaLabel}
                     size='default'
                     type='button'
-                    className={
-                      dataGetSubmissionLatest?.state
-                        ? 'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none'
-                        : 'cursor-pointer disabled:cursor-not-allowed'
-                    }
                     disabled={isLoadingUpload || isFetchingGetSubmissionLatest}
                   />
                 </div>

src/pages/Filing/FilingApp/FilingErrors/index.tsx

@@ -1,8 +1,9 @@
+import { Button } from 'components/Button';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
-import { Button, TextIntroduction } from 'design-system-react';
+import { TextIntroduction } from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
 import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts';
@@ -191,6 +192,7 @@ function FilingErrors(): JSX.Element {
             hrefNext={`/filing/${year}/${lei}/warnings`}
             isStepComplete // TODO: Derive actual step status
           /> */}
+            {/* NOTE: Replace this with the new refactored FilingNavButtons once they are implemented */}
             <FormButtonGroup isFilingStep>
               <Button
                 appearance='secondary'

src/pages/Filing/FilingApp/FilingNavButtons.tsx

@@ -1,23 +1,15 @@
 import classnames from 'classnames';
-import { Button } from 'design-system-react';
+import { Button } from 'components/Button';
+import type { Button as ButtonDSR } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import type { ComponentProps } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+type ButtonDSRProperties = ComponentProps<typeof ButtonDSR>;
+
 export interface NavigationButtonProperties {
-  // eslint-disable-next-line react/require-default-props
-  label?: string;
   // eslint-disable-next-line react/require-default-props
   href?: string;
-  // eslint-disable-next-line react/require-default-props
-  disabled?: boolean;
-  // eslint-disable-next-line react/require-default-props
-  appearance?: (typeof Button)['appearance'];
-  // eslint-disable-next-line react/require-default-props
-  iconLeft?: string;
-  // eslint-disable-next-line react/require-default-props
-  iconRight?: string;
-  // eslint-disable-next-line react/require-default-props
-  className?: string;
 }
 
 export function NavigationButton({
@@ -28,7 +20,7 @@ export function NavigationButton({
   iconLeft,
   iconRight,
   className = '',
-}: NavigationButtonProperties): JSXElement {
+}: ButtonDSRProperties & NavigationButtonProperties): JSXElement {
   const navigate = useNavigate();
 
   const onClick = (): void => {
@@ -55,7 +47,7 @@ export function NavigationPrevious({
   label,
   href,
   disabled,
-}: NavigationButtonProperties): JSXElement {
+}: ButtonDSRProperties & NavigationButtonProperties): JSXElement {
   return (
     <NavigationButton
       className='mr-3'
@@ -72,7 +64,7 @@ export function NavigationNext({
   label,
   href,
   disabled,
-}: NavigationButtonProperties): JSXElement {
+}: ButtonDSRProperties & NavigationButtonProperties): JSXElement {
   return (
     <NavigationButton
       appearance='primary'