@bloom-housing/ui-components 7.1.0 → 7.2.0

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

@@ -0,0 +1,113 @@
+import * as React from "react"
+
+import { AdditionalFees } from "./AdditionalFees"
+
+export default {
+  title: "Listing/Additional Fees",
+  component: AdditionalFees,
+}
+
+const strings = {
+  sectionHeader: "Additional Fees",
+  deposit: "Deposit",
+  applicationFee: "Application Fee",
+}
+export const allFieldsAndFourFooterItems = () => {
+  return (
+    <AdditionalFees
+      deposit={"$1140  - $1500"}
+      applicationFee={"$30"}
+      footerContent={[
+        <ul>
+          <li key={0} className={"list-disc list-inside"}>
+            Water
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Trash
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Sewer
+          </li>
+        </ul>,
+        "Resident responsible for PG&E, internet and phone.",
+        "Residents encouraged to obtain renter's insurance but this is not a requirement. Rent is due by the 5th of each month.",
+        "Late fee $35 and returned check fee is $35 additional.",
+      ]}
+      strings={strings}
+    />
+  )
+}
+export const allFieldsAndThreeFooterItems = () => {
+  return (
+    <AdditionalFees
+      deposit={"$1140 - $1500"}
+      applicationFee={"$30"}
+      footerContent={[
+        <ul>
+          <li key={0} className={"list-disc list-inside"}>
+            Water
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Trash
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Sewer
+          </li>
+        </ul>,
+        "Resident responsible for PG&E, internet and phone.",
+        "Residents encouraged to obtain renter's insurance but this is not a requirement. Rent is due by the 5th of each month. Late fee $35 and returned check fee is $35 additional.",
+      ]}
+      strings={strings}
+    />
+  )
+}
+export const allFieldsAndTwoFooterItems = () => {
+  return (
+    <AdditionalFees
+      deposit={"$1140 - $1500"}
+      applicationFee={"$30"}
+      footerContent={[
+        <ul>
+          <li key={0} className={"list-disc list-inside"}>
+            Water
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Trash
+          </li>
+          <li key={0} className={"list-disc list-inside"}>
+            Sewer
+          </li>
+        </ul>,
+        "Resident responsible for PG&E, internet and phone.",
+      ]}
+      strings={{
+        ...strings,
+        applicationFeeSubtext: ["per applicant age 18 and over", "Due at interview"],
+        depositSubtext: ["or one month's rent", "May be higher for lower credit scores"],
+      }}
+    />
+  )
+}
+
+export const allFieldsAndFooterNotIncluded = () => {
+  return <AdditionalFees applicationFee={"$30"} deposit={"$1140 - $1500"} strings={strings} />
+}
+
+export const justDepositRange = () => {
+  return <AdditionalFees deposit={"$1140 - $1500"} strings={strings} />
+}
+
+export const justApplicationFee = () => {
+  return <AdditionalFees applicationFee={"$30"} strings={strings} />
+}
+
+export const costsNotIncluded = () => {
+  return (
+    <AdditionalFees
+      strings={strings}
+      footerContent={[
+        "Resident responsible for PG&E, internet and phone.  Owner pays for water, trash, and sewage.  Residents encouraged to obtain renter's insurance but this is not a requirement.  Rent is due by the 5th of each month. Late fee $35 and returned check fee is $35 additional.",
+      ]}
+    />
+  )
+}

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

