feat: DAH-2661 icons

SFDigitalServices · Dec 17, 2024 · e80382b · e80382b
1 parent 53c42c1
commit e80382b
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 50 deletions.
diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
@@ -330,10 +330,19 @@ exports[`For Rent renders ForRent component 1`] = `
                   viewBox="0 0 32 32"
                 >
                   <path
-                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                    d="M22.754 22.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
                   />
                   <path
-                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                    d="M22.754 18.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M22.754 14.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M9.365 12.013h7.438c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.438c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"
+                  />
+                  <path
+                    d="M27.526 4.877l-4.416-4.358c-0.216-0.213-0.514-0.506-1.072-0.506h-16.285c-0.947 0-1.717 0.781-1.717 1.741v26.014c0 0.205 0.098 0.387 0.246 0.51l3.142 3.36c0.126 0.134 0.302 0.211 0.486 0.211s0.362-0.077 0.486-0.211l3.506-3.747 3.629 3.875c0.251 0.269 0.722 0.269 0.973 0l3.629-3.875 3.629 3.875c0.126 0.134 0.301 0.21 0.483 0.211 0.002 0 0.002 0 0.003 0 0.182 0 0.357-0.075 0.483-0.206l3.117-3.27c0.117-0.123 0.184-0.29 0.184-0.459v-22.029c0.002-0.562-0.274-0.902-0.509-1.138zM26.102 5.347h-3.398v-3.355l3.398 3.355zM24.259 30.341l-3.634-3.88c-0.126-0.134-0.302-0.211-0.486-0.211s-0.362 0.077-0.486 0.211l-3.629 3.875-3.629-3.875c-0.251-0.269-0.722-0.269-0.973 0l-3.506 3.747-2.544-2.718v-25.736c0-0.221 0.174-0.408 0.382-0.408l15.616-0.010v4.677c0 0.368 0.299 0.667 0.667 0.667h4.667v21.094l-2.445 2.566z"
                   />
                 </svg>
               </span>

diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
@@ -371,14 +371,22 @@ exports[`For Sale renders ForSale component 1`] = `
               type="button"
             >
               <span
-                class="ui-icon ui-medium"
+                aria-hidden="true"
+                class="seeds-icon"
+                data-size="md"
               >
                 <svg
