Update criteria icons

src/Components/CheckPlusIcon.tsx

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+
+export const CheckPlusIcon: React.FC<{
+  className?: string;
+  title?: string;
+}> = ({ className, title }) => (
+  <svg
+    viewBox="0 0 39 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={classNames("check-plus", className)}
+  >
+    {title && <title>{title}</title>}
+    <path
+      d="M5 17.4L13.4 25.8L31.4 7.79999"
+      stroke="currentcolor"
+      stroke-width="5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M32 16.6L32 26.6"
+      stroke="currentcolor"
+      stroke-width="4"
+      stroke-linecap="round"
+    />
+    <path
+      d="M37 21.6L27 21.6"
+      stroke="currentcolor"
+      stroke-width="4"
+      stroke-linecap="round"
+    />
+  </svg>
+);

src/Components/Pages/Results/Results.scss

@@ -88,7 +88,7 @@ $eligibilityTablePaddingH: 36px;
     align-items: center;
     padding: 20px 0;
 
-    .eligibility__row__icon {
+    .criteria-icon {
       padding: 0 1.25rem; // 0 20px
       font-size: 1.875rem; //30px
       width: 1.875rem; //30px
@@ -124,14 +124,16 @@ $eligibilityTablePaddingH: 36px;
     }
   }
 
