-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add newsletter pages, content, and Sendy form HTML
- Loading branch information
1 parent
1c05c3c
commit 2f948fc
Showing
8 changed files
with
364 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import type { GetStaticProps, NextPage } from "next"; | ||
| import { NEWSLETTER_CONFIRMATION_CRUMBS } from "src/constants/breadcrumbs"; | ||
| import { ExternalRoutes } from "src/constants/routes"; | ||
|
|
||
| import { Trans, useTranslation } from "next-i18next"; | ||
| import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | ||
| import Link from "next/link"; | ||
| import { Grid, GridContainer } from "@trussworks/react-uswds"; | ||
|
|
||
| import Breadcrumbs from "src/components/Breadcrumbs"; | ||
| import PageSEO from "src/components/PageSEO"; | ||
| import FullWidthAlert from "../components/FullWidthAlert"; | ||
|
|
||
| const NewsletterConfirmation: NextPage = () => { | ||
| const { t } = useTranslation("common", { | ||
| keyPrefix: "Newsletter_confirmation", | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <PageSEO title={t("page_title")} description={t("meta_description")} /> | ||
| <FullWidthAlert type="info" heading={t("alert_title")}> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="alert" | ||
| components={{ | ||
| LinkToGrants: ( | ||
| <a | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| href={ExternalRoutes.GRANTS_HOME} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </FullWidthAlert> | ||
| <Breadcrumbs breadcrumbList={NEWSLETTER_CONFIRMATION_CRUMBS} /> | ||
|
|
||
| <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> | ||
| <p className="usa-intro font-sans-md tablet:font-sans-lg desktop-lg:font-sans-xl margin-bottom-0"> | ||
| {t("intro")} | ||
| </p> | ||
| <Grid row gap className="flex-align-start"> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <p className="usa-intro">{t("paragraph_1")}</p> | ||
| </Grid> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <h2 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05"> | ||
| {t("heading")} | ||
| </h2> | ||
| <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="paragraph_2" | ||
| components={{ | ||
| "process-link": <Link href="/process" />, | ||
| "research-link": <Link href="/research" />, | ||
| }} | ||
| /> | ||
| </p> | ||
| </Grid> | ||
| </Grid> | ||
| </GridContainer> | ||
| <GridContainer className="padding-bottom-5 tablet:padding-top-3 desktop-lg:padding-top-3"> | ||
| <p className="font-sans-3xs text-base-dark">{t("disclaimer")}</p> | ||
| </GridContainer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| // Change this to GetServerSideProps if you're using server-side rendering | ||
| export const getStaticProps: GetStaticProps = async ({ locale }) => { | ||
| const translations = await serverSideTranslations(locale ?? "en"); | ||
| return { props: { ...translations } }; | ||
| }; | ||
|
|
||
| export default NewsletterConfirmation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import type { GetStaticProps, NextPage } from "next"; | ||
| import { NEWSLETTER_UNSUBSCRIBE_CRUMBS } from "src/constants/breadcrumbs"; | ||
| import { ExternalRoutes } from "src/constants/routes"; | ||
|
|
||
| import { Trans, useTranslation } from "next-i18next"; | ||
| import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | ||
| import Link from "next/link"; | ||
| import { Grid, GridContainer } from "@trussworks/react-uswds"; | ||
|
|
||
| import Breadcrumbs from "src/components/Breadcrumbs"; | ||
| import PageSEO from "src/components/PageSEO"; | ||
| import FullWidthAlert from "../components/FullWidthAlert"; | ||
|
|
||
| const NewsletterUnsubscribe: NextPage = () => { | ||
| const { t } = useTranslation("common", { | ||
| keyPrefix: "Newsletter_unsubscribe", | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <PageSEO title={t("page_title")} description={t("meta_description")} /> | ||
| <FullWidthAlert type="info" heading={t("alert_title")}> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="alert" | ||
| components={{ | ||
| LinkToGrants: ( | ||
| <a | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| href={ExternalRoutes.GRANTS_HOME} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </FullWidthAlert> | ||
| <Breadcrumbs breadcrumbList={NEWSLETTER_UNSUBSCRIBE_CRUMBS} /> | ||
|
|
||
| <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> | ||
| <p className="usa-intro font-sans-md tablet:font-sans-lg desktop-lg:font-sans-xl margin-bottom-0"> | ||
| {t("intro")} | ||
| </p> | ||
| <Grid row gap className="flex-align-start"> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <p className="usa-intro">{t("paragraph_1")}</p> | ||
| <Link className="usa-button margin-bottom-4" href="/newsletter"> | ||
| {t("button_resub")} | ||
| </Link> | ||
| </Grid> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <h2 className="font-sans-md tablet-lg:font-sans-lg tablet-lg:margin-bottom-05"> | ||
| {t("heading")} | ||
| </h2> | ||
| <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="paragraph_2" | ||
| components={{ | ||
| "process-link": <Link href="/process" />, | ||
| "research-link": <Link href="/research" />, | ||
| }} | ||
| /> | ||
| </p> | ||
| </Grid> | ||
| </Grid> | ||
| </GridContainer> | ||
| <GridContainer className="padding-bottom-5 tablet:padding-top-3 desktop-lg:padding-top-3"> | ||
| <p className="font-sans-3xs text-base-dark">{t("disclaimer")}</p> | ||
| </GridContainer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| // Change this to GetServerSideProps if you're using server-side rendering | ||
| export const getStaticProps: GetStaticProps = async ({ locale }) => { | ||
| const translations = await serverSideTranslations(locale ?? "en"); | ||
| return { props: { ...translations } }; | ||
| }; | ||
|
|
||
| export default NewsletterUnsubscribe; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import type { GetStaticProps, NextPage } from "next"; | ||
| import { NEWSLETTER_CRUMBS } from "src/constants/breadcrumbs"; | ||
| import { ExternalRoutes } from "src/constants/routes"; | ||
|
|
||
| import { Trans, useTranslation } from "next-i18next"; | ||
| import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | ||
| import { | ||
| Button, | ||
| Grid, | ||
| GridContainer, | ||
| Label, | ||
| TextInput, | ||
| } from "@trussworks/react-uswds"; | ||
|
|
||
| import Breadcrumbs from "src/components/Breadcrumbs"; | ||
| import PageSEO from "src/components/PageSEO"; | ||
| import FullWidthAlert from "../components/FullWidthAlert"; | ||
|
|
||
| const Newsletter: NextPage = () => { | ||
| const { t } = useTranslation("common", { keyPrefix: "Newsletter" }); | ||
|
|
||
| return ( | ||
| <> | ||
| <PageSEO title={t("page_title")} description={t("meta_description")} /> | ||
| <FullWidthAlert type="info" heading={t("alert_title")}> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="alert" | ||
| components={{ | ||
| LinkToGrants: ( | ||
| <a | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| href={ExternalRoutes.GRANTS_HOME} | ||
| /> | ||
| ), | ||
| }} | ||
| /> | ||
| </FullWidthAlert> | ||
| <Breadcrumbs breadcrumbList={NEWSLETTER_CRUMBS} /> | ||
|
|
||
| <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> | ||
| <p className="usa-intro font-sans-md tablet:font-sans-lg desktop-lg:font-sans-xl margin-bottom-0"> | ||
| {t("intro")} | ||
| </p> | ||
| <Grid row gap className="flex-align-start"> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <p className="usa-intro">{t("paragraph_1")}</p> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="list" | ||
| components={{ | ||
| ul: ( | ||
| <ul className="usa-list margin-top-0 tablet-lg:margin-top-3 font-sans-md line-height-sans-4" /> | ||
| ), | ||
| li: <li />, | ||
| }} | ||
| /> | ||
| </Grid> | ||
| <Grid tabletLg={{ col: 6 }}> | ||
| <form | ||
| data-testid="sendy-form" | ||
| action="https://communications.grants.gov/app/subscribe" | ||
| method="POST" | ||
| accept-charset="utf-8" | ||
| > | ||
| <Label htmlFor="name">First Name</Label> | ||
| <TextInput type="text" name="name" id="name" /> | ||
| <Label htmlFor="LastName">Last Name</Label> | ||
| <TextInput type="text" name="LastName" id="LastName" /> | ||
| <div className="display-none"> | ||
| <Label htmlFor="hp">HP</Label> | ||
| <TextInput type="text" name="hp" id="hp" /> | ||
| </div> | ||
| <Label htmlFor="email">Email</Label> | ||
| <TextInput type="email" name="email" id="email" /> | ||
| <input type="hidden" name="list" value="A2zerhEC59Ea6mzTgzdTgw" /> | ||
| <input type="hidden" name="subform" value="yes" /> | ||
| <Button | ||
| type="submit" | ||
| name="submit" | ||
| id="submit" | ||
| className="margin-top-4" | ||
| > | ||
| Subscribe | ||
| </Button> | ||
| </form> | ||
| </Grid> | ||
| </Grid> | ||
| </GridContainer> | ||
| <GridContainer className="padding-bottom-5 tablet:padding-top-3 desktop-lg:padding-top-3"> | ||
| <p className="font-sans-3xs text-base-dark">{t("disclaimer")}</p> | ||
| </GridContainer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| // Change this to GetServerSideProps if you're using server-side rendering | ||
| export const getStaticProps: GetStaticProps = async ({ locale }) => { | ||
| const translations = await serverSideTranslations(locale ?? "en"); | ||
| return { props: { ...translations } }; | ||
| }; | ||
|
|
||
| export default Newsletter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { render, waitFor } from "@testing-library/react"; | ||
| import { axe } from "jest-axe"; | ||
| import NewsletterConfirmation from "src/pages/newsletter-confirmation"; | ||
|
|
||
| describe("Newsletter", () => { | ||
| it("passes accessibility scan", async () => { | ||
| const { container } = render(<NewsletterConfirmation />); | ||
| const results = await waitFor(() => axe(container)); | ||
|
|
||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { render, waitFor } from "@testing-library/react"; | ||
| import { axe } from "jest-axe"; | ||
| import NewsletterUnsubscribe from "src/pages/newsletter-unsubscribe"; | ||
|
|
||
| describe("Newsletter", () => { | ||
| it("passes accessibility scan", async () => { | ||
| const { container } = render(<NewsletterUnsubscribe />); | ||
| const results = await waitFor(() => axe(container)); | ||
|
|
||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { render, screen, waitFor } from "@testing-library/react"; | ||
| import { axe } from "jest-axe"; | ||
| import Newsletter from "src/pages/newsletter"; | ||
|
|
||
| describe("Newsletter", () => { | ||
| it("renders signup form with a submit button", () => { | ||
| render(<Newsletter />); | ||
|
|
||
| const sendyform = screen.getByTestId("sendy-form"); | ||
|
|
||
| expect(sendyform).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("passes accessibility scan", async () => { | ||
| const { container } = render(<Newsletter />); | ||
| const results = await waitFor(() => axe(container)); | ||
|
|
||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
| }); |