diff --git a/frontend/public/docs/acf_prototype.pdf b/frontend/public/docs/acf_prototype.pdf new file mode 100644 index 000000000..f9a98fbae Binary files /dev/null and b/frontend/public/docs/acf_prototype.pdf differ diff --git a/frontend/public/docs/acl_prototype.pdf b/frontend/public/docs/acl_prototype.pdf new file mode 100644 index 000000000..ca2e5872f Binary files /dev/null and b/frontend/public/docs/acl_prototype.pdf differ diff --git a/frontend/public/docs/cdc_prototype.pdf b/frontend/public/docs/cdc_prototype.pdf new file mode 100644 index 000000000..70a38691c Binary files /dev/null and b/frontend/public/docs/cdc_prototype.pdf differ diff --git a/frontend/public/docs/samhsa_prototype.pdf b/frontend/public/docs/samhsa_prototype.pdf new file mode 100644 index 000000000..19c051b89 Binary files /dev/null and b/frontend/public/docs/samhsa_prototype.pdf differ diff --git a/frontend/public/img/acf_prototype.png b/frontend/public/img/acf_prototype.png new file mode 100644 index 000000000..ec9b1a8ed Binary files /dev/null and b/frontend/public/img/acf_prototype.png differ diff --git a/frontend/public/img/acl_prototype.png b/frontend/public/img/acl_prototype.png new file mode 100644 index 000000000..d7c6ca929 Binary files /dev/null and b/frontend/public/img/acl_prototype.png differ diff --git a/frontend/public/img/cdc_prototype.png b/frontend/public/img/cdc_prototype.png new file mode 100644 index 000000000..441a9399b Binary files /dev/null and b/frontend/public/img/cdc_prototype.png differ diff --git a/frontend/public/img/samhsa_prototype.png b/frontend/public/img/samhsa_prototype.png new file mode 100644 index 000000000..fba50d4ff Binary files /dev/null and b/frontend/public/img/samhsa_prototype.png differ diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index 489be07ce..ffe12b8ba 100644 --- a/frontend/public/locales/en/common.json +++ b/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", diff --git a/frontend/src/components/FundingContent.tsx b/frontend/src/components/FundingContent.tsx new file mode 100644 index 000000000..8f549248a --- /dev/null +++ b/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 ( +
+ + +

{t("fo_title")}

+ + + +

{t("fo_paragraph_1")}

+ + +

{t("fo_paragraph_2")}

+ + + +

{t("fo_title_2")}

+ + +

{t("fo_paragraph_3")}

+ + + {nofoPdfs.map((pdf) => ( + + ))} + + + +

{t("fo_title_3")}

+

{t("fo_paragraph_4")}

+ + +

{t("fo_title_4")}

+

{t("fo_paragraph_5")}

+ + + +
+ ); +}; + +export default FundingContent; diff --git a/frontend/src/components/GoalContent.tsx b/frontend/src/components/GoalContent.tsx index 53fa0a9f0..a25a3a714 100644 --- a/frontend/src/components/GoalContent.tsx +++ b/frontend/src/components/GoalContent.tsx @@ -5,7 +5,7 @@ const GoalContent = () => { const { t } = useTranslation("common", { keyPrefix: "Index" }); return ( - +

{t("goal_title")}

 diff --git a/frontend/src/components/NofoImageLink.tsx b/frontend/src/components/NofoImageLink.tsx new file mode 100644 index 000000000..a039b037b --- /dev/null +++ b/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 ( + + + {alt} + + + ); +}; + +export default NofoImageLink; diff --git a/frontend/src/constants/nofoPdfs.ts b/frontend/src/constants/nofoPdfs.ts new file mode 100644 index 000000000..6439a23f7 --- /dev/null +++ b/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", + }, +]; diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 74dbc4b74..af6c75483 100644 --- a/frontend/src/pages/index.tsx +++ b/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 = () => { /> + {/* Demonstration of more complex translated strings, with safe-listed links HTML elements */}

diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss index 057f7d818..c38473295 100644 --- a/frontend/src/styles/_uswds-theme-custom-styles.scss +++ b/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); + } +} diff --git a/frontend/src/styles/_uswds-theme.scss b/frontend/src/styles/_uswds-theme.scss index 12b38e92b..e4b051c79 100644 --- a/frontend/src/styles/_uswds-theme.scss +++ b/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, diff --git a/frontend/stories/components/FullWidthAlert.stories.tsx b/frontend/stories/components/FullWidthAlert.stories.tsx index fb49d3f86..9f4afdd52 100644 --- a/frontend/stories/components/FullWidthAlert.stories.tsx +++ b/frontend/stories/components/FullWidthAlert.stories.tsx @@ -3,7 +3,7 @@ import { Meta } from "@storybook/react"; import FullWidthAlert from "src/components/FullWidthAlert"; const meta: Meta = { - title: "Full Width Alert", + title: "Components/Full Width Alert", component: FullWidthAlert, }; export default meta; diff --git a/frontend/stories/components/FundingContent.stories.tsx b/frontend/stories/components/FundingContent.stories.tsx new file mode 100644 index 000000000..64dfa7317 --- /dev/null +++ b/frontend/stories/components/FundingContent.stories.tsx @@ -0,0 +1,18 @@ +import { Meta } from "@storybook/react"; + +import FundingContent from "src/components/FundingContent"; + +const meta: Meta = { + 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", + }, + }, +}; diff --git a/frontend/stories/components/GoalContent.stories.tsx b/frontend/stories/components/GoalContent.stories.tsx index 1e0fe39aa..c606ff001 100644 --- a/frontend/stories/components/GoalContent.stories.tsx +++ b/frontend/stories/components/GoalContent.stories.tsx @@ -3,7 +3,7 @@ import { Meta } from "@storybook/react"; import GoalContent from "src/components/GoalContent"; const meta: Meta = { - title: "Goal Content", + title: "Components/Content/Goal Content", component: GoalContent, }; export default meta; diff --git a/frontend/stories/components/NofoImageLink.stories.tsx b/frontend/stories/components/NofoImageLink.stories.tsx new file mode 100644 index 000000000..768df5f48 --- /dev/null +++ b/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 = { + title: "Components/Nofo Image Link", + component: NofoImageLink, +}; +export default meta; +type Story = StoryObj; + +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", + }, +}; diff --git a/frontend/tests/components/FundingContent.test.tsx b/frontend/tests/components/FundingContent.test.tsx new file mode 100644 index 000000000..e1b6e6f51 --- /dev/null +++ b/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(); + const fundingH2 = screen.getByRole("heading", { + level: 2, + name: /Improvements to funding opportunity announcements?/i, + }); + + expect(fundingH2).toBeInTheDocument(); + }); +}); diff --git a/frontend/tests/components/NofoImageLink.test.tsx b/frontend/tests/components/NofoImageLink.test.tsx new file mode 100644 index 000000000..ef6fd773b --- /dev/null +++ b/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( + + ); + const alt = screen.getByAltText("test alt content"); + expect(alt).toBeInTheDocument(); + }); +}); diff --git a/frontend/tests/pages/index.test.tsx b/frontend/tests/pages/index.test.tsx index 17267327f..76bd9753c 100644 --- a/frontend/tests/pages/index.test.tsx +++ b/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(); - const results = await axe(container); + const results = await waitFor(() => axe(container)); expect(results).toHaveNoViolations(); });