@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/notifications/AlertNotice.stories.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import { AlertNotice } from "./AlertNotice"
+
+export default {
+  title: "Notifications/Alert Notice",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const AlertNoticeAlert = () => (
+  <AlertNotice title={"Your household income is too low."}>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeAlertInverted = () => (
+  <AlertNotice title={"Your household income is too low."} inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeNotice = () => (
+  <AlertNotice title={"Your household income is too low."} type="notice">
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeNoticeInverted = () => (
+  <AlertNotice title={"Your household income is too low."} type="notice" inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeSuccess = () => (
+  <AlertNotice title={"Your household income is too low."} type="success">
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)
+
+export const AlertNoticeSuccessInverted = () => (
+  <AlertNotice title={"Your household income is too low."} type="success" inverted>
+    <p className="mb-2">
+      Please edit your income if you believe you might have made a mistake. Be aware that if you
+      falsify any information on your application you will be disqualified.
+    </p>
+    <p>
+      If the information you entered is accurate, we encourage you to check back in the future of as
+      more properties become available.
+    </p>
+  </AlertNotice>
+)

package/src/notifications/ApplicationStatus.stories.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import { ApplicationStatus } from "./ApplicationStatus";
+import { ApplicationStatusType } from "../global/ApplicationStatusType";
+import { t } from "../helpers/translator";
+import Archer from "../../__tests__/fixtures/archer.json";
+import { text, withKnobs } from "@storybook/addon-knobs";
+import formatDateTime from "../helpers/DateFormat";
+
+dayjs.extend(advancedFormat);
+
+export default {
+  component: ApplicationStatus,
+  title: "Notifications/Application Status",
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>, withKnobs],
+};
+
+const listing = Object.assign({}, Archer) as any;
+listing.applicationOpenDate = "";
+let days = 10;
+listing.applicationDueDate = dayjs().add(days, "days").format();
+
+export const dueSoonAndVivid = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationDeadline") +
+      ": " +
+      formatDateTime(listing.applicationDueDate)
+    }
+    status={ApplicationStatusType.Open}
+    vivid
+  />
+);
+
+export const withSubContent = () => (
+  <ApplicationStatus
+    content="First Come First Served (and a really long string to test wrapping on smaller sizes)"
+    subContent="Application Due Date: July 10th"
+    status={ApplicationStatusType.Open}
+    vivid
+  />
+);
+
+export const dueSoonWithTime = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationDeadline") +
+      ": " +
+      formatDateTime(listing.applicationDueDate, true)
+    }
+    status={ApplicationStatusType.Open}
+  />
+);
+
+const listingPast = Object.assign({}, Archer) as any;
+listingPast.applicationOpenDate = "";
+days = 10;
+
+export const pastDue = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationsClosed") +
+      ": " +
+      formatDateTime(listingPast.applicationDueDate)
+    }
+    status={ApplicationStatusType.Closed}
+  />
+);
+
+listingPast.applicationDueDate = dayjs().subtract(days, "days").format();
+
+export const pastDueAndVivid = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationsClosed") +
+      ": " +
+      formatDateTime(listingPast.applicationDueDate)
+    }
+    status={ApplicationStatusType.Closed}
+    vivid={true}
+  />
+);
+
+export const pastDueWithStyles = () => (
+  <ApplicationStatus
+    className={text("className", "place-content-center")}
+    content={
+      t("listings.applicationsClosed") +
+      ": " +
+      formatDateTime(listingPast.applicationDueDate)
+    }
+    status={ApplicationStatusType.Closed}
+  />
+);
+
+export const pastDueWithIconColor = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationsClosed") +
+      ": " +
+      formatDateTime(listingPast.applicationDueDate)
+    }
+    iconColor={text("Icon Color", "#ff0000")}
+    status={ApplicationStatusType.Closed}
+  />
+);
+
+const listing2 = Object.assign({}, Archer) as any;
+days = 10;
+listing2.applicationDueDate = dayjs().add(days, "days").format();
+
+export const openSoon = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationOpenPeriod") +
+      ": " +
+      formatDateTime(listing2.applicationDueDate)
+    }
+    status={ApplicationStatusType.Open}
+  />
+);
+
+const listing3 = Object.assign({}, Archer) as any;
+days = 10;
+listing3.applicationDueDate = dayjs().add(days, "days").format();
+
+export const openedAlready = () => (
+  <ApplicationStatus
+    content={
+      t("listings.applicationDeadline") +
+      ": " +
+      formatDateTime(listing3.applicationDueDate)
+    }
+    status={ApplicationStatusType.Open}
+  />
+);
+
+export const openedWithNoDue = () => (
+  <ApplicationStatus
+    content={t("listings.applicationFCFS")}
+    status={ApplicationStatusType.Open}
+  />
+);
+
+export const openedWithFCFS = () => (
+  <ApplicationStatus
+    content={t("listings.applicationFCFS")}
+    status={ApplicationStatusType.Open}
+  />
+);
+
+export const openedWithFCFSVivid = () => (
+  <ApplicationStatus
+    content={t("listings.applicationFCFS")}
+    status={ApplicationStatusType.Open}
+    vivid
+  />
+);
+
+export const postLottery = () => (
+  <ApplicationStatus
+    content={"Post-lottery content: " + dayjs().format("MMMM Do, YYYY")}
+    status={ApplicationStatusType.PostLottery}
+    withIcon={false}
+  />
+);
+
+export const matched = () => (
+  <ApplicationStatus
+    content={"Matched"}
+    status={ApplicationStatusType.Matched}
+    withIcon={true}
+    iconType={"check"}
+  />
+);

