#217 Migrate Footer (#222)

* set up next.js environment and add workflows

* testing that branch protection rule works when jest tests fail

* updated ci test script to use -u flag

* testing that failed tests prevent pushing

* retesting branch protection rule

* testing that lack of code coverage causes push to fail

* testing that successful tests allow the push

* testing failing tests

* all tests should now pass

* added .env* to gitignore

* added header, user model, and user context

* split links into separate components for each user type and activeUser state

* updated header to leverage react context api

* created header context, completed header, hamburger menu, signout modal and popup modal

* added unit tests for header and related components

* add footer, minor styling updates to page container, home page

src/__tests__/components/footer/__snapshots__/footer.snapshot.tsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer renders the Footer unchanged. 1`] = `
+<div>
+  <div
+    class="footer_container"
+  >
+    <footer
+      class="footer"
+    >
+      <div
+        class="icons"
+      >
+        <button
+          aria-label="open 8by8 Facebook page"
+          class="transparent_btn"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 1024 1024"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-92.4 233.5h-63.9c-50.1 0-59.8 23.8-59.8 58.8v77.1h119.6l-15.6 120.7h-104V912H539.2V602.2H434.9V481.4h104.3v-89c0-103.3 63.1-159.6 155.3-159.6 44.2 0 82.1 3.3 93.2 4.8v107.9z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-label="open 8by8 LinkedIn page"
+          class="transparent_btn"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 1024 1024"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-label="open 8by8 Instagram page"
+          class="transparent_btn"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 1024 1024"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M512 306.9c-113.5 0-205.1 91.6-205.1 205.1S398.5 717.1 512 717.1 717.1 625.5 717.1 512 625.5 306.9 512 306.9zm0 338.4c-73.4 0-133.3-59.9-133.3-133.3S438.6 378.7 512 378.7 645.3 438.6 645.3 512 585.4 645.3 512 645.3zm213.5-394.6c-26.5 0-47.9 21.4-47.9 47.9s21.4 47.9 47.9 47.9 47.9-21.3 47.9-47.9a47.84 47.84 0 0 0-47.9-47.9zM911.8 512c0-55.2.5-109.9-2.6-165-3.1-64-17.7-120.8-64.5-167.6-46.9-46.9-103.6-61.4-167.6-64.5-55.2-3.1-109.9-2.6-165-2.6-55.2 0-109.9-.5-165 2.6-64 3.1-120.8 17.7-167.6 64.5C132.6 226.3 118.1 283 115 347c-3.1 55.2-2.6 109.9-2.6 165s-.5 109.9 2.6 165c3.1 64 17.7 120.8 64.5 167.6 46.9 46.9 103.6 61.4 167.6 64.5 55.2 3.1 109.9 2.6 165 2.6 55.2 0 109.9.5 165-2.6 64-3.1 120.8-17.7 167.6-64.5 46.9-46.9 61.4-103.6 64.5-167.6 3.2-55.1 2.6-109.8 2.6-165zm-88 235.8c-7.3 18.2-16.1 31.8-30.2 45.8-14.1 14.1-27.6 22.9-45.8 30.2C695.2 844.7 570.3 840 512 840c-58.3 0-183.3 4.7-235.9-16.1-18.2-7.3-31.8-16.1-45.8-30.2-14.1-14.1-22.9-27.6-30.2-45.8C179.3 695.2 184 570.3 184 512c0-58.3-4.7-183.3 16.1-235.9 7.3-18.2 16.1-31.8 30.2-45.8s27.6-22.9 45.8-30.2C328.7 179.3 453.7 184 512 184s183.3-4.7 235.9 16.1c18.2 7.3 31.8 16.1 45.8 30.2 14.1 14.1 22.9 27.6 30.2 45.8C844.7 328.7 840 453.7 840 512c0 58.3 4.7 183.2-16.2 235.8z"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="description"
+      >
+        <p>
+          Copyright © 2021
+        </p>
+        <p>
+          8BY8 is a nonprofit organization dedicated to stopping hate against Asian American Pacific Islander communities through voter registration and turnout.
+        </p>
+      </div>
+    </footer>
+  </div>
+</div>
+`;

src/__tests__/components/footer/footer.snapshot.tsx

@@ -0,0 +1,11 @@
+import {render, cleanup} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Footer from '@/components/footer/footer';
+
+describe('Footer', () => {
+  afterEach(cleanup);
+  it('renders the Footer unchanged.', () => {
+    const { container } = render(<Footer />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/__tests__/components/footer/footer.spec.tsx

@@ -0,0 +1,53 @@
+import {render, screen, cleanup} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import Footer from '@/components/footer/footer';
+
+describe('Footer', () => {
+  afterEach(cleanup);
+  it('opens the 8by8 facebook link when the corresponding button is clicked and isPreview is false.', async () => {
+    window.open = jest.fn();
+    const user = userEvent.setup();
+    render (
+      <Footer />
+    );
+    const fbBtn = screen.getAllByRole('button')[0];
+    await user.click(fbBtn);
+    expect(window.open).toHaveBeenCalledWith("https://www.facebook.com/8by8vote/", "_blank");
+  });
+
+  it('opens the 8by8 linkedin link when the corresponding button is clicked and isPreview is false.', async () => {
+    window.open = jest.fn();
+    const user = userEvent.setup();
+    render (
+      <Footer />
+    );
+    const linkedInBtn = screen.getAllByRole('button')[1];
+    await user.click(linkedInBtn);
+    expect(window.open).toHaveBeenCalledWith("https://www.linkedin.com/company/8by8vote/", "_blank");
+  });
+
+  it('opens the 8by8 instagram link when the corresponding button is clicked and isPreview is false.', async () => {
+    window.open = jest.fn();
+    const user = userEvent.setup();
+    render (
+      <Footer />
+    );
+    const instaBtn = screen.getAllByRole('button')[2];
+    await user.click(instaBtn);
+    expect(window.open).toHaveBeenCalledWith("https://www.instagram.com/8by8vote/", "_blank");
+  });
+
+  it('does not call window.open when isPreview is true.', async () => {
+    window.open = jest.fn();
+    const user = userEvent.setup();
+    render (
+      <Footer isPreview/>
+    );
+    const socialButtons = screen.getAllByRole('button');
+    for(const btn of socialButtons) {
+      await user.click(btn);
+    }
+    expect(window.open).not.toHaveBeenCalled();
+  });
+});

src/__tests__/components/header/__snapshots__/header.snapshot.tsx.snap

@@ -178,9 +178,7 @@ exports[`Header renders the header unchanged 1`] = `
     class="popup_modal_dark_theme"
     role="dialog"
   >
