[NOREF] External link component (#676)

* add external link init * updated to use new external link component * updated to use new external link component * updated to use new external link component * update snaps * Add translations for the aria label
CMS-Enterprise · Sep 6, 2023 · 7d12527 · 7d12527
1 parent fb7a3ec
commit 7d12527
Show file tree

Hide file tree

Showing 20 changed files with 115 additions and 252 deletions.
diff --git a/src/components/shared/ExternalLink/index.tsx b/src/components/shared/ExternalLink/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from '@trussworks/react-uswds';
+
+interface ExternalLinkProps {
+  children: React.ReactNode;
+  className?: string;
+  href: string;
+}
+
+const ExternalLink = ({ children, className, href }: ExternalLinkProps) => {
+  const { t } = useTranslation('general');
+
+  return (
+    <Link
+      href={href}
+      aria-label={t('newTab')}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+      variant="external"
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default ExternalLink;
diff --git a/src/i18n/en-US/general.ts b/src/i18n/en-US/general.ts
@@ -20,7 +20,8 @@ const general = {
   },
   taskListLockBanner:
     'Model Plan sections can only be accessed by one person at a time. If you are not actively editing or reviewing this section, please exit out of it so others can access it.',
-  noResults: 'No results'
+  noResults: 'No results',
+  newTab: 'Open in a new tab'
 };
 
 export default general;
diff --git a/src/views/HelpAndKnowledge/Articles/SixPagerMeeting/__snapshots__/index.test.tsx.snap b/src/views/HelpAndKnowledge/Articles/SixPagerMeeting/__snapshots__/index.test.tsx.snap
@@ -866,8 +866,11 @@ exports[`SixPagerMeeting matches the snapshot 1`] = `
             >
               Contact the MINT team at 
               <a
-                class="usa-link"
+                aria-label="Open in a new tab"
+                class="usa-link usa-link--external"
                 href="mailto:MINTTeam@cms.hhs.gov"
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 MINTTeam@cms.hhs.gov
               </a>

diff --git a/src/views/HelpAndKnowledge/Articles/SixPagerMeeting/index.tsx b/src/views/HelpAndKnowledge/Articles/SixPagerMeeting/index.tsx
@@ -5,7 +5,6 @@ import {
   Grid,
   GridContainer,
   IconArrowForward,
-  Link as ExternalLink,
   SummaryBox
 } from '@trussworks/react-uswds';
 
@@ -15,6 +14,7 @@ import UswdsReactLink from 'components/LinkWrapper';
 import MainContent from 'components/MainContent';
 import PageHeading from 'components/PageHeading';
 import RelatedArticles from 'components/RelatedArticles';
+import ExternalLink from 'components/shared/ExternalLink';
 import useModalSolutionState from 'hooks/useModalSolutionState';
 import { OperationalSolutionKey } from 'types/graphql-global-types';
 import SolutionDetailsModal from 'views/HelpAndKnowledge/SolutionsHelp/SolutionDetails/Modal';
@@ -264,13 +264,7 @@ const SixPagerMeeting = () => {
                     </strong>
                     <span>
                       {sixPageMeetingT('conceptPaper.stepThree.alignment.text')}{' '}
-                      <ExternalLink
-                        href="https://innovation.cms.gov/strategic-direction"
-                        aria-label="Open in a new tab"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        variant="external"
-                      >
+                      <ExternalLink href="https://innovation.cms.gov/strategic-direction">
                         {sixPageMeetingT(
                           'conceptPaper.stepThree.alignment.link'
                         )}
@@ -337,25 +331,13 @@ const SixPagerMeeting = () => {
                   <li>
                     {sixPageMeetingT('tipsSummaryBox.items.view')}
 
-                    <ExternalLink
-                      aria-label="Open in a new tab"
-                      href="https://share.cms.gov/center/cmmi/QualVert/ModelResources/Forms/AllItems.aspx?RootFolder=%2Fcenter%2Fcmmi%2FQualVert%2FModelResources%2FHealth%20Equity&FolderCTID=0x0120005E561329242B614A92093D06F4EE96E1&View=%7B2B63652B%2D67D7%2D4A43%2DA7CD%2D617DDE639979%7D"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      variant="external"
-                    >
+                    <ExternalLink href="https://share.cms.gov/center/cmmi/QualVert/ModelResources/Forms/AllItems.aspx?RootFolder=%2Fcenter%2Fcmmi%2FQualVert%2FModelResources%2FHealth%20Equity&FolderCTID=0x0120005E561329242B614A92093D06F4EE96E1&View=%7B2B63652B%2D67D7%2D4A43%2DA7CD%2D617DDE639979%7D">
                       {sixPageMeetingT('tipsSummaryBox.items.one')}
                     </ExternalLink>
                   </li>
                   <li>
                     {sixPageMeetingT('tipsSummaryBox.items.view')}
-                    <ExternalLink
-                      aria-label="Open in a new tab"
-                      href="https://www.cms.gov/about-cms/agency-information/omh/health-equity-programs/cms-framework-for-health-equity"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      variant="external"
-                    >
+                    <ExternalLink href="https://www.cms.gov/about-cms/agency-information/omh/health-equity-programs/cms-framework-for-health-equity">
                       {sixPageMeetingT('tipsSummaryBox.items.two')}
                     </ExternalLink>
                   </li>
@@ -417,39 +399,21 @@ const SixPagerMeeting = () => {
               </p>
               <ul className="margin-top-0">
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739">
                     {sixPageMeetingT(
                       'conceptPaper.exampleSummaryBox.items.one'
                     )}
                   </ExternalLink>
                 </li>
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Six%20Pagers/AHEAD%206-page%20concept_Clean.docx?d=wbdf205743dac4ebaa2a99ea37af6b5a7"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Six%20Pagers/AHEAD%206-page%20concept_Clean.docx?d=wbdf205743dac4ebaa2a99ea37af6b5a7">
                     {sixPageMeetingT(
                       'conceptPaper.exampleSummaryBox.items.two'
                     )}
                   </ExternalLink>
                 </li>
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Six%20Pagers/Enhancing%20Oncology%20Model%20(formerly%20OncT)%206-pager_10252021_clean.docx?d=w1e0f202072d14d8fb64366aff294e415"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Six%20Pagers/Enhancing%20Oncology%20Model%20(formerly%20OncT)%206-pager_10252021_clean.docx?d=w1e0f202072d14d8fb64366aff294e415">
                     {sixPageMeetingT(
                       'conceptPaper.exampleSummaryBox.items.three'
                     )}
@@ -458,13 +422,7 @@ const SixPagerMeeting = () => {
               </ul>
               <span className="margin-y-0">
                 {sixPageMeetingT('conceptPaper.exampleSummaryBox.footer.copy')}
-                <ExternalLink
-                  aria-label="Open in a new tab"
-                  href="https://share.cms.gov/center/CMMI/SR/ModelDev/Forms/AllItems.aspx"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  variant="external"
-                >
+                <ExternalLink href="https://share.cms.gov/center/CMMI/SR/ModelDev/Forms/AllItems.aspx">
                   {sixPageMeetingT(
                     'conceptPaper.exampleSummaryBox.footer.link'
                   )}

diff --git a/src/views/HelpAndKnowledge/Articles/TwoPagerMeeting/__snapshots__/index.test.tsx.snap b/src/views/HelpAndKnowledge/Articles/TwoPagerMeeting/__snapshots__/index.test.tsx.snap
@@ -548,8 +548,11 @@ exports[`TwoPagerMeeting matches the snapshot 1`] = `
             >
               Contact the MINT team at 
               <a
-                class="usa-link"
+                aria-label="Open in a new tab"
+                class="usa-link usa-link--external"
                 href="mailto:MINTTeam@cms.hhs.gov"
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 MINTTeam@cms.hhs.gov
               </a>

diff --git a/src/views/HelpAndKnowledge/Articles/TwoPagerMeeting/index.tsx b/src/views/HelpAndKnowledge/Articles/TwoPagerMeeting/index.tsx
@@ -4,7 +4,6 @@ import {
   Grid,
   GridContainer,
   IconArrowForward,
-  Link as ExternalLink,
   SummaryBox
 } from '@trussworks/react-uswds';
 
@@ -13,6 +12,7 @@ import HelpBreadcrumb from 'components/HelpBreadcrumb';
 import MainContent from 'components/MainContent';
 import PageHeading from 'components/PageHeading';
 import RelatedArticles from 'components/RelatedArticles';
+import ExternalLink from 'components/shared/ExternalLink';
 
 const covertToLowercaseAndDashes = (string: string) =>
   string.toLowerCase().replace(/\s+/g, '-');
@@ -205,48 +205,24 @@ const TwoPagerMeeting = () => {
               </p>
               <ul className="margin-top-0">
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739">
                     {twoPageMeetingT('conceptPaper.exampleSummaryBox.list.one')}
                   </ExternalLink>
                 </li>
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/Enhancing%20Oncology%20Model%20(formerly%20AOC)%202-pager_October%202021_v2%20clean.docx?d=w4bd1ac8e332c42659f7e4330b519794a"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/Enhancing%20Oncology%20Model%20(formerly%20AOC)%202-pager_October%202021_v2%20clean.docx?d=w4bd1ac8e332c42659f7e4330b519794a">
                     {twoPageMeetingT('conceptPaper.exampleSummaryBox.list.two')}
                   </ExternalLink>
                 </li>
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/Innovation%20in%20Behavioral%20Health%20(formerly%20BHI)%20Model%202-pager_FINAL.docx?d=wf5dc9e25276945278f98c2c8efc31e16"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/Innovation%20in%20Behavioral%20Health%20(formerly%20BHI)%20Model%202-pager_FINAL.docx?d=wf5dc9e25276945278f98c2c8efc31e16">
                     {twoPageMeetingT(
                       'conceptPaper.exampleSummaryBox.list.three'
                     )}
                   </ExternalLink>
                 </li>
                 <li>
-                  <ExternalLink
-                    aria-label="Open in a new tab"
-                    href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/New%20Primary%20Care%20Model%20Concept%202-pager%20Final%20for%20FO.docx?d=webcc03b8baa74b11bc9cd28c264a6178"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    variant="external"
-                  >
+                  <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/New%20Primary%20Care%20Model%20Concept%202-pager%20Final%20for%20FO.docx?d=webcc03b8baa74b11bc9cd28c264a6178">
                     {twoPageMeetingT(
                       'conceptPaper.exampleSummaryBox.list.four'
                     )}
@@ -255,13 +231,7 @@ const TwoPagerMeeting = () => {
               </ul>
               <span className="margin-y-0">
                 {twoPageMeetingT('conceptPaper.exampleSummaryBox.footer')}
-                <ExternalLink
-                  aria-label="Open in a new tab"
-                  href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  variant="external"
-                >
+                <ExternalLink href="https://share.cms.gov/center/cmmi/SR/ModelDev/Submitted%20Two%20Pagers/AHEAD%20Concept%20Paper.docx?d=w9bd3973322384706a0207c756f773739">
                   {twoPageMeetingT('conceptPaper.exampleSummaryBox.footerLink')}
                 </ExternalLink>
               </span>

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>