package/src/notifications/StatusAside.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { StatusAside } from "./StatusAside"
+import { GridCell } from "../sections/GridSection"
+import { Button } from "../actions/Button"
+import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
+import { StatusMessages, StatusMessage } from "./StatusMessage"
+
+export default {
+  title: "Notifications/Status Aside",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const WithButtonsAndMessages = () => (
+  <StatusAside
+    actions={[
+      <GridCell key={0}>
+        <Button fullWidth={true} size={AppearanceSizeType.small}>
+          Save
+        </Button>
+      </GridCell>,
+      <GridCell key={1}>
+        <Button
+          styleType={AppearanceStyleType.secondary}
+          fullWidth={true}
+          size={AppearanceSizeType.small}
+        >
+          Preview
+        </Button>
+      </GridCell>,
+      <GridCell span={2} key={2}>
+        <Button
+          styleType={AppearanceStyleType.primary}
+          fullWidth={true}
+          size={AppearanceSizeType.small}
+        >
+          Submit
+        </Button>
+      </GridCell>,
+    ]}
+  >
+    <StatusMessages>
+      <StatusMessage
+        status="Submitted"
+        style={AppearanceStyleType.success}
+        timestamp="3/2/21"
+        body="Changed status of one application."
+      />
+      <StatusMessage status="Draft" timestamp="2/1/21" />
+    </StatusMessages>
+  </StatusAside>
+)
+
+export const OnlyTimestamp = () => (
+  <StatusAside
+    columns={1}
+    actions={[
+      <GridCell key={0}>
+        <Button fullWidth={true} size={AppearanceSizeType.small}>
+          Save
+        </Button>
+      </GridCell>,
+      <GridCell key={1}>
+        <Button
+          styleType={AppearanceStyleType.secondary}
+          fullWidth={true}
+          size={AppearanceSizeType.small}
+        >
+          Preview
+        </Button>
+      </GridCell>,
+    ]}
+  >
+    <StatusMessages lastTimestamp="February 3, 2021" />
+  </StatusAside>
+)

package/src/notifications/StatusMessage.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+import { StatusMessages, StatusMessage } from "./StatusMessage"
+
+export default {
+  title: "Notifications/Status Messages",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const SeveralMessages = () => (
+  <StatusMessages>
+    <StatusMessage
+      status="Submitted"
+      style={AppearanceStyleType.success}
+      timestamp="3/2/21"
+      body="Additional details here."
+    />
+    <StatusMessage status="Draft" timestamp="2/1/21" />
+  </StatusMessages>
+)
+
+export const NoMessages = () => <StatusMessages lastTimestamp="August 25, 2021"></StatusMessages>

package/src/overlays/Drawer.stories.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+
+import { Drawer, DrawerSide } from "./Drawer"
+import { GridSection } from "../sections/GridSection"
+import { ViewItem } from "../blocks/ViewItem"
+import { Field } from "../forms/Field"
+import { Button } from "../actions/Button"
+import {
+  AppearanceBorderType,
+  AppearanceSizeType,
+  AppearanceStyleType,
+} from "../global/AppearanceTypes"
+
+export default {
+  title: "Overlays/Drawer",
+  decorators: [(storyFn: any) => <div>{storyFn()}</div>],
+}
+
+export const Standard = () => {
+  const [drawerState, setDrawerState] = useState(false)
+  return (
+    <>
+      <Drawer
+        open={drawerState}
+        title="Drawer Title"
+        onClose={() => setDrawerState(!drawerState)}
+        ariaDescription="My Drawer"
+        actions={[
+          <Button
+            key={0}
+            onClick={() => setDrawerState(!drawerState)}
+            styleType={AppearanceStyleType.primary}
+            size={AppearanceSizeType.small}
+          >
+            Submit
+          </Button>,
+          <Button
+            key={1}
+            onClick={() => setDrawerState(!drawerState)}
+            border={AppearanceBorderType.borderless}
+            size={AppearanceSizeType.small}
+          >
+            Cancel
+          </Button>,
+        ]}
+      >
+        <section className="border rounded-md p-8 bg-white">
+          <p>Test</p>
+        </section>
+      </Drawer>
+      <Button
+        onClick={() => {
+          setDrawerState(true)
+        }}
+      >
+        Open Drawer
+      </Button>
+      <div style={{ height: "1000px" }}></div>
+      <div>…</div>
+    </>
+  )
+}
+
+export const StandardOnLeft = () => {
+  const [drawerState, setDrawerState] = useState(false)
+  return (
+    <>
+      <Drawer
+        open={drawerState}
+        title="Drawer Title"
+        onClose={() => setDrawerState(!drawerState)}
+        ariaDescription="My Drawer"
+        direction={DrawerSide.left}
+        actions={[
+          <Button
+            key={0}
+            onClick={() => setDrawerState(!drawerState)}
+            styleType={AppearanceStyleType.primary}
+          >
+            Submit
+          </Button>,
+          <Button key={1} onClick={() => setDrawerState(!drawerState)}>
+            Cancel
+          </Button>,
+        ]}
+      >
+        <section className="border rounded-md p-8 bg-white">
+          <p>Test</p>
+        </section>
+      </Drawer>
+      <div className="text-right">
+        <Button
+          onClick={() => {
+            setDrawerState(true)
+          }}
+        >
+          Open Drawer
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export const DrawerFieldTest = () => {
+  const { register } = useForm()
+  return (
+    <Drawer open={true} title="Drawer Title" ariaDescription="My Drawer">
+      <section className="border p-8 bg-white mb-8">
+        <GridSection title="Section Title" columns={4}>
+          <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} />
+        </GridSection>
+      </section>
+    </Drawer>
+  )
+}
+
+export const DrawerViewTest = () => (
+  <Drawer open={true} title="Drawer Title" ariaDescription="My Drawer">
+    <section className="border rounded-md p-8 bg-white mb-8">
+      <GridSection title="Section Title" tinted={true} inset={true} columns={4}>
+        <ViewItem label="First Name" children="Lisa" />
+
+        <ViewItem label="Middle Name" children="S" />
+
+        <ViewItem label="Last Name" children="Jones" />
+
+        <ViewItem label="Date of Birth" children="01/01/1985" />
+
+        <ViewItem label="Email" children="lisa@gmail.com" />
+
+        <ViewItem label="Phone" children="111-222-3333" helper="Cell" />
+
+        <ViewItem label="Second Phone" children="111-222-3333" helper="Work" />
+
+        <ViewItem label="Perferred Contact" children="Phone" />
+      </GridSection>
+    </section>
+  </Drawer>
+)

package/src/overlays/LoadingOverlay.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { LoadingOverlay } from "./LoadingOverlay"
+
+export default {
+  title: "Overlays/Loading Overlay",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => (
+  <LoadingOverlay isLoading={true}>
+    <div
+      style={{
+        backgroundColor: "green",
+        color: "white",
+        padding: "10em 1em 20em",
+        textAlign: "center",
+      }}
+    >
+      child content here
+    </div>
+  </LoadingOverlay>
+)