@bloom-housing/ui-components 4.1.2 → 4.1.3-alpha.2

package/src/navigation/FooterNav.scss

@@ -30,8 +30,7 @@
 
   .footer-copyright {
     @screen lg {
-      @apply w-6/12;
-      @apply text-left;
+      @apply w-full;
     }
   }
 

package/src/navigation/FooterNav.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import "./FooterNav.scss"
 
 export interface FooterNavProps {
-  children: React.ReactNode
+  children?: React.ReactNode
   copyright: string
 }
 
@@ -10,8 +10,7 @@ const FooterNav = (props: FooterNavProps) => (
   <section className="footer-sock">
     <div className="footer-sock__inner">
       <p className="footer-copyright">{props.copyright}</p>
-
-      <nav className="footer-nav">{props.children}</nav>
+      {props.children && <nav className="footer-nav">{props.children}</nav>}
     </div>
   </section>
 )

package/src/notifications/ApplicationStatus.tsx

@@ -5,30 +5,37 @@ import "./ApplicationStatus.scss"
 
 export interface ApplicationStatusProps {
   content: string
-  subContent?: string
+  iconColor?: string
+  iconType?: IconTypes
   status?: ApplicationStatusType
+  subContent?: string
   vivid?: boolean
   withIcon?: boolean
-  iconType?: IconTypes
 }
 
 const ApplicationStatus = (props: ApplicationStatusProps) => {
   let bgColor = ""
+  const {
+    content,
+    iconColor,
+    iconType = "clock",
+    status = ApplicationStatusType.Open,
+    subContent,
+    vivid,
+    withIcon = true,
+  } = props
+
   // determine styling
-  const vivid = props.vivid || false
   let textColor = vivid ? "text-white" : "text-gray-800"
   const textSize = vivid ? "text-xs" : "text-sm"
 
-  const status = props.status || ApplicationStatusType.Open
-  const content = props.content
-  const withIcon = props.withIcon ?? true
-  const iconType = props.iconType ?? "clock"
-
-  let icon
-
-  if (withIcon) {
-    icon = <Icon size="medium" symbol={iconType} fill={vivid ? IconFillColors.white : undefined} />
-  }
+  const icon = withIcon && (
+    <Icon
+      size="medium"
+      symbol={iconType}
+      fill={iconColor || (vivid ? IconFillColors.white : undefined)}
+    />
+  )
 
   switch (status) {
     case ApplicationStatusType.Open:
@@ -54,10 +61,10 @@ const ApplicationStatus = (props: ApplicationStatusProps) => {
       {icon}
       <span>
         {content}
-        {props.subContent && (
+        {subContent && (
           <>
             <br />
-            {props.subContent}
+            {subContent}
           </>
         )}
       </span>

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -13,6 +13,7 @@ import {
   ErrorMessage,
   emailRegex,
 } from "@bloom-housing/ui-components"
+import { NetworkErrorReset, NetworkStatusContent } from "@bloom-housing/shared-helpers"
 import { NavigationContext } from "../../config/NavigationContext"
 import type { UseFormMethods } from "react-hook-form"
 
@@ -22,15 +23,8 @@ export type FormForgotPasswordProps = {
   networkError: FormForgotPasswordNetworkError
 }
 
-export type NetworkErrorReset = () => void
-
-export type NetworkErrorValue = {
-  title: string
-  content: string
-} | null
-
 export type FormForgotPasswordNetworkError = {
-  error: NetworkErrorValue
+  error: NetworkStatusContent
   reset: NetworkErrorReset
 }
 
@@ -75,7 +69,7 @@ const FormForgotPassword = ({
           </AlertBox>
 
           <AlertNotice title="" type="alert" inverted>
-            {networkError.error.content}
+            {networkError.error.description}
           </AlertNotice>
         </ErrorMessage>
       )}

package/src/page_components/listing/ListingCard.scss

@@ -34,19 +34,17 @@
   }
 }
 
-.listings-row_title {
-  @apply font-alt-sans;
-  @apply font-semibold;
-  @apply text-gray-900;
-  @apply text-base;
-  @apply mb-2;
+.listings-row_table {
+  @apply mb-4;
 }
 
-.listings-row_subtitle {
-  @apply font-alt-sans;
-  @apply text-gray-800;
-  @apply text-sm;
-  @apply mb-3;
+.listings-row_footer {
+  @apply flex;
+  @apply justify-end;
+  @apply w-full;
+  a:not(:first-child) {
+    @apply ml-1;
+  }
 }
 
 .listings-row_table {

package/src/page_components/listing/ListingCard.tsx

@@ -1,70 +1,133 @@
 import * as React from "react"
-import { ImageCard, ImageCardProps } from "../../blocks/ImageCard"
+import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
-
-import { t } from "../../helpers/translator"
-import "./ListingCard.scss"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
+import { Heading, HeaderType } from "../../headers/Heading"
+import { Tag } from "../../text/Tag"
+import { AppearanceStyleType } from "../../global/AppearanceTypes"
+import { Icon, IconFillColors } from "../../icons/Icon"
+import "./ListingCard.scss"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
-export interface ListingCardHeaderProps {
-  tableHeader?: string
-  tableHeaderClass?: string
-  tableSubHeader?: string
-  tableSubHeaderClass?: string
-  stackedTable?: boolean
+export interface CardHeader {
+  customClass?: string
+  text: string
+}
+
+export interface FooterButton {
+  href: string
+  text: string
+}
+
+export interface ListingCardContentProps {
+  contentHeader?: CardHeader
+  contentSubheader?: CardHeader
+  tableHeader?: CardHeader
+  tableSubheader?: CardHeader
 }
 export interface ListingCardProps {
-  imageCardProps: ImageCardProps
+  cardTags?: ImageTag[]
   children?: React.ReactElement
-  seeDetailsLink?: string
-  tableHeaderProps?: ListingCardHeaderProps
+  contentProps?: ListingCardContentProps
+  footerButtons?: FooterButton[]
+  footerContainerClass?: string
+  footerContent?: React.ReactNode
+  imageCardProps: ImageCardProps
+  stackedTable?: boolean
   tableProps?: ListingCardTableProps
-  detailsLinkClass?: string
 }
 
+/**
+ * @component ListingCard
+ *
+ * A component that renders an image with optional status bars below it,
+ * and a content section associated with the image which can include titles, a table, and custom content
+ *
+ * @prop cardTags -A list of tags to be rendered below the content header, a Tag component is rendered for each
+ * @prop children - Custom content rendered in the content section above the table
+ * @prop footerButtons - A list of buttons to render in the footer of the content section
+ * @prop footerContent - Custom content rendered below the content table
+ * @prop footerContainerClass - A class name applied to the footer container of the content section
+ * @prop imageCardProps - Prop interface for the ImageCard component
+ * @prop stackedTable - Toggles on the StackedTable component in place of the default StandardTable component - they are functionally equivalent with differing UIs
+ * @prop contentProps - An object containing fields that render optional headers above the content section's table
+ * @prop tableProps - Prop interface for the StandardTable and StackedTable components
+ *
+ */
 const ListingCard = (props: ListingCardProps) => {
-  const { imageCardProps, tableProps, detailsLinkClass, tableHeaderProps, children } = props
+  const {
+    cardTags,
+    children,
+    footerButtons,
+    footerContent,
+    footerContainerClass,
+    imageCardProps,
+    stackedTable,
+    contentProps,
+    tableProps,
+  } = props
 
-  const tableHeader = () => {
-    return (
-      <h3
-        className={`listings-row_title ${
-          tableHeaderProps?.tableHeaderClass && tableHeaderProps?.tableHeaderClass
-        }`}
-      >
-        {tableHeaderProps?.tableHeader}
-      </h3>
-    )
+  const getHeader = (
+    header: CardHeader | undefined,
+    priority: number,
+    style?: HeaderType,
+    customClass?: string
+  ) => {
+    if (header && header.text) {
+      return (
+        <Heading priority={priority} style={style} className={customClass}>
+          {header.text}
+        </Heading>
+      )
+    } else {
+      return <></>
+    }
   }
 
-  const tableSubHeader = () => {
+  const getContentHeader = () => {
     return (
-      <h4
-        className={`listings-row_subtitle ${
-          tableHeaderProps?.tableSubHeaderClass && tableHeaderProps?.tableSubHeaderClass
-        }`}
-      >
-        {tableHeaderProps?.tableSubHeader}
-      </h4>
+      <>
+        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
+        {cardTags && cardTags?.length > 0 && (
+          <div className={"inline-flex flex-wrap justify-start w-full"}>
+            {cardTags?.map((cardTag, index) => {
+              return (
+                <Tag styleType={AppearanceStyleType.warning} className={"mr-2 mb-2"} key={index}>
+                  {cardTag.iconType && (
+                    <Icon
+                      size={"medium"}
+                      symbol={cardTag.iconType}
+                      fill={cardTag.iconColor ?? IconFillColors.primary}
+                      className={"mr-2"}
+                    />
+                  )}
+                  {cardTag.text}
+                </Tag>
+              )
+            })}
+          </div>
+        )}
+      </>
     )
   }
 
-  return (
-    <article className="listings-row" data-test-id={"listing-card-component"}>
-      <div className="listings-row_figure">
-        <ImageCard {...imageCardProps} />
-      </div>
-      <div className="listings-row_content">
-        {tableHeaderProps?.tableHeader && tableHeader()}
-        {tableHeaderProps?.tableSubHeader && tableSubHeader()}
+  const getContent = () => {
+    return (
+      <>
         <div className="listings-row_table">
+          {(contentProps?.tableHeader?.text || contentProps?.tableSubheader?.text) &&
+            (contentProps.contentHeader?.text || contentProps?.contentSubheader?.text) && (
+              <hr className={"mb-2"} />
+            )}
+          {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
+          {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (
             <>
-              {tableHeaderProps?.stackedTable ? (
+              {stackedTable ? (
                 <StackedTable {...(tableProps as StackedTableProps)} />
               ) : (
                 <StandardTable {...(tableProps as StandardTableProps)} />
@@ -72,11 +135,32 @@ const ListingCard = (props: ListingCardProps) => {
             </>
           )}
         </div>
-        {props.seeDetailsLink && (
-          <LinkButton className={detailsLinkClass} href={props.seeDetailsLink}>
-            {t("t.seeDetails")}
-          </LinkButton>
-        )}
+        <div className={"flex flex-col"}>
+          {footerContent && footerContent}
+          {footerButtons && footerButtons?.length > 0 && (
+            <div className={footerContainerClass ?? "listings-row_footer"}>
+              {footerButtons?.map((footerButton, index) => {
+                return (
+                  <LinkButton href={footerButton.href} key={index}>
+                    {footerButton.text}
+                  </LinkButton>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <article className="listings-row" data-test-id={"listing-card-component"}>
+      <div className="listings-row_figure">
+        <ImageCard {...imageCardProps} />
+      </div>
+      <div className="listings-row_content">
+        <div>{getContentHeader()}</div>
+        {getContent()}
       </div>
     </article>
   )

package/src/page_components/sign-in/FormSignIn.tsx

@@ -12,22 +12,17 @@ import {
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
 import { NavigationContext } from "../../config/NavigationContext"
-import type { NetworkErrorReset, NetworkErrorValue } from "../forgot-password/FormForgotPassword"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type NetworkErrorDetermineError = (status: number, error: Error) => void
 
 export type FormSignInProps = {
   control: FormSignInControl
   onSubmit: (data: FormSignInValues) => void
-  networkError: FormSignInNetworkError
+  networkStatus: NetworkStatus
   showRegisterBtn?: boolean
 }
 
-export type FormSignInNetworkError = {
-  error: NetworkErrorValue
-  reset: NetworkErrorReset
-}
-
 export type FormSignInControl = {
   errors: UseFormMethods["errors"]
   handleSubmit: UseFormMethods["handleSubmit"]
@@ -41,7 +36,7 @@ export type FormSignInValues = {
 
 const FormSignIn = ({
   onSubmit,
-  networkError,
+  networkStatus,
   showRegisterBtn,
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
@@ -58,7 +53,7 @@ const FormSignIn = ({
       </div>
       <FormSignInErrorBox
         errors={errors}
-        networkError={networkError}
+        networkStatus={networkStatus}
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">

package/src/page_components/sign-in/FormSignInAddPhone.tsx

@@ -11,12 +11,12 @@ import {
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type FormSignInAddPhoneProps = {
   control: FormSignInAddPhoneControl
   onSubmit: (data: FormSignInAddPhoneValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
   phoneNumber: string
 }
 
@@ -49,7 +49,7 @@ const FormSignInAddPhone = ({
       </div>
       <FormSignInErrorBox
         errors={errors}
-        networkError={networkError}
+        networkStatus={networkError}
         errorMessageId={"add-phone"}
       />
 

package/src/page_components/sign-in/FormSignInErrorBox.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type FormSignInErrorBoxProps = {
   errors: FormSignInErrorBoxControl["errors"]
-  networkError: FormSignInNetworkError
+  networkStatus: NetworkStatus
   errorMessageId: string
 }
 
@@ -14,27 +14,39 @@ export type FormSignInErrorBoxControl = {
   control: UseFormMethods["control"]
 }
 
-const FormSignInErrorBox = ({ networkError, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
   return (
     <div className="border-b">
-      {Object.entries(errors).length > 0 && !networkError.error && (
+      {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
           {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
-      {!!networkError.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={`form-sign-in-${errorMessageId}-error`} error={!!networkError.error}>
-          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
-            {networkError.error.title}
+      {networkStatus.content?.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={`form-sign-in-${errorMessageId}-error`} error={!!networkStatus.content}>
+          <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
+            {networkStatus.content.title}
           </AlertBox>
 
           <AlertNotice title="" type="alert" inverted>
-            {networkError.error.content}
+            {networkStatus.content.description}
           </AlertNotice>
         </ErrorMessage>
       )}
 
+      {networkStatus.type === "success" && (
+        <>
+          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
+            {networkStatus.content?.title}
+          </AlertBox>
+
+          <AlertNotice title="" type="success" inverted>
+            {networkStatus.content?.description}
+          </AlertNotice>
+        </>
+      )}
+
       <SiteAlert type="notice" dismissable />
     </div>
   )

package/src/page_components/sign-in/FormSignInMFACode.tsx

@@ -10,13 +10,14 @@ import {
   SiteAlert,
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
-import { FormSignInNetworkError, FormSignInControl } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
+import { FormSignInControl } from "./FormSignIn"
 import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
 
 export type FormSignInMFACodeProps = {
   control: FormSignInControl
   onSubmit: (data: FormSignInMFACodeValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
   mfaType: EnumRequestMfaCodeMfaType
   allowPhoneNumberEdit: boolean
   phoneNumber: string
@@ -68,7 +69,11 @@ const FormSignInMFACode = ({
             : t("nav.signInMFA.haveSentCodeToEmail")}
         </p>
       </div>
-      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-code"} />
+      <FormSignInErrorBox
+        errors={errors}
+        networkStatus={networkError}
+        errorMessageId={"mfa-code"}
+      />
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -11,13 +11,13 @@ import {
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
 
 export type FormSignInMFAProps = {
   control: FormSignInMFAControl
   onSubmit: (data: FormSignInMFAValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
 }
 
 export type FormSignInMFAControl = {
@@ -51,7 +51,11 @@ const FormSignInMFAType = ({
           {t("nav.signInMFA.verificationChoiceSecondaryTitle")}
         </p>
       </div>
-      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-type"} />
+      <FormSignInErrorBox
+        errors={errors}
+        networkStatus={networkError}
+        errorMessageId={"mfa-type"}
+      />
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">