[ Issue 361 ] Funding Opportunity Content (#377)

* Created stories and tests
* Created NofoImageLink component
* Added TabletLg breakpoint
---------
Co-authored-by: Daphne Gold <[email protected]>
Co-authored-by: Andy Cochran <[email protected]>

frontend/public/locales/en/common.json

@@ -9,7 +9,20 @@
     "goal_title_2": "For applicants",
     "goal_paragraph_2": "We’re building a one-stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities that meet your needs.",
     "goal_title_3": "For grantmakers",
-    "goal_paragraph_3": "If you work for a federal grantmaking agency, we’re making it easier for you to write, post, announce, and manage funding opportunities that reach underserved communities."
+    "goal_paragraph_3": "If you work for a federal grantmaking agency, we’re making it easier for you to write, post, announce, and manage funding opportunities that reach underserved communities.",
+    "fo_title": "Improvements to funding opportunity announcements",
+    "fo_paragraph_1": "Funding opportunities should not only be easy to find, share, and apply for. They should also be easy to read and understand. Our objective is to simplify and organize the content of funding opportunities announcements.",
+    "fo_paragraph_2": "We want to help grantmakers write clear, concise announcements that encourage strong submissions from qualified applicants and make opportunities more accessible to applicants from underserved communities.",
+    "fo_title_2": "View our grant announcement prototypes",
+    "fo_paragraph_3": "We recently simplified the language of four grant announcements and applied visual and user-centered design principles to increase their readability and usability.",
+    "acl_prototype": "Link to ACL Notice of Funding Opportunity example pdf",
+    "acf_prototype": "Link to ACF Notice of Funding Opportunity example pdf",
+    "cdc_prototype": "Link to CDC Notice of Funding Opportunity example pdf",
+    "samhsa_prototype": "Link to SAMHSA Notice of Funding Opportunity example pdf",
+    "fo_title_3": "We want to hear from you!",
+    "fo_paragraph_4": "We value your feedback. Tell us what you think of grant announcements and grants.gov.",
+    "fo_title_4": "Are you a first-time applicant? Created a workspace but haven't applied yet?",
+    "fo_paragraph_5": "We're especially interested in hearing from first-time applicants and organizations that have never applied for funding opportunities. We encourage you to review the above opportunity announcements and share your feedback, regardless of your experience with federal grants."
   },
   "Header": {
     "nav_link_home": "Home",

frontend/src/components/FundingContent.tsx

@@ -0,0 +1,56 @@
+import { nofoPdfs } from "src/constants/nofoPdfs";
+
+import { useTranslation } from "next-i18next";
+import { Grid, GridContainer } from "@trussworks/react-uswds";
+
+import NofoImageLink from "./NofoImageLink";
+
+const FundingContent = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Index" });
+
+  return (
+    <div className="bg-base-lightest desktop:padding-y-4 tablet:padding-y-2 padding-y-1">
+      <GridContainer>
+        <Grid row>
+          <h2 className="margin-bottom-0">{t("fo_title")}</h2>
+        </Grid>
+        <Grid row gap="md">
+          <Grid tablet={{ col: 6 }}>
+            <p>{t("fo_paragraph_1")}</p>
+          </Grid>
+          <Grid tablet={{ col: 6 }}>
+            <p>{t("fo_paragraph_2")}</p>
+          </Grid>
+        </Grid>
+        <Grid>
+          <h3>{t("fo_title_2")}</h3>
+        </Grid>
+        <Grid>
+          <p className="usa-intro">{t("fo_paragraph_3")}</p>
+        </Grid>
+        <Grid row gap>
+          {nofoPdfs.map((pdf) => (
+            <NofoImageLink
+              key={pdf.file}
+              file={pdf.file}
+              image={pdf.image}
+              alt={t(`${pdf.alt}`)}
+            />
+          ))}
+        </Grid>
+        <Grid row gap="md">
+          <Grid tablet={{ col: 6 }}>
+            <h2>{t("fo_title_3")}</h2>
+            <p className="usa-intro">{t("fo_paragraph_4")}</p>
+          </Grid>
+          <Grid tablet={{ col: 6 }}>
+            <h3>{t("fo_title_4")}</h3>
+            <p>{t("fo_paragraph_5")}</p>
+          </Grid>
+        </Grid>
+      </GridContainer>
+    </div>
+  );
+};
+
+export default FundingContent;

frontend/src/components/GoalContent.tsx

