apply consistent header to all pages

src/Components/BreadCrumbs/BreadCrumbs.tsx

@@ -1,11 +1,20 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Icon } from "@justfixnyc/component-library";
+import { Address } from "../Pages/Home/Home";
+import { toTitleCase } from "../../helpers";
 import "./BreadCrumbs.scss";
 
-interface BreadCrumbs {
-  crumbs: { path?: string; name?: string; active?: boolean }[];
-}
-export const BreadCrumbs: React.FC<BreadCrumbs> = ({ crumbs }) => {
+type Crumb = { path?: string; name?: string; active?: boolean };
+
+type BreadCrumbs = {
+  address?: Address;
+};
+
+export const BreadCrumbs: React.FC<BreadCrumbs> = ({ address }) => {
+  const location = useLocation();
+  console.log(location);
+  const crumbs = makeBreadCrumbs(location.pathname, address);
+
   const crumbpath = crumbs.flatMap((crumb, index, array) => {
     const CrumbElement = crumb.active ? (
       <span key={index} className="breadCrumbs__crumb__active">
@@ -34,3 +43,34 @@ export const BreadCrumbs: React.FC<BreadCrumbs> = ({ crumbs }) => {
   });
   return <div className="breadCrumbs">{crumbpath}</div>;
 };
+
+const makeBreadCrumbs = (pathname: string, address?: Address) => {
+  const crumbs: Crumb[] = [
+    { path: "/", name: "Home" },
+    {
+      path: "/confirm_address",
+      name: breadCrumbAddress(address),
+    },
+    { path: "/form", name: "Survey" },
+    { path: "/results", name: "Result" },
+  ];
+
+  if (["/portfolio_size", "/rent_stabilization"].includes(pathname)) {
+    crumbs.push({ path: pathname, name: "Guide", active: true });
+    return crumbs;
+  } else {
+    return crumbs.map((crumb) => {
+      return { ...crumb, active: crumb.path == pathname };
+    });
+  }
+};
+
+function breadCrumbAddress(address?: Address, maxLength = 45) {
+  if (!address) return "Your address";
+  const addrShort = toTitleCase(
+    `${address?.houseNumber} ${address?.streetName}`
+  );
+  return addrShort.length > maxLength
+    ? `${addrShort.substring(0, maxLength)}\u2026`
+    : addrShort;
+}

src/Components/Header/Header.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { BreadCrumbs } from "../BreadCrumbs/BreadCrumbs";
+import { Address } from "../Pages/Home/Home";
+import { BackLink } from "../JFCLLinkInternal";
+
+type HeaderProps = {
+  title: string | React.ReactNode;
+  subtitle?: string;
+  pageType?: string;
+  address?: Address;
+  isGuide?: boolean;
+  children?: React.ReactNode;
+};
+
+export const Header: React.FC<HeaderProps> = ({
+  address,
+  pageType,
+  title,
+  subtitle,
+  isGuide = false,
+  children,
+}) => {
+  return (
+    <div className="headline-section">
+      <div className="headline-section__content">
+        <BreadCrumbs address={address} />
+        {isGuide && (
+          <div className="headline-section__back-link">
+            <BackLink to="/results">Back to Coverage Result</BackLink>
+          </div>
+        )}
+        {pageType && (
+          <div className="headline-section__page-type">{pageType}</div>
+        )}
+        <h2 className="headline-section__title">{title}</h2>
+        {subtitle && (
+          <div className="headline-section__subtitle">{subtitle}</div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};

src/Components/Pages/ConfirmAddress/ConfirmAddress.scss

@@ -6,19 +6,7 @@ $mapBoxPadding: 1.5rem; // 24px
 $mapImgWidth: calc($contentBoxWidth - (2 * $mapBoxPadding)); // 838px
 $mapImgHeight: 356px;
 
-.confirmation__wrapper {
-  .headline-section {
-    background-color: $OFF_WHITE_NEW;
-    padding-bottom: 0;
-
-    .headline-section__content {
-      // width: calc($mapImgWidth + (2 * 1.5rem));
-      .headline-section__subtitle {
-        margin-bottom: 0;
-      }
-    }
-  }
-
+#confirm-address-page {
   .content-box {
     padding: $mapBoxPadding;
 

src/Components/Pages/ConfirmAddress/ConfirmAddress.tsx

@@ -1,13 +1,13 @@
+import { useLoaderData, useNavigate } from "react-router-dom";
 import { Button } from "@justfixnyc/component-library";
+
 import { Address } from "../Home/Home";
-import "./ConfirmAddress.scss";
-import { useLoaderData, useNavigate } from "react-router-dom";
 import { ContentBox } from "../../ContentBox/ContentBox";
 import { BackLink } from "../../JFCLLinkInternal";
-import { BreadCrumbs } from "../../BreadCrumbs/BreadCrumbs";
 import { useGetBuildingData, useSendGceData } from "../../../api/hooks";
 import { GCEUser } from "../../../types/APIDataTypes";
-import { breadCrumbAddress } from "../../../helpers";
+import { Header } from "../../Header/Header";
+import "./ConfirmAddress.scss";
 
 export const ConfirmAddress: React.FC = () => {
   const navigate = useNavigate();
@@ -44,29 +44,12 @@ export const ConfirmAddress: React.FC = () => {
   };
 
   return (
-    <div className="confirmation__wrapper">
-      <div className="headline-section">
-        <div className="headline-section__content">
-          <BreadCrumbs
-            crumbs={[
-              { path: "/home", name: "Home" },
-              {
-                path: "/confirm_address",
-                name: breadCrumbAddress(address),
-                active: true,
-              },
-              { path: "/form", name: "Screener survey" },
-              { path: "/results", name: "Coverage result" },
-            ]}
-          />
-
-          <h2 className="headline-section__title">Confirm your address</h2>
-          <div className="headline-section__subtitle">
-            We'll use info about your building from public data sources to help
-            learn if you're covered
-          </div>
-        </div>
-      </div>
+    <div id="confirm-address-page">
+      <Header
+        title="Confirm your address"
+        subtitle="We'll use info about your building from public data sources to help learn if you're covered"
+        address={address}
+      />
 
       <div className="content-section">
         <div className="content-section__content">

src/Components/Pages/Form/Form.scss

@@ -4,12 +4,7 @@
 
 $inputTopMargin: 1.5rem; //24px
 
-.form__wrapper {
-  position: relative;
-  padding-top: calc(70px + 1rem); // TODO: use var for breadcrumbs height
-  padding-left: 3rem; // 48px
-  padding-right: 3rem; // 48px
-
+#survey-page {
   .jfcl-input-header__label {
     margin-top: 0;
     margin-bottom: 0;

src/Components/Pages/Form/Form.tsx

@@ -7,11 +7,11 @@ import { Address } from "../Home/Home";
 import { useGetBuildingData, useSendGceData } from "../../../api/hooks";
 import { useSessionStorage } from "../../../hooks/useSessionStorage";
 import { RadioGroup } from "../../RadioGroup/RadioGroup";
-import { BreadCrumbs } from "../../BreadCrumbs/BreadCrumbs";
 import { InfoBox } from "../../InfoBox/InfoBox";
-import { breadCrumbAddress, formatNumber } from "../../../helpers";
+import { formatNumber } from "../../../helpers";
 import { cleanFormFields } from "../../../api/helpers";
 import { BuildingData, GCEUser } from "../../../types/APIDataTypes";
+import { Header } from "../../Header/Header";
 import "./Form.scss";
 
 export type FormFields = {
@@ -82,25 +82,13 @@ export const Form: React.FC = () => {
   };
 
   return (
-    <div className="form__wrapper content-section">
-      <div className="content-section__content">
-        <BreadCrumbs
-          crumbs={[
-            { path: "/home", name: "Home" },
-            {
-              path: "/confirm_address",
-              name: breadCrumbAddress(address),
-            },
-            { path: "/form", name: "Screener survey", active: true },
-            { path: "/results", name: "Coverage result" },
-          ]}
-        />
-
-        <h2>Screener Survey</h2>
-
-        <p className="form__subheader">
-          We'll use your answers to help determine your coverage.
-        </p>
+    <div id="survey-page">
+      <Header
+        title="Survey"
+        subtitle="We'll use your answers to help determine your coverage"
+        address={address}
+      />
+      <div className="content-section">
         <form>
           <FormStep step={1} total={NUM_STEPS}>
             <FormGroup legendText="How many bedrooms are in your apartment?">

src/Components/Pages/PortfolioSize/PortfolioSize.scss

@@ -1,7 +1,7 @@
 @import "../content-page.scss";
 @import "../../../colors.scss";
 
-#portfolio-size-guide {
+#portfolio-size-page {
   .headline-section {
     padding-top: 2.5rem; // 40px
   }

src/Components/Pages/PortfolioSize/PortfolioSize.tsx

@@ -18,6 +18,7 @@ import {
 } from "../../../helpers";
 import "./PortfolioSize.scss";
 import { InfoBox } from "../../InfoBox/InfoBox";
+import { Header } from "../../Header/Header";
 
 // const LOOM_EMBED_URL =
 //   "https://www.loom.com/embed/cef3632773a14617a0e8ec407c77e513?sid=93a986f7-ccdc-4048-903c-974fed826119";
@@ -45,26 +46,19 @@ export const PortfolioSize: React.FC = () => {
   const { data: bldgData, isLoading, error } = useGetBuildingData(bbl);
 
   return (
-    <div id="portfolio-size-guide">
-      <div className="headline-section">
-        <div className="headline-section__content">
-          <BackLink to="/results">Back to Coverage Result</BackLink>
-          {error && (
-            <div className="eligibility__error">
-              There was an error loading your results, please try again in a few
-              minutes.
-            </div>
-          )}
-          <div className="headline-section__page-type">Guide</div>
-          <h2 className="headline-section__title">
-            Finding out if your landlord owns other apartments
-          </h2>
-          <div className="headline-section__subtitle">
-            Everything you need to know about researching your landlord’s other
-            potential properties.
+    <div id="portfolio-size-page">
+      <Header
+        title="Find out if your landlord owns other apartments"
+        address={address}
+        isGuide
+      >
+        {error && (
+          <div className="eligibility__error">
+            There was an error loading your results, please try again in a few
+            minutes.
           </div>
-        </div>
-      </div>
+        )}
+      </Header>
 
       <div className="content-section">
         <div className="content-section__content"></div>

src/Components/Pages/Results/Results.scss

@@ -66,18 +66,23 @@ $eligibilityTablePaddingH: 36px;
   }
 }
 
+.eligibility__table {
+  margin-top: 3rem; // 48px
+}
+
 .eligibility__table__header {
   display: flex;
-  padding-bottom: $eligibilityTablePaddingH;
   flex-direction: column;
-  gap: 10px;
+  padding: 1.125rem 1.125rem 2.25rem 1.125rem; // 20px 20px 36px 20px;
+  gap: 0.75rem; // 12px
+  border-bottom: 1px solid $GREY_NEW;
 
-  .eligibility__table__header-title {
-    @include eyebrow_small_desktop;
+  span {
+    @include body_large_desktop;
   }
-
-  .eligibility__table__header-subtitle {
-    @include h3_desktop;
+  p {
+    @include body_standard_desktop;
+    margin: 0;
   }
 }