-                  fill="currentColor"
-                  viewBox="0 0 51 45"
+                  fill="none"
+                  height="40"
+                  viewBox="0 0 40 40"
+                  width="40"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
+                    clip-rule="evenodd"
+                    d="M17.382 5.86506C17.6945 5.56635 18.2171 5.56727 18.5265 5.86416C18.2171 5.56727 17.6951 5.56582 17.3825 5.86453L6.1856 16.613L17.382 5.86506ZM18.249 24.1118C18.2604 24.0581 18.2721 24.0045 18.2842 23.9511L18.2885 23.9323C18.2749 23.9919 18.2617 24.0518 18.249 24.1118ZM17.1752 5.64766C17.6037 5.2381 18.3088 5.23943 18.7342 5.64772L28.2351 14.767C28.651 14.7226 29.0733 14.6999 29.5008 14.6999C29.9032 14.6999 30.301 14.7201 30.6932 14.7594L19.9167 4.41572C18.8295 3.37218 17.0814 3.37306 15.9934 4.41499L15.9926 4.41575L0.563329 19.227C0.223139 19.5536 0.212094 20.0941 0.538659 20.4343C0.865225 20.7745 1.40574 20.7855 1.74593 20.459L4.17791 18.1244V32.868C4.17791 34.398 5.46064 35.5826 6.97032 35.5826H21.9674C21.352 35.0716 20.7893 34.4992 20.2889 33.8749H14.9323V26.6656C14.9323 26.148 15.3796 25.6588 16.017 25.6588H17.7303C17.7713 25.077 17.8545 24.5067 17.9769 23.9511H16.017C14.5073 23.9511 13.2246 25.1356 13.2246 26.6656V33.8749H6.97032C6.33298 33.8749 5.8856 33.3856 5.8856 32.868V16.4851L17.1752 5.64766ZM24.2274 20.8388C25.6833 19.3829 27.658 18.565 29.717 18.565C31.776 18.565 33.7506 19.3829 35.2066 20.8388C36.6625 22.2948 37.4804 24.2694 37.4804 26.3284C37.4804 27.348 37.2796 28.3575 36.8895 29.2994C36.4993 30.2413 35.9275 31.0971 35.2066 31.818C34.4857 32.5389 33.6298 33.1108 32.6879 33.501C31.746 33.8911 30.7365 34.0919 29.717 34.0919C28.6974 34.0919 27.6879 33.8911 26.746 33.501C25.8041 33.1108 24.9483 32.5389 24.2274 31.818C23.5064 31.0971 22.9346 30.2413 22.5444 29.2994C22.1543 28.3575 21.9535 27.348 21.9535 26.3284C21.9535 24.2694 22.7714 22.2948 24.2274 20.8388ZM28.8853 28.1016L27.3121 26.5283C27.0165 26.2327 26.5372 26.2327 26.2415 26.5283C25.9459 26.8239 25.9459 27.3032 26.2415 27.5989L28.4466 29.804C28.604 29.9613 28.8226 30.0415 29.0444 30.0231C29.2661 30.0048 29.4686 29.8898 29.5979 29.7087L33.2731 24.5634C33.5161 24.2232 33.4373 23.7504 33.0971 23.5074C32.7569 23.2644 32.2841 23.3432 32.0411 23.6834L28.8853 28.1016ZM29.717 16.751C27.1769 16.751 24.7408 17.76 22.9447 19.5562C21.1485 21.3523 20.1395 23.7883 20.1395 26.3284C20.1395 27.5862 20.3872 28.8316 20.8685 29.9936C21.3498 31.1556 22.0553 32.2114 22.9447 33.1007C23.834 33.9901 24.8898 34.6956 26.0518 35.1769C27.2138 35.6582 28.4592 35.9059 29.717 35.9059C30.9747 35.9059 32.2201 35.6582 33.3821 35.1769C34.5441 34.6956 35.5999 33.9901 36.4892 33.1007C37.3786 32.2114 38.0841 31.1556 38.5654 29.9936C39.0467 28.8316 39.2944 27.5862 39.2944 26.3284C39.2944 23.7883 38.2854 21.3523 36.4892 19.5562C34.6931 17.76 32.2571 16.751 29.717 16.751Z"
+                    fill="black"
+                    fill-rule="evenodd"
                   />
                 </svg>
               </span>