@@ -5,7 +5,7 @@ const GoalContent = () => {
   const { t } = useTranslation("common", { keyPrefix: "Index" });
 
   return (
-    <GridContainer>
+    <GridContainer className="desktop:padding-y-4 tablet:padding-y-2 padding-y-1">
       <Grid row>
         <h2 className="margin-bottom-0">{t("goal_title")}</h2>
       </Grid>

frontend/src/components/NofoImageLink.tsx

@@ -0,0 +1,28 @@
+import { pdf } from "src/constants/nofoPdfs";
+
+import Image from "next/image";
+import Link from "next/link";
+import { Grid } from "@trussworks/react-uswds";
+
+const NofoImageLink = ({ file, image, alt }: pdf) => {
+  return (
+    <Grid className="margin-bottom-2" tablet={{ col: 6 }} tabletLg={{ col: 3 }}>
+      <Link className="padding-0" href={file} target="_blank">
+        <Image
+          alt={alt}
+          className="pdf-card"
+          src={image}
+          height={1290}
+          width={980}
+          style={{
+            width: "100%",
+            height: "auto",
+          }}
+          sizes="(max-width: 640px) 100vw, (max-width: 880px) 50vw, 25vw"
+        />
+      </Link>
+    </Grid>
+  );
+};
+
+export default NofoImageLink;

frontend/src/constants/nofoPdfs.ts

@@ -0,0 +1,28 @@
+export type pdf = {
+  file: string; // path to file in public directory
+  image: string; // path to image in public directory
+  alt: string; // key for translation in i18n json file
+};
+
+export const nofoPdfs: pdf[] = [
+  {
+    file: "/docs/acl_prototype.pdf",
+    image: "/img/acl_prototype.png",
+    alt: "acl_prototype",
+  },
+  {
+    file: "/docs/acf_prototype.pdf",
+    image: "/img/acf_prototype.png",
+    alt: "acf_prototype",
+  },
+  {
+    file: "/docs/cdc_prototype.pdf",
+    image: "/img/cdc_prototype.png",
+    alt: "cdc_prototype",
+  },
+  {
+    file: "/docs/samhsa_prototype.pdf",
+    image: "/img/samhsa_prototype.png",
+    alt: "samhsa_prototype",
+  },
+];

frontend/src/pages/index.tsx

@@ -6,6 +6,7 @@ import Head from "next/head";
 
 import GoalContent from "src/components/GoalContent";
 import FullWidthAlert from "../components/FullWidthAlert";
+import FundingContent from "../components/FundingContent";
 
 const Home: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "Index" });
@@ -29,6 +30,7 @@ const Home: NextPage = () => {
         />
       </FullWidthAlert>
       <GoalContent />
+      <FundingContent />
 
       {/* Demonstration of more complex translated strings, with safe-listed links HTML elements */}
       <p className="usa-intro">

frontend/src/styles/_uswds-theme-custom-styles.scss

@@ -21,3 +21,10 @@ i.e.
 */
 
 @use "uswds-core" as *;
+
+.pdf-card {
+  transition: transform 0.2s;
+  &:hover {
+    transform: scale(1.04);
+  }
+}

frontend/src/styles/_uswds-theme.scss

@@ -18,6 +18,21 @@ in the form $setting: value,
   // Ensure utility classes always override other styles
   $utilities-use-important: true,
 
+  /* Override default breakpoints,
+    see https://designsystem.digital.gov/utilities/layout-grid/#utilities-settings */
+    $theme-utility-breakpoints:
+    (
+      "card": false,
+      "card-lg": false,
+      "mobile": false,
+      "mobile-lg": true,
+      "tablet": true,
+      "tablet-lg": true,
+      "desktop": true,
+      "desktop-lg": false,
+      "widescreen": false
+    ),
+
   // Prettier defaults for typography
   $theme-font-type-sans: "public-sans",
   $theme-global-link-styles: true,

frontend/stories/components/FullWidthAlert.stories.tsx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import FullWidthAlert from "src/components/FullWidthAlert";
 
 const meta: Meta<typeof FullWidthAlert> = {
-  title: "Full Width Alert",
+  title: "Components/Full Width Alert",
   component: FullWidthAlert,
 };
 export default meta;

frontend/stories/components/FundingContent.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import FundingContent from "src/components/FundingContent";
+
+const meta: Meta<typeof FundingContent> = {
+  title: "Components/Content/Funding Content",
+  component: FundingContent,
+};
+export default meta;
+
+export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?type=design&node-id=14-907&mode=design&t=gEXdEnzZUfuODXut-4",
+    },
+  },
+};

frontend/stories/components/GoalContent.stories.tsx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import GoalContent from "src/components/GoalContent";
 
 const meta: Meta<typeof GoalContent> = {
-  title: "Goal Content",
+  title: "Components/Content/Goal Content",
   component: GoalContent,
 };
 export default meta;

frontend/stories/components/NofoImageLink.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import NofoImageLink from "src/components/NofoImageLink";
+
+const meta: Meta<typeof NofoImageLink> = {
+  title: "Components/Nofo Image Link",
+  component: NofoImageLink,
+};
+export default meta;
+type Story = StoryObj<typeof NofoImageLink>;
+
+export const Primary: Story = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?type=design&node-id=86-600&mode=design&t=gEXdEnzZUfuODXut-4",
+    },
+  },
+  args: {
+    file: "/docs/acl_prototype.pdf",
+    image: "/img/acl_prototype.png",
+    alt: "This should be a key in i18n",
+  },
+};

frontend/tests/components/FundingContent.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+
+import FundingContent from "src/components/FundingContent";
+
+describe("Funding Content", () => {
+  it("Renders without errors", () => {
+    render(<FundingContent />);
+    const fundingH2 = screen.getByRole("heading", {
+      level: 2,
+      name: /Improvements to funding opportunity announcements?/i,
+    });
+
+    expect(fundingH2).toBeInTheDocument();
+  });
+});

frontend/tests/components/NofoImageLink.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+
+import NofoImageLink from "src/components/NofoImageLink";
+
+describe("PdfContainer", () => {
+  it("Renders without errors", () => {
+    render(
+      <NofoImageLink
+        file="/test/file.pdf"
+        image="/test/image.png"
+        alt="test alt content"
+      />
+    );
+    const alt = screen.getByAltText("test alt content");
+    expect(alt).toBeInTheDocument();
+  });
+});

frontend/tests/pages/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { axe } from "jest-axe";
 import Index from "src/pages/index";
 
@@ -37,7 +37,7 @@ describe("Index", () => {
 
   it("passes accessibility scan", async () => {
     const { container } = render(<Index />);
-    const results = await axe(container);
+    const results = await waitFor(() => axe(container));
 
     expect(results).toHaveNoViolations();
   });