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

package/src/blocks/ImageCard.scss

@@ -0,0 +1,91 @@
+@import "../global/mixins.scss";
+
+.image-card__wrapper {
+  @apply relative;
+}
+
+.image-card {
+  @apply relative;
+  @include has-image-skeleton();
+
+  img {
+    @apply w-full;
+    min-height: 3rem;
+  }
+}
+
+.image-card-tag__wrapper {
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply absolute;
+  @apply z-10;
+  @apply w-full;
+  @apply mt-4;
+
+  @screen md {
+    @apply items-start;
+    @apply justify-start;
+    @apply ml-4;
+  }
+}
+
+.image-card__figcaption {
+  @apply absolute;
+  @apply inset-x-0;
+  @apply bottom-0;
+  @apply py-1;
+
+  &:before {
+    @include overlay-image;
+    @include custom-linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  }
+}
+
+.image-card__tag {
+  @apply absolute;
+  @apply top-0;
+  @apply p-3;
+  @apply m-5;
+}
+
+.image-card__title {
+  @apply text-white;
+  @apply text-left;
+  @apply text-3xl;
+  @apply uppercase;
+  @apply font-alt-sans;
+  @apply relative;
+  @apply z-10;
+  @apply tracking-wider;
+  @apply px-5;
+  @apply pb-1;
+}
+
+.image-card__subtitle {
+  @apply text-white;
+  @apply text-left;
+  @apply uppercase;
+  @apply font-alt-sans;
+  @apply text-sm;
+  @apply px-5;
+  @apply pb-3;
+  @apply relative;
+  @apply z-10;
+  @apply tracking-widest;
+}
+
+.image-card--leader {
+  @apply w-full;
+
+  @screen md {
+    @apply w-2/3;
+    @apply pr-8;
+    @apply pt-8;
+  }
+
+  .image-card__title {
+    @apply text-4xl;
+    @apply text-center;
+  }
+}

package/src/blocks/ImageCard.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { ApplicationStatus } from "../notifications/ApplicationStatus"
+import "./ImageCard.scss"
+import { Tag } from "../text/Tag"
+import { ApplicationStatusType } from "../global/ApplicationStatusType"
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+import { t } from "../helpers/translator"
+
+export interface StatusBarType {
+  status?: ApplicationStatusType
+  content: string
+  subContent?: string
+  hideIcon?: boolean
+}
+
+export interface ImageCardProps {
+  imageUrl: string
+  subtitle?: string
+  title: string
+  href?: string
+  description?: string
+  tagLabel?: string
+  statuses?: StatusBarType[]
+}
+
+const ImageCard = (props: ImageCardProps) => {
+  const getStatuses = () => {
+    return props.statuses?.map((status, index) => {
+      return (
+        <aside className="image-card__status" aria-label={status.content} key={index}>
+          <ApplicationStatus
+            status={status.status}
+            content={status.content}
+            subContent={status.subContent}
+            withIcon={!status.hideIcon}
+            vivid
+          />
+        </aside>
+      )
+    })
+  }
+
+  const image = (
+    <div className="image-card__wrapper">
+      {props.tagLabel && (
+        <div className="image-card-tag__wrapper">
+          <Tag styleType={AppearanceStyleType.warning}>{props.tagLabel}</Tag>
+        </div>
+      )}
+      <figure className="image-card">
+        {props.imageUrl && (
+          <img src={props.imageUrl} alt={props.description || t("listings.buildingImageAltText")} />
+        )}
+        <figcaption className="image-card__figcaption">
+          <h2 className="image-card__title">{props.title}</h2>
+          {props.subtitle && <p className="image-card__subtitle">{props.subtitle}</p>}
+        </figcaption>
+      </figure>
+      {getStatuses()}
+    </div>
+  )
+
+  let card = image
+
+  if (props.href) {
+    card = (
+      <LocalizedLink className="block" href={props.href}>
+        {image}
+      </LocalizedLink>
+    )
+  }
+
+  return card
+}
+
+export { ImageCard as default, ImageCard }

package/src/blocks/InfoCard.scss

@@ -0,0 +1,42 @@
+.info-card {
+  @apply p-6;
+  @apply rounded;
+  @apply border;
+  @apply border-gray-450;
+  @apply mb-4;
+  @apply bg-white;
+}
+
+.info-card.is-normal-primary-lighter,
+.markdown .info-card {
+  @apply bg-primary-lighter;
+
+  .info-card__title {
+    @apply text-base;
+    @apply normal-case;
+    @apply tracking-normal;
+  }
+}
+
+.info-card__title {
+  @apply text-gray-800;
+  @apply uppercase;
+  @apply font-sans;
+  @apply font-bold;
+  @apply text-sm;
+  @apply tracking-wide;
+}
+
+.info-card__header {
+  &:not([class*="mb-"]) {
+    @apply mb-4;
+  }
+}
+
+.info-card__columns {
+  @apply flex;
+}
+
+.info-card__column {
+  @apply flex-1;
+}

