From e760b7d21e18fc0fa37770b8b5d505caba42701b Mon Sep 17 00:00:00 2001 From: Sammy Date: Wed, 16 Aug 2023 09:04:07 -0400 Subject: [PATCH] [Issue 358] Goal Content for Static Site (#371) * Story for goal content * Tests for goal content Co-authored-by: Daphne Gold --- frontend/public/locales/en/common.json | 8 +++- frontend/src/components/Alert.tsx | 16 ------- frontend/src/components/FullWidthAlert.tsx | 44 +++++++++++++++++++ frontend/src/components/GoalContent.tsx | 27 ++++++++++++ frontend/src/components/Layout.tsx | 9 +--- frontend/src/pages/index.tsx | 8 ++-- frontend/src/styles/_uswds-theme.scss | 9 ++-- ...stories.tsx => FullWidthAlert.stories.tsx} | 7 +-- .../components/GoalContent.stories.tsx | 18 ++++++++ frontend/tests/components/Alert.test.tsx | 18 -------- .../tests/components/FullWidthAlert.test.tsx | 36 +++++++++++++++ .../tests/components/GoalContent.test.tsx | 15 +++++++ frontend/tests/pages/index.test.tsx | 11 +++++ 13 files changed, 174 insertions(+), 52 deletions(-) delete mode 100644 frontend/src/components/Alert.tsx create mode 100644 frontend/src/components/FullWidthAlert.tsx create mode 100644 frontend/src/components/GoalContent.tsx rename frontend/stories/components/{Alert.stories.tsx => FullWidthAlert.stories.tsx} (82%) create mode 100644 frontend/stories/components/GoalContent.stories.tsx delete mode 100644 frontend/tests/components/Alert.test.tsx create mode 100644 frontend/tests/components/FullWidthAlert.test.tsx create mode 100644 frontend/tests/components/GoalContent.test.tsx diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index c0567727e..fb1210b0b 100644 --- a/frontend/public/locales/en/common.json +++ b/frontend/public/locales/en/common.json @@ -3,7 +3,13 @@ "title": "Home", "intro": "This is a template for a React web application using the Next.js framework.", "body": "This is template includes:", - "alert": "This website is a work in progress. To search for funding opportunities and apply, visit www.grants.gov." + "alert": "This website is a work in progress. To search for funding opportunities and apply, visit www.grants.gov.", + "goal_title": "What's the goal?", + "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 create a more equitable grantmaking experience that ensures all communities are served by the process.", + "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." }, "Header": { "nav_link_home": "Home", diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx deleted file mode 100644 index e7ce26cb4..000000000 --- a/frontend/src/components/Alert.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Alert as USWDSAlert } from "@trussworks/react-uswds"; - -type Props = { - type: "success" | "warning" | "error" | "info"; - children: React.ReactNode; -}; - -const Alert = ({ type, children }: Props) => { - return ( - - {children} - - ); -}; - -export default Alert; diff --git a/frontend/src/components/FullWidthAlert.tsx b/frontend/src/components/FullWidthAlert.tsx new file mode 100644 index 000000000..af6957ebe --- /dev/null +++ b/frontend/src/components/FullWidthAlert.tsx @@ -0,0 +1,44 @@ +import { + Grid, + GridContainer, + Alert as USWDSAlert, +} from "@trussworks/react-uswds"; + +type Props = { + type: "success" | "warning" | "error" | "info"; + children: React.ReactNode; +}; + +const getBGColor = (type: Props["type"]) => { + switch (type) { + case "success": + return "bg-green-cool-5"; + case "warning": + return "bg-yellow-5"; + case "error": + return "bg-red-warm-10"; + case "info": + return "bg-cyan-5"; + } +}; + +const FullWidthAlert = ({ type, children }: Props) => { + return ( +
+ + + + {children} + + + +
+ ); +}; + +export default FullWidthAlert; diff --git a/frontend/src/components/GoalContent.tsx b/frontend/src/components/GoalContent.tsx new file mode 100644 index 000000000..53fa0a9f0 --- /dev/null +++ b/frontend/src/components/GoalContent.tsx @@ -0,0 +1,27 @@ +import { useTranslation } from "next-i18next"; +import { Grid, GridContainer } from "@trussworks/react-uswds"; + +const GoalContent = () => { + const { t } = useTranslation("common", { keyPrefix: "Index" }); + + return ( + + +

{t("goal_title")}

+ + + +

{t("goal_paragraph_1")}

+ + +

{t("goal_title_2")}

+

{t("goal_paragraph_2")}

+

{t("goal_title_3")}

+

{t("goal_paragraph_3")}

+ + + + ); +}; + +export default GoalContent; diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 25e71d040..fd706dd95 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,5 +1,4 @@ import { useTranslation } from "next-i18next"; -import { Grid, GridContainer } from "@trussworks/react-uswds"; import Footer from "./Footer"; import Header from "./Header"; @@ -20,13 +19,7 @@ const Layout = ({ children }: Props) => { {t("skip_to_main")}
-
- - - {children} - - -
+
{children}