@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/page_components/listing/listing_sidebar/events/EventSection.stories.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import EventSection, { EventType } from "./EventSection"
+
+export default {
+  title: "Listing Sidebar/Events/Event Section",
+}
+
+export const NoFields = () => {
+  const events: EventType[] = []
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const TimeRange = () => {
+  const events: EventType[] = [{ dateString: "July 22, 2022", timeString: "3:00pm - 10:00pm" }]
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const SingleTime = () => {
+  const events: EventType[] = [{ dateString: "December 30, 2022", timeString: "10:00am" }]
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const NoTime = () => {
+  const events: EventType[] = [{ dateString: "July 22, 2022" }]
+  return <EventSection events={events} headerText={"Lottery Results"} />
+}
+
+export const URL = () => {
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      linkURL: "https://www.exygy.com",
+      linkText: "See Video",
+    },
+  ]
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const Note = () => {
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      note:
+        "Virtual lottery (not in person). We will post a link to the virtual lottery on February 23rd. Check back then.",
+    },
+  ]
+  return <EventSection events={events} headerText={"Lottery"} sectionHeader={true} />
+}
+
+export const LongStrings = () => {
+  const events: EventType[] = [
+    {
+      dateString: "This is a long date string",
+      timeString: "This is a long time string",
+    },
+  ]
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const MultipleEvents = () => {
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      linkURL: "https://www.exygy.com",
+      linkText: "See Video",
+    },
+    {
+      dateString: "November 25, 2022",
+      timeString: "5:00pm",
+      linkURL: "https://www.exygy.com",
+      linkText: "Agenda",
+    },
+  ]
+  return <EventSection events={events} headerText={"Open Houses"} />
+}
+
+export const PageSectionHeader = () => {
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      linkURL: "https://www.exygy.com",
+      linkText: "See Video",
+    },
+    {
+      dateString: "November 25, 2022",
+      timeString: "5:00pm",
+      linkURL: "https://www.exygy.com",
+      linkText: "Agenda",
+    },
+  ]
+  return <EventSection events={events} headerText={"Open Houses"} sectionHeader={true} />
+}
+
+export const MultipleSections = () => {
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      note: "Event note",
+    },
+  ]
+  return (
+    <>
+      <EventSection events={events} headerText={"Open Houses"} />
+      <EventSection events={events} headerText={"Informational Sessions"} />
+    </>
+  )
+}
+
+export const FragmentNote = () => {
+  const note = () => {
+    return (
+      <p>
+        I'm a <a href={"https://www.exygy.com"}>fragment note</a>.
+      </p>
+    )
+  }
+  const events: EventType[] = [
+    {
+      dateString: "November 22, 2022",
+      timeString: "10:00am - 11:00am",
+      note: note(),
+    },
+  ]
+  return (
+    <>
+      <EventSection events={events} headerText={"Open Houses"} />
+    </>
+  )
+}
+
+export const TitleCapitalizedDate = () => {
+  const events: EventType[] = [{ dateString: "July 22, 2022" }]
+  return <EventSection events={events} headerText={"Lottery Results"} dateClassName="normal-case" />
+}

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,47 +9,47 @@ import {
   LinkButton,
   t,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NavigationContext } from "../../config/NavigationContext"
-import { AlertTypes } from "../../notifications/alertTypes"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NavigationContext } from "../../config/NavigationContext";
+import { AlertTypes } from "../../notifications/alertTypes";
 
-export type NetworkErrorDetermineError = (status: number, error: Error) => void
+export type NetworkErrorDetermineError = (status: number, error: Error) => void;
 
-export type NetworkStatusType = AlertTypes
+export type NetworkStatusType = AlertTypes;
 
