[Issue 358] Goal Content for Static Site (#371)

* Story for goal content
* Tests for goal content
Co-authored-by: Daphne Gold <[email protected]>

frontend/public/locales/en/common.json

@@ -3,7 +3,13 @@
     "title": "Home",
     "intro": "This is a template for a React web application using the <LinkToNextJs>Next.js framework</LinkToNextJs>.",
     "body": "This is template includes:<ul><li>Framework for server-side rendered, static, or hybrid React applications</li><li>TypeScript and React testing tools</li><li>U.S. Web Design System for themeable styling and a set of common components</li><li>Type checking, linting, and code formatting tools</li><li>Storybook for a frontend workshop environment</li></ul>",
-    "alert": "This website is a work in progress. To search for funding opportunities and apply, visit <LinkToGrants>www.grants.gov</LinkToGrants>."
+    "alert": "This website is a work in progress. To search for funding opportunities and apply, visit <LinkToGrants>www.grants.gov</LinkToGrants>.",
+    "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",

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 (
+    <div className={`${getBGColor(type)}`}>
+      <GridContainer>
+        <Grid>
+          <USWDSAlert
+            className="border-left-0 bg-transparent padding-left-0 margin-x-neg-2"
+            type={type}
+            headingLevel="h4"
+            slim
+          >
+            {children}
+          </USWDSAlert>
+        </Grid>
+      </GridContainer>
+    </div>
+  );
+};
+
+export default FullWidthAlert;

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 (
+    <GridContainer>
+      <Grid row>
+        <h2 className="margin-bottom-0">{t("goal_title")}</h2>
+      </Grid>
+      <Grid row gap="md">
+        <Grid tablet={{ col: 6 }}>
+          <p className="usa-intro">{t("goal_paragraph_1")}</p>
+        </Grid>
+        <Grid tablet={{ col: 6 }}>
+          <h3>{t("goal_title_2")}</h3>
+          <p>{t("goal_paragraph_2")}</p>
+          <h3>{t("goal_title_3")}</h3>
+          <p>{t("goal_paragraph_3")}</p>
+        </Grid>
+      </Grid>
+    </GridContainer>
+  );
+};
+
+export default GoalContent;

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")}
       </a>
       <Header />
-      <main id="main-content" className="grid-col-fill">
-        <GridContainer>
-          <Grid row>
-            <Grid col>{children}</Grid>
-          </Grid>
-        </GridContainer>
-      </main>
+      <main id="main-content">{children}</main>
       <Footer />
     </div>
   );

frontend/src/pages/index.tsx

@@ -4,7 +4,8 @@ import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Head from "next/head";
 
-import Alert from "../components/Alert";
+import GoalContent from "src/components/GoalContent";
+import FullWidthAlert from "../components/FullWidthAlert";
 
 const Home: NextPage = () => {
   const { t } = useTranslation("common", { keyPrefix: "Index" });
@@ -18,15 +19,16 @@ const Home: NextPage = () => {
       <h1 className="font-sans-2xl tablet:font-sans-3xl margin-y-3 tablet:margin-top-6">
         {t("title")}
       </h1>
-      <Alert type="info">
+      <FullWidthAlert type="info">
         <Trans
           t={t}
           i18nKey="alert"
           components={{
             LinkToGrants: <a href="https://www.grants.gov" />,
           }}
         />
-      </Alert>
+      </FullWidthAlert>
+      <GoalContent />
 
       {/* Demonstration of more complex translated strings, with safe-listed links HTML elements */}
       <p className="usa-intro">

frontend/src/styles/_uswds-theme.scss

@@ -18,7 +18,10 @@ in the form $setting: value,
   // Ensure utility classes always override other styles
   $utilities-use-important: true,
 
-  // Prettier defaults for typography
-  $theme-font-type-sans: "public-sans",
-  $theme-global-link-styles: true
+  $background-color-palettes: (
+    "palette-color-system-cyan-light",
+    "palette-color-system-yellow-light",
+    "palette-color-system-green-cool",
+    "palette-color-system-red-warm"
+  )
 );

frontend/stories/components/Alert.stories.tsx → frontend/stories/components/FullWidthAlert.stories.tsx

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

frontend/stories/components/GoalContent.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import GoalContent from "src/components/GoalContent";
+
+const meta: Meta<typeof GoalContent> = {
+  title: "Goal Content",
+  component: GoalContent,
+};
+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-830&mode=design&t=S3j65DqL38Dpg3qK-4",
+    },
+  },
+};

frontend/tests/components/FullWidthAlert.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+
+import FullWidthAlert from "src/components/FullWidthAlert";
+
+describe("FullWidthAlert", () => {
+  it("Renders without errors", () => {
+    render(<FullWidthAlert type="success">This is a test</FullWidthAlert>);
+    const alert = screen.getByTestId("alert");
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Renders children content in a <p> tag", () => {
+    render(<FullWidthAlert type="success">This is a test</FullWidthAlert>);
+    const alert = screen.getByTestId("alert");
+    expect(alert).toHaveTextContent("This is a test");
+    expect(alert).toContainHTML("p");
+  });
+
+  it("Renders info alert", () => {
+    render(<FullWidthAlert type="info">This is a test</FullWidthAlert>);
+    const alert = screen.getByTestId("alert");
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Renders error alert", () => {
+    render(<FullWidthAlert type="error">This is a test</FullWidthAlert>);
+    const alert = screen.getByTestId("alert");
+    expect(alert).toBeInTheDocument();
+  });
+
+  it("Renders warning alert", () => {
+    render(<FullWidthAlert type="warning">This is a test</FullWidthAlert>);
+    const alert = screen.getByTestId("alert");
+    expect(alert).toBeInTheDocument();
+  });
+});

frontend/tests/components/GoalContent.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+
+import GoalContent from "src/components/GoalContent";
+
+describe("Goal Content", () => {
+  it("Renders without errors", () => {
+    render(<GoalContent />);
+    const goalH2 = screen.getByRole("heading", {
+      level: 2,
+      name: /What's the goal?/i,
+    });
+
+    expect(goalH2).toBeInTheDocument();
+  });
+});

frontend/tests/pages/index.test.tsx

@@ -24,6 +24,17 @@ describe("Index", () => {
     expect(link).toHaveAttribute("href", "https://www.grants.gov");
   });
 
+  it("renders the goals section", () => {
+    render(<Index />);
+
+    const goalH2 = screen.getByRole("heading", {
+      level: 2,
+      name: /What's the goal?/i,
+    });
+
+    expect(goalH2).toBeInTheDocument();
+  });
+
   it("passes accessibility scan", async () => {
     const { container } = render(<Index />);
     const results = await axe(container);