@@ -0,0 +1,102 @@
+import * as React from "react"
+
+import ContentAccordion from "./ContentAccordion"
+import { StandardTable } from "../../tables/StandardTable"
+import { mockData, mockHeaders } from "../../tables/StandardTable.stories"
+
+export default {
+  title: "Listing/Content Accordion",
+}
+
+const barContent = () => {
+  return <>Header Content</>
+}
+const expandedContent = () => {
+  return <div>ExpandedContent</div>
+}
+
+export const blueThemeBasic = () => {
+  return (
+    <ContentAccordion
+      customBarContent={barContent()}
+      customExpandedContent={expandedContent()}
+      accordionTheme={"blue"}
+    />
+  )
+}
+
+export const blueThemeBasicDisabled = () => {
+  return (
+    <ContentAccordion
+      customBarContent={barContent()}
+      customExpandedContent={expandedContent()}
+      accordionTheme={"blue"}
+      disableAccordion={true}
+    />
+  )
+}
+
+export const blueThemeFilled = () => {
+  const customBarContent = () => {
+    return (
+      <h3 className={"toggle-header-content"}>
+        <strong>{"Studio"}</strong>:&nbsp;
+        {"41 units, 285 square feet, 2nd - 3rd floors"}
+      </h3>
+    )
+  }
+  const customExpandedContent = () => {
+    return (
+      <div>
+        <StandardTable headers={mockHeaders} data={mockData} />
+      </div>
+    )
+  }
+  return (
+    <ContentAccordion
+      customBarContent={customBarContent()}
+      customExpandedContent={customExpandedContent()}
+      accordionTheme={"blue"}
+    />
+  )
+}
+
+export const grayThemeBasic = () => {
+  return (
+    <ContentAccordion
+      customBarContent={barContent()}
+      customExpandedContent={expandedContent()}
+      accordionTheme={"gray"}
+    />
+  )
+}
+
+export const grayThemeFilled = () => {
+  const customBarContent = () => {
+    return (
+      <span className={"flex w-full justify-between items-center"}>
+        <span className={"flex items-center"}>
+          <span className={"font-serif text-3xl font-medium leading-4 pr-2"}>1</span> person in
+          household
+        </span>
+        <span className={"flex pr-4 items-center"}>
+          <span className={"pr-1 text-gray-700"}>Income</span>
+          <span>$4,090 to $9,325</span>
+          <span className={"pl-1 text-gray-700"}>per month</span>
+        </span>
+      </span>
+    )
+  }
+
+  const customExpandedContent = () => {
+    return <div className={"border border-gray-400 border-t-0 p-4"}>Content</div>
+  }
+
+  return (
+    <ContentAccordion
+      customBarContent={customBarContent()}
+      customExpandedContent={customExpandedContent()}
+      accordionTheme={"gray"}
+    />
+  )
+}

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