-export type NetworkErrorReset = () => void
+export type NetworkErrorReset = () => void;
 
 export type NetworkStatusContent = {
-  title: string
-  description: string
-  error?: boolean
-} | null
+  title: string;
+  description: string;
+  error?: boolean;
+} | null;
 
 export type NetworkStatus = {
-  content: NetworkStatusContent
-  type?: NetworkStatusType
-  reset: NetworkErrorReset
-}
+  content: NetworkStatusContent;
+  type?: NetworkStatusType;
+  reset: NetworkErrorReset;
+};
 
 export type FormSignInProps = {
-  control: FormSignInControl
-  onSubmit: (data: FormSignInValues) => void
-  networkStatus: NetworkStatus
-  showRegisterBtn?: boolean
-}
+  control: FormSignInControl;
+  onSubmit: (data: FormSignInValues) => void;
+  networkStatus: NetworkStatus;
+  showRegisterBtn?: boolean;
+};
 
 export type FormSignInControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-  watch: UseFormMethods["watch"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+  watch: UseFormMethods["watch"];
+};
 
 export type FormSignInValues = {
-  email: string
-  password: string
-}
+  email: string;
+  password: string;
+};
 
 const FormSignIn = ({
   onSubmit,
@@ -58,9 +58,9 @@ const FormSignIn = ({
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { LinkComponent } = useContext(NavigationContext)
+    window.scrollTo(0, 0);
+  };
+  const { LinkComponent } = useContext(NavigationContext);
 
   return (
     <FormCard>
@@ -74,7 +74,11 @@ const FormSignIn = ({
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="email"
@@ -105,7 +109,10 @@ const FormSignIn = ({
           />
 
           <div className="text-center mt-6">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="sign-in-button">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="sign-in-button"
+            >
               {t("nav.signIn")}
             </Button>
           </div>
@@ -113,13 +120,17 @@ const FormSignIn = ({
       </div>
       {showRegisterBtn && (
         <div className="form-card__group text-center border-t">
-          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
+          <h2 className="mb-6">
+            {t("authentication.createAccount.noAccount")}
+          </h2>
 
-          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
+          <LinkButton href="/create-account">
+            {t("account.createAccount")}
+          </LinkButton>
         </div>
       )}
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignIn as default, FormSignIn }
+export { FormSignIn as default, FormSignIn };

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,26 +9,26 @@ import {
   SiteAlert,
   PhoneField,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInAddPhoneProps = {
-  control: FormSignInAddPhoneControl
-  onSubmit: (data: FormSignInAddPhoneValues) => void
-  networkError: NetworkStatus
-  phoneNumber: string
-}
+  control: FormSignInAddPhoneControl;
+  onSubmit: (data: FormSignInAddPhoneValues) => void;
+  networkError: NetworkStatus;
+  phoneNumber: string;
+};
 
 export type FormSignInAddPhoneControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  control: UseFormMethods["control"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  control: UseFormMethods["control"];
+};
 
 export type FormSignInAddPhoneValues = {
-  phoneNumber: string
-}
+  phoneNumber: string;
+};
 
 const FormSignInAddPhone = ({
   onSubmit,
@@ -37,15 +37,19 @@ const FormSignInAddPhone = ({
   phoneNumber,
 }: FormSignInAddPhoneProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { errors, handleSubmit } = control
+    window.scrollTo(0, 0);
+  };
+  const { errors, handleSubmit } = control;
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
-        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.addNumber")}
+        </h2>
+        <p className="form-card__sub-title">
+          {t("nav.signInMFA.addNumberSecondaryTitle")}
+        </p>
       </div>
       <FormSignInErrorBox
         errors={errors}
@@ -55,7 +59,11 @@ const FormSignInAddPhone = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <PhoneField
             label={t("nav.signInMFA.phoneNumber")}
             caps={true}
@@ -81,7 +89,7 @@ const FormSignInAddPhone = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInAddPhone as default, FormSignInAddPhone }
+export { FormSignInAddPhone as default, FormSignInAddPhone };

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

@@ -1,25 +1,31 @@
-import React from "react"
-import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+import React from "react";
+import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInErrorBoxProps = {
-  errors: FormSignInErrorBoxControl["errors"]
-  networkStatus: NetworkStatus
-  errorMessageId: string
-}
+  errors: FormSignInErrorBoxControl["errors"];
+  networkStatus: NetworkStatus;
+  errorMessageId: string;
+};
 
 export type FormSignInErrorBoxControl = {
-  errors: UseFormMethods["errors"]
-  control: UseFormMethods["control"]
-}
+  errors: UseFormMethods["errors"];
+  control: UseFormMethods["control"];
+};
 
-const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({
+  networkStatus,
+  errors,
+  errorMessageId,
+}: FormSignInErrorBoxProps) => {
   return (
     <div className="border-b">
       {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          {errors.authentication
+            ? errors.authentication.message
+            : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
@@ -29,7 +35,11 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
           error={!!networkStatus.content}
           className="block mt-0 leading-normal text-alert"
         >
-          <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
+          <AlertBox
+            type={"alert"}
+            inverted
+            onClose={() => networkStatus.reset()}
+          >
             {networkStatus.content.title}
           </AlertBox>
 
@@ -41,7 +51,11 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
 
       {networkStatus.type === "success" && (
         <>
-          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
+          <AlertBox
+            type="success"
+            inverted
+            onClose={() => networkStatus.reset()}
+          >
             {networkStatus.content?.title}
           </AlertBox>
 
@@ -53,7 +67,7 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
 
       <SiteAlert type="notice" dismissable />
     </div>
-  )
-}
+  );
+};
 
-export { FormSignInErrorBox as default, FormSignInErrorBox }
+export { FormSignInErrorBox as default, FormSignInErrorBox };

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,8 +9,8 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import { NetworkStatus, FormSignInControl } from "./FormSignIn"
+} from "../../..";
+import { NetworkStatus, FormSignInControl } from "./FormSignIn";
 
 export enum RequestType {
   email = "email",
@@ -18,18 +18,18 @@ export enum RequestType {
 }
 
 export type FormSignInMFACodeProps = {
-  control: FormSignInControl
-  onSubmit: (data: FormSignInMFACodeValues) => void
-  networkError: NetworkStatus
-  mfaType: RequestType
-  allowPhoneNumberEdit: boolean
-  phoneNumber: string
-  goBackToPhone: () => void
-}
+  control: FormSignInControl;
+  onSubmit: (data: FormSignInMFACodeValues) => void;
+  networkError: NetworkStatus;
+  mfaType: RequestType;
+  allowPhoneNumberEdit: boolean;
+  phoneNumber: string;
+  goBackToPhone: () => void;
+};
 
 export type FormSignInMFACodeValues = {
-  mfaCode: string
-}
+  mfaCode: string;
+};
 
 const FormSignInMFACode = ({
   onSubmit,
@@ -41,10 +41,10 @@ const FormSignInMFACode = ({
   goBackToPhone,
 }: FormSignInMFACodeProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
-  let note
+  let note;
   if (allowPhoneNumberEdit) {
     note = (
       <>
@@ -58,14 +58,16 @@ const FormSignInMFACode = ({
           {t("nav.signInMFA.editPhoneNumber")}{" "}
         </Button>
       </>
-    )
+    );
   }
 
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.verifyTitle")}</h2>
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.verifyTitle")}
+        </h2>
         <p className="form-card__sub-title">
           {mfaType === RequestType.sms
             ? t("nav.signInMFA.haveSentCodeToPhone")
@@ -80,7 +82,11 @@ const FormSignInMFACode = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="mfaCode"
@@ -93,14 +99,17 @@ const FormSignInMFACode = ({
             note={note}
           />
           <div className="text-center mt-10">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="verify-and-sign-in">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="verify-and-sign-in"
+            >
               {t("nav.signInMFA.signIn")}
             </Button>
           </div>
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInMFACode as default, FormSignInMFACode }
+export { FormSignInMFACode as default, FormSignInMFACode };

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,24 +9,24 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInMFAProps = {
-  control: FormSignInMFAControl
-  onSubmit: (data: unknown) => void
-  networkError: NetworkStatus
-  emailOnClick: () => void
-  smsOnClick: () => void
-}
+  control: FormSignInMFAControl;
+  onSubmit: (data: unknown) => void;
+  networkError: NetworkStatus;
+  emailOnClick: () => void;
+  smsOnClick: () => void;
+};
 
 export type FormSignInMFAControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-  setValue: UseFormMethods["setValue"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+  setValue: UseFormMethods["setValue"];
+};
 
 const FormSignInMFAType = ({
   onSubmit,
@@ -36,8 +36,8 @@ const FormSignInMFAType = ({
   smsOnClick,
 }: FormSignInMFAProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
   return (
     <FormCard>
@@ -58,7 +58,11 @@ const FormSignInMFAType = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="mfaType"
@@ -92,7 +96,7 @@ const FormSignInMFAType = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInMFAType as default, FormSignInMFAType }
+export { FormSignInMFAType as default, FormSignInMFAType };