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

package/src/notifications/ApplicationStatus.scss

@@ -0,0 +1,10 @@
+.application-status {
+  @apply p-4;
+  @screen lg {
+    @apply whitespace-no-wrap;
+  }
+}
+
+.application-status__sub-content {
+  padding-left: 22px;
+}

package/src/notifications/ApplicationStatus.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { Icon, IconFillColors } from "../icons/Icon"
+import { ApplicationStatusType } from "../global/ApplicationStatusType"
+import "./ApplicationStatus.scss"
+
+export interface ApplicationStatusProps {
+  content: string
+  subContent?: string
+  status?: ApplicationStatusType
+  vivid?: boolean
+  withIcon?: boolean
+}
+
+const ApplicationStatus = (props: ApplicationStatusProps) => {
+  let bgColor = ""
+  // determine styling
+  const vivid = props.vivid || false
+  let textColor = vivid ? "text-white" : "text-gray-800"
+  const textSize = vivid ? "text-xs" : "text-sm"
+
+  const status = props.status || ApplicationStatusType.Open
+  const content = props.content
+  const withIcon = props.withIcon ?? true
+
+  let icon
+
+  if (withIcon) {
+    icon = (
+      <span>
+        <Icon size="medium" symbol="clock" fill={vivid ? IconFillColors.white : undefined} /> &nbsp;
+      </span>
+    )
+  }
+
+  switch (status) {
+    case ApplicationStatusType.Open:
+      bgColor = vivid ? "bg-primary" : "bg-primary-light"
+      break
+    case ApplicationStatusType.Closed:
+      bgColor = vivid ? "bg-alert" : "bg-alert-light"
+      break
+    case ApplicationStatusType.PostLottery:
+      bgColor = "bg-gray-850"
+      textColor = "text-white"
+      break
+    default:
+      bgColor = "bg-primary"
+  }
+
+  return (
+    <div className={`application-status ${textSize} ${textColor} ${bgColor}`}>
+      {icon}
+      {content}
+      {props.subContent && (
+        <>
+          <br />
+          <span className={"application-status__sub-content"}>{props.subContent}</span>
+        </>
+      )}
+    </div>
+  )
+}
+
+export { ApplicationStatus as default, ApplicationStatus }

package/src/notifications/ErrorMessage.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+const ErrorMessage = (props: { id?: string; error?: boolean; children?: React.ReactNode }) => {
+  if (props.error) {
+    return (
+      <span id={props.id} className="error-message" aria-live="assertive">
+        {props.children}
+      </span>
+    )
+  } else {
+    return <></>
+  }
+}
+
+export { ErrorMessage as default, ErrorMessage }

package/src/notifications/SiteAlert.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react"
+import { AlertBox } from "./AlertBox"
+import { AlertTypes } from "./alertTypes"
+
+type SiteAlertProps = {
+  timeout?: number
+  dismissable?: boolean
+  type?: AlertTypes
+  className?: string
+}
+
+export const setSiteAlertMessage = (message: string, type: AlertTypes) => {
+  sessionStorage.setItem(`alert_message_${type}`, message)
+}
+
+/**
+ * Show an alert based on a url query param.
+ */
+export const SiteAlert = ({
+  timeout,
+  dismissable = true,
+  type = "alert",
+  className,
+}: SiteAlertProps) => {
+  const [open, setOpen] = useState(false)
+  const [message, setMessage] = useState("")
+
+  useEffect(() => {
+    let timeoutRef: number
+    const storedMessage = sessionStorage.getItem(`alert_message_${type}`)
+
+    if (storedMessage) {
+      setMessage(storedMessage)
+      setOpen(true)
+      sessionStorage.removeItem(`alert_message_${type}`)
+
+      // Automatically dismiss the message after the timeout, if applicable
+      if (timeout) {
+        timeoutRef = (setTimeout(() => setOpen(false), timeout) as unknown) as number
+      }
+    }
+    return () => clearTimeout(timeoutRef)
+  }, [timeout, type])
+
+  return open ? (
+    <AlertBox
+      onClose={dismissable ? () => setOpen(false) : undefined}
+      className={className}
+      type={type}
+    >
+      {message}
+    </AlertBox>
+  ) : null
+}

