[Issue 859] Add BetaAlert component and update its content (#869)

* Add a new `BetaAlert` component and update all pages to use it * Use a single instance of content strings for the alert (delete copies for each page) * Add alert to 404 page * Separate `sticky` concern from `FullWidthAlert` * Update alert content -- Closes #859
HHS · Dec 12, 2023 · 56af1e5 · 56af1e5
1 parent e9071e4
commit 56af1e5
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 127 deletions.
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -1,9 +1,11 @@
 {
+  "Beta_alert": {
+    "alert_title": "Attention! Go to <LinkToGrants>www.grants.gov</LinkToGrants> to search and apply for awards.",
+    "alert": "Simpler.Grants.gov is a work in progress. Thank you for your patience as we build this new website."
+  },
   "Index": {
     "page_title": "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": "Beta! Simpler Grants.gov is a work in progress.",
-    "alert": "To search and apply for grants, please continue using <LinkToGrants>www.grants.gov</LinkToGrants> as we add new functionality to Simpler.Grants.gov.",
     "goal": {
       "title": "The goal",
       "paragraph_1": "We want Grants.gov to be the simplest, most inclusive, and most gratifying tool ever built for posting, finding, sharing, and applying for financial assistance. Our mission is to increase access to grants and improve the grants experience for everyone.",
@@ -39,8 +41,6 @@
   "Research": {
     "page_title": "Research | 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>.",
     "intro": {
       "title": "Our existing research",
       "content": "We conducted extensive research in 2023 to gather insights from applicants, potential applicants, and grantmakers. We’re using these findings to guide our work. And your ongoing feedback will inform and inspire new features as we build a simpler Grants gov together."
@@ -150,8 +150,6 @@
   "Process": {
     "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>.",
     "intro": {
       "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.",
@@ -208,17 +206,13 @@
     }
   },
   "Newsletter": {
-    "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>.",
     "title": "Newsletter signup",
     "intro": "Subscribe to get Simpler.Grants.gov project updates in your inbox!",
     "paragraph_1": "If you sign up for the Simpler.Grants.gov newsletter, we’ll keep you informed of our progress and you’ll know about every opportunity to get involved.",
     "list": "<ul><li>Hear about upcoming milestones</li><li>Be the first to know when we launch new code</li><li>Test out new features and functionalities</li><li>Participate in usability tests and other user research efforts</li><li>Learn about ways to provide feedback </li></ul>",
     "disclaimer": "The Simpler.Grants.gov newsletter is powered by the Sendy data service. Personal information is not stored within Simpler.Grants.gov. "
   },
   "Newsletter_confirmation": {
-    "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>.",
     "title": "You’re subscribed",
     "intro": "You are signed up to receive project updates from Simpler.Grants.gov.",
     "paragraph_1": "Thank you for subscribing. We’ll keep you informed of our progress and you’ll know about every opportunity to get involved.",
@@ -227,8 +221,6 @@
     "disclaimer": "The Simpler.Grants.gov newsletter is powered by the Sendy data service. Personal information is not stored within Simpler.Grants.gov. "
   },
   "Newsletter_unsubscribe": {
-    "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>.",
     "title": "You have unsubscribed",
     "intro": "You will no longer receive project updates from Simpler.Grants.gov. ",
     "paragraph_1": "Did you unsubscribe by accident? Sign up again.",

diff --git a/frontend/src/components/BetaAlert.tsx b/frontend/src/components/BetaAlert.tsx
@@ -0,0 +1,41 @@
+import { ExternalRoutes } from "src/constants/routes";
+
+import { Trans, useTranslation } from "next-i18next";
+
+import FullWidthAlert from "./FullWidthAlert";
+
+const BetaAlert = () => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "Beta_alert",
+  });
+
+  return (
+    <div
+      data-testid="beta-alert"
+      className="desktop:position-sticky top-0 z-200"
+    >
+      <FullWidthAlert
+        type="info"
+        heading={
+          <Trans
+            t={t}
+            i18nKey="alert_title"
+            components={{
+              LinkToGrants: (
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={ExternalRoutes.GRANTS_HOME}
+                />
+              ),
+            }}
+          />
+        }
+      >
+        {t("alert")}
+      </FullWidthAlert>
+    </div>
+  );
+};
+
+export default BetaAlert;
diff --git a/frontend/src/components/FullWidthAlert.tsx b/frontend/src/components/FullWidthAlert.tsx
@@ -25,7 +25,7 @@ const getBGColor = (type: Props["type"]) => {
 
 const FullWidthAlert = ({ type, heading, children }: Props) => {
   return (
-    <div className={`${getBGColor(type)} desktop:position-sticky top-0 z-200`}>
+    <div className={`${getBGColor(type)}`}>
       <GridContainer className="padding-y-1 tablet-lg:padding-y-2">
         <Grid>
           <USWDSAlert

diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
@@ -5,17 +5,24 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import { GridContainer } from "@trussworks/react-uswds";
 
+import BetaAlert from "../components/BetaAlert";
+
 const PageNotFound: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "ErrorPages" });
 
   return (
-    <GridContainer className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6 border-bottom-2px border-base-lightest">
-      <h1 className="nj-h1">{t("page_not_found.title")}</h1>
-      <p className="margin-bottom-2">{t("page_not_found.message_content_1")}</p>
-      <Link className="usa-button" href="/" key="returnToHome">
-        {t("page_not_found.visit_homepage_button")}
-      </Link>
-    </GridContainer>
+    <>
+      <BetaAlert />
+      <GridContainer className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-15">
+        <h1 className="nj-h1">{t("page_not_found.title")}</h1>
+        <p className="margin-bottom-2">
+          {t("page_not_found.message_content_1")}
+        </p>
+        <Link className="usa-button" href="/" key="returnToHome">
+          {t("page_not_found.visit_homepage_button")}
+        </Link>
+      </GridContainer>
+    </>
   );
 };
 

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -1,11 +1,10 @@
 import type { GetStaticProps, NextPage } from "next";
-import { ExternalRoutes } from "src/constants/routes";
 
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 import Hero from "../components/Hero";
 import IndexGoalContent from "./content/IndexGoalContent";
 import ProcessAndResearchContent from "./content/ProcessAndResearchContent";
@@ -17,21 +16,7 @@ const Home: NextPage = () => {
     <>
       <PageSEO title={t("page_title")} description={t("meta_description")} />
       <Hero />
-      <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>
+      <BetaAlert />
       <IndexGoalContent />
       <ProcessAndResearchContent />
     </>

diff --git a/frontend/src/pages/newsletter-confirmation.tsx b/frontend/src/pages/newsletter-confirmation.tsx
@@ -1,6 +1,5 @@
 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";
@@ -9,7 +8,7 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 
 const NewsletterConfirmation: NextPage = () => {
   const { t } = useTranslation("common", {
@@ -19,21 +18,7 @@ const NewsletterConfirmation: NextPage = () => {
   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>
+      <BetaAlert />
       <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">

diff --git a/frontend/src/pages/newsletter-unsubscribe.tsx b/frontend/src/pages/newsletter-unsubscribe.tsx
@@ -1,6 +1,5 @@
 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";
@@ -9,7 +8,7 @@ import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 
 const NewsletterUnsubscribe: NextPage = () => {
   const { t } = useTranslation("common", {
@@ -19,21 +18,7 @@ const NewsletterUnsubscribe: NextPage = () => {
   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>
+      <BetaAlert />
       <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">

diff --git a/frontend/src/pages/newsletter.tsx b/frontend/src/pages/newsletter.tsx
@@ -1,6 +1,5 @@
 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";
@@ -14,29 +13,15 @@ import {
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 
 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>
+      <BetaAlert />
       <Breadcrumbs breadcrumbList={NEWSLETTER_CRUMBS} />
 
       <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">

diff --git a/frontend/src/pages/process.tsx b/frontend/src/pages/process.tsx
@@ -1,13 +1,12 @@
 import type { GetStaticProps, NextPage } from "next";
 import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
-import { ExternalRoutes } from "src/constants/routes";
 
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 import ProcessContent from "./content/ProcessIntro";
 import ProcessInvolved from "./content/ProcessInvolved";
 import ProcessMilestones from "./content/ProcessMilestones";
@@ -18,21 +17,7 @@ const Process: NextPage = () => {
   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>
+      <BetaAlert />
       <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
       <ProcessContent />
       <div className="padding-top-4 bg-gray-5">

diff --git a/frontend/src/pages/research.tsx b/frontend/src/pages/research.tsx
@@ -1,14 +1,13 @@
 import type { GetStaticProps, NextPage } from "next";
 import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
-import { ExternalRoutes } from "src/constants/routes";
 import ResearchIntro from "src/pages/content/ResearchIntro";
 
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
-import FullWidthAlert from "../components/FullWidthAlert";
+import BetaAlert from "../components/BetaAlert";
 import ResearchArchetypes from "./content/ResearchArchetypes";
 import ResearchImpact from "./content/ResearchImpact";
 import ResearchMethodology from "./content/ResearchMethodology";
@@ -20,21 +19,7 @@ const Research: NextPage = () => {
   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>
+      <BetaAlert />
       <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
       <ResearchIntro />
       <ResearchMethodology />

diff --git a/frontend/stories/components/BetaAlert.stories.tsx b/frontend/stories/components/BetaAlert.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import BetaAlert from "src/components/BetaAlert";
+
+const meta: Meta<typeof BetaAlert> = {
+  title: "Components/BetaAlert",
+  component: BetaAlert,
+};
+export default meta;
+
+export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?type=design&node-id=2157-633&mode=design&t=JS0JebJ4QTnv0jor-0",
+    },
+  },
+};