package/src/blocks/InfoCard.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import "./InfoCard.scss"
+import Markdown from "markdown-to-jsx"
+
+export interface InfoCardProps {
+  title: string
+  subtitle?: string
+  externalHref?: string
+  className?: string
+  children: React.ReactNode
+}
+
+const InfoCard = (props: InfoCardProps) => {
+  const wrapperClasses = ["info-card"]
+  if (props.className) {
+    wrapperClasses.push(props.className)
+  }
+
+  return (
+    <div className={wrapperClasses.join(" ")}>
+      <div className={"info-card__header"}>
+        {props.externalHref ? (
+          <h3 className="info-card__title">
+            <a href={props.externalHref} target="_blank">
+              {props.title}
+            </a>
+          </h3>
+        ) : (
+          <h3 className="info-card__title">{props.title}</h3>
+        )}
+        {props.subtitle && <span className={"text-sm text-gray-700"}>{props.subtitle}</span>}
+      </div>
+      {typeof props.children == "string" ? (
+        <div className="markdown">
+          <Markdown options={{ disableParsingRawHTML: true }} children={props.children} />
+        </div>
+      ) : (
+        props.children
+      )}
+    </div>
+  )
+}
+
+export { InfoCard as default, InfoCard }

package/src/blocks/StatusBar.scss

@@ -0,0 +1,30 @@
+.status-bar {
+  @apply border-t;
+  @apply bg-white;
+}
+
+.status-bar__row {
+  @apply flex;
+  @apply flex-row;
+  @apply w-full;
+  @apply mx-auto;
+  @apply max-w-screen-xl;
+  @apply justify-between;
+  @apply px-5;
+  @apply items-center;
+  @apply my-3;
+
+  &.tag-only {
+    @apply flex-row-reverse;
+  }
+}
+.status-bar__tag {
+  @screen md {
+    @apply pl-6;
+    @apply w-3/12;
+  }
+  .tag.is-pill {
+    display: inline-block;
+    width: 100%;
+  }
+}

package/src/blocks/StatusBar.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import "./StatusBar.scss"
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+import { Tag } from "../text/Tag"
+
+export interface StatusBarProps {
+  backButton?: React.ReactNode
+  tagStyle: AppearanceStyleType
+  tagLabel: string
+}
+
+const StatusBar = (props: StatusBarProps) => {
+  const rowClasses = ["status-bar__row"]
+  if (!props.backButton) rowClasses.push("tag-only")
+
+  return (
+    <section className="status-bar">
+      <div className={rowClasses.join(" ")}>
+        {props.backButton}
+
+        <div className="status-bar__tag">
+          <Tag styleType={props.tagStyle} pillStyle>
+            {props.tagLabel}
+          </Tag>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export { StatusBar as default, StatusBar }

package/src/blocks/ViewItem.scss

@@ -0,0 +1,59 @@
+@import "../global/mixins.scss";
+
+.view-item {
+  @apply relative;
+  @apply text-base;
+  @apply mb-4;
+
+  &:last-of-type {
+    @apply mb-0;
+  }
+
+  &.is-flagged {
+    @apply bg-warn-light;
+    @apply -my-1;
+    @apply py-1;
+    @apply -ml-8;
+    @apply pl-8;
+    box-shadow: inset 2px 0px 0px 0px $tailwind-warn;
+  }
+
+  .edit-link {
+    @apply absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.view-item__label {
+  @apply text-gray-800;
+  @apply font-sans;
+  @apply text-tiny;
+  @apply block;
+}
+
+.view-item__value {
+  @apply font-alt-sans;
+  @apply tracking-wide;
+  @apply font-semibold;
+  @apply block;
+  padding-top: 10px;
+
+  &.is-truncated {
+    @include ellipsis;
+  }
+
+  // do not change font-family for inputs
+  .field .control .input,
+  .error-message {
+    @apply font-sans;
+    @apply font-normal;
+  }
+}
+
+.view-item__helper {
+  @apply text-gray-750;
+  @apply font-sans;
+  @apply text-tiny;
+  @apply block;
+}

package/src/blocks/ViewItem.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import "./ViewItem.scss"
+
+export interface ViewItemProps {
+  id?: string
+  label?: string
+  children?: React.ReactNode
+  helper?: string
+  flagged?: boolean
+  className?: string
+  truncated?: boolean
+}
+
+const ViewItem = (props: ViewItemProps) => {
+  const viewItemClasses = ["view-item"]
+  if (props.flagged) viewItemClasses.push("is-flagged")
+  if (props.className) viewItemClasses.push(props.className)
+
+  let valueClassName = "view-item__value"
+  if (!props.label) valueClassName += " pt-0"
+  if (props.truncated) valueClassName += " is-truncated"
+
+  return (
+    <div id={props.id} className={viewItemClasses.join(" ")}>
+      {props.label && <span className="view-item__label">{props.label}</span>}
+      {props.children && <span className={valueClassName}>{props.children}</span>}
+      {props.helper && <span className="view-item__helper">{props.helper}</span>}
+    </div>
+  )
+}
+
+export { ViewItem as default, ViewItem }

package/src/config/ConfigContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, createElement, FunctionComponent } from "react"
+
+type ConfigContextProps = {
+  storageType: "local" | "session"
+  apiUrl: string
+  idleTimeout: number
+}
+
+const timeoutMinutes = parseInt(process.env.idleTimeout || process.env.IDLE_TIMEOUT || "5")
+const defaultTimeout = timeoutMinutes * 60 * 1000
+
+export const ConfigContext = createContext<ConfigContextProps>({
+  storageType: "session",
+  apiUrl: "",
+  idleTimeout: defaultTimeout,
+})
+
+export const ConfigProvider: FunctionComponent<{
+  apiUrl: string
+  storageType?: ConfigContextProps["storageType"]
+  idleTimeout?: number
+}> = ({ apiUrl, storageType = "session", idleTimeout = defaultTimeout, children }) => {
+  return createElement(
+    ConfigContext.Provider,
+    {
+      value: {
+        apiUrl,
+        storageType,
+        idleTimeout,
+      },
+    },
+    children
+  )
+}
+
+export default ConfigContext