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

package/src/blocks/AppStatusItem.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import "./AppStatusItem.scss"
+import moment from "moment"
+import { Application, Listing } from "@bloom-housing/backend-core/types"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { t } from "../helpers/translator"
+
+interface AppStatusItemProps {
+  application: Application
+  listing: Listing
+}
+
+const AppStatusItem = (props: AppStatusItemProps) => {
+  const { application, listing } = props
+
+  const applicationDueDate = moment(listing.applicationDueDate)
+  const editDate = moment(application.updatedAt)
+
+  return (
+    <article className="status-item is-editable animated-fade">
+      <div className="status-item__inner">
+        <header className="status-item__header">
+          <h3 className="status-item__title">{listing.name}</h3>
+          <p className="status-item__due">
+            {t("listings.applicationDeadline")}: {applicationDueDate.format("MMMM D, YYYY")}
+          </p>
+        </header>
+
+        <section className="status-item__content">
+          <div className="status-item__details">
+            {application.id && (
+              <>
+                <span className="status-item__confirm-text">
+                  {t("application.yourLotteryNumber")}:
+                </span>
+                <br />
+                <span className="status-item__confirm-number">{application.id}</span>
+              </>
+            )}
+          </div>
+
+          <div className="status-item__action">
+            <p className="status-item__status">
+              <span className={"status-item__label"}>
+                {t("application.status")}: {t("application.statuses.submitted")}
+              </span>
+            </p>
+            <a href={`application/${application.id}`} className="button is-small">
+              {t("application.viewApplication")}
+            </a>
+          </div>
+        </section>
+
+        <footer className="status-item__footer">
+          <div className="status-item_links">
+            <LocalizedLink
+              className="status-item__link lined"
+              href={`/listing/${listing.id}/${listing.urlSlug}`}
+            >
+              {t("t.seeListing")}
+            </LocalizedLink>
+          </div>
+
+          <div className="status-item__meta">
+            <p className="status-item__date">
+              {t("application.edited")}: {editDate.format("MMMM D, YYYY")}
+            </p>
+          </div>
+        </footer>
+      </div>
+    </article>
+  )
+}
+
+export { AppStatusItem as default, AppStatusItem }

package/src/blocks/DashBlock.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import "./DashBlocks.scss"
+
+interface DashBlockProps {
+  href?: string
+  title: string
+  subtitle?: string
+  icon: React.ReactNode
+  children?: React.ReactNode
+}
+const DashBlock = (props: DashBlockProps) => {
+  const { href, title, subtitle, icon, children } = props
+  let content, wrapper
+  if (children) {
+    content = <div className="dash-item__content">{children}</div>
+  }
+  const header = (
+    <>
+      <span className="dash-item__badge">{icon}</span>
+      <h2 className="dash-item__name">{title}</h2>
+      {subtitle && <p>{subtitle}</p>}
+    </>
+  )
+  if (href) {
+    wrapper = (
+      <a href={href} className="dash-item">
+        {header}
+      </a>
+    )
+  } else {
+    wrapper = (
+      <>
+        <div className="dash-item">
+          <div className="pb-4">{header}</div>
+          {content}
+        </div>
+      </>
+    )
+  }
+  return <div className="dash-block">{wrapper}</div>
+}
+export { DashBlock as default, DashBlock }

package/src/blocks/DashBlocks.scss

@@ -0,0 +1,56 @@
+.dash-blocks {
+  @apply w-full;
+
+  @screen md {
+    @apply flex;
+    @apply flex-wrap;
+  }
+}
+
+.dash-block {
+  @screen md {
+    @apply px-2;
+    flex: 50%;
+  }
+}
+
+.dash-item {
+  @apply text-gray-800;
+  @apply border-solid;
+  @apply border-b;
+  @apply border-gray-450;
+  @apply text-center;
+  @apply block;
+  @apply bg-white;
+  @apply p-4;
+  @apply pt-8;
+  @apply text-tiny;
+
+  @screen md {
+    @apply rounded-lg;
+    @apply border;
+    @apply p-8;
+    @apply mb-8;
+  }
+
+  p {
+    @apply mb-0;
+  }
+
+  .dash-item__content {
+    @apply border-t;
+    @apply border-gray-450;
+    @apply -mx-8;
+    @apply -mb-8;
+    @apply background-grey-300
+    @screen md {
+      @apply rounded-b-lg;
+      @apply border-t;
+    }
+  }
+}
+
+.dash-item__name {
+  @apply text-2xl;
+  @apply mb-3;
+}

package/src/blocks/DashBlocks.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+import "./DashBlocks.scss"
+
+const DashBlocks = (props: { children: React.ReactNode }) => (
+  <div className="dash-blocks">{props.children}</div>
+)
+export { DashBlocks as default, DashBlocks }

package/src/blocks/FormCard.scss

