updated to use new external link component

CMS-Enterprise · Aug 30, 2023 · f23ad32 · f23ad32
1 parent bc67e75
commit f23ad32
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 140 deletions.
diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/4Innovation/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/4Innovation/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -63,14 +63,9 @@ const Innovation4TimeLine = ({ solution }: { solution: HelpSolutionType }) => {
             i18nKey={`solutions.${solution.key}.timeline.items[0].description`}
           >
             Send an email to{' '}
-            <Link
-              aria-label="Open in a new tab"
-              href="mailto:ACO-OIT@cms.hhs.gov"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <ExternalLink href="mailto:ACO-OIT@cms.hhs.gov">
               ACO-OIT@cms.hhs.gov
-            </Link>{' '}
+            </ExternalLink>{' '}
             if interested in using 4i and ACO-OS for your model. Please also
             include Ashley Corbin and Nora Fleming on the email.
           </Trans>

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CMSBox/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CMSBox/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -28,14 +28,9 @@ const CMSBoxTimeline = ({ solution }: { solution: HelpSolutionType }) => {
       <Trans i18nKey={`solutions.${solution.key}.timeline.description`}>
         Since this is a self service tool, you can work at your own pace. If you
         have questions or need help using CMS Box, contact the MINT Team at{' '}
-        <Link
-          aria-label="Open in a new tab"
-          href="mailto:MINTTeam@cms.hhs.gov"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <ExternalLink href="mailto:MINTTeam@cms.hhs.gov">
           MINTTeam@cms.hhs.gov
-        </Link>
+        </ExternalLink>
         .
       </Trans>
 
@@ -54,15 +49,9 @@ const CMSBoxTimeline = ({ solution }: { solution: HelpSolutionType }) => {
           {timelineConfig.items[0].description}
 
           <p>
-            <Link
-              aria-label="Open in a new tab"
-              href="https://cmsbox.account.box.com/login"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="external"
-            >
+            <ExternalLink href="https://cmsbox.account.box.com/login">
               {timelineConfig.links && timelineConfig.links[0]}
-            </Link>
+            </ExternalLink>
           </p>
         </ProcessListItem>
 
@@ -80,15 +69,9 @@ const CMSBoxTimeline = ({ solution }: { solution: HelpSolutionType }) => {
           {timelineConfig.items[1].description}
 
           <p>
-            <Link
-              aria-label="Open in a new tab"
-              href="https://cmsintranet.share.cms.gov/CT/Pages/BoxInformation.aspx"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="external"
-            >
+            <ExternalLink href="https://cmsintranet.share.cms.gov/CT/Pages/BoxInformation.aspx">
               {timelineConfig.links && timelineConfig.links[1]}
-            </Link>
+            </ExternalLink>
           </p>
         </ProcessListItem>
       </ProcessList>

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CMSQualtrics/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CMSQualtrics/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -29,14 +29,9 @@ const CMSQualtricsTimeline = ({ solution }: { solution: HelpSolutionType }) => {
         Since this is a self service tool, you can work at your own pace. If you
         have questions or need help using CMS Qualtrics, contact the MINT Team
         at{' '}
-        <Link
-          aria-label="Open in a new tab"
-          href="mailto:MINTTeam@cms.hhs.gov"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <ExternalLink href="mailto:MINTTeam@cms.hhs.gov">
           MINTTeam@cms.hhs.gov
-        </Link>
+        </ExternalLink>
         .
       </Trans>
 
@@ -55,15 +50,9 @@ const CMSQualtricsTimeline = ({ solution }: { solution: HelpSolutionType }) => {
           {timelineConfig.items[0].description}
 
           <p>
-            <Link
-              aria-label="Open in a new tab"
-              href="https://surveys.cms.gov/"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="external"
-            >
+            <ExternalLink href="https://surveys.cms.gov/">
               {timelineConfig.links && timelineConfig.links[0]}
-            </Link>
+            </ExternalLink>
           </p>
         </ProcessListItem>
 

diff --git a/...elpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CentralizedDataExchange/index.tsx b/...elpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/CentralizedDataExchange/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -48,14 +48,9 @@ const CentralizedDataExhangeTimeline = ({
           >
             If you’re interested in using CDX for your model or would like to
             learn more about the system, please contact{' '}
-            <Link
-              aria-label="Open in a new tab"
-              href="mailto:MINTTeam@cms.hhs.gov"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <ExternalLink href="mailto:MINTTeam@cms.hhs.gov">
               MINTTeam@cms.hhs.gov
-            </Link>{' '}
+            </ExternalLink>{' '}
             to learn more.
           </Trans>
         </ProcessListItem>
@@ -77,15 +72,9 @@ const CentralizedDataExhangeTimeline = ({
                   i18nKey={`solutions.${solution.key}.timeline.items[1].items[0]`}
                 >
                   Register as New User in the{' '}
-                  <Link
-                    aria-label="Open in a new tab"
-                    href="https://portalval.cms.gov/portal/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://portalval.cms.gov/portal/">
                     {timelineConfig.links && timelineConfig.links[0]}
-                  </Link>
+                  </ExternalLink>
                 </Trans>
               </li>
               <li>{timelineConfig.items[1].items[1]}</li>

diff --git a/...iews/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/ChronicConditions/index.tsx b/...iews/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/ChronicConditions/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -50,15 +50,9 @@ const ChronicConditionsTimeline = ({
           {timelineConfig.items[0].description}
 
           <p>
-            <Link
-              aria-label="Open in a new tab"
-              href="https://www.cms.gov/research-statistics-data-and-systems/files-for-order/data-disclosures-data-agreements/overview"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="external"
-            >
+            <ExternalLink href="https://www.cms.gov/research-statistics-data-and-systems/files-for-order/data-disclosures-data-agreements/overview">
               {timelineConfig.links && timelineConfig.links[0]}
-            </Link>
+            </ExternalLink>
           </p>
         </ProcessListItem>
 
@@ -79,14 +73,9 @@ const ChronicConditionsTimeline = ({
             Contact Cheryl Brown, and she’ll send the Employee CCW Access
             Request form to complete. Once completed, email it with the
             supervisor’s approval to OEDA{' '}
-            <Link
-              aria-label="Open in a new tab"
-              href="mailto:CCWAccess@cms.hhs.gov"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <ExternalLink href="mailto:CCWAccess@cms.hhs.gov">
               CCWAccess@cms.hhs.gov
-            </Link>{' '}
+            </ExternalLink>{' '}
             and Cheryl.
           </Trans>
         </ProcessListItem>
@@ -137,14 +126,9 @@ const ChronicConditionsTimeline = ({
               Contact Cheryl Brown, and she’ll send the Employee CCW Access
               Request form to complete. Once completed, email it with the
               supervisor’s approval to OEDA{' '}
-              <Link
-                aria-label="Open in a new tab"
-                href="mailto:CCWAccess@cms.hhs.gov"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+              <ExternalLink href="mailto:CCWAccess@cms.hhs.gov">
                 CCWAccess@cms.hhs.gov
-              </Link>{' '}
+              </ExternalLink>{' '}
               and Cheryl.
             </Trans>
           </ProcessListItem>

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/Generic/about.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/Generic/about.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { Link } from '@trussworks/react-uswds';
 import classNames from 'classnames';
 
 import UswdsReactLink from 'components/LinkWrapper';
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import '../index.scss';
@@ -64,15 +64,7 @@ export const getTransLinkComponents = (links?: LinkType[]) => {
   if (links) {
     links.forEach((link, index) => {
       linkObj[`link${index + 1}`] = link.external ? (
-        <Link
-          aria-label="Open in a new tab"
-          href={link.link}
-          target="_blank"
-          rel="noopener noreferrer"
-          variant="external"
-        >
-          link
-        </Link>
+        <ExternalLink href={link.link}>link</ExternalLink>
       ) : (
         <UswdsReactLink to={link.link}>link</UswdsReactLink>
       );

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/HIGLAS/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/HIGLAS/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
-import { Link } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import '../index.scss';
@@ -13,14 +13,9 @@ const HIGLASTimeline = ({ solution }: { solution: HelpSolutionType }) => {
         Any necessary setup for HIGLAS will be taken care of when working with
         the Innovation Payment Contractor (IPC) or the Shared Systems. Contact
         Donna Schmidt at{' '}
-        <Link
-          aria-label="Open in a new tab"
-          href="mailto:donna.schmidt@cms.hhs.gov"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
+        <ExternalLink href="mailto:donna.schmidt@cms.hhs.gov">
           donna.schmidt@cms.hhs.gov
-        </Link>{' '}
+        </ExternalLink>{' '}
         if you have questions.
       </Trans>
     </div>

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/OutlookMailbox/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/OutlookMailbox/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import {
-  Link,
   ProcessList,
   ProcessListHeading,
   ProcessListItem
 } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import { TimelineConfigType } from '../Generic/timeline';
@@ -86,14 +86,9 @@ const OutlookMailboxTimeLine = ({
           <Trans i18nKey={`solutions.${solution.key}.timeline.description`}>
             If you’d rather submit a request by email, please send the above
             information to{' '}
-            <Link
-              aria-label="Open in a new tab"
-              href="mailto:cms_it_service_desk@cms.hhs.gov."
-              target="_blank"
-              rel="noopener noreferrer"
-            >
+            <ExternalLink href="mailto:cms_it_service_desk@cms.hhs.gov.">
               cms_it_service_desk@cms.hhs.gov.
-            </Link>
+            </ExternalLink>
             .
           </Trans>
         </ProcessListItem>

diff --git a/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/RMADA/index.tsx b/src/views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Solutions/RMADA/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
-import { Link } from '@trussworks/react-uswds';
 
+import ExternalLink from 'components/shared/ExternalLink';
 import { HelpSolutionType } from 'views/HelpAndKnowledge/SolutionsHelp/solutionsMap';
 
 import '../index.scss';
@@ -11,15 +11,9 @@ const RMADATimeline = ({ solution }: { solution: HelpSolutionType }) => {
     <div className="line-height-body-5 font-body-md">
       <Trans i18nKey={`solutions.${solution.key}.timeline.description`}>
         Model teams should follow the{' '}
-        <Link
-          aria-label="Open in a new tab"
-          href="https://agx.cms.gov/FirstVisitPage/GovernmentAgreement.aspx?ReturnUrl=http%3a%2f%2fagx.cms.gov%2fLibraries%2fLibrary.aspx%3fSearchTerm%3dPALT"
-          target="_blank"
-          rel="noopener noreferrer"
-          variant="external"
-        >
+        <ExternalLink href="https://agx.cms.gov/FirstVisitPage/GovernmentAgreement.aspx?ReturnUrl=http%3a%2f%2fagx.cms.gov%2fLibraries%2fLibrary.aspx%3fSearchTerm%3dPALT">
           Procurement Administrative Lead Time (PALT)
-        </Link>{' '}
+        </ExternalLink>{' '}
         standards to determine when to being working with RMADA.
       </Trans>
     </div>