[Issue 716] Add ProcessContent.tsx and process page update (#788)

HHS · Dec 4, 2023 · 293b47b · 293b47b
1 parent 9f28cec
commit 293b47b
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 3 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -39,7 +39,15 @@
     "page_title": "Process | Simpler Grants.gov",
     "meta_description": "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
     "alert_title": "Simpler Grants.gov is a work in progress.",
-    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>."
+    "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>.",
+    "title": "Our open process",
+    "content": "This project is transparent, iterative, and agile. All of the code we’re writing is open source and our roadmap is public. As we regularly release new versions of Simpler.Grants.gov, you'll see what we're building and prioritizing. With each iteration, you'll be able to try out functional software and give us feedback on what works and what can be improved to inform what happens next.",
+    "transparent_title": "Transparent",
+    "transparent_content": "We’re building a simpler Grants.gov in the open. You can see our plans and our progress. And you can join us in shaping the vision and details of the features we build.",
+    "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."
   },
   "ErrorPages": {
     "page_not_found": {

diff --git a/frontend/src/components/Breadcrumbs.tsx b/frontend/src/components/Breadcrumbs.tsx
@@ -54,7 +54,7 @@ const Breadcrumbs = ({ breadcrumbList }: Props) => {
 
   return (
     <GridContainer
-      className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6"
+      className="padding-top-1 tablet:padding-top-3 desktop-lg:padding-top-4"
       data-testid="breadcrumb"
     >
       <BreadcrumbBar listProps={{ ...rdfaMetadata.ol }}>

diff --git a/frontend/src/components/ProcessContent.tsx b/frontend/src/components/ProcessContent.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from "next-i18next";
+import { Grid, GridContainer } from "@trussworks/react-uswds";
+
+const ProcessContent = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Process" });
+
+  return (
+    <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
+      <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
+        {t("title")}
+      </h1>
+      <Grid row gap>
+        <Grid
+          tabletLg={{ col: 12 }}
+          desktop={{ col: 12 }}
+          desktopLg={{ col: 12 }}
+        >
+          <p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
+            {t("content")}
+          </p>
+        </Grid>
+      </Grid>
+      <Grid row gap className="flex-align-start">
+        <Grid tabletLg={{ col: 4 }} desktopLg={{ col: 4 }}>
+          <div className="margin-bottom-2 desktop:margin-y-0 border radius-md border-base-lighter padding-3">
+            <strong className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
+              {t("transparent_title")}
+            </strong>
+            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+              {t("transparent_content")}
+            </p>
+          </div>
+        </Grid>
+        <Grid tabletLg={{ col: 4 }} desktopLg={{ col: 4 }}>
+          <div className="margin-bottom-2 desktop:margin-y-0 border radius-md border-base-lighter padding-3">
+            <strong className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
+              {t("iterative_title")}
+            </strong>
+            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+              {t("iterative_content")}
+            </p>
+          </div>
+        </Grid>
+        <Grid tabletLg={{ col: 4 }} desktopLg={{ col: 4 }}>
+          <div className="border radius-md border-base-lighter padding-3">
+            <strong className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
+              {t("agile_title")}
+            </strong>
+            <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+              {t("agile_content")}
+            </p>
+          </div>
+        </Grid>
+      </Grid>
+    </GridContainer>
+  );
+};
+
+export default ProcessContent;
diff --git a/frontend/src/pages/process.tsx b/frontend/src/pages/process.tsx
@@ -8,6 +8,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
 import FullWidthAlert from "../components/FullWidthAlert";
+import ProcessContent from "../components/ProcessContent";
 
 const Process: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "Process" });
@@ -31,7 +32,7 @@ const Process: NextPage = () => {
         />
       </FullWidthAlert>
       <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
-      Process Placeholder
+      <ProcessContent />
     </>
   );
 };

diff --git a/frontend/stories/components/ProcessContent.stories.tsx b/frontend/stories/components/ProcessContent.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import ProcessContent from "src/components/ProcessContent";
+
+const meta: Meta<typeof ProcessContent> = {
+  title: "Components/Content/Process Content",
+  component: ProcessContent,
+};
+export default meta;
+
+export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/proto/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?node-id=918-1768&starting-point-node-id=918%3A1623&hide-ui=1",
+    },
+  },
+};
diff --git a/frontend/tests/components/ProcessContent.tsx b/frontend/tests/components/ProcessContent.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+
+import ProcessContent from "src/components/ProcessContent";
+
+describe("Process Content", () => {
+  it("Renders without errors", () => {
+    render(<ProcessContent />);
+    const ProcessH1 = screen.getByRole("heading", {
+      level: 1,
+      name: /Our open process/i,
+    });
+
+    expect(ProcessH1).toBeInTheDocument();
+  });
+});