@@ -0,0 +1,201 @@
+.form-card {
+  @apply bg-white;
+
+  @screen md {
+    @apply mb-6;
+    @apply border;
+    @apply border-gray-450;
+    @apply rounded-lg;
+  }
+
+  @screen print {
+    @apply border-0;
+  }
+
+  hr,
+  .border-b {
+    @apply border-gray-450;
+  }
+
+  .hr {
+    @apply my-6;
+  }
+}
+
+.form-card__title {
+  @apply text-center;
+  width: fit-content;
+  @apply mt-4;
+  @apply mx-auto;
+  @apply pt-4;
+  @apply px-3;
+  @apply border-t-4;
+  @apply border-primary;
+  @apply leading-tight;
+
+  @screen md {
+    @apply mx-auto;
+    @apply px-0;
+  }
+
+  &.is-borderless {
+    @apply pt-0;
+    @apply mt-0;
+    @apply border-t-0;
+  }
+}
+
+.form-card__back {
+  @apply ml-8;
+  @apply -mb-5;
+
+  @screen md {
+    @apply mt-5;
+  }
+
+  a {
+    @apply underline;
+  }
+}
+
+.form-card__lead,
+.form-card__group {
+  @apply py-8;
+  @apply px-6;
+
+  @screen md {
+    @apply mx-8;
+  }
+
+  @screen print {
+    @apply py-2;
+    @apply px-0;
+  }
+}
+
+.form-card__lead {
+  @apply pt-12;
+  @apply pb-8;
+
+  @screen md {
+    @apply px-0;
+  }
+
+  @screen print {
+    @apply py-2;
+  }
+}
+
+.form-card__group {
+  @screen md {
+    @apply px-8;
+  }
+
+  @screen print {
+    @apply px-0;
+  }
+}
+
+.form-card__header {
+  @apply text-white;
+  @apply text-center;
+
+  @screen md {
+    @apply rounded-b-lg;
+  }
+}
+
+.form-card__header_group {
+  @apply bg-primary;
+  @apply p-4;
+
+  @screen md {
+    @apply rounded-t-lg;
+  }
+
+  @screen print {
+    @apply py-0;
+  }
+}
+
+.form-card__header_title {
+  @apply text-lg;
+  @apply font-alt-sans;
+  @apply font-bold;
+  @apply uppercase;
+  @apply mb-0;
+}
+
+.form-card__header_nav {
+  @apply py-4;
+  @apply bg-white;
+  @apply rounded-b-lg;
+  @apply overflow-auto;
+
+  @screen md {
+    @apply p-4;
+  }
+
+  @screen print {
+    @apply py-0;
+  }
+}
+
+.form-card__pager {
+  @apply text-center;
+
+  button,
+  .button {
+    @apply mb-0;
+  }
+}
+
+.form-card__pager-row {
+  @apply px-8;
+  @apply py-4;
+
+  &.primary {
+    @apply bg-primary-lighter;
+    @apply py-8;
+  }
+
+  &.border-t,
+  &.border-b {
+    @apply border-gray-450;
+  }
+}
+
+.form--card__sub-header {
+  @apply py-4;
+  @apply px-8;
+  @apply bg-gray-300;
+  @apply flex;
+  @apply justify-between;
+  @apply border-solid;
+  @apply border-t;
+  @apply border-gray-450;
+
+  .edit-link {
+    @apply self-center;
+  }
+
+  @screen print {
+    @apply px-0;
+    @apply py-1;
+  }
+}
+
+.form-card__sub-title {
+  @apply mb-0;
+}
+
+.form-card__paragraph-title {
+  @apply uppercase;
+  @apply text-gray-750;
+  @apply tracking-widest;
+  @apply font-semibold;
+  @apply font-sans;
+  @apply text-tiny;
+  @apply mb-2;
+  @apply inline-block;
+}

package/src/blocks/FormCard.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import "./FormCard.scss"
+
+export interface FormCardProps {
+  header?: string
+  children: React.ReactNode
+  className?: string
+}
+
+const FormCard = (props: FormCardProps) => {
+  const classNames = props.className ? `${props.className} form-card` : "form-card"
+  if (props.header) {
+    return (
+      <article className={classNames}>
+        <div className="form-card__header">
+          <header className="form-card__header_group">
+            <h5 className="form-card__header_title">{props.header}</h5>
+          </header>
+
+          <div className="form-card__header_nav">{props.children}</div>
+        </div>
+      </article>
+    )
+  }
+
+  return <article className={classNames}>{props.children}</article>
+}
+
+export { FormCard as default, FormCard }

package/src/blocks/HousingCounselor.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import { Icon, IconFillColors } from "../icons/Icon"
+import { t } from "../helpers/translator"
+
+export interface HousingCounselorProps {
+  addressCityState?: string
+  addressStreet?: string
+  languages: string[]
+  name: string
+  phone?: string
+  website?: string
+}
+
+const LanguageLabel = (language: string) => {
+  return (
+    <span className="pill" key={language}>
+      {language}
+    </span>
+  )
+}
+
+const HousingCounselor = (props: HousingCounselorProps) => {
+  return (
+    <div className="resource-item text-base">
+      <h3 className="font-sans text-lg">{props.name}</h3>
+      <p className="text-sm text-gray-800 pb-2">
+        {t("housingCounselors.languageServices")}
+        {props.languages.map((language) => LanguageLabel(language))}
+      </p>
+      {props.addressStreet && (
+        <p className="icon-item pb-2">
+          {props.addressStreet} <br /> {props.addressCityState}
+        </p>
+      )}
+      {props.phone && (
+        <a className="icon-item pb-1" href={`tel:+1${props.phone}`}>
+          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />
+          {` ${t("housingCounselors.call", { number: props.phone })}`}
+        </a>
+      )}
+      {props.website && (
+        <a className="icon-item" href={props.website}>
+          <Icon symbol="globe" size="medium" fill={IconFillColors.primary} />
+          {` ${t("t.website")}`}
+        </a>
+      )}
+    </div>
+  )
+}
+
+export { HousingCounselor as default, HousingCounselor }