Updates process page

navapbc · May 15, 2024 · 6ee2e8f · 6ee2e8f
1 parent 8b4a6eb
commit 6ee2e8f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 44 deletions.
diff --git a/frontend/src/app/process/page.tsx b/frontend/src/app/process/page.tsx
@@ -32,6 +32,7 @@ export default function Process() {
       <div className="padding-top-4 bg-gray-5">
         <ProcessMilestones />
       </div>
+      <ProcessInvolved />
     </>
   );
 }
diff --git a/frontend/src/pages/content/ProcessInvolved.tsx b/frontend/src/pages/content/ProcessInvolved.tsx
@@ -1,15 +1,43 @@
 import { ExternalRoutes } from "src/constants/routes";
 
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslations } from "next-intl";
 import { Grid } from "@trussworks/react-uswds";
 
 import ContentLayout from "src/components/ContentLayout";
 
 const ProcessInvolved = () => {
-  const { t } = useTranslation("common", { keyPrefix: "Process" });
+  const t = useTranslations("Process");
 
   const email = ExternalRoutes.EMAIL_SIMPLERGRANTSGOV;
-
+  const para1 = t.rich("involved.paragraph_1", {
+    email: (chunks) => (
+      <a href={`mailto:${email}`} target="_blank" rel="noopener noreferrer">
+        {chunks}
+      </a>
+    ),
+  });
+  const para2 = t.rich("involved.paragraph_2", {
+    github: (chunks) => (
+      <a
+        className="usa-link--external"
+        target="_blank"
+        rel="noopener noreferrer"
+        href={ExternalRoutes.GITHUB_REPO}
+      >
+        {chunks}
+      </a>
+    ),
+    wiki: (chunks) => (
+      <a
+        className="usa-link--external"
+        target="_blank"
+        rel="noopener noreferrer"
+        href={ExternalRoutes.WIKI}
+      >
+        {chunks}
+      </a>
+    ),
+  });
   return (
     <ContentLayout data-testid="process-involved-content" bottomBorder="none">
       <Grid row gap="lg">
@@ -18,48 +46,15 @@ const ProcessInvolved = () => {
             {t("involved.title_1")}
           </h3>
           <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            <Trans
-              t={t}
-              i18nKey={"involved.paragraph_1"}
-              components={{
-                email: (
-                  <a
-                    href={`mailto:${email}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  />
-                ),
-              }}
-            />
+            {para1}
           </p>
         </Grid>
         <Grid tabletLg={{ col: 6 }}>
           <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
             {t("involved.title_2")}
           </h3>
           <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            <Trans
-              t={t}
-              i18nKey={"involved.paragraph_2"}
-              components={{
-                github: (
-                  <a
-                    className="usa-link--external"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={ExternalRoutes.GITHUB_REPO}
-                  />
-                ),
-                wiki: (
-                  <a
-                    className="usa-link--external"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={ExternalRoutes.WIKI}
-                  />
-                ),
-              }}
-            />
+            {para2}
           </p>
         </Grid>
       </Grid>

diff --git a/frontend/src/pages/content/ProcessMilestones.tsx b/frontend/src/pages/content/ProcessMilestones.tsx
@@ -31,12 +31,17 @@ const ProcessMilestones = () => {
     switch (iconIndex) {
       case 0:
         return (
-          <Image src={SearchSvg} aria-hidden={true} className="text-middle" />
+          <Image
+            alt="magnifying glass icon"
+            src={SearchSvg as string}
+            aria-hidden={true}
+            className="text-middle"
+          />
         );
       case 1:
         return (
           <Image
-            src={AssessmentSvg}
+            src={AssessmentSvg as string}
             aria-hidden={true}
             className="text-middle"
             alt="Icon that looks like graph"
@@ -45,7 +50,7 @@ const ProcessMilestones = () => {
       case 2:
         return (
           <Image
-            src={ContentCopySvg}
+            src={ContentCopySvg as string}
             aria-hidden={true}
             className="text-middle"
             alt="Content copy icon"
@@ -90,7 +95,7 @@ const ProcessMilestones = () => {
                       // Don't show the chevron in the last row item.
                       index < keys.length - 1 ? (
                         <Image
-                          src={NavigationNextSVG}
+                          src={NavigationNextSVG as string}
                           alt="chevron pointing right"
                           className="display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
                           aria-label="launch"
@@ -141,7 +146,8 @@ const ProcessMilestones = () => {
             <Button className="margin-bottom-4" type="button" size="big">
               <span className="margin-right-5">{t("milestones.cta_1")}</span>
               <Image
-                src={LaunchSVG}
+                src={LaunchSVG as string}
+                alt="icon"
                 className="text-middle margin-left-neg-4"
                 aria-label="launch"
               />
@@ -155,7 +161,8 @@ const ProcessMilestones = () => {
             <small className="display-block font-sans-lg margin-bottom-105">
               {t("milestones.roadmap_2")}
               <Image
-                src={NavigationNextSVG}
+                src={NavigationNextSVG as string}
+                alt="chevron pointing right"
                 className="text-middle text-base-light"
                 aria-label="launch"
               />