@@ -429,10 +437,19 @@ exports[`For Sale renders ForSale component 1`] = `
                   viewBox="0 0 32 32"
                 >
                   <path
-                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                    d="M22.754 22.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
                   />
                   <path
-                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                    d="M22.754 18.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M22.754 14.68h-13.387c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667h13.389c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M9.365 12.013h7.438c0.368 0 0.667-0.299 0.667-0.667s-0.299-0.667-0.667-0.667h-7.438c-0.368 0-0.667 0.299-0.667 0.667s0.299 0.667 0.667 0.667z"
+                  />
+                  <path
+                    d="M27.526 4.877l-4.416-4.358c-0.216-0.213-0.514-0.506-1.072-0.506h-16.285c-0.947 0-1.717 0.781-1.717 1.741v26.014c0 0.205 0.098 0.387 0.246 0.51l3.142 3.36c0.126 0.134 0.302 0.211 0.486 0.211s0.362-0.077 0.486-0.211l3.506-3.747 3.629 3.875c0.251 0.269 0.722 0.269 0.973 0l3.629-3.875 3.629 3.875c0.126 0.134 0.301 0.21 0.483 0.211 0.002 0 0.002 0 0.003 0 0.182 0 0.357-0.075 0.483-0.206l3.117-3.27c0.117-0.123 0.184-0.29 0.184-0.459v-22.029c0.002-0.562-0.274-0.902-0.509-1.138zM26.102 5.347h-3.398v-3.355l3.398 3.355zM24.259 30.341l-3.634-3.88c-0.126-0.134-0.302-0.211-0.486-0.211s-0.362 0.077-0.486 0.211l-3.629 3.875-3.629-3.875c-0.251-0.269-0.722-0.269-0.973 0l-3.506 3.747-2.544-2.718v-25.736c0-0.221 0.174-0.408 0.382-0.408l15.616-0.010v4.677c0 0.368 0.299 0.667 0.667 0.667h4.667v21.094l-2.445 2.566z"
                   />
                 </svg>
               </span>

diff --git a/app/javascript/modules/constants.tsx b/app/javascript/modules/constants.tsx
@@ -105,3 +105,8 @@ export const SFGOV_LINKS = [
   "http://sfmohcd.org/displaced-tenant-housing-preference",
   "http://sfmohcd.org/neighborhood-resident-housing-preference",
 ]
+
+export const SALE_DIRECTORY_SECTIONS = ["open", "fcfs", "upcoming", "results"]
+export const RENTAL_DIRECTORY_SECTIONS = ["open", "upcoming", "results"]
+
+export const DIRECTORY_TYPE_SALES = "forSale"
diff --git a/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx b/app/javascript/modules/listings/DirectoryPageNavigationBar.tsx
@@ -1,48 +1,42 @@
-import React from "react"
+import React, { ReactNode } from "react"
 import "./DirectoryPageNavigationBar.scss"
-import { Button } from "@bloom-housing/ui-seeds"
-import { Icon, t } from "@bloom-housing/ui-components"
+import { Button, Icon as SeedsIcon } from "@bloom-housing/ui-seeds"
+import { Icon, t, UniversalIconType } from "@bloom-housing/ui-components"
+interface DirectorySectionInfoObject {
+  key: string
+  ref: string
+  icon: ReactNode | string
+  numListings: number
+}
 
 const DirectoryPageNavigationBar = ({
-  directoryType,
-  listingLengths,
+  directorySections,
   activeItem,
 }: {
-  directoryType: string
-  listingLengths: { open: number; upcoming: number; fcfs: number; results: number }
+  directorySections: DirectorySectionInfoObject[]
   activeItem: string
-  setActiveItem: React.Dispatch<string>
 }) => {
-  const directorySections =
-    directoryType === "forSale"
-      ? {
-          open: { key: "enter-a-lottery", icon: "house" },
-          fcfs: { key: "buy-now", icon: "house" },
-          upcoming: { key: "upcoming-lotteries", icon: "house" },
-          results: { key: "lottery-results", icon: "house" },
-        }
-      : {
-          open: { key: "enter-a-lottery", icon: "house" },
-          upcoming: { key: "upcoming-lotteries", icon: "house" },
-          results: { key: "lottery-results", icon: "house" },
-        }
-
   return (
     <div className="directory-page-navigation-bar">
-      {Object.keys(directorySections).map((listingType, index) => {
+      {directorySections.map((section, index) => {
         return (
           <Button
             key={`nav-button-${index}`}
             onClick={() => {
-              document
-                .querySelector(`#${directorySections[listingType].key}`)
-                .scrollIntoView({ behavior: "smooth" })
+              const yOffset = -60
+              const element = document.querySelector(`#${section.ref}`)
+              const y = element.getBoundingClientRect().top + window.scrollY + yOffset
+              window.scrollTo({ top: y, behavior: "smooth" })
             }}
-            className={activeItem === directorySections[listingType].key ? "active" : ""}
+            className={activeItem === section.ref ? "active" : ""}
           >