-  .eligible {
-    color: $GREEN;
-  }
-  .ineligible {
-    color: $YELLOW;
-  }
-  .unknown {
-    color: $YELLOW;
+  svg.criteria-icon {
+    &.green {
+      color: $GREEN;
+    }
+    &.yellow {
+      color: $YELLOW;
+    }
+    &.orange {
+      color: $ORANGE;
+    }
   }
 
   .share-footer {
@@ -154,14 +156,10 @@ $eligibilityTablePaddingH: 36px;
     --icon-size: 2.75rem; // 44px;
     --icon-margin: 1.5rem; // 24px;
 
-    .eligibility__icon {
-      font-size: 1.875rem; //30px
+    .criteria-icon {
+      width: var(--icon-size);
+      height: var(--icon-size);
       margin-right: var(--icon-margin);
-
-      svg {
-        width: var(--icon-size);
-        height: var(--icon-size);
-      }
     }
     .accordion__content {
       margin-left: calc(var(--icon-size) + var(--icon-margin));
@@ -226,8 +224,7 @@ $eligibilityTablePaddingH: 36px;
         display: none;
       }
     }
-    .eligibility__row__icon,
-    .eligibility__icon {
+    .criteria-icon {
       svg {
         color: black;
       }

src/Components/Pages/Results/Results.tsx

@@ -7,7 +7,6 @@ import {
   BuildingData,
   CoverageResult,
   CriteriaResults,
-  CriterionResult,
   GCEUser,
 } from "../../../types/APIDataTypes";
 import { FormFields } from "../Form/Form";
@@ -32,6 +31,7 @@ import {
 } from "../../KYRContent/KYRContent";
 import { Header } from "../../Header/Header";
 import "./Results.scss";
+import { CheckPlusIcon } from "../../CheckPlusIcon";
 
 export const Results: React.FC = () => {
   const { address, fields, user } = useLoaderData() as {
@@ -130,17 +130,14 @@ export const Results: React.FC = () => {
         <div className="protections-on-next-page__print">
           View tenant protection information on following pages
         </div>
-        <div className="protections-on-next-page__print">
-          View tenant protection information on following pages
-        </div>
       </Header>
 
       <div className="content-section">
         <div className="content-section__content">
           {coverageResult === "UNKNOWN" && bldgData && criteriaDetails && (
             <EligibilityNextSteps
               bldgData={bldgData}
-              eligibilityResults={criteriaDetails}
+              criteriaDetails={criteriaDetails}
             />
           )}
 
@@ -184,40 +181,45 @@ const CRITERIA_LABELS = {
   buildingClass: "Type of building",
   rent: "Rent",
   subsidy: "Subsidy",
-  rentRegulation: "Rent stabilization",
+  rentStabilized: "Rent stabilization",
   certificateOfOccupancy: "Certificate of Occupancy",
 };
 
-const EligibilityIcon: React.FC<{ determination?: CriterionResult }> = ({
-  determination,
-}) => {
-  switch (determination) {
-    case "ELIGIBLE":
-      return <Icon icon="check" className="eligible" title="Pass" />;
-    default:
-      return (
-        <Icon
-          icon="circleExclamation"
-          type="regular"
-          className="unknown"
-          title="Unsure"
-        />
-      );
+const EligibilityIcon: React.FC<
+  Pick<CriterionDetails, "criteria" | "determination">
+> = ({ criteria, determination }) => {
+  if (
+    ["subsidy", "rentStabilized"].includes(criteria) &&
+    determination === "INELIGIBLE"
+  ) {
+    return <CheckPlusIcon className="criteria-icon green" title="" />;
+  } else if (determination === "ELIGIBLE") {
+    return (
+      <Icon
+        icon="check"
+        type="regular"
+        className="criteria-icon green"
+        title="Eligible"
+      />
+    );
+  } else {
+    return (
+      <Icon
+        icon="circleExclamation"
+        type="regular"
+        className={`criteria-icon ${
+          determination === "INELIGIBLE" ? "orange" : "yellow"
+        }`}
+        title={determination === "INELIGIBLE" ? "Ineligible" : "Unsure"}
+      />
+    );
   }
 };
 
 const CriterionRow: React.FC<CriterionDetails> = (props) => {
   return (
     <li className="eligibility__row">
-      <span className="eligibility__row__icon">
-        {props.criteria === "rentRegulation" &&
-        props.determination === "INELIGIBLE" ? (
-          <EligibilityIcon determination={"UNKNOWN"} />
-        ) : (
-          <EligibilityIcon determination={props?.determination} />
-        )}
-      </span>
-
+      <EligibilityIcon {...props} />
       <div className="eligibility__row__info">
         <span className="eligibility__row__criteria">
           {CRITERIA_LABELS[props?.criteria]}
@@ -246,8 +248,8 @@ const CriteriaTable: React.FC<{
     </div>
     <ul className="eligibility__table__list">
       {criteria?.rent && <CriterionRow {...criteria.rent} />}
-      {criteria?.rentRegulation && (
-        <CriterionRow {...criteria.rentRegulation} />
+      {criteria?.rentStabilized && (
+        <CriterionRow {...criteria.rentStabilized} />
       )}
       {criteria?.buildingClass && <CriterionRow {...criteria.buildingClass} />}
       {criteria?.certificateOfOccupancy && (
@@ -269,15 +271,22 @@ const CriteriaTable: React.FC<{
 
 const EligibilityNextSteps: React.FC<{
   bldgData: BuildingData;
-  eligibilityResults: CriteriaDetails;
-}> = ({ bldgData, eligibilityResults }) => {
+  criteriaDetails: CriteriaDetails;
+}> = ({ bldgData, criteriaDetails }) => {
   const portfolioSizeUnknown =
-    eligibilityResults?.portfolioSize?.determination === "UNKNOWN";
-  const rentRegulationUnknown =
-    eligibilityResults?.rentRegulation?.determination === "UNKNOWN";
-  const steps = [portfolioSizeUnknown, rentRegulationUnknown].filter(
+    criteriaDetails?.portfolioSize?.determination === "UNKNOWN";
+  const rentStabilizedUnknown =
+    criteriaDetails?.rentStabilized?.determination === "UNKNOWN";
+  const steps = [portfolioSizeUnknown, rentStabilizedUnknown].filter(
     Boolean
   ).length;
+  const unsureIcon = (
+    <Icon
+      icon="circleExclamation"
+      type="regular"
+      className="criteria-icon yellow"
+    />
+  );
   return (
     <>
       <ContentBox
@@ -288,21 +297,17 @@ const EligibilityNextSteps: React.FC<{
             : `There are still ${steps} things you need to verify`
         }
       >
-        {rentRegulationUnknown && (
+        {rentStabilizedUnknown && (
           <ContentBoxItem
             title="We need to know if your apartment is rent stabilized."
-            icon={
-              <span className="eligibility__icon">
-                <EligibilityIcon determination="UNKNOWN" />
-              </span>
-            }
+            icon={unsureIcon}
             className="next-step"
             open
           >
             <p>
               The Good Cause Eviction law only covers tenants whose apartments
-              are not rent regulated. You told us that you are unsure of your
-              rent regulation status.
+              are not rent stabilized. You told us that you are unsure of your
+              rent stabilized status.
             </p>
             <JFCLLinkInternal to="/rent_stabilization">
               Learn how to find out
@@ -313,11 +318,7 @@ const EligibilityNextSteps: React.FC<{
         {portfolioSizeUnknown && (
           <ContentBoxItem
             title="We need to know if your landlord owns more than 10 units."
-            icon={
-              <span className="eligibility__icon">
-                <EligibilityIcon determination="UNKNOWN" />
-              </span>
-            }
+            icon={unsureIcon}
             className="next-step"
             open
           >

src/api/helpers.ts

@@ -90,7 +90,7 @@ export const getCriteriaResults = (
 ): CriteriaResults => {
   return {
     rent: criteriaDetails?.rent?.determination,
-    rent_stab: criteriaDetails?.rentRegulation?.determination,
+    rent_stab: criteriaDetails?.rentStabilized?.determination,
     building_class: criteriaDetails?.buildingClass?.determination,
     c_of_o: criteriaDetails?.certificateOfOccupancy?.determination,
     subsidy: criteriaDetails?.subsidy?.determination,

src/hooks/eligibility.tsx

@@ -7,7 +7,7 @@ export type Criteria =
   | "buildingClass"
   | "rent"
   | "subsidy"
-  | "rentRegulation"
+  | "rentStabilized"
   | "certificateOfOccupancy";
 
 type CriteriaData = FormFields & BuildingData;
@@ -22,7 +22,7 @@ export type CriterionDetails = {
 
 export type CriteriaDetails = {
   rent: CriterionDetails;
-  rentRegulation: CriterionDetails;
+  rentStabilized: CriterionDetails;
   portfolioSize?: CriterionDetails;
   buildingClass?: CriterionDetails;
   subsidy?: CriterionDetails;
@@ -39,7 +39,7 @@ export function useCriteriaResults(
     portfolioSize: eligibilityPortfolioSize(criteriaData),
     buildingClass: eligibilityBuildingClass(criteriaData),
     rent: eligibilityRent(criteriaData),
-    rentRegulation: eligibilityRentRegulated(criteriaData),
+    rentStabilized: eligibilityRentStabilized(criteriaData),
     certificateOfOccupancy: eligibilityCertificateOfOccupancy(criteriaData),
     subsidy: eligibilitySubsidy(criteriaData),
   };
@@ -168,11 +168,11 @@ function eligibilityRent(criteriaData: CriteriaData): CriterionDetails {
   };
 }
 
-function eligibilityRentRegulated(
+function eligibilityRentStabilized(
   criteriaData: CriteriaData
 ): CriterionDetails {
   const { rentStabilized } = criteriaData;
-  const criteria = "rentRegulation";
+  const criteria = "rentStabilized";
   const requirement = "Your apartment must not be rent stabilized.";
   let determination: CriterionResult;
   let userValue: React.ReactNode;
@@ -182,15 +182,15 @@ function eligibilityRentRegulated(
 
   if (rentStabilized === "YES") {
     determination = "INELIGIBLE";
-    userValue = "Your apartment is rent regulated.";
+    userValue = "Your apartment is rent stabilized.";
   } else if (rentStabilized === "NO") {
     determination = "ELIGIBLE";
-    userValue = "Your apartment is not rent regulated.";
+    userValue = "Your apartment is not rent stabilized.";
   } else {
     determination = "UNKNOWN";
     userValue = (
       <>
-        <p>You don't know if your apartment is rent regulated.</p>
+        <p>You don't know if your apartment is rent stabilized.</p>
         <JFCLLinkInternal to="/rent_stabilization">
           How to find out
         </JFCLLinkInternal>