From b7af6334b968efd92ac7d6b9c19cc8dab55d0e29 Mon Sep 17 00:00:00 2001
From: Daphne Gold <daphnegold@navapbc.com>
Date: Thu, 17 Aug 2023 11:17:18 -0700
Subject: [PATCH] [ISSUE 359] Implement Hero for static site (#376)

---
 frontend/public/locales/en/common.json       |  5 ++++
 frontend/src/components/Hero.tsx             | 27 ++++++++++++++++++++
 frontend/src/components/Layout.tsx           |  2 ++
 frontend/src/styles/_uswds-theme.scss        |  4 +++
 frontend/stories/components/Hero.stories.tsx | 18 +++++++++++++
 frontend/tests/components/Hero.test.tsx      | 11 ++++++++
 6 files changed, 67 insertions(+)
 create mode 100644 frontend/src/components/Hero.tsx
 create mode 100644 frontend/stories/components/Hero.stories.tsx
 create mode 100644 frontend/tests/components/Hero.test.tsx

diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index fb1210b0b..489be07ce 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -17,6 +17,11 @@
     "nav_menu_toggle": "Menu",
     "title": "Grants.gov"
   },
+  "Hero": {
+    "title": "We're building a new Grants.gov!",
+    "beta": "BETA!",
+    "content": "This new website will be your go-to resource to follow our progress on improving funding opportunity announcements and the application experience."
+  },
   "Footer": {
     "agency_name": "Agency name",
     "return_to_top": "Return to top"
diff --git a/frontend/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
new file mode 100644
index 000000000..3435871ac
--- /dev/null
+++ b/frontend/src/components/Hero.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from "next-i18next";
+import { GridContainer } from "@trussworks/react-uswds";
+
+const Hero = () => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "Hero",
+  });
+
+  return (
+    <div
+      data-testid="hero"
+      className="bg-primary desktop:padding-y-15 tablet:padding-y-2 padding-y-1"
+    >
+      <GridContainer>
+        <h1 className="text-white desktop:font-sans-3xl tablet:font-sans-2xl font-sans-xl">
+          {t("title")}
+        </h1>
+        <p className="usa-intro desktop:font-sans-xl tablet:font-sans-lg font-sans-md">
+          <span className="text-yellow text-bold">{t("beta")}</span>&nbsp;
+          <span className="text-white">{t("content")}</span>
+        </p>
+      </GridContainer>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index fd706dd95..5e1ffd414 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "next-i18next";
 
 import Footer from "./Footer";
 import Header from "./Header";
+import Hero from "./Hero";
 
 type Props = {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ const Layout = ({ children }: Props) => {
         {t("skip_to_main")}
       </a>
       <Header />
+      <Hero />
       <main id="main-content">{children}</main>
       <Footer />
     </div>
diff --git a/frontend/src/styles/_uswds-theme.scss b/frontend/src/styles/_uswds-theme.scss
index ba040f4b2..12b38e92b 100644
--- a/frontend/src/styles/_uswds-theme.scss
+++ b/frontend/src/styles/_uswds-theme.scss
@@ -18,6 +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",
diff --git a/frontend/stories/components/Hero.stories.tsx b/frontend/stories/components/Hero.stories.tsx
new file mode 100644
index 000000000..e8350e66d
--- /dev/null
+++ b/frontend/stories/components/Hero.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/react";
+
+import Hero from "src/components/Hero";
+
+const meta: Meta<typeof Hero> = {
+  title: "Components/Hero",
+  component: Hero,
+};
+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-754&mode=design&t=KpB2R08k4fhBL2DJ-4",
+    },
+  },
+};
diff --git a/frontend/tests/components/Hero.test.tsx b/frontend/tests/components/Hero.test.tsx
new file mode 100644
index 000000000..d124e0fde
--- /dev/null
+++ b/frontend/tests/components/Hero.test.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+
+import Hero from "src/components/Hero";
+
+describe("Hero", () => {
+  it("Renders without errors", () => {
+    render(<Hero />);
+    const hero = screen.getByTestId("hero");
+    expect(hero).toBeInTheDocument();
+  });
+});