[Issue 873] Update milestone layout (#921)

* Add prefixes to milestone headers, styled as smaller pre-heading

frontend/public/locales/en/common.json

@@ -184,14 +184,18 @@
           "content": "<p>Streamline the application process to make it easier for all applicants to apply for funding opportunities.</p>"
         }
       ],
-      "title_1": "Milestone 1: Laying the foundation with a modern Application Programming Interface (API)",
+      "roadmap_1": "Find",
+      "title_1": "Milestone 1",
+      "name_1": "Laying the foundation with a modern Application Programming Interface (API)",
       "paragraph_1": "To make it easier to discover funding opportunities, we’re starting with a new modern API to make grants data more accessible. Our API‑first approach will prioritize data at the beginning, and make sure data remains a priority as we iterate. It’s crucial that the Grants.gov website, 3rd‑party apps, and other services can more easily access grants data. Our new API will foster innovation and be a foundation for interacting with 
grants in new ways, like SMS, phone, email, chat, and notifications.",
       "sub_title_1": "What’s an API?",
       "sub_paragraph_1": "Think of the API as a liaison between the Grants.gov website and the information and services that power it. It’s software that allows two applications to talk to each other or sends data back and forth between a website and a user.",
       "sub_title_2": "Are you interested in the tech?",
       "sub_paragraph_2": "We’re building a RESTful API. And we’re starting with an initial endpoint that allows API users to retrieve basic information about each funding opportunity.",
       "cta_1": "View the API milestone on GitHub",
-      "title_2": "Milestone 2: A new search interface accessible to everyone",
+      "roadmap_2": "Find",
+      "title_2": "Milestone 2",
+      "name_2": "A new search interface accessible to everyone",
       "paragraph_2": "Once our new API is in place, we’ll begin focusing on how applicants most commonly access grants data. Our first user-facing milestone will be a simple search interface that makes data from our modern API accessible to anyone who wants to try out new ways to search for funding opportunities.",
       "sub_title_3": "Can’t wait to try out the new search?",
       "sub_paragraph_3": "Search will be the first feature on Simpler.Grants.gov that you’ll be able to test. It’ll be quite basic at first, and you’ll need to continue using <LinkToGrants>www.grants.gov</LinkToGrants> as we iterate. But your feedback will inform what happens next.",

frontend/src/components/ContentLayout.tsx

@@ -5,7 +5,7 @@ type Props = {
   children: React.ReactNode;
   gridGap?: true | "sm" | "md" | "lg" | "2px" | "05" | 1 | 2 | 3 | 4 | 5 | 6;
   paddingTop?: boolean;
-  title?: string;
+  title?: string | React.ReactNode;
   titleSize?: "l" | "m";
 };
 

frontend/src/pages/content/ProcessMilestones.tsx

@@ -83,7 +83,20 @@ const ProcessMilestones = () => {
             })}
       </ContentLayout>
       <ContentLayout
-        title={t("milestones.title_1")}
+        title={
+          <>
+            <small className="display-block font-sans-lg margin-bottom-105">
+              {t("milestones.roadmap_1")}
+              <Icon.NavigateNext
+                className="text-middle text-base-light"
+                size={4}
+                aria-label="launch"
+              />
+              {t("milestones.title_1")}
+            </small>
+            {t("milestones.name_1")}
+          </>
+        }
         data-testid="process-methodology-content"
         titleSize="m"
         bottomBorder="none"
@@ -117,7 +130,20 @@ const ProcessMilestones = () => {
         </Grid>
       </ContentLayout>
       <ContentLayout
-        title={t("milestones.title_2")}
+        title={
+          <>
+            <small className="display-block font-sans-lg margin-bottom-105">
+              {t("milestones.roadmap_2")}
+              <Icon.NavigateNext
+                className="text-middle text-base-light"
+                size={4}
+                aria-label="launch"
+              />
+              {t("milestones.title_2")}
+            </small>
+            {t("milestones.name_2")}
+          </>
+        }
         data-testid="process-methodology-content"
         paddingTop={false}
         titleSize="m"

frontend/tests/components/ContentLayout.test.tsx

@@ -9,9 +9,16 @@ describe("ContentLayout", () => {
     expect(content).toBeInTheDocument();
   });
 
-  it("Renders a title if passed", () => {
-    render(<ContentLayout title="test title">This is a test</ContentLayout>);
-    const content = screen.getByText("test title");
+  it("Renders a title if a string is passed", () => {
+    render(<ContentLayout title="string title">This is a test</ContentLayout>);
+    const content = screen.getByText("string title");
+    expect(content).toBeInTheDocument();
+  });
+
+  it("Renders a title if an element is passed", () => {
+    const title = <>This is a node test.</>;
+    render(<ContentLayout title={title}>This is a test</ContentLayout>);
+    const content = screen.getByText("This is a node test.");
     expect(content).toBeInTheDocument();
   });
 });