feat: add Hero icons and additional uptake of Seeds Icon (#3956)

* feat: add Hero icons, utilize Icon Map infra * feat: add Hero icons to more places throughout the system * fix: prettier * fix: prettier * fix: prettier test file * fix: build errors * fix: outlined icons
bloom-housing · May 6, 2024 · 552c517 · 552c517
1 parent 603b4f7
commit 552c517
Show file tree

Hide file tree

Showing 33 changed files with 227 additions and 241 deletions.
diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts
@@ -20,6 +20,7 @@ export * from "./src/utilities/DateFormat"
 export * from "./src/utilities/constants"
 export * from "./src/utilities/maskData"
 export * from "./src/views/components/BloomCard"
+export * from "./src/views/CustomIconMap"
 export * from "./src/views/multiselectQuestions"
 export * from "./src/views/occupancyFormatting"
 export * from "./src/views/summaryTables"

diff --git a/shared-helpers/package.json b/shared-helpers/package.json
@@ -17,7 +17,8 @@
   },
   "dependencies": {
     "@bloom-housing/ui-components": "12.1.0",
-    "@bloom-housing/ui-seeds": "1.12.2",
+    "@bloom-housing/ui-seeds": "1.14.0",
+    "@heroicons/react": "^2.1.1",
     "axios-cookiejar-support": "4.0.6",
     "tough-cookie": "4.1.3"
   },

diff --git a/shared-helpers/src/views/CustomIconMap.tsx b/shared-helpers/src/views/CustomIconMap.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+import { Application, Profile } from "./CustomIcons"
+import LockClosedIcon from "@heroicons/react/24/solid/LockClosedIcon"
+import ChevronLeftIcon from "@heroicons/react/20/solid/ChevronLeftIcon"
+import Clock from "@heroicons/react/24/outline/ClockIcon"
+import HomeModernIcon from "@heroicons/react/24/outline/HomeModernIcon"
+import EnvelopeIcon from "@heroicons/react/24/outline/EnvelopeIcon"
+
+export const CustomIconMap = {
+  application: Application,
+  profile: Profile,
+  lockClosed: <LockClosedIcon />,
+  chevronLeft: <ChevronLeftIcon />,
+  clock: <Clock />,
+  home: <HomeModernIcon />,
+  envelope: <EnvelopeIcon />,
+}
+
+export type CustomIconType = keyof typeof CustomIconMap
diff --git a/...elpers/src/views/accounts/CustomIcons.tsx → shared-helpers/src/views/CustomIcons.tsx b/...elpers/src/views/accounts/CustomIcons.tsx → shared-helpers/src/views/CustomIcons.tsx
diff --git a/shared-helpers/src/views/accounts/CustomIconMap.tsx b/shared-helpers/src/views/accounts/CustomIconMap.tsx
diff --git a/shared-helpers/src/views/components/BloomCard.tsx b/shared-helpers/src/views/components/BloomCard.tsx
@@ -2,7 +2,7 @@ import { Heading, HeadingGroup, Icon } from "@bloom-housing/ui-seeds"
 import Card from "@bloom-housing/ui-seeds/src/blocks/Card"
 import React from "react"
 import styles from "./BloomCard.module.scss"
