[Issue 717] Process page milestones section (#815)

* Add ProcessMethodology.tsx and update process.tsx, common.json --------- Co-authored-by: Sammy <[email protected]>
HHS · Dec 7, 2023 · 512742e · 512742e
1 parent b8bdff7
commit 512742e
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 2 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -169,7 +169,23 @@
     "iterative_title": "Iterative",
     "iterative_content": "We’re releasing features early and often through a continuous cycle of planning, implementation, and assessment. Each cycle will incrementally improve the product, as we incorporate your feedback from the prior iteration.",
     "agile_title": "Agile",
-    "agile_content": "We’re building a simpler Grants.gov with you, not for you. Our process gives us the flexibility to swiftly respond to feedback and adapt to changing priorities and requirements."
+    "agile_content": "We’re building a simpler Grants.gov with you, not for you. Our process gives us the flexibility to swiftly respond to feedback and adapt to changing priorities and requirements.",
+    "milestones": {
+      "tag": "Learn about our first two project milestones",
+      "title_1": "Milestone 1: Laying the foundation with a modern Application Programming Interface (API)",
+      "paragraph_1": "Since the grant application process depends on data, we’re starting with a new modern API to make that data more accessible. Our API-first approach will not only prioritize data at the beginning, it will also make sure data remains a priority as we iterate. We’re starting here because it’s crucial that grants data and the features we build work together. The Grants.gov website, 3rd-party apps, and other services will be able to 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",
+      "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.",
+      "sub_paragraph_4": "Be sure to <LinkToNewsletter>sign up for product updates</LinkToNewsletter> so you know when the new search is available.",
+      "cta_2": "View the search milestone on GitHub"
+    }
   },
   "Newsletter": {
     "alert_title": "Simpler Grants.gov is a work in progress.",

diff --git a/frontend/src/pages/content/ProcessMethodology.tsx b/frontend/src/pages/content/ProcessMethodology.tsx
@@ -0,0 +1,107 @@
+import { ExternalRoutes } from "src/constants/routes";
+
+import { Trans, useTranslation } from "next-i18next";
+import Link from "next/link";
+import { Button, Grid, Icon } from "@trussworks/react-uswds";
+
+import ContentLayout from "src/components/ContentLayout";
+
+const ProcessMethodology = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Process" });
+
+  return (
+    <>
+      <Grid className="grid-container padding-top-1 tablet:padding-top-3 desktop-lg:padding-top-6 padding-bottom-0 tablet:padding-bottom-0 desktop-lg:padding-bottom-0">
+        <strong className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
+          {t("milestones.tag")}
+        </strong>
+      </Grid>
+      <ContentLayout
+        title={t("milestones.title_1")}
+        data-testid="process-methodology-content"
+        titleSize="m"
+        bottomBorder="none"
+      >
+        <Grid tabletLg={{ col: 6 }}>
+          <p className="usa-intro">{t("milestones.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")}
+          </h3>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            {t("milestones.sub_paragraph_1")}
+          </p>
+          <h3 className="tablet-lg:font-sans-lg margin-top-4 margin-bottom-2">
+            {t("milestones.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")}
+          </p>
+          <Link href={ExternalRoutes.MILESTONES} passHref>
+            <Button className="margin-bottom-4" type="button" size="big">
+              {t("milestones.cta_1")}{" "}
+              <Icon.Launch
+                className="text-middle"
+                size={4}
+                aria-label="launch"
+              />
+            </Button>
+          </Link>
+        </Grid>
+      </ContentLayout>
+      <ContentLayout
+        title={t("milestones.title_2")}
+        data-testid="process-methodology-content"
+        paddingTop={false}
+        titleSize="m"
+        bottomBorder="none"
+      >
+        <Grid tabletLg={{ col: 6 }}>
+          <p className="usa-intro">{t("milestones.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")}
+          </h3>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            <Trans
+              t={t}
+              i18nKey="milestones.sub_paragraph_3"
+              components={{
+                LinkToGrants: (
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={ExternalRoutes.GRANTS_HOME}
+                  />
+                ),
+              }}
+            />
+          </p>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            <Trans
+              t={t}
+              i18nKey="milestones.sub_paragraph_4"
+              components={{
+                LinkToNewsletter: <Link href="/newsletter" />,
+              }}
+            />
+          </p>
+          <Link href={ExternalRoutes.MILESTONES} passHref>
+            <Button className="margin-bottom-4" type="button" size="big">
+              {t("milestones.cta_2")}{" "}
+              <Icon.Launch
+                className="text-middle"
+                size={4}
+                aria-label="launch"
+              />
+            </Button>
+          </Link>
+        </Grid>
+      </ContentLayout>
+    </>
+  );
+};
+
+export default ProcessMethodology;
diff --git a/frontend/src/pages/process.tsx b/frontend/src/pages/process.tsx
@@ -9,6 +9,7 @@ import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
 import FullWidthAlert from "../components/FullWidthAlert";
 import ProcessContent from "./content/ProcessContent";
+import ProcessMethodology from "./content/ProcessMethodology";
 
 const Process: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "Process" });
@@ -33,6 +34,9 @@ const Process: NextPage = () => {
       </FullWidthAlert>
       <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
       <ProcessContent />
+      <div className="padding-top-4 bg-gray-5">
+        <ProcessMethodology />
+      </div>
     </>
   );
 };

diff --git a/frontend/tests/pages/process.test.tsx b/frontend/tests/pages/process.test.tsx
@@ -7,7 +7,8 @@ describe("Process", () => {
     render(<Process />);
 
     const alert = screen.getByTestId("alert");
-    const link = screen.getByRole("link", { name: /grants\.gov/i });
+    // There are multiple links to grants.gov
+    const link = screen.getAllByText("www.grants.gov")[0];
 
     expect(alert).toBeInTheDocument();
     expect(link).toHaveAttribute("href", "https://www.grants.gov");