@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/blocks/MediaCard.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { MediaCard } from "./MediaCard"
+import { faCirclePlay } from "@fortawesome/free-solid-svg-icons"
+import MediaCardDocumentation from "./MediaCard.docs.mdx"
+import { BADGES } from "../../.storybook/constants"
+
+export default {
+  title: "Blocks/Media Card 🚩",
+  id: "blocks/media-card",
+  decorators: [(storyFn: any) => <div style={{ maxWidth: "313px" }}>{storyFn()}</div>],
+  parameters: {
+    docs: {
+      page: MediaCardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const withTitleAndSubtitle = () => (
+  <MediaCard
+    title="What is Affordable Housing?"
+    subtitle="List of affordable housing opportunities, subsidized homes, and other housing resources."
+    handleClick={() => alert("Open Video")}
+  />
+)
+export const withJustTitle = () => (
+  <MediaCard title="What is Affordable Housing?" handleClick={() => alert("Open Video")} />
+)
+export const withCustomIcon = () => (
+  <MediaCard
+    title="What is Affordable Housing?"
+    subtitle="List of affordable housing opportunities, subsidized homes, and other housing resources."
+    icon={faCirclePlay}
+    handleClick={() => alert("Open Video")}
+  />
+)

package/src/blocks/StandardCard.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+
+import { StandardCard } from "./StandardCard"
+import { BADGES } from "../../.storybook/constants"
+import { MinimalTable } from "../tables/MinimalTable"
+import { mockDataWithStyling, mockHeadersWithStyling } from "../tables/MinimalTable.stories"
+
+import { Button } from "../actions/Button"
+import StandardCardDocumentation from "./StandardCard.docs.mdx"
+
+export default {
+  title: "Blocks/StandardCard  🚩",
+  id: "blocks/standard-card",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: StandardCard,
+  parameters: {
+    docs: {
+      page: StandardCardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const Blank = () => (
+  <StandardCard
+    title="Standard Card Title"
+    emptyStateMessage="Add items to edit"
+    footer={<Button>Add item</Button>}
+  />
+)
+
+export const WithTable = () => (
+  <StandardCard
+    title="Standard Card Title"
+    emptyStateMessage="Add items to edit"
+    footer={<Button>Add item</Button>}
+  >
+    <div>
+      <MinimalTable headers={mockHeadersWithStyling} data={mockDataWithStyling} draggable={true} />
+    </div>
+  </StandardCard>
+)
+
+export const styleOverrides = () => {
+  const cssVarsOverride = `
+    .standard-card-overrides .standard-card {
+      --font-family: var(--bloom-font-sans);
+      --border-radius: var(--bloom-rounded-md);
+      --border-width: var(--bloom-border-4);
+      --border-color: var(--bloom-color-blue-600);
+      --title-color: var(--bloom-color-blue-600);
+      --background-color: var(--bloom-color-blue-200);
+      --blank-color: var(--bloom-color-black);
+      --blank-background: var(--bloom-color-gray-400);
+    }
+  `
+
+  return (
+    <>
+      <div className="standard-card-overrides">
+        <StandardCard
+          title="Standard Card Title"
+          emptyStateMessage="Add items to edit"
+          footer={<Button>Add item</Button>}
+        />
+        <style>{cssVarsOverride}</style>
+      </div>
+
+      <p className="mt-12 font-semibold">Customized using the following variable overrides:</p>
+
+      <pre>{cssVarsOverride.replace(".page-header-overrides ", "")}</pre>
+    </>
+  )
+}

package/src/blocks/StatusBar.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { Button } from "../actions/Button"
+import { StatusBar } from "./StatusBar"
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+
+export default {
+  title: "Blocks/Status Bar",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+const handleClick = (e: React.MouseEvent) => {
+  alert(`You clicked me! Event: ${e.type}`)
+}
+
+export const StatusBarSuccessAndBackButton = () => (
+  <StatusBar
+    backButton={
+      <Button inlineIcon="left" icon="arrowBack" onClick={handleClick}>
+        Back
+      </Button>
+    }
+    tagLabel="Submitted"
+    tagStyle={AppearanceStyleType.success}
+  />
+)
+
+export const StatusBarDraft = () => (
+  <StatusBar tagLabel="Draft" tagStyle={AppearanceStyleType.primary} />
+)

package/src/blocks/StatusItem.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { StatusItem } from "./StatusItem"
+
+export default {
+  title: "Blocks/Status Item",
+}
+
+export const StatusItemSubmitted = () => (
+  <StatusItem
+    applicationDueDate={"March 10th, 2022"}
+    applicationURL={"application/1234abcd"}
+    applicationUpdatedAt={"March 8th, 2022"}
+    confirmationNumber={"1234abcd"}
+    listingName={"Listing Name"}
+    listingURL={"/listing/abcd1234/listing-name"}
+  />
+)
+
+export const StatusItemNoConfirmationNumberOrDueDate = () => (
+  <StatusItem
+    applicationURL={"application/1234abcd"}
+    applicationUpdatedAt={"March 8th, 2022"}
+    listingName={"Listing Name"}
+    listingURL={"/listing/abcd1234/listing-name"}
+  />
+)

package/src/blocks/ViewItem.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+
+import { ViewItem } from "./ViewItem"
+
+export default {
+  title: "Blocks/View Item",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => <ViewItem label="Label" children="Value" helper="Helper" />
+
+export const NoHelper = () => <ViewItem label="Address" children="1112 Springfield St." />
+
+export const Flagged = () => (
+  <ViewItem label="Address" children="1112 Springfield St." flagged={true} />
+)

package/src/footers/SiteFooter.stories.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+
+import { SiteFooter } from "./SiteFooter"
+import { FooterNav } from "../navigation/FooterNav"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { ExygyFooter } from "./ExygyFooter"
+import { FooterSection } from "../sections/FooterSection"
+
+export default {
+  title: "Footers/Site Footer",
+  parameters: {
+    componentSubtitle: "Site-wide footer, shown on every page.",
+  },
+  component: SiteFooter,
+}
+
+const credits = (
+  <>
+    <p>
+      Alameda County Housing Portal is a project of the
+      <br />
+      <a href="https://www.acgov.org/cda/hcd/" target="_blank">
+        Alameda County - Housing and Community Development (HCD) Department
+      </a>
+    </p>
+    <p>
+      <img
+        className="h-16 w-16"
+        src="/images/eho-logo-white.svg"
+        alt="Equal Housing Opportunity Logo"
+      />
+    </p>
+  </>
+)
+const logo = <img src="/images/alameda-logo-white.svg" alt="Alameda Logo" />
+
+export const footer = () => (
+  <SiteFooter>
+    <FooterNav copyright="Alameda County © 2020 • All Rights Reserved">
+      <LocalizedLink href="/policy">Policy</LocalizedLink>
+    </FooterNav>
+  </SiteFooter>
+)
+
+export const footerManyLinks = () => (
+  <SiteFooter>
+    <FooterNav copyright="Alameda County © 2020 • All Rights Reserved">
+      <LocalizedLink href="/policy">Privacy Policy</LocalizedLink>
+      <LocalizedLink href="/policy">Get Assistance</LocalizedLink>
+      <LocalizedLink href="/policy">Give Feedback</LocalizedLink>
+      <LocalizedLink href="/policy">Contact</LocalizedLink>
+      <LocalizedLink href="/policy">About</LocalizedLink>
+    </FooterNav>
+  </SiteFooter>
+)
+
+export const overflowingLinks = () => (
+  <SiteFooter>
+    <FooterNav copyright="Alameda County © 2020 • All Rights Reserved">
+      <LocalizedLink href="/policy">Privacy Policy</LocalizedLink>
+      <LocalizedLink href="/policy">Get Assistance</LocalizedLink>
+      <LocalizedLink href="/policy">Give Feedback</LocalizedLink>
+      <LocalizedLink href="/policy">Contact</LocalizedLink>
+      <LocalizedLink href="/policy">About</LocalizedLink>
+      <LocalizedLink href="/policy">Terms and Conditions</LocalizedLink>
+      <LocalizedLink href="/policy">Careers</LocalizedLink>
+    </FooterNav>
+  </SiteFooter>
+)
+
+export const withLogo = () => (
+  <SiteFooter>
+    <FooterSection>{logo}</FooterSection>
+    <FooterNav copyright="Alameda County © 2020 • All Rights Reserved">
+      <LocalizedLink href="/policy">Policy</LocalizedLink>
+    </FooterNav>
+  </SiteFooter>
+)
+
+export const withLogoAndCredits = () => (
+  <SiteFooter>
+    <FooterSection>{logo}</FooterSection>
+    <FooterSection>{credits}</FooterSection>
+    <FooterNav copyright="Alameda County © 2020 • All Rights Reserved">
+      <LocalizedLink href="/policy">Policy</LocalizedLink>
+    </FooterNav>
+    <FooterSection className="bg-black" small>
+      <ExygyFooter />
+    </FooterSection>
+  </SiteFooter>
+)

package/src/forms/DOBField.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { DOBField } from "./DOBField"
+import { useForm } from "react-hook-form"
+
+export default {
+  title: "Forms/Date of Birth Field",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => {
+  const { register, watch, errors } = useForm({ mode: "onChange" })
+
+  return (
+    <DOBField
+      id="dateOfBirth"
+      name="dateOfBirth"
+      label="Date of Birth"
+      required={true}
+      register={register}
+      watch={watch}
+      error={errors?.dateOfBirth}
+      validateAge18={true}
+    />
+  )
+}

package/src/forms/DateField.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { DateField } from "./DateField"
+import { useForm } from "react-hook-form"
+
+export default {
+  title: "Forms/Date Field",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => {
+  const { register, watch, errors } = useForm({ mode: "onChange" })
+
+  return (
+    <DateField
+      id="appDueDate"
+      name="appDueDate"
+      label="Application Due Date"
+      required={true}
+      register={register}
+      watch={watch}
+      error={errors?.appDueDate}
+    />
+  )
+}

package/src/forms/Dropzone.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { withKnobs, text } from "@storybook/addon-knobs"
+import { CloudinaryUpload } from "./CloudinaryUpload"
+import { Dropzone } from "./Dropzone"
+
+export default {
+  title: "Forms/Dropzone",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>, withKnobs],
+}
+
+export const defaultDropzone = () => {
+  const [progressValue, setProgressValue] = React.useState(0)
+  const [cloudinaryImage, setCloudinaryImage] = React.useState("")
+  const cloudName = text("Cloudinary Cloud", "")
+  const uploadPreset = text("Upload Preset", "")
+
+  const exampleUploader = (file: File) => {
+    CloudinaryUpload({
+      file: file,
+      onUploadProgress: (progress) => {
+        setProgressValue(progress)
+      },
+      cloudName,
+      uploadPreset,
+    }).then((response) => {
+      setProgressValue(100)
+      const imgUrl = `https://res.cloudinary.com/${cloudName}/image/upload/w_400,c_limit,q_65/${response.data.public_id}.jpg`
+      setCloudinaryImage(imgUrl)
+    })
+  }
+
+  return (
+    <>
+      <Dropzone
+        id="test-uploading"
+        label="Upload File"
+        helptext="Select JPEG or PNG files"
+        uploader={exampleUploader}
+        accept="image/*"
+        progress={progressValue}
+      />
+      {progressValue == 0 && (
+        <p className="mt-16">(Provide Cloudinary credentials via the Knobs below.)</p>
+      )}
+      <img
+        src={cloudinaryImage}
+        style={{ width: "200px" }}
+        role={cloudinaryImage ? undefined : "none"}
+        alt={cloudinaryImage && "uploaded file"}
+      />
+    </>
+  )
+}

package/src/forms/Dropzone.tsx

@@ -28,7 +28,7 @@ const Dropzone = (props: DropzoneProps) => {
   const maxFiles = props.maxFiles || 1
 
   const onDrop = useCallback(
-    (acceptedFiles) => {
+    (acceptedFiles: File[]) => {
       acceptedFiles.forEach((file: File) => uploader(file))
     },
     [uploader]

package/src/forms/Field.stories.tsx

@@ -0,0 +1,119 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Field } from "./Field"
+
+export default {
+  title: "Forms/Field",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const FieldDefault = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return <Field register={register} name={"Test Input"} label={"Custom label"} />
+}
+
+export const TextFieldError = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      label={"Custom label"}
+      type={"text"}
+      error={true}
+      errorMessage={"Custom error message"}
+    />
+  )
+}
+
+export const CurrencyField = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      className={"custom-class"}
+      controlClassName={"custom-control-class"}
+      describedBy={"Test Input"}
+      label={"Test Input Custom"}
+      type={"currency"}
+      getValues={getValues}
+      setValue={setValue}
+      prepend={"$"}
+    />
+  )
+}
+
+export const CurrencyFieldError = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      error={true}
+      errorMessage={"Custom error message"}
+      className={"custom-class"}
+      controlClassName={"custom-control-class"}
+      describedBy={"Test Input"}
+      label={"Test Input Custom"}
+      type={"currency"}
+      getValues={getValues}
+      setValue={setValue}
+      prepend={"$"}
+    />
+  )
+}
+
+export const checkboxDefault = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      describedBy={"Test Input"}
+      label={"Test Input"}
+      type={"checkbox"}
+    />
+  )
+}
+
+export const checkboxBordered = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      describedBy={"Test Input"}
+      label={"Test Input"}
+      type={"checkbox"}
+      bordered
+    />
+  )
+}
+
+export const radioDefault = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      describedBy={"Test Input"}
+      label={"Test Input"}
+      type={"radio"}
+    />
+  )
+}
+
+export const radioBordered = () => {
+  const { register, getValues, setValue } = useForm({ mode: "onChange" })
+  return (
+    <Field
+      register={register}
+      name={"Test Input"}
+      describedBy={"Test Input"}
+      label={"Test Input"}
+      type={"radio"}
+      bordered
+    />
+  )
+}