package/src/notifications/StatusAside.scss

@@ -0,0 +1,11 @@
+.status-aside__buttons {
+  @apply mb-6;
+  @apply pb-2;
+  @apply border-b;
+}
+
+.status-aside__title {
+  @apply font-alt-sans;
+  @apply text-lg;
+  @apply pt-4;
+}

package/src/notifications/StatusAside.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { GridSection } from "../sections/GridSection"
+
+import "./StatusAside.scss"
+
+// Ensure each action has a unique key
+export interface StatusAsideProps {
+  actions: React.ReactNode[]
+  columns?: number
+  children?: React.ReactNode
+}
+
+export const StatusAside = (props: StatusAsideProps) => (
+  <div className="status-aside">
+    <div className="status-aside__buttons">
+      <GridSection columns={props.columns || 2} tightSpacing={true}>
+        {props.actions}
+      </GridSection>
+    </div>
+
+    {React.Children.count(props.children) > 0 && (
+      <div className="status-aside__messages">{props.children}</div>
+    )}
+  </div>
+)

package/src/notifications/StatusMessage.scss

@@ -0,0 +1,25 @@
+.status-message {
+  @apply flex;
+  @apply flex-col;
+  @apply py-4;
+  @apply text-sm;
+  @apply text-gray-800;
+  @apply border-b;
+
+  &:last-of-type {
+    @apply border-b-0;
+  }
+}
+
+.status-message__status {
+  @apply flex;
+  @apply justify-between;
+}
+
+.status-message__status + .status-message__note {
+  @apply mt-3;
+}
+
+.status-message__note {
+  @apply text-sm;
+}

package/src/notifications/StatusMessage.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
+import { Tag } from "../text/Tag"
+import { t } from "../helpers/translator"
+
+import "./StatusMessage.scss"
+
+export interface StatusMessagesProps {
+  lastTimestamp?: string
+  children?: React.ReactNode
+}
+
+export const StatusMessages = (props: StatusMessagesProps) => {
+  if (React.Children.count(props.children) == 0) {
+    return (
+      <ul className="status-messages">
+        {props.lastTimestamp && (
+          <li className="status-message">
+            <div className="status-message__note text-center">
+              {t("t.lastUpdated")}: {props.lastTimestamp}
+            </div>
+          </li>
+        )}
+      </ul>
+    )
+  } else {
+    return (
+      <>
+        <h3 className="status-messages__title">{t("t.statusHistory")}</h3>
+        <ul className="status-messages">{props.children}</ul>
+      </>
+    )
+  }
+}
+
+export interface StatusMessageProps {
+  status: string
+  timestamp: string
+  body?: string
+  style?: AppearanceStyleType
+}
+
+const StatusMessage = (props: StatusMessageProps) => {
+  return (
+    <li className="status-message">
+      <div className="status-message__status">
+        <Tag pillStyle={true} styleType={props.style} size={AppearanceSizeType.small}>
+          {props.status}
+        </Tag>
+
+        <span className="status-message__time">{props.timestamp}</span>
+      </div>
+
+      {props.body && <div className="status-message__note">{props.body}</div>}
+    </li>
+  )
+}
+
+export { StatusMessage as default, StatusMessage }

package/src/notifications/alertTypes.ts

@@ -0,0 +1,7 @@
+export const colorClasses = {
+  alert: "alert",
+  notice: "primary",
+  success: "success",
+}
+
+export type AlertTypes = keyof typeof colorClasses

package/src/notifications/index.ts

@@ -0,0 +1,4 @@
+export { AlertBox } from "./AlertBox"
+export { AlertNotice } from "./AlertNotice"
+export { SiteAlert, setSiteAlertMessage } from "./SiteAlert"
+export type { AlertTypes } from "./alertTypes"

package/src/overlays/Drawer.scss

