From 44804f65f0033ecac810aeec59ed09c71fe2b75c Mon Sep 17 00:00:00 2001
From: Nate Elliott <nelliott@flexion.us>
Date: Mon, 9 Sep 2024 09:37:49 -0500
Subject: [PATCH] 10427 More uses of InlineLink in new petition flow

---
 .../src/ustc-ui/InlineLink/InlineLink.tsx     |  8 ++--
 web-client/src/views/BeforeStartingCase.tsx   | 21 ++---------
 .../src/views/Dashboards/FilingFeeOptions.tsx | 10 ++---
 .../CorporateDisclosureUpload.tsx             | 13 ++-----
 .../PetitionerInformation.tsx                 | 10 ++---
 .../UpdatedFilePetitionStep4.tsx              | 37 +++----------------
 .../UpdatedFilePetitionStep5.tsx              | 21 ++---------
 .../UpdatedFilePetitionStep7.tsx              | 13 ++-----
 8 files changed, 31 insertions(+), 102 deletions(-)

diff --git a/web-client/src/ustc-ui/InlineLink/InlineLink.tsx b/web-client/src/ustc-ui/InlineLink/InlineLink.tsx
index c91738c206b..b10a8d2dc3f 100644
--- a/web-client/src/ustc-ui/InlineLink/InlineLink.tsx
+++ b/web-client/src/ustc-ui/InlineLink/InlineLink.tsx
@@ -9,6 +9,7 @@ export const InlineLink = ({
   href,
   icon,
   iconSize = '1x',
+  shouldWrapText = false,
   tooltip,
 }: {
   children: string | React.ReactNode;
@@ -17,19 +18,20 @@ export const InlineLink = ({
   href: string;
   iconSize?: '1x' | '2x' | '3x' | '4x' | '5x';
   tooltip?: string;
+  shouldWrapText?: boolean;
 }) => {
   const classes = classNames(
-    'usa-link--external no-wrap',
+    'usa-link--external',
     className,
     tooltip && 'usa-tooltip',
-    // icon && !shouldWrapText && 'no-wrap',
+    !shouldWrapText && 'no-wrap',
   );
 
   return (
     <a
       className={classes}
       href={href}
-      rel="noopener noreferrer"
+      rel="noreferrer"
       target="_blank"
       title={tooltip}
     >
diff --git a/web-client/src/views/BeforeStartingCase.tsx b/web-client/src/views/BeforeStartingCase.tsx
index 846775fb270..d2684c50f8e 100644
--- a/web-client/src/views/BeforeStartingCase.tsx
+++ b/web-client/src/views/BeforeStartingCase.tsx
@@ -211,16 +211,9 @@ export const BeforeStartingCase = connect(
                 <div>
                   To file a case on behalf of someone else, you must be
                   authorized to practice before this Court as provided by the{' '}
-                  <Button
-                    link
-                    className="usa-link--external text-left mobile-text-wrap"
-                    href="https://ustaxcourt.gov/rules.html"
-                    overrideMargin="margin-right-0"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
+                  <InlineLink href="https://ustaxcourt.gov/rules.html">
                     Tax Court Rules of Practice and Procedure (Rule 60)
-                  </Button>
+                  </InlineLink>
                   {
                     '. Enrolled agents, certified public accountants, and attorneys who are not admitted to practice before the Court are not eligible to represent a party.'
                   }
@@ -242,18 +235,12 @@ export const BeforeStartingCase = connect(
                     "Download and fill out the form if you haven't already done so:"
                   }
                 </div>
-                <Button
-                  link
-                  className="usa-link--external text-left mobile-text-wrap"
+                <InlineLink
                   href="https://www.ustaxcourt.gov/resources/forms/Corporate_Disclosure_Statement_Form.pdf"
                   icon="file-pdf"
-                  iconColor="blue"
-                  overrideMargin="margin-right-0"
-                  rel="noopener noreferrer"
-                  target="_blank"
                 >
                   Corporate Disclosure Statement (T.C. Form 6)
-                </Button>
+                </InlineLink>
               </AccordionItem>
             </Accordion>
           </div>
diff --git a/web-client/src/views/Dashboards/FilingFeeOptions.tsx b/web-client/src/views/Dashboards/FilingFeeOptions.tsx
index cb99e634fd2..df36960f155 100644
--- a/web-client/src/views/Dashboards/FilingFeeOptions.tsx
+++ b/web-client/src/views/Dashboards/FilingFeeOptions.tsx
@@ -1,5 +1,6 @@
 import { Accordion, AccordionItem } from '../../ustc-ui/Accordion/Accordion';
 import { Button } from '../../ustc-ui/Button/Button';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import React from 'react';
 
 export const FilingFeeOptions = function () {
@@ -50,18 +51,13 @@ export const FilingFeeOptions = function () {
             <br />
             <br />
             <strong>Can’t afford to pay the filing fee?</strong>
-            <Button
-              link
-              className="usa-link--external text-left"
+            <InlineLink
               href="https://www.ustaxcourt.gov/resources/forms/Application_for_Waiver_of_Filing_Fee.pdf"
               icon="file-pdf"
-              iconColor="blue"
-              rel="noopener noreferrer"
               shouldWrapText={true}
-              target="_blank"
             >
               Download Application For Waiver of Filing Fee
-            </Button>
+            </InlineLink>
           </AccordionItem>
         </Accordion>
       </div>
diff --git a/web-client/src/views/StartCaseUpdated/CorporateDisclosureUpload.tsx b/web-client/src/views/StartCaseUpdated/CorporateDisclosureUpload.tsx
index f268a3966c3..b171ce230df 100644
--- a/web-client/src/views/StartCaseUpdated/CorporateDisclosureUpload.tsx
+++ b/web-client/src/views/StartCaseUpdated/CorporateDisclosureUpload.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@web-client/ustc-ui/Button/Button';
 import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
 import { InfoNotificationComponent } from '@web-client/views/InfoNotification';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import { MAX_FILE_SIZE_MB } from '@shared/business/entities/EntityConstants';
 import { StateDrivenFileInput } from '@web-client/views/FileDocument/StateDrivenFileInput';
 import React from 'react';
@@ -26,16 +26,9 @@ export function CorporateDisclosureUpload({
       <div>
         {"Download and fill out the form if you haven't already done so:"}
       </div>
-      <Button
-        link
-        className="usa-link--external text-left mobile-text-wrap"
-        href="https://www.ustaxcourt.gov/resources/forms/Corporate_Disclosure_Statement_Form.pdf"
-        overrideMargin="margin-right-0"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
+      <InlineLink href="https://www.ustaxcourt.gov/resources/forms/Corporate_Disclosure_Statement_Form.pdf">
         Corporate Disclosure Statement (T.C. Form 6)
-      </Button>
+      </InlineLink>
       <div className="margin-top-205">
         <FormGroup
           errorMessageId="corporate-disclosure-file-error-message"
diff --git a/web-client/src/views/StartCaseUpdated/PetitionerInformation.tsx b/web-client/src/views/StartCaseUpdated/PetitionerInformation.tsx
index 3ac6eba2077..07bb4f2ce5a 100644
--- a/web-client/src/views/StartCaseUpdated/PetitionerInformation.tsx
+++ b/web-client/src/views/StartCaseUpdated/PetitionerInformation.tsx
@@ -3,8 +3,8 @@ import {
   BUSINESS_TYPES,
 } from '@shared/business/entities/EntityConstants';
 import { AddressDisplay } from '../CaseDetail/AddressDisplay';
-import { Button } from '@web-client/ustc-ui/Button/Button';
 import { CardHeader } from './CardHeader';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import React from 'react';
 
 export function PetitionerInformation({ petitionFormatted }) {
@@ -27,16 +27,12 @@ export function PetitionerInformation({ petitionFormatted }) {
                 <div>
                   <div>
                     <div className="grid-col flex-auto">
-                      <Button
-                        link
-                        className="padding-0 text-left word-break"
+                      <InlineLink
                         data-testid="cds-preview-button"
                         href={petitionFormatted.corporateDisclosureFileUrl}
-                        rel="noopener noreferrer"
-                        target="_blank"
                       >
                         {petitionFormatted.corporateDisclosureFile.name}
-                      </Button>
+                      </InlineLink>
                     </div>
                   </div>
                 </div>
diff --git a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep4.tsx b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep4.tsx
index 218b9da5b23..a561af5c046 100644
--- a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep4.tsx
+++ b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep4.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@web-client/ustc-ui/Button/Button';
-import { Icon } from '@web-client/ustc-ui/Icon/Icon';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import { ProcedureType } from '@web-client/views/StartCase/ProcedureType';
 import { TrialCity } from '@web-client/views/StartCase/TrialCity';
 import { UpdatedFilePetitionButtons } from '@web-client/views/StartCaseUpdated/UpdatedFilePetitionButtons';
@@ -34,21 +33,9 @@ export const UpdatedFilePetitionStep4 = connect(
             If your case qualifies, you may choose to have it handled as a small
             tax case. The Court handles small tax cases differently.
           </div>
-          <Button
-            link
-            className="usa-link--external text-left mobile-text-wrap"
-            href="https://ustaxcourt.gov/case_procedure.html"
-            overrideMargin="margin-right-1"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Which case procedure should I choose?{' '}
-            <Icon
-              className="fa-icon-blue"
-              icon={['fa-soli', 'fa-arrow-up-right-from-square']}
-              size="1x"
-            />
-          </Button>
+          <InlineLink href="https://ustaxcourt.gov/case_procedure.html">
+            Which case procedure should I choose?
+          </InlineLink>
 
           <div className="margin-top-3">
             <ProcedureType
@@ -77,21 +64,9 @@ export const UpdatedFilePetitionStep4 = connect(
                 procedure selected.
                 <span>
                   {' '}
-                  <Button
-                    link
-                    className="usa-link--external text-left mobile-text-wrap"
-                    href="https://www.ustaxcourt.gov/dpt_cities.html"
-                    overrideMargin="margin-right-1"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
+                  <InlineLink href="https://www.ustaxcourt.gov/dpt_cities.html">
                     Trial locations
-                    <Icon
-                      className="fa-icon-blue"
-                      icon={['fa-soli', 'fa-arrow-up-right-from-square']}
-                      size="1x"
-                    />
-                  </Button>
+                  </InlineLink>
                 </span>
               </div>
               <TrialCity
diff --git a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep5.tsx b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep5.tsx
index 62ad3530102..90546ddc8d6 100644
--- a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep5.tsx
+++ b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep5.tsx
@@ -1,7 +1,6 @@
-import { Button } from '@web-client/ustc-ui/Button/Button';
 import { FormGroup } from '@web-client/ustc-ui/FormGroup/FormGroup';
-import { Icon } from '@web-client/ustc-ui/Icon/Icon';
 import { InfoNotificationComponent } from '@web-client/views/InfoNotification';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import { StateDrivenFileInput } from '@web-client/views/FileDocument/StateDrivenFileInput';
 import { UpdatedFilePetitionButtons } from '@web-client/views/StartCaseUpdated/UpdatedFilePetitionButtons';
 import { connect } from '@web-client/presenter/shared.cerebral';
@@ -36,21 +35,9 @@ export const UpdatedFilePetitionStep5 = connect(
           <div style={{ fontSize: '18px', marginBottom: '3px' }}>
             Download and fill out the form if you haven&apos;t already done so:
           </div>
-          <Button
-            link
-            className="usa-link--external text-left mobile-text-wrap text-semibold"
-            href="https://www.ustaxcourt.gov/resources/forms/Form_4_Statement_of_Taxpayer_Identification_Number.pdf"
-            marginDirection="bottom"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Statement of Taxpayer Identification Number (T.C. Form 4).{' '}
-            <Icon
-              className="fa-icon-blue"
-              icon={['fa-soli', 'fa-arrow-up-right-from-square']}
-              size="1x"
-            />
-          </Button>
+          <InlineLink href="https://www.ustaxcourt.gov/resources/forms/Form_4_Statement_of_Taxpayer_Identification_Number.pdf">
+            Statement of Taxpayer Identification Number (T.C. Form 4).
+          </InlineLink>
 
           <div className="margin-top-3">
             <FormGroup
diff --git a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep7.tsx b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep7.tsx
index b458243aed5..70052b0df9e 100644
--- a/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep7.tsx
+++ b/web-client/src/views/StartCaseUpdated/UpdatedFilePetitionStep7.tsx
@@ -3,6 +3,7 @@ import {
   AccordionItem,
 } from '@web-client/ustc-ui/Accordion/Accordion';
 import { Button } from '@web-client/ustc-ui/Button/Button';
+import { InlineLink } from '@web-client/ustc-ui/InlineLink/InlineLink';
 import { SuccessNotification } from '@web-client/views/SuccessNotification';
 import React from 'react';
 
@@ -70,17 +71,9 @@ export function UpdatedFilePetitionStep7() {
           >
             <div className="line-height-2">
               <span>Submit an </span>
-              <Button
-                link
-                className="usa-link--external text-left mobile-text-wrap"
-                href="https://www.ustaxcourt.gov/resources/forms/Application_for_Waiver_of_Filing_Fee.pdf"
-                iconColor="blue"
-                overrideMargin="margin-right-1"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <InlineLink href="https://www.ustaxcourt.gov/resources/forms/Application_for_Waiver_of_Filing_Fee.pdf">
                 Application for Waiver of Filing Fee.
-              </Button>
+              </InlineLink>
               <span>
                 This form requires detailed financial information and must be
                 signed under penalty of perjury.