feat: jurisdictionalized public footer

sites/public/src/components/shared/CustomSiteFooter.module.scss

@@ -27,6 +27,9 @@
   flex-direction: column;
   align-items: flex-start;
   margin: auto;
+  a {
+    text-decoration: none;
+  }
 }
 
 .icon-container {
@@ -74,9 +77,10 @@
 }
 
 .text-container {
-  display: flex;
-  flex-direction: column;
   margin-block-end: var(--seeds-s4);
+  a {
+    text-decoration: underline;
+  }
 }
 
 .text-container:last-of-type {

sites/public/src/components/shared/CustomSiteFooter.tsx

@@ -1,49 +1,70 @@
 import React from "react"
-import Link from "next/link"
-import { t } from "@bloom-housing/ui-components"
+import { Link } from "@bloom-housing/ui-seeds"
 import MaxWidthLayout from "../../layouts/max-width"
+import {
+  FooterContent,
+  FooterLinks,
+  getGenericFooterLinksContent,
+  getGenericFooterTextContent,
+} from "../../static_content/generic_footer_content"
+import {
+  getJurisdictionFooterLinksContent,
+  getJurisdictionFooterTextContent,
+} from "../../static_content/jurisdiction_footer_content"
 import styles from "./CustomSiteFooter.module.scss"
 
 const CustomSiteFooter = () => {
+  const textContent: FooterContent | null =
+    getJurisdictionFooterTextContent() || getGenericFooterTextContent()
+  const footerLinksContent: FooterLinks | null =
+    getJurisdictionFooterLinksContent() || getGenericFooterLinksContent()
+
+  const showContentFooter = textContent.logo || textContent.textSections?.length > 0
+  const showLinksFooter = footerLinksContent.links?.length > 0 || footerLinksContent.cityString
+
+  if (!showContentFooter && !showLinksFooter) return <></>
+
   return (
     <footer>
-      <MaxWidthLayout className={styles["footer-container"]}>
-        <div className={styles["footer-content-container"]}>
-          <div className={styles["footer"]}>
-            <div className={styles["icon-container"]}>
-              <a href={"/"} className={styles["jurisdiction-icon"]}>
-                <img src="/images/default-housing-logo.svg" alt={"Jurisdiction Logo"} />
-              </a>
-            </div>
-            <div className={styles["text-container"]}>
-              <span>{t("footer.content.projectOf")}</span>
-              <Link href={"/"}>Mayor's Office of Housing Development</Link>
-            </div>
-            <div className={styles["text-container"]}>
-              <span>{t("footer.content.partnership")}</span>
-              <Link href={"/"}>Bloomington Department of Technology</Link>
-              <Link href={"/"}>Mayor's Office of Civic Innovation</Link>
-            </div>
-            <div className={styles["text-container"]}>
-              <p>{t("footer.content.applicationQuestions")}</p>
-              <p>{t("footer.content.programQuestions")}</p>
+      {showContentFooter && (
+        <MaxWidthLayout className={styles["footer-container"]}>
+          <div className={styles["footer-content-container"]}>
+            <div className={styles["footer"]}>
+              {textContent.logo && (
+                <div className={styles["icon-container"]}>
+                  <a href={textContent.logo.logoUrl || "/"} className={styles["jurisdiction-icon"]}>
+                    <img
+                      src={textContent.logo.logoSrc}
+                      alt={textContent.logo.logoAltText || "Jurisdiction Logo"}
+                    />
+                  </a>
+                </div>
+              )}
+              {textContent.textSections.map((section, index) => (
+                <div key={index} className={styles["text-container"]}>
+                  {section}
+                </div>
+              ))}
             </div>
           </div>
-        </div>
-      </MaxWidthLayout>
-      <MaxWidthLayout
-        className={`${styles["footer-content-container"]} ${styles["copyright-content-container"]}`}
-      >
-        <div className={`${styles["footer"]} ${styles["copyright"]}`}>
-          <div className={styles["copyright-text"]}>{t("footer.copyright")}</div>
-          <div className={styles.links}>
-            <Link href="/">{t("footer.giveFeedback")}</Link>
-            <Link href="/">{t("footer.contact")}</Link>
-            <Link href="/privacy">{t("pageTitle.privacy")}</Link>
-            <Link href="/disclaimer">{t("pageTitle.disclaimer")}</Link>
+        </MaxWidthLayout>
+      )}
+      {showLinksFooter && (
+        <MaxWidthLayout
+          className={`${styles["footer-content-container"]} ${styles["copyright-content-container"]}`}
+        >
+          <div className={`${styles["footer"]} ${styles["copyright"]}`}>
+            <div className={styles["copyright-text"]}>{footerLinksContent.cityString || ""}</div>
+            <div className={styles.links}>
+              {footerLinksContent.links?.map((link, index) => (
+                <Link key={index} href={link.href}>
+                  {link.text}
+                </Link>
+              ))}
+            </div>
           </div>
-        </div>
-      </MaxWidthLayout>
+        </MaxWidthLayout>
+      )}
     </footer>
   )
 }

sites/public/src/static_content/generic_footer_content.tsx

@@ -0,0 +1,51 @@
+import { Link } from "@bloom-housing/ui-seeds"
+import { t } from "@bloom-housing/ui-components"
+
+export type FooterContent = {
+  textSections: React.ReactNode[]
+  logo?: {
+    logoSrc: string
+    logoAltText?: string
+    logoUrl?: string
+  }
+}
+
+export type FooterLinks = {
+  links: {
+    text: string
+    href: string
+  }[]
+  cityString?: string
+}
+
+export const getGenericFooterTextContent = (): FooterContent => {
+  return {
+    textSections: [
+      <>
+        <span>{t("footer.content.projectOf")}</span>{" "}
+        <Link href={"/"}>Mayor's Office of Housing Development</Link>{" "}
+      </>,
+      <>
+        <p>{t("footer.content.applicationQuestions")}</p>
+        <p>{t("footer.content.programQuestions")}</p>
+      </>,
+    ],
+    logo: {
+      logoSrc: "/images/default-housing-logo.svg",
+      logoAltText: "Jurisdiction Logo",
+      logoUrl: "/",
+    },
+  }
+}
+
+export const getGenericFooterLinksContent = (): FooterLinks => {
+  return {
+    links: [
+      { text: t("footer.giveFeedback"), href: "/" },
+      { text: t("footer.contact"), href: "/" },
+      { text: t("pageTitle.privacy"), href: "/privacy" },
+      { text: t("pageTitle.disclaimer"), href: "/disclaimer" },
+    ],
+    cityString: t("footer.copyright"),
+  }
+}

sites/public/src/static_content/jurisdiction_footer_content.tsx

@@ -0,0 +1,9 @@
+import { FooterContent, FooterLinks } from "./generic_footer_content"
+
+export const getJurisdictionFooterTextContent = (): FooterContent => {
+  return null
+}
+
+export const getJurisdictionFooterLinksContent = (): FooterLinks => {
+  return null
+}