@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/page_components/listing/ListingsGroup.stories.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+
+import { ListingsGroup } from "./ListingsGroup"
+
+export default {
+  title: "Listing/Listings Group",
+}
+
+export const listingsGroup = () => {
+  return (
+    <ListingsGroup listingsCount={2} header="Header" showButtonText="Show" hideButtonText="Hide">
+      Listings Go Here
+    </ListingsGroup>
+  )
+}
+
+export const listingsGroupWithInfo = () => {
+  return (
+    <ListingsGroup
+      listingsCount={2}
+      header="Header"
+      showButtonText="Show"
+      hideButtonText="Hide"
+      info={"You can now check lottery results on the remaining listings."}
+    >
+      Listings Go Here
+    </ListingsGroup>
+  )
+}
+
+export const listingsGroupWithInfoLongButton = () => {
+  return (
+    <ListingsGroup
+      listingsCount={2}
+      header="Additional Listings"
+      showButtonText="Show Additional Listings"
+      hideButtonText="Hide Additional Listings"
+      info={
+        "We know you may have options about how many people will live with you. Here are listings for other household sizes and income levels."
+      }
+    >
+      Listings Go Here
+    </ListingsGroup>
+  )
+}
+
+export const listingsGroupWithCustomIcon = () => {
+  return (
+    <ListingsGroup
+      listingsCount={2}
+      header="Additional Listings"
+      showButtonText="Show Additional Listings"
+      hideButtonText="Hide Additional Listings"
+      info={
+        "We know you may have options about how many people will live with you. Here are listings for other household sizes and income levels."
+      }
+      icon={"doubleHouse"}
+    >
+      Listings Go Here
+    </ListingsGroup>
+  )
+}