-import { CustomIconMap, CustomIconType } from "../accounts/CustomIconMap"
+import { CustomIconMap, CustomIconType } from "../CustomIconMap"
 
 interface BloomCardProps {
   iconSymbol?: CustomIconType

diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
 import {
   Field,
   Form,

diff --git a/sites/partners/__tests__/components/shared/StatusBar.test.tsx b/sites/partners/__tests__/components/shared/StatusBar.test.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import { render, cleanup, fireEvent } from "@testing-library/react"
-import { Button } from "@bloom-housing/ui-components"
-import { Tag } from "@bloom-housing/ui-seeds"
+import { Button, Tag } from "@bloom-housing/ui-seeds"
 import { StatusBar } from "../../../src/components/shared/StatusBar"
 
 afterEach(cleanup)
@@ -20,13 +19,7 @@ describe("<StatusBar>", () => {
   it("can render with a back button", () => {
     const onClickSpy = jest.fn()
     const { getByText } = render(
-      <StatusBar
-        backButton={
-          <Button inlineIcon="left" icon="arrowBack" onClick={onClickSpy}>
-            Back
-          </Button>
-        }
-      >
+      <StatusBar backButton={<Button onClick={onClickSpy}>Back</Button>}>
         <Tag variant={"success"}>Submitted</Tag>
       </StatusBar>
     )

diff --git a/sites/partners/package.json b/sites/partners/package.json
@@ -31,7 +31,8 @@
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.1.0",
-    "@bloom-housing/ui-seeds": "1.12.2",
+    "@bloom-housing/ui-seeds": "1.14.0",
+    "@heroicons/react": "^2.1.1",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",

diff --git a/sites/partners/src/components/listings/ListingFormActions.tsx b/sites/partners/src/components/listings/ListingFormActions.tsx
@@ -1,9 +1,11 @@
 import React, { useContext, useMemo } from "react"
 import { useRouter } from "next/router"
 import dayjs from "dayjs"
-import { t, StatusMessages, Icon } from "@bloom-housing/ui-components"
-import { Button, Link, Grid } from "@bloom-housing/ui-seeds"
+import { t, StatusMessages } from "@bloom-housing/ui-components"
+import { Button, Link, Grid, Icon } from "@bloom-housing/ui-seeds"
 import { pdfUrlFromListingEvents, AuthContext, MessageContext } from "@bloom-housing/shared-helpers"
+import PencilSquareIcon from "@heroicons/react/24/solid/PencilSquareIcon"
+import LinkIcon from "@heroicons/react/20/solid/LinkIcon"
 import { ListingContext } from "./ListingContext"
 import { StatusAside } from "../shared/StatusAside"
 import {
@@ -168,7 +170,11 @@ const ListingFormActions = ({
         <Button
           type="button"
           variant="text"
-          tailIcon={<Icon size="medium" symbol="edit" className="ml-2" />}
+          tailIcon={
+            <Icon>
+              <PencilSquareIcon />
+            </Icon>
+          }
           className="w-full p-3"
           onClick={() => showLotteryResultsDrawer && showLotteryResultsDrawer()}
         >
@@ -207,7 +213,11 @@ const ListingFormActions = ({
       <Grid.Cell key="btn-preview-results">
         <Link
           href={eventUrl}
-          tailIcon={<Icon size="medium" symbol="link" className="ml-2" />}
+          tailIcon={
+            <Icon>
+              <LinkIcon />
+            </Icon>
+          }
           className="w-full justify-center p-3"
         >
           {t("listings.actions.previewLotteryResults")}{" "}

diff --git a/sites/partners/src/components/listings/PaperListingForm/index.tsx b/sites/partners/src/components/listings/PaperListingForm/index.tsx
@@ -12,9 +12,10 @@ import {
   Tab,
   TabPanel,
   LatitudeLongitude,
-  Icon,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
+import ChevronLeftIcon from "@heroicons/react/20/solid/ChevronLeftIcon"
+import ChevronRightIcon from "@heroicons/react/20/solid/ChevronRightIcon"
 import { AuthContext, MessageContext, listingSectionQuestions } from "@bloom-housing/shared-helpers"
 import {
   ListingCreate,
@@ -357,7 +358,11 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                               id="applicationProcessButton"
                               type="button"
                               variant="primary-outlined"
-                              tailIcon={<Icon symbol="arrowForward" size="small" />}
+                              tailIcon={
+                                <Icon>
+                                  <ChevronRightIcon />
+                                </Icon>
+                              }
                               onClick={() => {
                                 setTabIndex(1)
                                 window.scrollTo({ top: 0, behavior: "smooth" })
@@ -382,7 +387,11 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
                             <Button
                               type="button"
                               variant="primary-outlined"
-                              leadIcon={<Icon symbol="arrowBack" size="small" />}
+                              leadIcon={
+                                <Icon>
+                                  <ChevronLeftIcon />
+                                </Icon>
+                              }
                               onClick={() => {
                                 setTabIndex(0)
                                 window.scrollTo({ top: 0, behavior: "smooth" })

diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/SelectAndOrder.tsx
@@ -6,7 +6,7 @@ import {
 } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import { Button, Card, Grid, Tag, Icon } from "@bloom-housing/ui-seeds"
 import { useFormContext } from "react-hook-form"
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
+import InformationCircleIcon from "@heroicons/react/24/solid/InformationCircleIcon"
 import LinkComponent from "../../../../components/core/LinkComponent"
 import SectionWithGrid from "../../../shared/SectionWithGrid"
 
@@ -81,7 +81,10 @@ const SelectAndOrder = ({
 
   const additionalFieldsTag = () => (
     <Tag variant="primary">
-      <Icon icon={faInfoCircle} /> {t("listings.providesAdditionalFields")}
+      <Icon>
+        <InformationCircleIcon />
+      </Icon>{" "}
+      {t("listings.providesAdditionalFields")}
     </Tag>
   )
 

diff --git a/sites/partners/src/components/settings/ManageIconSection.tsx b/sites/partners/src/components/settings/ManageIconSection.tsx
@@ -1,6 +1,8 @@
 import React from "react"
-import { faClone, faPenToSquare, faTrashCan } from "@fortawesome/free-regular-svg-icons"
-import { Icon, IconFillColors, UniversalIconType } from "@bloom-housing/ui-components"
+import { Icon } from "@bloom-housing/ui-seeds"
+import DocumentDuplicateIcon from "@heroicons/react/24/solid/DocumentDuplicateIcon"
+import PencilSquareIcon from "@heroicons/react/24/solid/PencilSquareIcon"
+import TrashIcon from "@heroicons/react/24/solid/TrashIcon"
 
 type IconContentProps = {
   onCopy: () => void
@@ -13,34 +15,39 @@ type IconContentProps = {
 
 const ManageIconSection = (props: IconContentProps) => {
   return (
-    <div className={"flex justify-end"}>
-      <div className={"w-max"}>
-        <button onClick={props.onEdit} aria-label={"Edit"} data-testid={props.editTestId}>
-          <Icon
-            symbol={faPenToSquare as UniversalIconType}
-            size={"medium"}
-            fill={IconFillColors.primary}
-            className={"mr-5"}
-          />
+    <div className={"flex justify-end gap-5"}>
+      <button
+        className="text-primary"
+        onClick={props.onEdit}
+        aria-label={"Edit"}
+        data-testid={props.editTestId}
+      >
+        <Icon size="md">
+          <PencilSquareIcon />
+        </Icon>
+      </button>
+      <button
+        className="text-primary"
+        onClick={props.onCopy}
+        aria-label={"Copy"}
+        data-testid={props.copyTestId}
+      >
+        <Icon size="md">
+          <DocumentDuplicateIcon />
+        </Icon>
+      </button>
+      {props.onDelete && (
+        <button
+          className="text-alert"
+          onClick={props.onDelete}
+          aria-label={"Delete"}
+          data-testid={props.deleteTestId}
+        >
+          <Icon size="md">
+            <TrashIcon />
+          </Icon>
         </button>
-        <button onClick={props.onCopy} aria-label={"Copy"} data-testid={props.copyTestId}>
-          <Icon
-            symbol={faClone as UniversalIconType}
-            size={"medium"}
-            fill={IconFillColors.primary}
-            className={`${props.onDelete && "mr-5"}`}
-          />
-        </button>
-        {props.onDelete && (
-          <button onClick={props.onDelete} aria-label={"Delete"} data-testid={props.deleteTestId}>
-            <Icon
-              symbol={faTrashCan as UniversalIconType}
-              size={"medium"}
-              fill={IconFillColors.alert}
-            />
-          </button>
-        )}
-      </div>
+      )}
     </div>
   )
 }

diff --git a/sites/partners/src/components/users/FormSignInAddPhone.tsx b/sites/partners/src/components/users/FormSignInAddPhone.tsx
@@ -2,14 +2,14 @@ import React from "react"
 import {
   Form,
   FormCard,
-  Icon,
   t,
   PhoneField,
   FormSignInErrorBox,
   NetworkStatus,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
 import type { UseFormMethods } from "react-hook-form"
+import { CustomIconMap } from "@bloom-housing/shared-helpers"
 
 export type FormSignInAddPhoneProps = {
   control: FormSignInAddPhoneControl
@@ -41,7 +41,7 @@ const FormSignInAddPhone = ({
   return (
     <FormCard>
       <div className="form-card__lead text-center">
-        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <Icon size="2xl">{CustomIconMap.profile}</Icon>
         <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
         <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
       </div>

diff --git a/sites/partners/src/components/users/FormSignInMFACode.tsx b/sites/partners/src/components/users/FormSignInMFACode.tsx
@@ -3,13 +3,13 @@ import {
   Field,
   Form,
   FormCard,
-  Icon,
   t,
   FormSignInErrorBox,
   NetworkStatus,
   FormSignInControl,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
+import { CustomIconMap } from "@bloom-housing/shared-helpers"
 
 export enum RequestType {
   email = "email",
@@ -59,7 +59,7 @@ const FormSignInMFACode = ({
   return (
     <FormCard>
       <div className="form-card__lead text-center">
-        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <Icon size="2xl">{CustomIconMap.profile}</Icon>
         <h2 className="form-card__title is-borderless">{t("nav.signInMFA.verifyTitle")}</h2>
         <p className="form-card__sub-title">
           {mfaType === RequestType.sms

diff --git a/sites/partners/src/components/users/FormSignInMFAType.tsx b/sites/partners/src/components/users/FormSignInMFAType.tsx
@@ -3,13 +3,13 @@ import {
   Field,
   Form,
   FormCard,
-  Icon,
   t,
   FormSignInErrorBox,
   NetworkStatus,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
 import type { UseFormMethods } from "react-hook-form"
+import { CustomIconMap } from "@bloom-housing/shared-helpers"
 
 export type FormSignInMFAProps = {
   control: FormSignInMFAControl
@@ -40,7 +40,7 @@ const FormSignInMFAType = ({
   return (
     <FormCard>
       <div className="form-card__lead text-center">
-        <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
+        <Icon size="2xl">{CustomIconMap.profile}</Icon>
         <h2 className="form-card__title is-borderless">
           {t("nav.signInMFA.verificationChoiceMainTitle")}
         </h2>

diff --git a/sites/partners/src/components/users/FormTerms.tsx b/sites/partners/src/components/users/FormTerms.tsx
@@ -1,6 +1,7 @@
 import React from "react"
-import { Field, Form, FormCard, Icon, MarkdownSection, t } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Field, Form, FormCard, MarkdownSection, t } from "@bloom-housing/ui-components"
+import { Button, Icon } from "@bloom-housing/ui-seeds"
+import Cog8ToothIcon from "@heroicons/react/24/solid/Cog8ToothIcon"
 import Markdown from "markdown-to-jsx"
 import { useForm } from "react-hook-form"
 
@@ -21,7 +22,9 @@ const FormTerms = (props: FormTermsProps) => {
     <Form id="terms" className="mt-10" onSubmit={handleSubmit(props.onSubmit)}>
       <FormCard>
         <div className="form-card__lead text-center">
-          <Icon size="2xl" symbol="settings" />
+          <Icon size="2xl">
+            <Cog8ToothIcon />
+          </Icon>
           <h2 className="form-card__title">{t(`authentication.terms.reviewToc`)}</h2>
           <p className="field-note mt-4 text-center">
             {t(`authentication.terms.youMustAcceptToc`)}