@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/page_components/listing/listing_sidebar/Waitlist.tsx

@@ -0,0 +1,94 @@
+import * as React from "react"
+import { t } from "../../../helpers/translator"
+import { Listing } from "@bloom-housing/backend-core/types"
+
+const WaitlistItem = (props: { className?: string; value: number; text: string }) => (
+  <li className={`uppercase text-gray-800 text-tiny ${props.className}`}>
+    <span className="text-right w-12 inline-block pr-2">{props.value}</span>
+    <span>{props.text}</span>
+  </li>
+)
+
+export interface WaitlistProps {
+  listing: Listing
+}
+
+const Waitlist = (props: WaitlistProps) => {
+  const listing = props.listing
+  const showWaitlistValues =
+    listing.waitlistMaxSize !== undefined &&
+    listing.waitlistMaxSize !== null &&
+    listing.waitlistCurrentSize !== undefined &&
+    listing.waitlistCurrentSize !== null &&
+    listing.waitlistOpenSpots !== undefined &&
+    listing.waitlistOpenSpots !== null
+  let header, subheader, waitlistItems
+
+  if (listing?.unitsAvailable && listing.unitsAvailable > 0 && listing.isWaitlistOpen) {
+    header = t("listings.waitlist.unitsAndWaitlist")
+    subheader = t("listings.waitlist.submitAnApplication")
+    waitlistItems = (
+      <>
+        {showWaitlistValues && (
+          <>
+            <WaitlistItem
+              value={listing.unitsAvailable}
+              text={t("listings.availableUnits")}
+              className={"font-semibold"}
+            />
+            {listing.waitlistOpenSpots && (
+              <WaitlistItem
+                value={listing.waitlistOpenSpots}
+                text={t("listings.waitlist.openSlots")}
+                className={"font-semibold"}
+              />
+            )}
+          </>
+        )}
+      </>
+    )
+  } else {
+    if (listing.isWaitlistOpen) {
+      header = t("listings.waitlist.isOpen")
+      subheader = t("listings.waitlist.submitForWaitlist")
+    } else {
+      header = t("listings.waitlist.closed")
+      subheader = null
+    }
+    waitlistItems = (
+      <>
+        {showWaitlistValues && (
+          <>
+            <WaitlistItem
+              value={listing.waitlistCurrentSize || 0}
+              text={t("listings.waitlist.currentSize")}
+            />
+            {listing.waitlistOpenSpots && (
+              <WaitlistItem
+                value={listing.waitlistOpenSpots}
+                text={t("listings.waitlist.openSlots")}
+                className={"font-semibold"}
+              />
+            )}
+            <WaitlistItem
+              value={listing.waitlistMaxSize || 0}
+              text={t("listings.waitlist.finalSize")}
+            />
+          </>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <h4 className="text-caps-tiny">{header}</h4>
+      <div>
+        {subheader && <p className="text-tiny text-gray-800 pb-3">{subheader}</p>}
+        {showWaitlistValues && <ul>{waitlistItems}</ul>}
+      </div>
+    </>
+  )
+}
+
+export { Waitlist as default, Waitlist }

package/src/page_components/listing/listing_sidebar/WhatToExpect.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { t } from "../../../helpers/translator"
+import { Listing } from "@bloom-housing/backend-core/types"
+
+interface WhatToExpectProps {
+  listing: Listing
+}
+
+const WhatToExpect = (props: WhatToExpectProps) => {
+  const listing = props.listing
+
+  return (
+    <section className="aside-block">
+      <h4 className="text-caps-underline">{t("whatToExpect.label")}</h4>
+      <p className="text-tiny text-gray-800">
+        {listing.whatToExpect ? listing.whatToExpect : t("whatToExpect.default")}
+      </p>
+    </section>
+  )
+}
+
+export { WhatToExpect as default, WhatToExpect }

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

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { ListingEvent, ListingEventType } from "@bloom-housing/backend-core/types"
+import { t } from "../../../../helpers/translator"
+import { pdfUrlFromListingEvents } from "../../../../helpers/pdfs"
+import moment from "moment"
+
+const DownloadLotteryResults = (props: { event: ListingEvent; cloudName: string }) => {
+  const { event, cloudName } = props
+  const eventUrl = event
+    ? pdfUrlFromListingEvents([event], ListingEventType.lotteryResults, cloudName)
+    : null
+  return (
+    <>
+      {eventUrl && (
+        <section className="aside-block text-center">
+          <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+          <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">
+            {moment(event.startTime).format("MMMM D, YYYY")}
+          </p>
+          <a
+            className="button is-primary w-full mb-2"
+            href={eventUrl}
+            title={t("listings.lotteryResults.downloadResults")}
+            target="_blank"
+          >
+            {t("listings.lotteryResults.downloadResults")}
+          </a>
+        </section>
+      )}
+    </>
+  )
+}
+
+export { DownloadLotteryResults as default, DownloadLotteryResults }

package/src/page_components/listing/listing_sidebar/events/EventDateSection.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { ListingEvent } from "@bloom-housing/backend-core/types"
+import moment from "moment"
+
+const EventDateSection = (props: { event: ListingEvent }) => {
+  return (
+    <>
+      {props.event.startTime && (
+        <p className="text text-gray-800 pb-3 flex justify-between items-center">
+          <span className="inline-block text-tiny uppercase">
+            {moment(props.event.startTime).format("MMMM D, YYYY")}
+          </span>
+          <span className="inline-block text-sm font-bold">
+            {moment(props.event.startTime).format("hh:mma") +
+              "-" +
+              moment(props.event.endTime).format("hh:mma")}
+          </span>
+        </p>
+      )}
+    </>
+  )
+}
+
+export { EventDateSection as default, EventDateSection }

package/src/page_components/listing/listing_sidebar/events/LotteryResultsEvent.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { ListingEvent } from "@bloom-housing/backend-core/types"
+import { t } from "../../../../helpers/translator"
+import moment from "moment"
+
+const LotteryResultsEvent = (props: { event: ListingEvent }) => {
+  const { event } = props
+  return (
+    <section className="aside-block">
+      <h4 className="text-caps-underline">{t("listings.lotteryResults.header")}</h4>
+      <p className="text text-gray-800 pb-3 flex justify-between items-center">
+        <span className="inline-block">{moment(props.event.startTime).format("MMMM D, YYYY")}</span>
+      </p>
+      {event.note && <p className="text text-gray-600">{event.note}</p>}
+      {!event.note && (
+        <p className="text-tiny text-gray-600">
+          {t("listings.lotteryResults.completeResultsWillBePosted", {
+            hour: moment(props.event.startTime).format("h a"),
+          })}
+        </p>
+      )}
+    </section>
+  )
+}
+
+export { LotteryResultsEvent as default, LotteryResultsEvent }

package/src/page_components/listing/listing_sidebar/events/OpenHouseEvent.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { ListingEvent } from "@bloom-housing/backend-core/types"
+import { EventDateSection } from "./EventDateSection"
+import { t } from "../../../../helpers/translator"
+
+const OpenHouseEvent = (props: { events: ListingEvent[] }) => {
+  return (
+    <section className="aside-block">
+      <h4 className="text-caps-tiny">{t("listings.openHouseEvent.header")}</h4>
+      {props.events.map((openHouseEvent, index) => (
+        <div key={`openHouses-${index}`}>
+          <EventDateSection event={openHouseEvent} />
+          {openHouseEvent.url && (
+            <p className="text text-gray-800 pb-3">
+              <a href={openHouseEvent.url}>
+                {openHouseEvent.label || t("listings.openHouseEvent.seeVideo")}
+              </a>
+            </p>
+          )}
+          {openHouseEvent.note && <p className="text-tiny text-gray-600">{openHouseEvent.note}</p>}
+        </div>
+      ))}
+    </section>
+  )
+}
+
+export { OpenHouseEvent as default, OpenHouseEvent }

package/src/page_components/listing/listing_sidebar/events/PublicLotteryEvent.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { ListingEvent } from "@bloom-housing/backend-core/types"
+import { t } from "../../../../helpers/translator"
+import { EventDateSection } from "./EventDateSection"
+
+const PublicLotteryEvent = (props: { event: ListingEvent }) => {
+  const { event } = props
+  return (
+    <section className="aside-block">
+      <h4 className="text-caps-underline">{t("listings.publicLottery.header")}</h4>
+      <EventDateSection event={props.event} />
+      {event.url && (
+        <p className="text text-gray-800 pb-3">
+          <a href={event.url}>{t("listings.publicLottery.seeVideo")}</a>
+        </p>
+      )}
+      {event.note && <p className="text-tiny text-gray-600">{event.note}</p>}
+    </section>
+  )
+}
+
+export { PublicLotteryEvent as default, PublicLotteryEvent }

package/src/prototypes/AppCard.scss

@@ -0,0 +1,64 @@
+.app-card {
+  @apply p-0;
+  @apply mb-0;
+  @apply rounded-lg;
+  @apply border-solid;
+  @apply border;
+  @apply border-gray-450;
+}
+
+.app-card__header,
+.app-card__section {
+  @apply py-8;
+  @apply mx-8;
+}
+
+.app-card__header {
+  @screen md {
+    @apply pb-4;
+  }
+
+  &.border-bottom {
+    @apply border-solid;
+    @apply border-b;
+    @apply border-gray-450;
+  }
+}
+
+.app-card__section {
+}
+
+.app-card__back {
+  @apply font-semibold;
+  @apply text-tiny;
+  @apply mb-4;
+}
+
+.app-card__question {
+  @apply text-2xl;
+  @apply mb-2;
+  @apply text-center;
+}
+
+.app-card__note {
+  @apply font-semibold;
+  @apply text-tiny;
+  @apply text-gray-700;
+  @apply pb-4;
+}
+
+.app-card__sub-header {
+  @apply py-4;
+  @apply px-8;
+  @apply bg-gray-300;
+  @apply flex;
+  @apply justify-between;
+
+  .edit-link {
+    @apply self-center;
+  }
+}
+
+.app-card__sub-title {
+  @apply mb-0;
+}

package/src/prototypes/Back.scss

@@ -0,0 +1,19 @@
+.back {
+  @apply flex;
+  @apply tracking-wider;
+  @apply font-semibold;
+  @apply items-center;
+  line-height: 1rem;
+
+  a {
+    @apply flex;
+    @apply self-center;
+
+    &:before {
+      content: "\2039";
+      @apply text-xl;
+      @apply px-2;
+      line-height: 0.75rem;
+    }
+  }
+}

package/src/prototypes/ButtonGroup.scss

@@ -0,0 +1,6 @@
+.button-group__item {
+  .button {
+    @apply block;
+    @apply w-full;
+  }
+}

package/src/prototypes/ButtonPager.scss

@@ -0,0 +1,22 @@
+.button-pager {
+  @apply text-center;
+
+  button,
+  .button {
+    @apply mb-0;
+  }
+}
+
+.button-pager__row {
+  @apply py-2;
+  @apply px-8;
+
+  @screen md {
+    @apply py-4;
+  }
+
+  &.primary {
+    @apply bg-primary-lighter;
+    @apply pb-8;
+  }
+}

package/src/prototypes/FieldSection.scss

@@ -0,0 +1,35 @@
+.field-section {
+  @apply border-b;
+  @apply mb-8;
+  @apply pb-8;
+}
+
+.field-section__header {
+  @apply mb-6;
+  @apply flex;
+  @apply items-center;
+}
+
+.field-section__title {
+  @apply font-alt-sans;
+  @apply text-xl;
+  @apply inline-block;
+}
+
+.field-group__title {
+  @apply font-alt-sans;
+  @apply text-lg;
+  @apply mb-6;
+}
+
+.field-grid {
+  .field {
+    @apply mb-0;
+  }
+
+  &.demo {
+    .field {
+      @apply bg-gray-200;
+    }
+  }
+}

package/src/prototypes/FieldSection.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import "./FieldSection.scss"
+
+export interface FieldSectionProps {
+  title?: string
+  className?: string
+  tinted?: boolean
+  insetGrid?: boolean
+  children: React.ReactNode
+}
+
+const FieldSection = (props: FieldSectionProps) => {
+  const fieldGridClasses = ["field-section__grid"]
+  if (props.tinted) fieldGridClasses.push("is-tinted")
+  if (props.insetGrid) fieldGridClasses.push("is-inset")
+  if (props.className) fieldGridClasses.push(props.className)
+
+  return (
+    <div className="field-section">
+      {props.title && (
+        <header className="field-section__header">
+          <h2 className="field-section__title">{props.title}</h2>
+        </header>
+      )}
+
+      <div className={fieldGridClasses.join(" ")}>{props.children}</div>
+    </div>
+  )
+}
+
+export { FieldSection as default, FieldSection }