-            <Icon size="medium" symbol={directorySections[listingType].icon} />
-            {t(`listingsDirectory.navBar.${listingType}`, {
-              numListings: listingLengths[listingType],
+            {typeof section.icon === "string" ? (
+              <Icon size="medium" symbol={section.icon as UniversalIconType} />
+            ) : (
+              <SeedsIcon size="md">{section.icon}</SeedsIcon>
+            )}
+            {t(`listingsDirectory.navBar.${section.key}`, {
+              numListings: section.numListings,
             })}
           </Button>
         )

diff --git a/app/javascript/modules/listings/GenericDirectory.tsx b/app/javascript/modules/listings/GenericDirectory.tsx
@@ -17,6 +17,12 @@ import { RailsListing } from "./SharedHelpers"
 import "./ListingDirectory.scss"
 import { MailingListSignup } from "../../components/MailingListSignup"
 import DirectoryPageNavigationBar from "./DirectoryPageNavigationBar"
+import {
+  DIRECTORY_TYPE_SALES,
+  RENTAL_DIRECTORY_SECTIONS,
+  SALE_DIRECTORY_SECTIONS,
+} from "../constants"
+import { IconHomeCheck } from "./assets/icon-home-check"
 
 interface RentalDirectoryProps {
   listingsAPI: (filters?: EligibilityFilters) => Promise<RailsListing[]>
@@ -64,6 +70,8 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters])
 
+  const hasFiltersSet = filters !== null
+
   const observerRef = useRef(null)
   useEffect(() => {
     const handleIntersectionEvents = (events: IntersectionObserverEntry[]) => {
@@ -86,23 +94,45 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
     observerRef.current = new IntersectionObserver(handleIntersectionEvents)
   }, [activeItem])
 
-  const hasFiltersSet = filters !== null
+  const directorySections =
+    props.directoryType === DIRECTORY_TYPE_SALES
+      ? SALE_DIRECTORY_SECTIONS
+      : RENTAL_DIRECTORY_SECTIONS
+
+  const directorySectionInfo = {
+    open: {
+      ref: "enter-a-lottery",
+      icon: "house",
+      numListings: listings.open.length,
+    },
+    fcfs: {
+      ref: "buy-now",
+      icon: IconHomeCheck,
+      numListings: listings.fcfsSalesNotYetOpen.length + listings.fcfsSalesOpen.length,
+    },
+    upcoming: {
+      ref: "upcoming-lotteries",
+      icon: "clock",
+      numListings: listings.upcoming.length,
+    },
+    results: {
+      ref: "lottery-results",
+      icon: "result",
+      numListings: listings.results.length,
+    },
+  }
+
   return (
     <LoadingOverlay isLoading={loading}>
       <div>
         {!loading && (
           <>
             {props.getPageHeader(filters, setFilters, match)}
             <DirectoryPageNavigationBar
-              directoryType={props.directoryType}
-              listingLengths={{
-                open: listings.open.length,
-                upcoming: listings.upcoming.length,
-                fcfs: listings.fcfsSalesNotYetOpen.length + listings.fcfsSalesOpen.length,
-                results: listings.results.length,
-              }}
+              directorySections={directorySections.map((section: string) => {
+                return { key: section, ...directorySectionInfo[section] }
+              })}
               activeItem={activeItem}
-              setActiveItem={setActiveItem}
             />
             <div id="listing-results">
               <div
@@ -120,7 +150,7 @@ export const GenericDirectory = (props: RentalDirectoryProps) => {
                   hasFiltersSet
                 )}
               </div>
-              {props.directoryType === "forSale" && (
+              {props.directoryType === DIRECTORY_TYPE_SALES && (
                 <div
                   id="buy-now"
                   ref={(el) => {

diff --git a/app/javascript/modules/listings/assets/icon-home-check.tsx b/app/javascript/modules/listings/assets/icon-home-check.tsx
@@ -3,8 +3,8 @@ import React from "react"
 export const IconHomeCheck = (
   <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M17.382 5.86506C17.6945 5.56635 18.2171 5.56727 18.5265 5.86416C18.2171 5.56727 17.6951 5.56582 17.3825 5.86453L6.1856 16.613L17.382 5.86506ZM18.249 24.1118C18.2604 24.0581 18.2721 24.0045 18.2842 23.9511L18.2885 23.9323C18.2749 23.9919 18.2617 24.0518 18.249 24.1118ZM17.1752 5.64766C17.6037 5.2381 18.3088 5.23943 18.7342 5.64772L28.2351 14.767C28.651 14.7226 29.0733 14.6999 29.5008 14.6999C29.9032 14.6999 30.301 14.7201 30.6932 14.7594L19.9167 4.41572C18.8295 3.37218 17.0814 3.37306 15.9934 4.41499L15.9926 4.41575L0.563329 19.227C0.223139 19.5536 0.212094 20.0941 0.538659 20.4343C0.865225 20.7745 1.40574 20.7855 1.74593 20.459L4.17791 18.1244V32.868C4.17791 34.398 5.46064 35.5826 6.97032 35.5826H21.9674C21.352 35.0716 20.7893 34.4992 20.2889 33.8749H14.9323V26.6656C14.9323 26.148 15.3796 25.6588 16.017 25.6588H17.7303C17.7713 25.077 17.8545 24.5067 17.9769 23.9511H16.017C14.5073 23.9511 13.2246 25.1356 13.2246 26.6656V33.8749H6.97032C6.33298 33.8749 5.8856 33.3856 5.8856 32.868V16.4851L17.1752 5.64766ZM24.2274 20.8388C25.6833 19.3829 27.658 18.565 29.717 18.565C31.776 18.565 33.7506 19.3829 35.2066 20.8388C36.6625 22.2948 37.4804 24.2694 37.4804 26.3284C37.4804 27.348 37.2796 28.3575 36.8895 29.2994C36.4993 30.2413 35.9275 31.0971 35.2066 31.818C34.4857 32.5389 33.6298 33.1108 32.6879 33.501C31.746 33.8911 30.7365 34.0919 29.717 34.0919C28.6974 34.0919 27.6879 33.8911 26.746 33.501C25.8041 33.1108 24.9483 32.5389 24.2274 31.818C23.5064 31.0971 22.9346 30.2413 22.5444 29.2994C22.1543 28.3575 21.9535 27.348 21.9535 26.3284C21.9535 24.2694 22.7714 22.2948 24.2274 20.8388ZM28.8853 28.1016L27.3121 26.5283C27.0165 26.2327 26.5372 26.2327 26.2415 26.5283C25.9459 26.8239 25.9459 27.3032 26.2415 27.5989L28.4466 29.804C28.604 29.9613 28.8226 30.0415 29.0444 30.0231C29.2661 30.0048 29.4686 29.8898 29.5979 29.7087L33.2731 24.5634C33.5161 24.2232 33.4373 23.7504 33.0971 23.5074C32.7569 23.2644 32.2841 23.3432 32.0411 23.6834L28.8853 28.1016ZM29.717 16.751C27.1769 16.751 24.7408 17.76 22.9447 19.5562C21.1485 21.3523 20.1395 23.7883 20.1395 26.3284C20.1395 27.5862 20.3872 28.8316 20.8685 29.9936C21.3498 31.1556 22.0553 32.2114 22.9447 33.1007C23.834 33.9901 24.8898 34.6956 26.0518 35.1769C27.2138 35.6582 28.4592 35.9059 29.717 35.9059C30.9747 35.9059 32.2201 35.6582 33.3821 35.1769C34.5441 34.6956 35.5999 33.9901 36.4892 33.1007C37.3786 32.2114 38.0841 31.1556 38.5654 29.9936C39.0467 28.8316 39.2944 27.5862 39.2944 26.3284C39.2944 23.7883 38.2854 21.3523 36.4892 19.5562C34.6931 17.76 32.2571 16.751 29.717 16.751Z"
       fill="black"
     />