From 692cdcee610f809c3e9b1cf5c1c996b571729aa1 Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Mon, 7 Oct 2024 11:25:44 -0400
Subject: [PATCH 1/6] readability refactors

---
 .../[locale]/process/ProcessMilestones.tsx    | 49 ++++++++++---------
 frontend/src/i18n/messages/en/index.ts        |  2 +-
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index 71f970428..f1c70e8ec 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -17,10 +17,13 @@ import ContentLayout from "src/components/ContentLayout";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
 const ProcessMilestones = () => {
-  const t = useTranslations("Process");
+  const t = useTranslations("Process.milestones");
 
-  const messages = useMessages() as unknown as IntlMessages;
-  const keys = Object.keys(messages.Process.milestones.icon_list);
+  const {
+    Process: {
+      milestones: { high_level_roadmap_items },
+    },
+  } = useMessages() as unknown as IntlMessages;
 
   const getIcon = (iconIndex: number) => {
     switch (iconIndex) {
@@ -38,15 +41,15 @@ const ProcessMilestones = () => {
   return (
     <>
       <ContentLayout
-        title={t("milestones.tag")}
+        title={t("tag")}
         data-test-id="process-high-level-content"
         titleSize="m"
         bottomBorder="dark"
         gridGap={6}
       >
-        {keys.map((key, index) => {
-          const title = t(`milestones.icon_list.${key}.title`);
-          const content = t.rich(`milestones.icon_list.${key}.content`, {
+        {high_level_roadmap_items.map((_unusedItem, index) => {
+          const title = t(`high_level_roadmap_items.${index}.title`);
+          const content = t.rich(`high_level_roadmap_items.${index}.content`, {
             p: (chunks) => (
               <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
                 {chunks}
@@ -69,7 +72,7 @@ const ProcessMilestones = () => {
                     </div>
                     {
                       // Don't show the chevron in the last row item.
-                      index < keys.length - 1 ? (
+                      index < high_level_roadmap_items.length - 1 ? (
                         <USWDSIcon
                           className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
                           name="navigate_next"
@@ -89,14 +92,14 @@ const ProcessMilestones = () => {
         title={
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
-              {t("milestones.roadmap_1")}
+              {t("roadmap_1")}
               <USWDSIcon
                 className="usa-icon usa-icon--size-4 text-middle text-base-light"
                 name="navigate_next"
               />
-              {t("milestones.title_1")}
+              {t("title_1")}
             </small>
-            {t("milestones.name_1")}
+            {t("name_1")}
           </>
         }
         data-testid="process-methodology-content"
@@ -104,24 +107,24 @@ const ProcessMilestones = () => {
         bottomBorder="none"
       >
         <Grid tabletLg={{ col: 6 }}>
-          <p className="usa-intro">{t("milestones.paragraph_1")}</p>
+          <p className="usa-intro">{t("paragraph_1")}</p>
         </Grid>
         <Grid tabletLg={{ col: 6 }}>
           <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
-            {t("milestones.sub_title_1")}
+            {t("sub_title_1")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            {t("milestones.sub_paragraph_1")}
+            {t("sub_paragraph_1")}
           </p>
           <h3 className="tablet-lg:font-sans-lg margin-top-4 margin-bottom-2">
-            {t("milestones.sub_title_2")}
+            {t("sub_title_2")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-            {t("milestones.sub_paragraph_2")}
+            {t("sub_paragraph_2")}
           </p>
           <Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
-              <span className="margin-right-5">{t("milestones.cta_1")}</span>
+              <span className="margin-right-5">{t("cta_1")}</span>
               <USWDSIcon
                 name="launch"
                 className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
@@ -134,14 +137,14 @@ const ProcessMilestones = () => {
         title={
           <>
             <small className="display-block font-sans-lg margin-bottom-105">
-              {t("milestones.roadmap_2")}
+              {t("roadmap_2")}
               <USWDSIcon
                 className="usa-icon usa-icon--size-4 text-middle text-base-light"
                 name="navigate_next"
               />
-              {t("milestones.title_2")}
+              {t("title_2")}
             </small>
-            {t("milestones.name_2")}
+            {t("name_2")}
           </>
         }
         data-testid="process-methodology-content"
@@ -150,17 +153,17 @@ const ProcessMilestones = () => {
         bottomBorder="none"
       >
         <Grid tabletLg={{ col: 6 }}>
-          <p className="usa-intro">{t("milestones.paragraph_2")}</p>
+          <p className="usa-intro">{t("paragraph_2")}</p>
         </Grid>
         <Grid tabletLg={{ col: 6 }}>
           <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
-            {t("milestones.sub_title_3")}
+            {t("sub_title_3")}
           </h3>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
           <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
           <Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
             <Button className="margin-bottom-4" type="button" size="big">
-              <span className="margin-right-5">{t("milestones.cta_2")}</span>
+              <span className="margin-right-5">{t("cta_2")}</span>
               <USWDSIcon
                 name="launch"
                 className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts
index fb4cbd72b..fc2ee7c28 100644
--- a/frontend/src/i18n/messages/en/index.ts
+++ b/frontend/src/i18n/messages/en/index.ts
@@ -271,7 +271,7 @@ export const messages = {
     },
     milestones: {
       tag: "The high-level roadmap",
-      icon_list: [
+      high_level_roadmap_items: [
         {
           title: "Find",
           content:

From b1440d153a93dc5584e00f0742df5505298537c9 Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Mon, 7 Oct 2024 11:55:54 -0400
Subject: [PATCH 2/6] fix list layout

---
 .../[locale]/process/ProcessMilestones.tsx    | 83 ++++++++++---------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index f1c70e8ec..558c670ef 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -47,46 +47,51 @@ const ProcessMilestones = () => {
         bottomBorder="dark"
         gridGap={6}
       >
-        {high_level_roadmap_items.map((_unusedItem, index) => {
-          const title = t(`high_level_roadmap_items.${index}.title`);
-          const content = t.rich(`high_level_roadmap_items.${index}.content`, {
-            p: (chunks) => (
-              <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                {chunks}
-              </p>
-            ),
-            italics: (chunks) => <em>{chunks}</em>,
-          });
+        <IconList className="usa-icon-list--size-lg">
+          <Grid row>
+            {high_level_roadmap_items.map((_unusedItem, index) => {
+              const title = t(`high_level_roadmap_items.${index}.title`);
+              const content = t.rich(
+                `high_level_roadmap_items.${index}.content`,
+                {
+                  p: (chunks) => (
+                    <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                      {chunks}
+                    </p>
+                  ),
+                  italics: (chunks) => <em>{chunks}</em>,
+                },
+              );
 
-          return (
-            <Grid key={title + "-key"} tabletLg={{ col: 4 }}>
-              <IconList className="usa-icon-list--size-lg">
-                <IconListItem className="margin-top-4">
-                  <IconListIcon>{getIcon(index)}</IconListIcon>
-                  <IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
-                    <IconListTitle className="margin-bottom-2" type="h3">
-                      {title}
-                    </IconListTitle>
-                    <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                      {content}
-                    </div>
-                    {
-                      // Don't show the chevron in the last row item.
-                      index < high_level_roadmap_items.length - 1 ? (
-                        <USWDSIcon
-                          className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
-                          name="navigate_next"
-                        />
-                      ) : (
-                        ""
-                      )
-                    }
-                  </IconListContent>
-                </IconListItem>
-              </IconList>
-            </Grid>
-          );
-        })}
+              return (
+                <Grid key={title + "-key"} tabletLg={{ col: true }}>
+                  <IconListItem className="margin-top-4">
+                    <IconListIcon>{getIcon(index)}</IconListIcon>
+                    <IconListContent>
+                      <IconListTitle className="margin-bottom-2" type="h3">
+                        {title}
+                      </IconListTitle>
+                      <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6 tablet:padding-right-50">
+                        {content}
+                      </div>
+                      {
+                        // Don't show the chevron in the last row item.
+                        index < high_level_roadmap_items.length - 1 ? (
+                          <USWDSIcon
+                            className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
+                            name="navigate_next"
+                          />
+                        ) : (
+                          ""
+                        )
+                      }
+                    </IconListContent>
+                  </IconListItem>
+                </Grid>
+              );
+            })}
+          </Grid>
+        </IconList>
       </ContentLayout>
       <ContentLayout
         title={

From 0c4dcbfd3be206379724160e10ab27f2decd288c Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Mon, 7 Oct 2024 15:09:11 -0400
Subject: [PATCH 3/6] fix aria label

---
 .../src/app/[locale]/process/ProcessMilestones.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index 558c670ef..bd570b451 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -10,7 +10,6 @@ import {
   IconListContent,
   IconListIcon,
   IconListItem,
-  IconListTitle,
 } from "@trussworks/react-uswds";
 
 import ContentLayout from "src/components/ContentLayout";
@@ -64,14 +63,17 @@ const ProcessMilestones = () => {
               );
 
               return (
-                <Grid key={title + "-key"} tabletLg={{ col: true }}>
+                <Grid key={title + "-key"} tabletLg={{ col: 4 }}>
                   <IconListItem className="margin-top-4">
                     <IconListIcon>{getIcon(index)}</IconListIcon>
-                    <IconListContent>
-                      <IconListTitle className="margin-bottom-2" type="h3">
+                    <IconListContent className="tablet:padding-right-7">
+                      <h4
+                        aria-label={`Step ${index + 1}: ${title}`}
+                        className="margin-bottom-2 usa-icon-list__title"
+                      >
                         {title}
-                      </IconListTitle>
-                      <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6 tablet:padding-right-50">
+                      </h4>
+                      <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
                         {content}
                       </div>
                       {

From dce57f5f63935644c827612cb5b948a178f4a6f6 Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Mon, 7 Oct 2024 16:09:01 -0400
Subject: [PATCH 4/6] fix tests

---
 .../[locale]/process/ProcessMilestones.tsx    | 91 +++++++++----------
 frontend/tests/utils/intlMocks.ts             |  2 +-
 2 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index bd570b451..7e9b6c1ab 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -46,53 +46,52 @@ const ProcessMilestones = () => {
         bottomBorder="dark"
         gridGap={6}
       >
-        <IconList className="usa-icon-list--size-lg">
-          <Grid row>
-            {high_level_roadmap_items.map((_unusedItem, index) => {
-              const title = t(`high_level_roadmap_items.${index}.title`);
-              const content = t.rich(
-                `high_level_roadmap_items.${index}.content`,
-                {
-                  p: (chunks) => (
-                    <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                      {chunks}
-                    </p>
-                  ),
-                  italics: (chunks) => <em>{chunks}</em>,
-                },
-              );
+        <IconList className="usa-icon-list--size-lg grid-row">
+          {high_level_roadmap_items.map((_unusedItem, index) => {
+            const title = t(`high_level_roadmap_items.${index}.title`);
+            const content = t.rich(
+              `high_level_roadmap_items.${index}.content`,
+              {
+                p: (chunks) => (
+                  <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                    {chunks}
+                  </p>
+                ),
+                italics: (chunks) => <em>{chunks}</em>,
+              },
+            );
 
-              return (
-                <Grid key={title + "-key"} tabletLg={{ col: 4 }}>
-                  <IconListItem className="margin-top-4">
-                    <IconListIcon>{getIcon(index)}</IconListIcon>
-                    <IconListContent className="tablet:padding-right-7">
-                      <h4
-                        aria-label={`Step ${index + 1}: ${title}`}
-                        className="margin-bottom-2 usa-icon-list__title"
-                      >
-                        {title}
-                      </h4>
-                      <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
-                        {content}
-                      </div>
-                      {
-                        // Don't show the chevron in the last row item.
-                        index < high_level_roadmap_items.length - 1 ? (
-                          <USWDSIcon
-                            className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
-                            name="navigate_next"
-                          />
-                        ) : (
-                          ""
-                        )
-                      }
-                    </IconListContent>
-                  </IconListItem>
-                </Grid>
-              );
-            })}
-          </Grid>
+            return (
+              <IconListItem
+                key={title + "-key"}
+                className="margin-top-4 tablet-lg:grid-col-4"
+              >
+                <IconListIcon>{getIcon(index)}</IconListIcon>
+                <IconListContent className="tablet:padding-right-7">
+                  <h3
+                    aria-label={`Step ${index + 1}: ${title}`}
+                    className="margin-bottom-2 usa-icon-list__title"
+                  >
+                    {title}
+                  </h3>
+                  <div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+                    {content}
+                  </div>
+                  {
+                    // Don't show the chevron in the last row item.
+                    index < high_level_roadmap_items.length - 1 ? (
+                      <USWDSIcon
+                        className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
+                        name="navigate_next"
+                      />
+                    ) : (
+                      ""
+                    )
+                  }
+                </IconListContent>
+              </IconListItem>
+            );
+          })}
         </IconList>
       </ContentLayout>
       <ContentLayout
diff --git a/frontend/tests/utils/intlMocks.ts b/frontend/tests/utils/intlMocks.ts
index 5516f148d..2841eca48 100644
--- a/frontend/tests/utils/intlMocks.ts
+++ b/frontend/tests/utils/intlMocks.ts
@@ -15,7 +15,7 @@ export const mockMessages = {
       boxes: ["firstKey"],
     },
     milestones: {
-      icon_list: ["firstIcon"],
+      high_level_roadmap_items: ["firstIcon"],
     },
   },
   Research: {

From f5c00ea8305503f026eb93db12b2810a2eeba42d Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Thu, 10 Oct 2024 11:02:38 -0400
Subject: [PATCH 5/6] remove need for useMessages

---
 .../app/[locale]/process/ProcessMilestones.tsx   | 16 ++++++----------
 frontend/src/i18n/messages/en/index.ts           | 10 +++++-----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index 7e9b6c1ab..07458e6ce 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -15,15 +15,11 @@ import {
 import ContentLayout from "src/components/ContentLayout";
 import { USWDSIcon } from "src/components/USWDSIcon";
 
+const highLevelRoadmapItems = ["find", "advanced_reporting", "apply"] as const;
+
 const ProcessMilestones = () => {
   const t = useTranslations("Process.milestones");
 
-  const {
-    Process: {
-      milestones: { high_level_roadmap_items },
-    },
-  } = useMessages() as unknown as IntlMessages;
-
   const getIcon = (iconIndex: number) => {
     switch (iconIndex) {
       case 0:
@@ -47,10 +43,10 @@ const ProcessMilestones = () => {
         gridGap={6}
       >
         <IconList className="usa-icon-list--size-lg grid-row">
-          {high_level_roadmap_items.map((_unusedItem, index) => {
-            const title = t(`high_level_roadmap_items.${index}.title`);
+          {highLevelRoadmapItems.map((itemKey, index) => {
+            const title = t(`high_level_roadmap_items.${itemKey}.title`);
             const content = t.rich(
-              `high_level_roadmap_items.${index}.content`,
+              `high_level_roadmap_items.${itemKey}.content`,
               {
                 p: (chunks) => (
                   <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
@@ -79,7 +75,7 @@ const ProcessMilestones = () => {
                   </div>
                   {
                     // Don't show the chevron in the last row item.
-                    index < high_level_roadmap_items.length - 1 ? (
+                    index < highLevelRoadmapItems.length - 1 ? (
                       <USWDSIcon
                         className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
                         name="navigate_next"
diff --git a/frontend/src/i18n/messages/en/index.ts b/frontend/src/i18n/messages/en/index.ts
index fc2ee7c28..0483c1237 100644
--- a/frontend/src/i18n/messages/en/index.ts
+++ b/frontend/src/i18n/messages/en/index.ts
@@ -271,23 +271,23 @@ export const messages = {
     },
     milestones: {
       tag: "The high-level roadmap",
-      high_level_roadmap_items: [
-        {
+      high_level_roadmap_items: {
+        find: {
           title: "Find",
           content:
             "<p>Improve how applicants discover funding opportunities that they’re qualified for and that meet their needs.</p>",
         },
-        {
+        advanced_reporting: {
           title: "Advanced reporting",
           content:
             "<p>Improve stakeholders’ capacity to understand, analyze, and assess grants from application to acceptance.</p><p>Make non-confidential Grants.gov data open for public analysis.</p>",
         },
-        {
+        apply: {
           title: "Apply",
           content:
             "<p>Streamline the application process to make it easier for all applicants to apply for funding opportunities.</p>",
         },
-      ],
+      },
       roadmap_1: "Find",
       title_1: "Milestone 1",
       name_1:

From 02bb96ebd9659cc3219ff595f489e34b9669ec27 Mon Sep 17 00:00:00 2001
From: Doug Schrashun <dougschrashun@navapbc.com>
Date: Tue, 15 Oct 2024 11:24:16 -0400
Subject: [PATCH 6/6] fix linter

---
 frontend/src/app/[locale]/process/ProcessMilestones.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/[locale]/process/ProcessMilestones.tsx b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
index 07458e6ce..d93fc8036 100644
--- a/frontend/src/app/[locale]/process/ProcessMilestones.tsx
+++ b/frontend/src/app/[locale]/process/ProcessMilestones.tsx
@@ -1,6 +1,6 @@
 import { ExternalRoutes } from "src/constants/routes";
 
-import { useMessages, useTranslations } from "next-intl";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import React from "react";
 import {