@@ -0,0 +1,105 @@
+.drawer {
+  @apply flex;
+  @apply flex-col;
+  @apply bg-gray-200;
+  @apply max-w-5xl;
+  @apply border-l;
+  @apply w-full;
+  @apply absolute;
+  @apply top-0;
+  @apply right-0;
+  @apply bottom-0;
+  @apply left-auto;
+  @apply overflow-y-auto;
+}
+
+.fixed-overlay.has-drawer {
+  &.overlay-effect-enter,
+  &.overlay-effect-exit-active {
+    .fixed-overlay__inner {
+      opacity: 0.5;
+      transform: translate(100px, 0px);
+    }
+  }
+  &.overlay-effect-exit-active {
+    .fixed-overlay__inner {
+      opacity: 0;
+    }
+  }
+  &.overlay-effect-enter-active {
+    .fixed-overlay__inner {
+      opacity: 1;
+      transform: translate(0px, 0px);
+    }
+  }
+
+  .fixed-overlay__inner {
+    @apply w-full;
+    @apply h-full;
+    @apply max-w-5xl;
+    @apply mr-0;
+  }
+
+  &.is-direction-left {
+    .fixed-overlay__inner {
+      @apply ml-0;
+      @apply mr-auto;
+    }
+    &.overlay-effect-enter,
+    &.overlay-effect-exit-active {
+      .fixed-overlay__inner {
+        transform: translate(-100px, 0px);
+      }
+    }
+    &.overlay-effect-enter-active {
+      .fixed-overlay__inner {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+}
+
+.drawer__header {
+  @apply flex;
+  @apply relative;
+  @apply bg-white;
+  @apply p-5;
+  @apply border-b;
+  flex: 0 0 4.625rem;
+}
+
+.drawer__close {
+  @apply absolute;
+  top: 1.625rem;
+  left: 1.5rem;
+}
+
+.drawer__title {
+  @apply font-alt-sans;
+  @apply text-xl;
+  @apply ml-10;
+}
+
+.is-direction-left {
+  .drawer__title {
+    @apply ml-0;
+  }
+  .drawer__close {
+    left: auto;
+    right: 1.5rem;
+  }
+}
+
+.drawer__body {
+  @apply overflow-y-auto;
+  @apply relative;
+  //  flex: 1 1 auto;
+}
+
+.drawer__content {
+  @apply m-auto;
+  @apply px-4;
+  @apply pt-8;
+  @apply pb-4;
+  @apply overflow-y-visible;
+}

package/src/overlays/Drawer.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import "./Drawer.scss"
+import { Icon } from "../icons/Icon"
+import { Overlay, OverlayProps } from "./Overlay"
+
+export enum DrawerSide {
+  left = "left",
+  right = "right",
+}
+
+// Ensure each action has a unique key
+export interface DrawerProps extends OverlayProps {
+  title?: string
+  subtitle?: string
+  className?: string
+  direction?: DrawerSide
+  actions?: React.ReactNode[]
+}
+
+const Drawer = (props: DrawerProps) => {
+  const drawerClasses = ["drawer"]
+  if (props.className) drawerClasses.push(props.className)
+
+  return (
+    <Overlay
+      ariaLabel={props.ariaLabel || props.title}
+      ariaDescription={props.ariaDescription}
+      open={props.open}
+      onClose={props.onClose}
+      backdrop={props.backdrop}
+      className={"has-drawer" + (props.direction == DrawerSide.left ? " is-direction-left" : "")}
+    >
+      <div className={drawerClasses.join(" ")}>
+        <header className="drawer__header">
+          {props.title && <h1 className="drawer__title">{props.title}</h1>}
+          <button onClick={props.onClose} className="drawer__close" aria-label="Close" tabIndex={0}>
+            <Icon size="medium" symbol="close" />
+          </button>
+        </header>
+
+        <div className="drawer__body">
+          <div className="drawer__content">{props.children}</div>
+        </div>
+
+        {props.actions && <div className="p-4 flex gap-4">{props.actions}</div>}
+      </div>
+    </Overlay>
+  )
+}
+
+export { Drawer as default, Drawer }