From 512742e1d0799786656d3393286450b30abacb4d Mon Sep 17 00:00:00 2001 From: Aaron Couch Date: Thu, 7 Dec 2023 13:25:52 -0500 Subject: [PATCH] [Issue 717] Process page milestones section (#815) * Add ProcessMethodology.tsx and update process.tsx, common.json --------- Co-authored-by: Sammy --- frontend/public/locales/en/common.json | 18 ++- .../src/pages/content/ProcessMethodology.tsx | 107 ++++++++++++++++++ frontend/src/pages/process.tsx | 4 + frontend/tests/pages/process.test.tsx | 3 +- 4 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 frontend/src/pages/content/ProcessMethodology.tsx diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index faa68d0d3..9693f0f4c 100644 --- 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 www.grants.gov as we iterate. But your feedback will inform what happens next.", + "sub_paragraph_4": "Be sure to sign up for product updates 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 new file mode 100644 index 000000000..ce31d4167 --- /dev/null +++ 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 ( + <> + + + {t("milestones.tag")} + + + + +

{t("milestones.paragraph_1")}

+ + +

+ {t("milestones.sub_title_1")} +

+

+ {t("milestones.sub_paragraph_1")} +

+

+ {t("milestones.sub_title_2")} +

+

+ {t("milestones.sub_paragraph_2")} +

+ + + + + + + +

{t("milestones.paragraph_2")}

+ + +

+ {t("milestones.sub_title_3")} +

+

+ + ), + }} + /> +

+

+ , + }} + /> +

+ + + + + + + ); +}; + +export default ProcessMethodology; diff --git a/frontend/src/pages/process.tsx b/frontend/src/pages/process.tsx index 8e8d5ab59..e674c5902 100644 --- 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 = () => { +
+ +
); }; diff --git a/frontend/tests/pages/process.test.tsx b/frontend/tests/pages/process.test.tsx index c0f853cb9..50070a6dd 100644 --- a/frontend/tests/pages/process.test.tsx +++ b/frontend/tests/pages/process.test.tsx @@ -7,7 +7,8 @@ describe("Process", () => { render(); 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");