package/src/page_components/listing/listing_sidebar/Contact.stories.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+import Contact from "./Contact"
+
+export default {
+  title: "Listing Sidebar/Contact",
+  component: Contact,
+}
+
+export const NoAddress = () => {
+  return (
+    <Contact
+      sectionTitle={"Contact Leasing Agent"}
+      contactTitle={"Contact Title"}
+      contactName={"Contact Name"}
+      contactEmail={"contact@email.com"}
+      contactPhoneNumber={"Call (123) 456 - 7890"}
+      contactPhoneNumberNote={"Phone number note"}
+      contactCompany={{ name: "Company Name", website: "www.example.com" }}
+      strings={{ email: "Email", website: "Website", getDirections: "Get Directions" }}
+    />
+  )
+}
+
+export const WithAddress = () => {
+  return (
+    <Contact
+      sectionTitle={"Contact Leasing Agent"}
+      contactTitle={"Contact Title"}
+      contactName={"Contact Name"}
+      contactEmail={"contact@email.com"}
+      contactPhoneNumber={"Call (123) 456 - 7890"}
+      contactPhoneNumberNote={"Phone number note"}
+      contactCompany={{ name: "Company Name", website: "www.example.com" }}
+      strings={{ email: "Email", website: "Website", getDirections: "Get Directions" }}
+      contactAddress={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+    />
+  )
+}
+
+export const AdditionalInformation = () => {
+  return (
+    <Contact
+      sectionTitle={"Contact Leasing Agent"}
+      contactTitle={"Contact Title"}
+      contactName={"Contact Name"}
+      contactEmail={"contact@email.com"}
+      contactPhoneNumber={"Call (123) 456 - 7890"}
+      contactPhoneNumberNote={"Phone number note"}
+      contactCompany={{ name: "Company Name", website: "www.example.com" }}
+      strings={{ email: "Email", website: "Website", getDirections: "Get Directions" }}
+      contactAddress={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+      additionalInformation={[
+        {
+          title: "Office Hours",
+          content: "Monday - Friday 11:00am - 12:00pm",
+        },
+      ]}
+    />
+  )
+}
+
+export const AdditionalInformationMissingFields = () => {
+  return (
+    <Contact
+      sectionTitle={"Contact Leasing Agent"}
+      contactTitle={"Contact Title"}
+      contactName={"Contact Name"}
+      contactPhoneNumber={"Call (123) 456 - 7890"}
+      contactPhoneNumberNote={"Phone number note"}
+      strings={{ email: "Email", website: "Website", getDirections: "Get Directions" }}
+      additionalInformation={[
+        {
+          title: "Office Hours",
+          content: "Monday - Friday 11:00am - 12:00pm",
+        },
+      ]}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/ContactAddress.stories.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import ContactAddress from "./ContactAddress"
+
+export default {
+  title: "Listing Sidebar/Contact Address",
+  component: ContactAddress,
+}
+
+export const Default = () => {
+  return (
+    <ContactAddress
+      address={{
+        street: "Street 1",
+        street2: "Street 2",
+        city: "City",
+        state: "State",
+        zipCode: "12345",
+      }}
+      mapString={"Get Directions"}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/ExpandableSection.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { ExpandableSection } from "./ExpandableSection"
+
+export default {
+  title: "Listing Sidebar/Expandable Section",
+  component: ExpandableSection,
+}
+
+export const Default = () => {
+  return (
+    <ExpandableSection
+      content={"Main content"}
+      strings={{
+        title: "Title",
+        readMore: "read more",
+        readLess: "read less",
+      }}
+    />
+  )
+}
+
+export const ExpandableMarkdown = () => {
+  return (
+    <ExpandableSection
+      content={"Main content"}
+      expandableContent={
+        "<ul className='list-disc ml-6'><li>List #1</li><li>List #2</li><li>List #3</li></ul>"
+      }
+      strings={{
+        title: "Title",
+        readMore: "read more",
+        readLess: "read less",
+      }}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/GetApplication.stories.tsx

@@ -0,0 +1,178 @@
+import * as React from "react"
+import { GetApplication } from "./GetApplication"
+
+export default {
+  title: "Listing Sidebar/Get Application",
+  component: GetApplication,
+}
+
+export const AllFields = () => {
+  return (
+    <GetApplication
+      onlineApplicationURL={"online-app-url"}
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[
+        { fileURL: "file-url-en", languageString: "English" },
+        { fileURL: "file-url-es", languageString: "Spanish" },
+      ]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={false}
+    />
+  )
+}
+
+export const WithoutPaperAppFiles = () => {
+  return (
+    <GetApplication
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={false}
+    />
+  )
+}
+
+export const Preview = () => {
+  return (
+    <GetApplication
+      onlineApplicationURL={"online-app-url"}
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[
+        { fileURL: "file-url-en", languageString: "English" },
+        { fileURL: "file-url-es", languageString: "Spanish" },
+      ]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={true}
+    />
+  )
+}
+
+export const OpenInFuture = () => {
+  return (
+    <GetApplication
+      onlineApplicationURL={"online-app-url"}
+      applicationsOpen={false}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[
+        { fileURL: "file-url-en", languageString: "English" },
+        { fileURL: "file-url-es", languageString: "Spanish" },
+      ]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={false}
+    />
+  )
+}
+
+export const Pickup = () => {
+  return (
+    <GetApplication
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[]}
+      paperMethod={false}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={false}
+    />
+  )
+}
+
+export const OnlineAndNoPickUp = () => {
+  return (
+    <GetApplication
+      onlineApplicationURL={"online-app-url"}
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[]}
+      paperMethod={false}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      preview={false}
+    />
+  )
+}
+
+export const PaperAndPickup = () => {
+  return (
+    <GetApplication
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[
+        { fileURL: "file-url-en", languageString: "English" },
+        { fileURL: "file-url-es", languageString: "Spanish" },
+      ]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      applicationPickUpAddressOfficeHours={"M-F 9am-5pm"}
+      applicationPickUpAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Pick Up Address Street",
+        zipCode: "90210",
+      }}
+      preview={false}
+    />
+  )
+}
+
+export const PaperAndNoPickup = () => {
+  return (
+    <GetApplication
+      applicationsOpen={true}
+      applicationsOpenDate={"November 20th, 2021"}
+      paperApplications={[
+        { fileURL: "file-url-en", languageString: "English" },
+        { fileURL: "file-url-es", languageString: "Spanish" },
+      ]}
+      paperMethod={true}
+      postmarkedApplicationsReceivedByDate={"November 30th, 2021"}
+      preview={false}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/QuantityRowSection.stories.tsx

@@ -0,0 +1,91 @@
+import * as React from "react"
+import { QuantityRowSection } from "./QuantityRowSection"
+
+export default {
+  title: "Listing Sidebar/Quantity Row Section",
+  component: QuantityRowSection,
+}
+
+const strings = {
+  sectionTitle: "Available Units and Waitlist",
+  description:
+    "Once ranked applicants fill all available units, the remaining ranked applicants will be placed on a waitlist for those same units.",
+}
+
+export const OpenAndAllValuesSupplied = () => {
+  return (
+    <QuantityRowSection
+      quantityRows={[
+        { amount: 100, text: "Final Size" },
+        { amount: 40, text: "Current Size" },
+        { amount: 60, text: "Open Spots" },
+      ]}
+      strings={strings}
+    />
+  )
+}
+
+export const EmphasizedValue = () => {
+  return (
+    <QuantityRowSection
+      quantityRows={[
+        { amount: 100, text: "Final Size" },
+        { amount: 40, text: "Current Size" },
+        { amount: 60, text: "Open Spots", emphasized: true },
+      ]}
+      strings={strings}
+    />
+  )
+}
+
+export const OpenWithSomeZeroes = () => {
+  return (
+    <QuantityRowSection
+      quantityRows={[
+        { amount: 10, text: "Final Size" },
+        { amount: 0, text: "Current Size" },
+        { amount: 2, text: "Open Spots" },
+      ]}
+      strings={strings}
+    />
+  )
+}
+
+export const OpenWithOnlyMaxAndOpen = () => {
+  return (
+    <QuantityRowSection
+      quantityRows={[
+        { amount: 10, text: "Final Size" },
+        { amount: 10, text: "Open Spots" },
+      ]}
+      strings={strings}
+    />
+  )
+}
+
+export const OpenWithOnlyMax = () => {
+  return (
+    <QuantityRowSection quantityRows={[{ amount: 100, text: "Final Size" }]} strings={strings} />
+  )
+}
+
+export const CustomDescription = () => {
+  const customDescription = () => {
+    return (
+      <div>
+        <p className={"italic pb-2"}>Custom styled content.</p>
+        <p className={"underline"}>More custom styled content.</p>
+      </div>
+    )
+  }
+  return (
+    <QuantityRowSection
+      quantityRows={[
+        { amount: 100, text: "Final Size" },
+        { amount: 40, text: "Current Size" },
+        { amount: 60, text: "Open Spots" },
+      ]}
+      strings={{ ...strings, description: customDescription() }}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/ReferralApplication.stories.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import ReferralApplication from "./ReferralApplication"
+
+export default {
+  title: "Listing Sidebar/Referral Application",
+}
+
+export const referralApplicationBlock = () => {
+  return (
+    <ReferralApplication
+      phoneNumber={"211"}
+      description={`The permanent supportive housing units are referred directly through Alameda County's
+  Coordinated Entry System. Households experiencing homelessness can call 211 in order to
+  get connected to an Access Point to learn more about the coordinated entry system and
+  access housing-related resources and information.`}
+      strings={{
+        title: "For further information",
+      }}
+    />
+  )
+}

package/src/page_components/listing/listing_sidebar/SidebarBlock.stories.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { SidebarBlock } from "./SidebarBlock"
+
+export default {
+  title: "Listing Sidebar/Sidebar Block",
+  component: SidebarBlock,
+}
+
+export const Default = () => {
+  return (
+    <SidebarBlock title={"Title"}>
+      <p>Content Paragraph 1</p>
+      <p>Content Paragraph 2</p>
+      <ul className={"list-disc ml-6"}>
+        <li>First</li>
+        <li>Second</li>
+        <li>Third</li>
+      </ul>
+    </SidebarBlock>
+  )
+}
+
+export const Styled = () => {
+  return (
+    <SidebarBlock title={"Title"} styleType={"capsWeighted"} className={"bg-blue-200"}>
+      Content
+    </SidebarBlock>
+  )
+}

package/src/page_components/listing/listing_sidebar/SubmitApplication.stories.tsx

@@ -0,0 +1,105 @@
+import * as React from "react"
+import { SubmitApplication } from "./SubmitApplication"
+
+export default {
+  component: SubmitApplication,
+  title: "Listing Sidebar/Submit Application",
+}
+
+export const AllFields = () => {
+  return (
+    <SubmitApplication
+      applicationMailingAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Mailing Address Street",
+        zipCode: "90210",
+      }}
+      applicationDropOffAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Drop Off Address Street",
+        zipCode: "90210",
+      }}
+      applicationDropOffAddressOfficeHours={"M-F 9am-5pm"}
+      applicationOrganization={"Application Organization"}
+      strings={{
+        postmark: "Postmark details string",
+        mailHeader: "Mail Header",
+        dropOffHeader: "Drop Off Header",
+        sectionHeader: "Paper App Header",
+        officeHoursHeader: "Office Hours Header",
+        mapString: "Get Directions",
+      }}
+    />
+  )
+}
+
+export const DropOffOnly = () => {
+  return (
+    <SubmitApplication
+      applicationDropOffAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Drop Off Address Street",
+        zipCode: "90210",
+      }}
+      applicationDropOffAddressOfficeHours={"M-F 9am-5pm"}
+      strings={{
+        postmark: "Postmark details string",
+        mailHeader: "Mail Header",
+        dropOffHeader: "Drop Off Header",
+        sectionHeader: "Paper App Header",
+        officeHoursHeader: "Office Hours Header",
+        mapString: "Get Directions",
+      }}
+    />
+  )
+}
+
+export const MailingOnly = () => {
+  return (
+    <SubmitApplication
+      applicationMailingAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Mailing Address Street",
+        zipCode: "90210",
+      }}
+      strings={{
+        postmark: "Postmark details string",
+        mailHeader: "Mail Header",
+        dropOffHeader: "Drop Off Header",
+        sectionHeader: "Paper App Header",
+        officeHoursHeader: "Office Hours Header",
+        mapString: "Get Directions",
+      }}
+    />
+  )
+}
+
+export const DropOffNoOfficeHours = () => {
+  return (
+    <SubmitApplication
+      applicationDropOffAddress={{
+        city: "City",
+        state: "State",
+        street2: "Street 2",
+        street: "Drop Off Address Street",
+        zipCode: "90210",
+      }}
+      strings={{
+        postmark: "Postmark details string",
+        mailHeader: "Mail Header",
+        dropOffHeader: "Drop Off Header",
+        sectionHeader: "Paper App Header",
+        officeHoursHeader: "Office Hours Header",
+        mapString: "Get Directions",
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,22 @@
+import * as React from "react"
+import DownloadLotteryResults from "./DownloadLotteryResults"
+
+export default {
+  title: "Listing Sidebar/Events/Lottery Results",
+}
+
+export const NoDate = () => {
+  return (
+    <DownloadLotteryResults pdfURL={"https://www.exygy.com"} buttonText={"View lottery results"} />
+  )
+}
+
+export const Date = () => {
+  return (
+    <DownloadLotteryResults
+      resultsDate={"February 21, 2023"}
+      pdfURL={"https://www.exygy.com"}
+      buttonText={"View lottery results"}
+    />
+  )
+}