package/src/forms/FieldGroup.stories.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { FieldGroup } from "./FieldGroup"
+
+export default {
+  title: "Forms/FieldGroup",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const FieldGroupDefault = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <FieldGroup
+      register={register}
+      name={"Test Input"}
+      type={"checkbox"}
+      fields={[
+        { id: "1234", label: "Input 1" },
+        { id: "5678", label: "Input 2" },
+      ]}
+      fieldGroupClassName={"field-group-classname"}
+      fieldClassName={"field-classname"}
+      fieldLabelClassName={"text-primary"}
+      groupNote={"Group Note"}
+      groupLabel={"Group Label"}
+    />
+  )
+}
+
+export const FieldGroupDescriptions = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <FieldGroup
+      register={register}
+      name={"Test Input"}
+      type={"radio"}
+      fields={[
+        {
+          id: "1234",
+          label: "Input 1",
+          description: (
+            <span>
+              This is an <em>HTML</em> description
+            </span>
+          ),
+        },
+        { id: "5678", label: "Input 2", description: "This is a text description" },
+        { id: "9765", label: "Input 3" },
+        { id: "4321", label: "Input 4" },
+      ]}
+      fieldGroupClassName="grid grid-cols-1"
+      fieldClassName="ml-0"
+      groupNote={"Group Note"}
+      groupLabel={"Group Label"}
+    />
+  )
+}
+
+export const FieldGroupError = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <FieldGroup
+      error={true}
+      register={register}
+      name={"testInput"}
+      type={"checkbox"}
+      fields={[
+        { id: "1234", label: "Input 1" },
+        { id: "5678", label: "Input 2" },
+      ]}
+      fieldGroupClassName={"field-group-classname"}
+      fieldClassName={"field-classname"}
+      fieldLabelClassName={"text-primary"}
+      groupNote={"Group Note"}
+      groupLabel={"Group Label"}
+    />
+  )
+}

