Update links colors

- Language links
- Download links
- Simple links
- External links
- Side panel demographics links
- return to top links
- update snapshots

client/src/components/Categories/__snapshots__/Categories.test.tsx.snap

@@ -43,18 +43,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#exp-agr-loss-rate"
         >
           expected agriculture loss rate
         </a>
          OR 
         <a
+          class="usa-link"
           href="#exp-bld-loss-rate"
         >
           expected building loss rate
         </a>
          OR 
         <a
+          class="usa-link"
           href="#exp-pop-loss-rate"
         >
           expected population loss rate
@@ -68,12 +71,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -102,12 +107,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#energy-burden"
         >
           energy burden
         </a>
          OR 
         <a
+          class="usa-link"
           href="#pm-25"
         >
           PM2.5 in the air
@@ -121,12 +128,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -157,12 +166,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#diesel-pm"
         >
           diesel particulate matter exposure
         </a>
          or 
         <a
+          class="usa-link"
           href="#traffic-vol"
         >
           traffic proximity and volume
@@ -178,12 +189,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -212,18 +225,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#lead-paint"
         >
           lead paint
         </a>
          AND 
         <a
+          class="usa-link"
           href="#median-home"
         >
           median home value
         </a>
          is at or less than the 90th percentile OR at or above the 90th percentile for the 
         <a
+          class="usa-link"
           href="#house-burden"
         >
           housing cost burden
@@ -237,12 +253,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -271,18 +289,21 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#prox-haz"
         >
           proximity to hazardous waste facilities
         </a>
          OR 
         <a
+          class="usa-link"
           href="#prox-npl"
         >
           proximity to National Priorities List (NPL) sites
         </a>
          OR 
         <a
+          class="usa-link"
           href="#prox-rmp"
         >
           proximity to Risk Management Plan (RMP) facilities
@@ -296,12 +317,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -330,6 +353,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#waste-water"
         >
           wastewater discharge
@@ -343,12 +367,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -377,24 +403,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#asthma"
         >
           asthma
         </a>
          OR 
         <a
+          class="usa-link"
           href="#diabetes"
         >
           diabetes
         </a>
          OR 
         <a
+          class="usa-link"
           href="#heart-disease"
         >
           heart disease
         </a>
          OR 
         <a
+          class="usa-link"
           href="#life-exp"
         >
           low life expectancy
@@ -408,12 +438,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          is at or above the 65th percentile for 
         <a
+          class="usa-link"
           href="#low-income"
         >
           low income
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education
@@ -442,24 +474,28 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          at or above the 90th percentile for 
         <a
+          class="usa-link"
           href="#low-med-inc"
         >
           low median income
         </a>
          as a percentage of area median income OR 
         <a
+          class="usa-link"
           href="#ling-iso"
         >
           linguistic isolation
         </a>
          OR 
         <a
+          class="usa-link"
           href="#unemploy"
         >
           unemployment
         </a>
          OR percentage of individuals in households at or below 100% Federal 
         <a
+          class="usa-link"
           href="#poverty"
         >
           poverty
