@bloom-housing/ui-components 7.1.0 → 7.2.0

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -8,29 +8,31 @@ import {
   Icon,
   MarkdownSection,
   t,
-} from "@bloom-housing/ui-components"
-import Markdown from "markdown-to-jsx"
-import { useForm } from "react-hook-form"
+} from "../../..";
+import Markdown from "markdown-to-jsx";
+import { useForm } from "react-hook-form";
 
 type FormTermsInValues = {
-  agree: boolean
-}
+  agree: boolean;
+};
 
 export type FormTermsProps = {
-  onSubmit: () => void
-  terms?: string
-}
+  onSubmit: () => void;
+  terms?: string;
+};
 
 const FormTerms = (props: FormTermsProps) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, register, errors } = useForm<FormTermsInValues>()
+  const { handleSubmit, register, errors } = useForm<FormTermsInValues>();
 
   return (
     <Form id="terms" className="mt-10" onSubmit={handleSubmit(props.onSubmit)}>
       <FormCard>
         <div className="form-card__lead text-center">
           <Icon size="2xl" symbol="settings" />
-          <h2 className="form-card__title">{t(`authentication.terms.reviewToc`)}</h2>
+          <h2 className="form-card__title">
+            {t(`authentication.terms.reviewToc`)}
+          </h2>
           <p className="field-note mt-4 text-center">
             {t(`authentication.terms.youMustAcceptToc`)}
           </p>
@@ -38,7 +40,9 @@ const FormTerms = (props: FormTermsProps) => {
           <div className="overflow-y-auto max-h-96 mt-5 pr-4 text-left">
             {props.terms && (
               <MarkdownSection padding={false} fullwidth={true}>
-                <Markdown options={{ disableParsingRawHTML: false }}>{props.terms}</Markdown>
+                <Markdown options={{ disableParsingRawHTML: false }}>
+                  {props.terms}
+                </Markdown>
               </MarkdownSection>
             )}
           </div>
@@ -63,14 +67,17 @@ const FormTerms = (props: FormTermsProps) => {
 
         <div className="form-card__pager">
           <div className="form-card__pager-row primary">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="form-submit"
+            >
               {t("t.submit")}
             </Button>
           </div>
         </div>
       </FormCard>
     </Form>
-  )
-}
+  );
+};
 
-export { FormTerms as default, FormTerms }
+export { FormTerms as default, FormTerms };

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