-    <div
-      class="dark"
-    >
+    <div>
       <div
         class="close_btn_container"
       >

src/__tests__/components/header/icons-tray.spec.tsx

@@ -39,7 +39,6 @@ describe('IconsTray', () => {
   it('opens the feedback form when the feedback button is clicked.', async () => {
     const user = userEvent.setup();
     window.open = jest.fn();
-    jest.spyOn(window, 'open');
     render(
       <MockHeaderCtx 
         menuState={HamburgerMenuState.closed}

src/components/footer/footer.tsx

@@ -0,0 +1,56 @@
+import styles from '@/styles/modules/components/footer/footer.module.scss';
+import {
+  AiFillFacebook,
+  AiFillLinkedin,
+  AiOutlineInstagram,
+} from "react-icons/ai";
+
+type FooterProps = {
+  isPreview?:boolean;
+}
+
+export default function Footer({ isPreview }:FooterProps) {
+  return (
+    <div className={styles.footer_container}>
+      <footer className={styles.footer}>
+        <div className={styles.icons}>
+          <button 
+            className={styles.transparent_btn}
+            onClick={() =>
+              !isPreview && window.open("https://www.facebook.com/8by8vote/", "_blank")
+            }
+            aria-label="open 8by8 Facebook page"
+          >
+            <AiFillFacebook />
+          </button>
+          <button
+            className={styles.transparent_btn} 
+            onClick={() =>
+              !isPreview && window.open("https://www.linkedin.com/company/8by8vote/", "_blank")
+            }
+            aria-label="open 8by8 LinkedIn page"
+          >
+            <AiFillLinkedin />
+          </button>
+          <button
+            className={styles.transparent_btn} 
+            onClick={() =>
+              !isPreview && window.open("https://www.instagram.com/8by8vote/", "_blank")
+            }
+            aria-label="open 8by8 Instagram page"
+          >
+            <AiOutlineInstagram />
+          </button>
+        </div>
+        <div className={styles.description}>
+          <p>Copyright © 2021</p>
+          <p>
+            8BY8 is a nonprofit organization dedicated to stopping hate against
+            Asian American Pacific Islander communities through voter registration
+            and turnout.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/components/page-container.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import styles from "../styles/modules/components/page-container.module.scss";
+import styles from "../styles/modules/components/utils/page-container.module.scss";
 
 export default function PageContainer({children} : PropsWithChildren) {
   return (

src/components/utils/popup-modal.tsx

@@ -34,18 +34,18 @@ export default function PopupModal ({ariaLabel, theme, isOpen, closeModal, child
         }
       }}
     >
-        <div className={theme}>
-          <div className={styles.close_btn_container}>
-            <button
-              className={styles.close_btn}
-              aria-label="close dialog"
-              onClick={closeModal}
-            >
-              <AiOutlineClose />
-            </button>
-          </div>
-          <div className={styles.content}>{children}</div>
+      <div>
+        <div className={styles.close_btn_container}>
+          <button
+            className={styles.close_btn}
+            aria-label="close dialog"
+            onClick={closeModal}
+          >
+            <AiOutlineClose />
+          </button>
         </div>
+        <div className={styles.content}>{children}</div>
+      </div>
     </dialog>
   );
 }

src/pages/_app.tsx

@@ -2,18 +2,20 @@ import type { AppProps } from 'next/app'
 import Head from 'next/head';
 import { UserContextProvider } from '@/contexts/user-context';
 import Header from '@/components/header/header';
+import Footer from '@/components/footer/footer';
 import '@/styles/main.scss'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
-    <Head>
-      <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0"/>
-    </Head>
-    <UserContextProvider> 
-      <Header />
-      <Component {...pageProps} />
-    </UserContextProvider>
+      <Head>
+        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0"/>
+      </Head>
+      <UserContextProvider> 
+        <Header />
+        <Component {...pageProps} />
+        <Footer />
+      </UserContextProvider>
     </>
   );
 }

src/styles/modules/components/footer/footer.module.scss

@@ -0,0 +1,39 @@
+@use '../../../partials';
+
+.footer_container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.footer {
+  background-color: partials.$color-black-8by8;
+  padding: 30px;
+  max-width: partials.$page-width-max;
+  min-width: partials.$page-width-min;
+}
+
+.icons {
+  padding: 22px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.transparent_btn {
+  background-color: transparent;
+  border: none;
+  margin: 0 15px;
+  svg {
+    color: partials.$color-white;
+    font-size: 30px;
+  }
+}
+
+.description {
+  p {
+    @extend .b6;
+    color: partials.$color-white;
+    text-align: center;
+    margin: 5px;
+  }
+}

src/styles/modules/components/utils/page-container.module.scss

@@ -4,10 +4,9 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  position: relative;
-  top: partials.$navigation-height;
+  height: 100%;
+  margin-top: partials.$navigation-height;
   min-width: partials.$page-width-min;
-  @include partials.z-index-base();
 }
 
 .inner_container {

src/styles/modules/pages/home.module.scss

@@ -81,7 +81,6 @@
       @extend .link;
       color: partials.$color-teal;
       padding-bottom: 2em;
-      z-index: 1;
       position: relative;
       top: -1.8em;