@@ -473,12 +509,14 @@ exports[`rendering of the Categories checks if component renders 1`] = `
         </strong>
          10% or more of adults 25 or older have not attained a 
         <a
+          class="usa-link"
           href="#high-school"
         >
           high school degree
         </a>
          AND 80% or more of individuals 15 or older are not enrolled in 
         <a
+          class="usa-link"
           href="#high-ed-enroll-rate"
         >
           higher education

client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap

@@ -21,18 +21,21 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
       </strong>
        at or above the 90th percentile for 
       <a
+        class="usa-link"
         href="#exp-agr-loss-rate"
       >
         expected agriculture loss rate
       </a>
        OR 
       <a
+        class="usa-link"
         href="#exp-bld-loss-rate"
       >
         expected building loss rate
       </a>
        OR 
       <a
+        class="usa-link"
         href="#exp-pop-loss-rate"
       >
         expected population loss rate
@@ -46,12 +49,14 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
       </strong>
        is at or above the 65th percentile for 
       <a
+        class="usa-link"
         href="#low-income"
       >
         low income
       </a>
        AND 80% or more of individuals 15 or older are not enrolled in 
       <a
+        class="usa-link"
         href="#high-ed-enroll-rate"
       >
         higher education

client/src/components/DatasetContainer/index.tsx

@@ -44,7 +44,7 @@ const DatasetContainer = () => {
           </Grid>
 
           <div className={styles.returnToTop}>
-            <Link to={PAGES_ENDPOINTS.METHODOLOGY}>
+            <Link className={'usa-link'} to={PAGES_ENDPOINTS.METHODOLOGY}>
               {METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
             </Link>
           </div>

client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap

@@ -1377,6 +1377,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       </div>
       <div>
         <a
+          class="usa-link"
           href="/en/methodology"
         >
           Return to top

client/src/components/DownloadLink/DownloadLink.module.scss

@@ -5,3 +5,7 @@
     vertical-align: middle;
     filter: invert(57%) sepia(6%) saturate(3932%) hue-rotate(163deg) brightness(86%) contrast(88%);
 }
+
+.downloadStyle {
+    @include u-color('blue-60v');
+}

client/src/components/DownloadLink/DownloadLink.module.scss.d.ts

@@ -1,6 +1,7 @@
 declare namespace DownloadLinkNamespace {
     export interface IDownloadLink {
         downloadIcon: string;
+        downloadStyle: string;
     }
   }
 

client/src/components/DownloadLink/DownloadLink.tsx

@@ -27,7 +27,7 @@ const DownloadLink = ({href, linkText}:IDownloadLink) => {
   }
   return (
     <>
-      <a href={href} download>{linkText}</a>
+      <a href={href} className={styles.downloadStyle} download>{linkText}</a>
       <img
         className={styles.downloadIcon}
         src={fileDownloadIcon}

client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
       <li>
         View the 
         <a
+          class="usa-link"
           href="/en/methodology"
         >
           Methodology & data

client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap

@@ -79,7 +79,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/components/Language/Language.module.scss

@@ -11,6 +11,8 @@
   .languageLink {
     @include u-display("inline-block");
     @include u-margin-left(1.5);
+    @include u-color('blue-60v');
+    
     cursor: pointer;
     font-size: .8rem; // government banner text size not a token
     @include u-padding-top('2px');

client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx

@@ -41,7 +41,7 @@ const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
   if (props.internal) {
     return (
       <Link to={`${url}`}
-        className={props.className}
+        className={props.className ? `usa-link ${props.className}` : `usa-link`}
       >
         {props.linkText}
       </Link>

client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap

@@ -28,6 +28,7 @@ exports[`testing all link types tests external links same tab 1`] = `
 exports[`testing all link types tests internal links 1`] = `
 <DocumentFragment>
   <a
+    class="usa-link"
     href="/en/methodology"
   >
     test link text

client/src/components/SubPageNav/SubPageNav.test.tsx

@@ -16,8 +16,8 @@ describe('rendering of the SubPageNav', () => {
 
     const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
     const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
-    expect(firstLink?.className).toBe('usa-current');
+    expect(firstLink?.className).toBe('usa-link usa-current');
-    expect(secondLink?.className).not.toBe('usa-current');
+    expect(secondLink?.className).not.toBe('usa-link usa-current');
   });
 
   it('checks if the second link is active', () => {
@@ -29,7 +29,7 @@ describe('rendering of the SubPageNav', () => {
 
     const firstLink = container.querySelector(`.usa-sidenav li:nth-child(${firstLinkActive}) a`);
     const secondLink = container.querySelector(`.usa-sidenav li:nth-child(${secondLinkIndex}) a`);
-    expect(secondLink?.className).toBe('usa-current');
+    expect(secondLink?.className).toBe('usa-link usa-current');
-    expect(firstLink?.className).not.toBe('usa-current');
+    expect(firstLink?.className).not.toBe('usa-link usa-current');
   });
 });

client/src/components/TractDemographics/TractDemographics.module.scss

@@ -37,7 +37,7 @@
     
             //emulate a link
             cursor:pointer;
-            color:blue;
+            @include u-color('blue-60v');
             text-decoration:underline;
     
             min-width: 45px;

client/src/data/copy/common.tsx

@@ -20,7 +20,7 @@ export interface IDefineMessage {
  * */
 export const italicFn = (str:string) => <i>{str}</i>;
 export const boldFn = (str:string) => <strong>{str}</strong>;
-export const simpleLink = (href:string) => (str:string) => <a href={href}>{str}</a>;
+export const simpleLink = (href:string) => (str:string) => <a className={'usa-link'} href={href}>{str}</a>;
 // export const downloadLink = (href:string) => (str:string) => <a href={href} download>{str}</a>;
 export const downloadLink = (href:string) => (str:string) => <DownloadLink href={href} linkText={str} />;
 // eslint-disable-next-line max-len

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -607,6 +607,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     class="j40-aboutcard-sm-link"
                   >
                     <a
+                      class="usa-link"
                       href="/en/methodology"
                     >
                       Methodology & data
@@ -661,6 +662,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     class="j40-aboutcard-sm-link"
                   >
                     <a
+                      class="usa-link"
                       href="/en/"
                     >
                       Explore the map
@@ -888,7 +890,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/contact.test.tsx.snap

@@ -400,6 +400,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       To provide feedback about a specific census tract, either select the send feedback button after
       selecting a census tract on the 
             <a
+              class="usa-link"
               href="/en/"
             >
               Explore the map
@@ -535,7 +536,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -533,7 +533,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -428,7 +428,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -471,18 +471,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#exp-agr-loss-rate"
           >
             expected agriculture loss rate
           </a>
            OR 
           <a
+            class="usa-link"
             href="#exp-bld-loss-rate"
           >
             expected building loss rate
           </a>
            OR 
           <a
+            class="usa-link"
             href="#exp-pop-loss-rate"
           >
             expected population loss rate
@@ -496,12 +499,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -530,12 +535,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#energy-burden"
           >
             energy burden
           </a>
            OR 
           <a
+            class="usa-link"
             href="#pm-25"
           >
             PM2.5 in the air
@@ -549,12 +556,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -585,12 +594,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#diesel-pm"
           >
             diesel particulate matter exposure
           </a>
            or 
           <a
+            class="usa-link"
             href="#traffic-vol"
           >
             traffic proximity and volume
@@ -606,12 +617,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -640,18 +653,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#lead-paint"
           >
             lead paint
           </a>
            AND 
           <a
+            class="usa-link"
             href="#median-home"
           >
             median home value
           </a>
            is at or less than the 90th percentile OR at or above the 90th percentile for the 
           <a
+            class="usa-link"
             href="#house-burden"
           >
             housing cost burden
@@ -665,12 +681,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -699,18 +717,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#prox-haz"
           >
             proximity to hazardous waste facilities
           </a>
            OR 
           <a
+            class="usa-link"
             href="#prox-npl"
           >
             proximity to National Priorities List (NPL) sites
           </a>
            OR 
           <a
+            class="usa-link"
             href="#prox-rmp"
           >
             proximity to Risk Management Plan (RMP) facilities
@@ -724,12 +745,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -758,6 +781,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#waste-water"
           >
             wastewater discharge
@@ -771,12 +795,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -805,24 +831,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#asthma"
           >
             asthma
           </a>
            OR 
           <a
+            class="usa-link"
             href="#diabetes"
           >
             diabetes
           </a>
            OR 
           <a
+            class="usa-link"
             href="#heart-disease"
           >
             heart disease
           </a>
            OR 
           <a
+            class="usa-link"
             href="#life-exp"
           >
             low life expectancy
@@ -836,12 +866,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            is at or above the 65th percentile for 
           <a
+            class="usa-link"
             href="#low-income"
           >
             low income
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -870,24 +902,28 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            at or above the 90th percentile for 
           <a
+            class="usa-link"
             href="#low-med-inc"
           >
             low median income
           </a>
            as a percentage of area median income OR 
           <a
+            class="usa-link"
             href="#ling-iso"
           >
             linguistic isolation
           </a>
            OR 
           <a
+            class="usa-link"
             href="#unemploy"
           >
             unemployment
           </a>
            OR percentage of individuals in households at or below 100% Federal 
           <a
+            class="usa-link"
             href="#poverty"
           >
             poverty
@@ -901,12 +937,14 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           </strong>
            10% or more of adults 25 or older have not attained a 
           <a
+            class="usa-link"
             href="#high-school"
           >
             high school degree
           </a>
            AND 80% or more of individuals 15 or older are not enrolled in 
           <a
+            class="usa-link"
             href="#high-ed-enroll-rate"
           >
             higher education
@@ -2292,6 +2330,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         </div>
         <div>
           <a
+            class="usa-link"
             href="/en/methodology"
           >
             Return to top
@@ -2377,7 +2416,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap

@@ -1026,7 +1026,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar

client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap

@@ -428,7 +428,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link footer-link-first-child"
                     href="/en/public-engagement"
                   >
                     Engagement calendar