@@ -7,21 +7,21 @@ import {
   Field,
   emailRegex,
   AppearanceSizeType,
-} from "@bloom-housing/ui-components"
-import React, { useEffect, useMemo } from "react"
-import { useForm } from "react-hook-form"
+} from "../../..";
+import React, { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
 
 export type ResendConfirmationModalProps = {
-  isOpen: boolean
-  initialEmailValue: string
-  onClose: () => void
-  onSubmit: (email: string) => void
-  loading: boolean
-}
+  isOpen: boolean;
+  initialEmailValue: string;
+  onClose: () => void;
+  onSubmit: (email: string) => void;
+  loading: boolean;
+};
 
 export type ResendConfirmationModalForm = {
-  onSubmit: (email: string) => void
-}
+  onSubmit: (email: string) => void;
+};
 
 const ResendConfirmationModal = ({
   isOpen,
@@ -35,23 +35,23 @@ const ResendConfirmationModal = ({
     defaultValues: useMemo(() => {
       return {
         emailResend: initialEmailValue,
-      }
+      };
     }, [initialEmailValue]),
-  })
+  });
 
   useEffect(() => {
     reset({
       emailResend: initialEmailValue,
-    })
-  }, [initialEmailValue, reset])
+    });
+  }, [initialEmailValue, reset]);
 
   const onFormSubmit = async () => {
-    const isValid = await trigger()
-    if (!isValid) return
+    const isValid = await trigger();
+    if (!isValid) return;
 
-    const { emailResend } = getValues()
-    onSubmit(emailResend)
-  }
+    const { emailResend } = getValues();
+    onSubmit(emailResend);
+  };
 
   return (
     <Modal
@@ -59,8 +59,8 @@ const ResendConfirmationModal = ({
       title={t("authentication.signIn.yourAccountIsNotConfirmed")}
       ariaDescription={t("authentication.createAccount.linkExpired")}
       onClose={() => {
-        onClose()
-        window.scrollTo(0, 0)
+        onClose();
+        window.scrollTo(0, 0);
       }}
       actions={[
         <Button
@@ -76,8 +76,8 @@ const ResendConfirmationModal = ({
           type="button"
           styleType={AppearanceStyleType.alert}
           onClick={() => {
-            onClose()
-            window.scrollTo(0, 0)
+            onClose();
+            window.scrollTo(0, 0);
           }}
           size={AppearanceSizeType.small}
         >
@@ -100,10 +100,12 @@ const ResendConfirmationModal = ({
           />
         </Form>
 
-        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
+        <p className="pt-4">
+          {t("authentication.createAccount.resendEmailInfo")}
+        </p>
       </>
     </Modal>
-  )
-}
+  );
+};
 
-export { ResendConfirmationModal as default, ResendConfirmationModal }
+export { ResendConfirmationModal as default, ResendConfirmationModal };

package/src/prototypes/AppCard.stories.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+
+import "./AppCard.scss"
+
+export default {
+  title: "Prototypes/AppCard",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const AppCard = () => (
+  <div className="app-card">
+    <div className="app-card__header border-bottom">
+      <div className="app-card__back">
+        <a href="#" className="lined">
+          Back
+        </a>
+      </div>
+      <h2 className="app-card__question">
+        Who would you’d like us to contact if we can’t get ahold of you?
+      </h2>
+      <p className="app-card__note">
+        By providing an alternate contact, you are allowing us to discuss information on your
+        application with them.
+      </p>
+    </div>
+    <header className="app-card__sub-header border-top">
+      <h3 className="app-card__sub-title">You</h3>
+    </header>
+    <div className="app-card__section inset">
+      <div className="info-item mb-4">
+        <h4 className="info-item__name">Name</h4>
+        <p className="info-item__value">Laura Smith</p>
+      </div>
+      <div className="info-item mb-4">
+        <p className="info-item__value">Laura Smith</p>
+        <h4 className="info-item__name">Name</h4>
+      </div>
+    </div>
+  </div>
+)
+
+export const AppCardEdit = () => (
+  <div className="app-card">
+    <div className="app-card__header border-bottom">
+      <div className="app-card__back">
+        <a href="#" className="lined">
+          Back
+        </a>
+      </div>
+      <h2 className="app-card__question">
+        Who would you’d like us to contact if we can’t get ahold of you?
+      </h2>
+      <p className="app-card__note">
+        By providing an alternate contact, you are allowing us to discuss information on your
+        application with them.
+      </p>
+    </div>
+    <header className="app-card__sub-header border-top">
+      <h3 className="app-card__sub-title">You</h3>
+      <a className="edit-link hide-for-print darker" href="#">
+        Edit
+      </a>
+    </header>
+    <div className="app-card__section inset">
+      <div className="info-item mb-4 pb-4 border-b">
+        <h4 className="info-item__name">Name</h4>
+        <p className="info-item__value">Laura Smith</p>
+        <a className="edit-link info-item__link" href="#">
+          Edit
+        </a>
+      </div>
+      <div className="info-item mb-4 pb-4 border-b">
+        <p className="info-item__value">Laura Smith</p>
+        <h4 className="info-item__name">Name</h4>
+        <a className="edit-link info-item__link" href="#">
+          Edit
+        </a>
+      </div>
+    </div>
+  </div>
+)

package/src/prototypes/Back.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+
+import "./Back.scss"
+
+export default {
+  title: "Prototypes/Back",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Back = () => (
+  <span className="back">
+    <a href="#">Back</a>
+  </span>
+)

package/src/prototypes/ButtonGroup.stories.tsx

@@ -0,0 +1,53 @@
+import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
+import React from "react"
+import { Button } from "../actions/Button"
+
+import "./ButtonGroup.scss"
+
+export default {
+  title: "Prototypes/ButtonGroup",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+const handleClick = (e: React.MouseEvent) => {
+  alert(`You clicked me! Event: ${e.type}`)
+}
+
+export const ButtonGroup = () => (
+  <div className="button-group grid grid-cols-2 gap-2">
+    <div className="button-group__item">
+      <Button size={AppearanceSizeType.small} onClick={handleClick}>
+        Save
+      </Button>
+    </div>
+    <div className="button-group__item">
+      <Button size={AppearanceSizeType.small} className="is-secondary" onClick={handleClick}>
+        Preview
+      </Button>
+    </div>
+  </div>
+)
+
+export const ButtonGroupStack = () => (
+  <div className="button-group grid grid-cols-2 gap-2">
+    <div className="button-group__item">
+      <Button size={AppearanceSizeType.small} onClick={handleClick}>
+        Save
+      </Button>
+    </div>
+    <div className="button-group__item">
+      <Button size={AppearanceSizeType.small} className="is-secondary" onClick={handleClick}>
+        Preview
+      </Button>
+    </div>
+    <div className="button-group__item col-span-2">
+      <Button
+        size={AppearanceSizeType.small}
+        styleType={AppearanceStyleType.primary}
+        onClick={handleClick}
+      >
+        Submit
+      </Button>
+    </div>
+  </div>
+)

package/src/prototypes/ButtonPager.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+import "./ButtonPager.scss"
+
+export default {
+  title: "Prototypes/ButtonPager",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const ButtonPager = () => (
+  <div className="button-pager">
+    <div className="button-pager__row primary">
+      <button className="button is-filled">Next</button>
+    </div>
+    <div className="button-pager__row">
+      <button className="button is-unstyled">Save and Finish Later</button>
+    </div>
+  </div>
+)

package/src/prototypes/FieldSection.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { FieldSection } from "./FieldSection"
+import { GridItem } from "./GridItem"
+import { Field } from "../forms/Field"
+
+export default {
+  title: "Prototypes/FieldSection",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const FourColumns = () => {
+  const { register } = useForm()
+  return (
+    <FieldSection title="Section Title" className="md:grid md:grid-cols-4 md:gap-8">
+      <Field label="Alpha" placeholder="Enter text" name="label1" register={register} />
+
+      <Field label="Beta" placeholder="Enter text" name="label2" register={register} />
+
+      <Field label="Gamma" placeholder="Enter text" name="label3" register={register} />
+
+      <Field label="Delta" placeholder="Enter text" name="label4" register={register} />
+
+      <Field label="Epsilon" placeholder="Enter text" name="label5" register={register} />
+
+      <Field label="Zeta" placeholder="Enter text" name="label6" register={register} />
+
+      <Field label="Eta" placeholder="Enter text" name="label7" register={register} />
+
+      <Field label="Theta" placeholder="Enter text" name="label8" register={register} />
+    </FieldSection>
+  )
+}
+
+export const FieldGroupAddress = () => {
+  const { register } = useForm()
+
+  return (
+    <FieldSection title="Section Title" className="md:grid md:grid-cols-4 md:gap-8">
+      <div className="field-group md:col-span-3">
+        <h3 className="field-group__title">My Group</h3>
+        <div className="field-subgrid md:grid md:grid-cols-6 md:gap-8">
+          <GridItem className="md:col-span-4">
+            <Field
+              label="Street Address"
+              placeholder="Enter text"
+              name="label1"
+              register={register}
+            />
+          </GridItem>
+
+          <GridItem className="md:col-span-2">
+            <Field label="Address 2" placeholder="Enter text" name="label2" register={register} />
+          </GridItem>
+
+          <GridItem className="md:col-span-2">
+            <Field label="City" placeholder="Enter text" name="label3" register={register} />
+          </GridItem>
+
+          <Field label="State" placeholder="Enter text" name="label4" register={register} />
+
+          <Field label="Zip" placeholder="Enter text" name="label5" register={register} />
+        </div>
+      </div>
+    </FieldSection>
+  )
+}
+
+export const FieldSectionBlank = () => (
+  <FieldSection title="Section Title" tinted={true} insetGrid={true}>
+    <button className="button is-small">Add Household Member</button>
+  </FieldSection>
+)

package/src/prototypes/GridItem.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { GridItem } from "./GridItem"
+import { Field } from "../forms/Field"
+
+export default {
+  title: "Prototypes/GridItem",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => {
+  const { register } = useForm()
+  return (
+    <GridItem>
+      <Field label="Alpha" placeholder="Enter text" name="label1" register={register} />
+    </GridItem>
+  )
+}
+
+export const TwoColumns = () => {
+  const { register } = useForm()
+  return (
+    <GridItem className="md:col-span-2">
+      <Field label="Alpha" placeholder="Enter text" name="label1" register={register} />
+    </GridItem>
+  )
+}

package/src/prototypes/SummaryCard.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { mockData, mockHeaders } from "../tables/StandardTable.stories"
+import { MinimalTable } from "../tables/MinimalTable"
+
+import "./SummaryCard.scss"
+
+export default {
+  title: "Prototypes/SummaryCard",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const SummaryCard = () => (
+  <div className="summary-card">
+    <header className="summary-card__header">
+      <h2 className="summary-card__title">
+        <a href="#">My Property</a>
+      </h2>
+    </header>
+    <MinimalTable headers={mockHeaders} data={mockData} />
+  </div>
+)
+
+export const SummaryCardHeading = () => (
+  <div className="summary-card">
+    <header className="summary-card__header bg-gray-100 border-b mb-2">
+      <h2 className="summary-card__title">
+        <a href="#">My Property</a>
+      </h2>
+      <p className="text-sm mt-3">
+        <span>1 Polk St, San Francisco, CA 94102</span>
+        <span className="ml-4 pl-4 border-l border-gray-600">Waitlist: 353</span>
+      </p>
+    </header>
+    <MinimalTable headers={mockHeaders} data={mockData} />
+  </div>
+)