@@ -0,0 +1,410 @@
+import * as React from "react"
+import { AppearanceStyleType } from "../../.."
+import { BADGES } from "../../../.storybook/constants"
+import LinkButton from "../../actions/LinkButton"
+import Icon from "../../icons/Icon"
+import { ListingCard } from "./ListingCard"
+import ListingCardDocumentation from "./ListingCard.docs.mdx"
+
+export default {
+  title: "Listing/ListingCard 🚩",
+  id: "page-components/listing-card",
+  component: ListingCard,
+  parameters: {
+    docs: {
+      page: ListingCardDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+const standardImageCardProps = {
+  imageUrl: "/images/listing.jpg",
+  href: "listing-link",
+  tags: [{ text: "reserved community tag" }],
+  statuses: [{ content: "status content" }],
+}
+
+const standardTableProps = {
+  headers: {
+    unitType: "t.unitType",
+    minimumIncome: "t.incomeRange",
+    rent: "t.rent",
+  },
+  data: [
+    {
+      unitType: { content: "Row 1 cellA" },
+      minimumIncome: { content: "Row 1 cellB" },
+      rent: { content: <strong>Row 1 cellC</strong> },
+    },
+    {
+      unitType: { content: "Row 2 cellA" },
+      minimumIncome: { content: "Row 2 cellB" },
+      rent: { content: <strong>Row 2 cellC</strong> },
+    },
+  ],
+  responsiveCollapse: true,
+}
+
+export const WithStandardTable = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+    />
+  )
+}
+
+export const withStackedTable = () => {
+  return (
+    <ListingCard
+      imageCardProps={{
+        imageUrl: "/images/listing.jpg",
+        href: "listing-link",
+        tags: [{ text: "reserved community tag" }],
+        statuses: [{ content: "status content" }],
+      }}
+      tableProps={{
+        headers: {
+          units: { name: "t.unitType" },
+          availability: { name: "t.availability" },
+          income: { name: "t.incomeRange" },
+          rent: { name: "t.rent" },
+        },
+        stackedData: [
+          {
+            units: {
+              cellText: "Studio",
+              cellSubText: "23 available",
+              hideSubTextMobile: true,
+            },
+            availability: { cellText: "23", cellSubText: "available" },
+            income: { cellText: "$0 to $6,854", cellSubText: "per month" },
+            rent: { cellText: "30%", cellSubText: "income" },
+          },
+          {
+            units: { cellText: "1 BR", cellSubText: "3 available" },
+            availability: { cellText: "3", cellSubText: "available" },
+            income: { cellText: "$2,194 to $6,854", cellSubText: "per month" },
+            rent: { cellText: "$1,295", cellSubText: "income" },
+          },
+        ],
+        headersHiddenDesktop: ["availability"],
+      }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+      stackedTable={true}
+    />
+  )
+}
+
+export const WithHeaders = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps, href: undefined }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
+      contentProps={{
+        contentHeader: {
+          content: "Optional content header",
+          href: "listing-link",
+        },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Optional table header" },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
+export const WithPillHeader = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps, href: undefined }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link", ariaHidden: true }]}
+      contentProps={{
+        contentHeader: {
+          content: "Optional content header",
+          href: "listing-link",
+        },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Optional table header", isPillType: true },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
+export const WithTags = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+      contentProps={{
+        contentHeader: { content: "Optional content header" },
+        contentSubheader: { content: "Optional content subheader" },
+      }}
+      cardTags={[
+        { text: "Tag 1 text" },
+        { text: "Tag 2 text" },
+        { text: "A tag with a longer name" },
+      ]}
+    />
+  )
+}
+
+export const WithTagsAndHeaders = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+      contentProps={{
+        contentHeader: { content: "Optional content header" },
+        contentSubheader: { content: "Optional content subheader" },
+        tableHeader: { content: "Optional table header" },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+      cardTags={[
+        { text: "Tag 1 text" },
+        { text: "Tag 2 text" },
+        { text: "A tag with a longer name" },
+      ]}
+    />
+  )
+}
+export const WithHeadersContent = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+      contentProps={{
+        contentHeader: { content: "Property Listing" },
+        contentSubheader: { content: "Street Address, Local City ST 12345" },
+        tableHeader: { content: "Open Waitlist & Available Units" },
+        tableSubheader: {
+          content: "Includes priority units for mobility impairments",
+        },
+      }}
+    />
+  )
+}
+
+export const NoContent = () => {
+  return (
+    <ListingCard
+      imageCardProps={{
+        imageUrl: "/images/listing.jpg",
+        href: "listing-link",
+      }}
+    />
+  )
+}
+
+const exampleCustomContent = () => {
+  const getHeader = (header: string) => {
+    return (
+      <div
+        className={
+          "font-sans font-semibold text-base uppercase text-gray-750 tracking-wider border-0 border-b pb-2 mb-2 md:mt-4"
+        }
+      >
+        {header}
+      </div>
+    )
+  }
+  const getContentRow = (prefix: string, content: string) => {
+    return (
+      <div>
+        <span className={"font-semibold"}>{prefix}</span> {content}
+      </div>
+    )
+  }
+  return (
+    <div className={"text-gray-750"}>
+      <div className={"font-alt-sans font-semibold text-base mb-2 text-gray-900"}>
+        Available units
+      </div>
+      {getHeader("Units")}
+      {getContentRow("2BR:", "2 available")}
+      {getContentRow("3BR:", "5 available")}
+      {getContentRow("4BR:", "1 available")}
+      {getHeader("Payments")}
+      <div>
+        No down payment, but you do need to complete 500 hours of sweat equity. Your monthly payment
+        will be 30% of your income.
+      </div>
+      <div className={"mt-4  border-0 border-b pb-2 mb-2"}>
+        You will need to attend an information session.
+      </div>
+    </div>
+  )
+}
+
+export const CustomContent = () => {
+  return (
+    <ListingCard
+      imageCardProps={{
+        imageUrl: "/images/listing.jpg",
+        href: "listing-link",
+        tags: [{ text: "Habitat for Humanity" }],
+        statuses: [{ content: "status content" }],
+      }}
+      footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+    >
+      {exampleCustomContent()}
+    </ListingCard>
+  )
+}
+
+export const MultipleFooterButtons = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[
+        { text: "See Details", href: "see-details-link" },
+        { text: "Apply", href: "apply-link" },
+      ]}
+      contentProps={{
+        tableHeader: { content: "Optional table header" },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
+export const MultipleSpreadFooterButtons = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerButtons={[
+        { text: "See Details", href: "see-details-link" },
+        { text: "Apply", href: "apply-link" },
+      ]}
+      footerContainerClass={"flex justify-between"}
+      contentProps={{
+        tableHeader: { content: "Optional table header" },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
+const getCustomFooter = () => {
+  return (
+    <div className={"flex justify-between"}>
+      <span className={"w-5 flex items-center"}>
+        <Icon symbol={"like"} size={"large"} aria-label={"favorite"} />
+      </span>
+      <LinkButton href={"see-details-link"}>See Details</LinkButton>
+    </div>
+  )
+}
+
+export const CustomFooter = () => {
+  return (
+    <ListingCard
+      imageCardProps={{ ...standardImageCardProps }}
+      tableProps={{ ...standardTableProps }}
+      footerContent={getCustomFooter()}
+      footerContainerClass={"flex justify-between"}
+      contentProps={{
+        tableHeader: { content: "Optional table header" },
+        tableSubheader: { content: "Optional table subheader" },
+      }}
+    />
+  )
+}
+
+export const detroitStyle = () => {
+  const cssVarsOverride = `
+    .listing-card-overrides {
+      --bloom-font-sans: Montserrat;
+      --bloom-font-alt-sans: var(--bloom-font-sans);
+      --bloom-color-primary: rgb(41,126,115);
+      --bloom-color-primary-dark: rgb(0,68,69);
+      --primary-appearance-hover-background-color: white;
+      --primary-appearance-hover-label-color: var(--bloom-color-primary-dark);
+      --outlined-appearance-hover-background-color: var(--bloom-color-primary);
+      --outlined-appearance-hover-border-color: var(--bloom-color-primary);
+      --card-header-color: var(--bloom-color-primary-dark);
+    }
+
+    .listing-card-overrides table {
+      font-family: var(--bloom-font-sans);
+    }
+
+    .listing-card-overrides .image-card {
+      --tags-justify-mobile: flex-end;
+      --tags-justify-desktop: flex-end;
+      --border-radius: 24px;
+      --image-height: 340px;
+      --normal-font-size: var(--bloom-font-size-base);
+    }
+    .listing-card-overrides .tag {
+      --normal-padding: var(--bloom-s2) var(--bloom-s3);
+      --label-weight: 700;
+    }
+
+    .listing-card-overrides .listings-row {
+      --tags-flex-order: 2;
+    }
+
+    .listing-card-overrides .button {
+      --normal-rounded: 60px;
+      --normal-padding: 0.5rem 1rem;
+      --normal-font-size: var(--bloom-font-size-base);
+      --label-letter-spacing: normal;
+      --label-transform: none;
+    }
+  `
+
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"
+        rel="stylesheet"
+      ></link>
+      <div className="listing-card-overrides">
+        <ListingCard
+          imageCardProps={{
+            imageUrl: "https://detroit-public-dev.netlify.app/images/detroitDefault.png",
+            href: "listing-link",
+            tags: [
+              {
+                iconType: "calendar",
+                iconColor: "white",
+                text: "Coming Soon Fall 2022",
+                styleType: AppearanceStyleType.closed,
+              },
+            ],
+          }}
+          tableProps={{ ...standardTableProps }}
+          footerButtons={[{ text: "See Details", href: "see-details-link" }]}
+          contentProps={{
+            contentHeader: { content: "Optional content header" },
+            contentSubheader: { content: "Optional content subheader" },
+          }}
+          cardTags={[
+            { text: "Tag 1 text" },
+            { text: "Tag 2 text", styleType: AppearanceStyleType.info },
+            {
+              text: "A tag with a longer name",
+              iconType: "phone",
+              iconColor: "white",
+              styleType: AppearanceStyleType.primary,
+            },
+          ]}
+        />
+        <style>{cssVarsOverride}</style>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,14 @@
+import * as React from "react"
+
+import { ListingMap } from "./ListingMap"
+import Archer from "../../../__tests__/fixtures/archer.json"
+
+export default {
+  title: "Listing/Map",
+}
+
+const listing = Object.assign({}, Archer) as any
+
+export const showMapWithPin = () => {
+  return <ListingMap address={listing.buildingAddress} listingName={listing.name} />
+}

package/src/page_components/listing/ListingMap.tsx

@@ -80,7 +80,7 @@ const ListingMap = (props: ListingMapProps) => {
     })
   }, [props.address?.latitude, props.address?.longitude, props.enableCustomPinPositioning])
 
-  const onMarkerDragEnd = useCallback((event) => {
+  const onMarkerDragEnd = useCallback((event: any) => {
     if (props.setLatLong) {
       props.setLatLong({
         latitude: event.lngLat[1],