package/src/forms/HouseholdMemberForm.stories.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import HouseholdMemberForm from "./HouseholdMemberForm"
+
+export default {
+  title: "Forms/HouseholdMemberForm",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const editable = () => (
+  <HouseholdMemberForm
+    memberFirstName={"Firstname"}
+    memberLastName={"Lastname"}
+    key={"FirstnameLastname"}
+    subtitle={"Household Member"}
+    editMember={() => {}}
+  />
+)
+
+export const notEditable = () => (
+  <HouseholdMemberForm
+    memberFirstName={"Firstname"}
+    memberLastName={"Lastname"}
+    key={"FirstnameLastname"}
+    subtitle={"Household Member"}
+    editMode={false}
+  />
+)

package/src/forms/HouseholdSizeField.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import HouseholdSizeField from "./HouseholdSizeField"
+
+export default {
+  title: "Forms/HouseholdSizeField",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const errorHouseholdSizeField = () => {
+  const { register } = useForm({ mode: "onChange" })
+  return (
+    <HouseholdSizeField
+      assistanceUrl={""}
+      clearErrors={() => {
+        alert("clearErrors called")
+      }}
+      error={{ message: "Uh oh!", type: "validate" }}
+      householdSize={1}
+      householdSizeMax={3}
+      householdSizeMin={2}
+      register={register}
+      validate={true}
+    />
+  )
+}