@bloom-housing/ui-components 4.2.3 → 4.3.0

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

@@ -1,4 +1,5 @@
 import * as React from "react"
+import Heading from "../../../../headers/Heading"
 
 export type EventType = {
   timeString?: string
@@ -19,9 +20,9 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <h4 className={props.sectionHeader ? "text-caps-underline" : "text-caps-tiny"}>
+        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
           {props.headerText}
-        </h4>
+        </Heading>
       )}
       {props.events.map((event, index) => (
         <div key={`events-${index}`} className={`${index !== props.events.length - 1 && "pb-3"}`}>

package/src/page_components/sign-in/FormSignIn.tsx

@@ -43,6 +43,7 @@ export type FormSignInControl = {
   errors: UseFormMethods["errors"]
   handleSubmit: UseFormMethods["handleSubmit"]
   register: UseFormMethods["register"]
+  watch: UseFormMethods["watch"]
 }
 
 export type FormSignInValues = {
@@ -111,7 +112,7 @@ const FormSignIn = ({
         </Form>
       </div>
       {showRegisterBtn && (
-        <div className="form-card__group text-center">
+        <div className="form-card__group text-center border-t">
           <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
 
           <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>

package/src/page_components/sign-in/ResendConfirmationModal.tsx

@@ -0,0 +1,106 @@
+import {
+  AppearanceStyleType,
+  Button,
+  Modal,
+  t,
+  Form,
+  Field,
+  emailRegex,
+} from "@bloom-housing/ui-components"
+import React, { useEffect, useMemo } from "react"
+import { useForm } from "react-hook-form"
+
+export type ResendConfirmationModalProps = {
+  isOpen: boolean
+  initialEmailValue: string
+  onClose: () => void
+  onSubmit: (email: string) => void
+  loading: boolean
+}
+
+export type ResendConfirmationModalForm = {
+  onSubmit: (email: string) => void
+}
+
+const ResendConfirmationModal = ({
+  isOpen,
+  initialEmailValue,
+  loading,
+  onClose,
+  onSubmit,
+}: ResendConfirmationModalProps) => {
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, errors, reset, getValues, trigger } = useForm({
+    defaultValues: useMemo(() => {
+      return {
+        emailResend: initialEmailValue,
+      }
+    }, [initialEmailValue]),
+  })
+
+  useEffect(() => {
+    reset({
+      emailResend: initialEmailValue,
+    })
+  }, [initialEmailValue, reset])
+
+  const onFormSubmit = async () => {
+    const isValid = await trigger()
+    if (!isValid) return
+
+    const { emailResend } = getValues()
+    onSubmit(emailResend)
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      title={t("authentication.signIn.yourAccountIsNotConfirmed")}
+      ariaDescription={t("authentication.createAccount.linkExpired")}
+      onClose={() => {
+        onClose()
+        window.scrollTo(0, 0)
+      }}
+      actions={[
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.primary}
+          onClick={() => onFormSubmit()}
+          loading={loading}
+        >
+          {t("authentication.createAccount.resendTheEmail")}
+        </Button>,
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.alert}
+          onClick={() => {
+            onClose()
+            window.scrollTo(0, 0)
+          }}
+        >
+          {t("t.cancel")}
+        </Button>,
+      ]}
+    >
+      <>
+        <Form>
+          <Field
+            caps={true}
+            type="email"
+            name="emailResend"
+            label={t("authentication.createAccount.resendAnEmailTo")}
+            placeholder="example@web.com"
+            validation={{ required: true, pattern: emailRegex }}
+            error={!!errors.emailResend}
+            errorMessage={t("authentication.signIn.loginError")}
+            register={register}
+          />
+        </Form>
+
+        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
+      </>
+    </Modal>
+  )
+}
+
+export { ResendConfirmationModal as default, ResendConfirmationModal }

package/src/prototypes/Swatch.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+
+export const Swatch = (props: { colorVar: string }) => (
+  <span
+    style={{ backgroundColor: `var(${props.colorVar})` }}
+    className="w-6 border border-gray-500 inline-block"
+  >
+    &nbsp;
+  </span>
+)

package/src/tables/CategoryTable.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { StackedTable, StackedTableProps } from "./StackedTable"
+import { Heading } from "../headers/Heading"
+
+export interface CategoryTableSection {
+  /** The header text for a category */
+  header: string
+  /** The table data for a category */
+  tableData: StackedTableProps
+}
+
+export interface CategoryTableProps {
+  /** The table data passed as category section strings associated with a table data set */
+  categoryData: CategoryTableSection[]
+}
+
+const CategoryTable = (props: CategoryTableProps) => {
+  const tables = props.categoryData.map((category, index) => {
+    return (
+      <div key={index}>
+        <Heading priority={3} style={"categoryHeader"}>
+          {category.header}
+        </Heading>
+        <hr className={"my-2"} />
+        <StackedTable {...category.tableData} className={"category-table mb-2 md:mb-6"} />
+      </div>
+    )
+  })
+
+  return <>{tables}</>
+}
+
+export { CategoryTable as default, CategoryTable }

package/src/tables/GroupedTable.tsx

@@ -1,11 +1,11 @@
 import * as React from "react"
 import { nanoid } from "nanoid"
-import { Cell, StandardTableProps } from "./StandardTable"
+import { Cell, StandardTableData, StandardTableProps } from "./StandardTable"
 
 export interface GroupedTableGroup {
   header?: string | React.ReactNode
   className?: string
-  data: Record<string, React.ReactNode>[]
+  data: StandardTableData
 }
 
 export interface GroupedTableProps extends Omit<StandardTableProps, "data"> {
@@ -43,16 +43,16 @@ export const GroupedTable = (props: GroupedTableProps) => {
       )
     }
 
-    groupData.forEach((row: Record<string, React.ReactNode>, groupDataIndex) => {
+    groupData.forEach((row, groupDataIndex) => {
       const rowKey = row["id"]
-        ? `row-${row["id"] as string}`
+        ? `row-${row["id"].content as string}`
         : process.env.NODE_ENV === "test"
         ? `groupedrow-${dataIndex}-${groupDataIndex}`
         : nanoid()
       const cols = Object.keys(headers).map((colKey, colIndex) => {
         const uniqKey = process.env.NODE_ENV === "test" ? `col-${colIndex}` : nanoid()
         const header = headers[colKey]
-        const cell = row[colKey]
+        const cell = row[colKey]?.content
         return (
           <Cell key={uniqKey} headerLabel={header} className={cellClassName}>
             {cell}

package/src/tables/MinimalTable.tsx

@@ -1,16 +1,26 @@
 import * as React from "react"
-import { TableHeaders, StandardTable } from "./StandardTable"
+import { TableHeaders, StandardTable, StandardTableData } from "./StandardTable"
 
 export interface MinimalTableProps {
+  /** If the table should be sortable through dragging */
   draggable?: boolean
+  /** A set state function tied to the table's data, used if the table is draggable */
   setData?: (data: unknown[]) => void
+  /** The headers for the table passed as text content with optional settings */
   headers: TableHeaders
-  data?: Record<string, React.ReactNode>[]
+  /** The table data passed as records of column name to cell data with optional settings */
+  data?: StandardTableData
+  /** Removes cell margins on the left of every row's first cell */
   flushLeft?: boolean
+  /** Removes cell margins on the right of every row's last cell */
   flushRight?: boolean
+  /** If the table should collapse on mobile views to show repeating columns on the left for every row */
   responsiveCollapse?: boolean
+  /** A class name applied to the root of the table */
   className?: string
+  /** A class name applied to the cells of the table */
   cellClassName?: string
+  /** An id applied to the table */
   id?: string
 }
 

package/src/tables/StackedTable.tsx

@@ -1,43 +1,54 @@
 import * as React from "react"
-import { TableHeaders } from "./StandardTable"
+import { StandardTableData, TableHeaders } from "./StandardTable"
 import { MinimalTable } from "./MinimalTable"
 
 export interface StackedTableRow {
+  /** The main text content of the cell */
   cellText: string
+  /** The subtext of the cell, displayed beneath the main text */
   cellSubText?: string
-  hideMobile?: boolean
+  /** Hides this cell's subtext on mobile views */
+  hideSubTextMobile?: boolean
+  /** Text content that will replace this cell's header on mobile views */
+  mobileReplacement?: string
 }
 
 export interface StackedTableProps {
+  /** The headers for the table passed as text content with optional settings */
   headers: TableHeaders
+  /** Headers hidden on desktop views */
   headersHiddenDesktop?: string[]
+  /** The table data passed as records of column name to cell data */
   stackedData?: Record<string, StackedTableRow>[]
+  /** A class name applied to the root of the table */
   className?: string
 }
 
 const StackedTable = (props: StackedTableProps) => {
-  const tableClasses = ["base", props.className]
-  const modifiedData: Record<string, React.ReactNode>[] = []
-  const cellTextClass = "font-semibold text-gray-750"
-  const cellSubtextClass = "text-sm text-gray-700"
+  const tableClasses = ["base", "stacked-table", props.className]
+  const modifiedData: StandardTableData = []
+
   props.stackedData?.forEach((dataRow) => {
     const dataCell = Object.keys(dataRow).reduce((acc, item) => {
-      acc[item] = (
-        <div
-          className={`md:flex md:flex-col w-1/2 md:w-full ${
-            props.headersHiddenDesktop?.includes(item) && "md:hidden"
-          }`}
-        >
-          <span className={`${cellTextClass}`}>{dataRow[item].cellText}</span>
-          <span
-            className={`pl-1 md:pl-0 ${
-              dataRow[item].hideMobile && "hidden md:block"
-            } ${cellSubtextClass}`}
+      acc[item] = {
+        content: (
+          <div
+            className={`stacked-table-cell-container ${
+              props.headersHiddenDesktop?.includes(item) && "md:hidden"
+            }`}
           >
-            {dataRow[item].cellSubText}
-          </span>
-        </div>
-      )
+            <span className={"stacked-table-cell"}>{dataRow[item].cellText}</span>
+            <span
+              className={`stacked-table-subtext  ${
+                dataRow[item].hideSubTextMobile && "hidden md:block"
+              } `}
+            >
+              {dataRow[item].cellSubText}
+            </span>
+          </div>
+        ),
+        mobileReplacement: dataRow[item].cellText,
+      }
       return acc
     }, {})
     modifiedData.push(dataCell)
@@ -48,14 +59,15 @@ const StackedTable = (props: StackedTableProps) => {
     if (props.headersHiddenDesktop?.includes(headerKey)) {
       let headerClasses = "md:hidden"
       headerClasses = `${tempHeader["className"] && tempHeader["className"]} ${headerClasses}`
-      tempHeader = { name: tempHeader["name"] ?? tempHeader, className: headerClasses }
+      tempHeader = {
+        name: tempHeader["name"] ?? tempHeader,
+        className: `stacked-table-header ${headerClasses}`,
+      }
     } else {
       acc[headerKey] = props.headers[headerKey]
       tempHeader = {
         name: tempHeader["name"] ?? tempHeader,
-        className: `${
-          tempHeader["className"] && tempHeader["className"]
-        } px-0 text-base text-gray-700 border-b`,
+        className: `${tempHeader["className"] && tempHeader["className"]} stacked-table-header`,
       }
     }
     acc[headerKey] = tempHeader
@@ -68,7 +80,7 @@ const StackedTable = (props: StackedTableProps) => {
       data={modifiedData}
       className={tableClasses.join(" ")}
       responsiveCollapse={true}
-      cellClassName={"py-3 px-0"}
+      cellClassName={"b-0"}
     />
   )
 }

package/src/tables/StandardTable.tsx

@@ -7,6 +7,7 @@ import { t } from "../helpers/translator"
 
 export interface TableHeadersOptions {
   name: string
+  mobileReplacement?: string
   className?: string
 }
 export interface TableHeaders {
@@ -28,9 +29,11 @@ export const Cell = (props: {
   className?: string
   colSpan?: number
   children: React.ReactNode
+  mobileReplacement?: string | React.ReactNode
 }) => (
   <td
     data-label={props.headerLabel instanceof Object ? props.headerLabel?.name : props.headerLabel}
+    data-cell={props.mobileReplacement}
     className={props.className || "p-5"}
     colSpan={props.colSpan}
   >
@@ -42,20 +45,36 @@ export const TableThumbnail = (props: { children: React.ReactNode }) => {
   return <span className="table__thumbnail">{props.children}</span>
 }
 
+export type StandardTableCell = {
+  /** The main content of the cell */
+  content: React.ReactNode
+  /** Text content that will replace this cell's header on mobile views */
+  mobileReplacement?: string
+}
+
+export type StandardTableData = Record<string, StandardTableCell>[]
+
 export interface StandardTableProps {
+  /** If the table should be sortable through dragging */
   draggable?: boolean
+  /** A set state function tied to the table's data, used if the table is draggable */
   setData?: (data: unknown[]) => void
+  /** The headers for the table passed as text content with optional settings */
   headers: TableHeaders
+  /** The table data passed as records of column name to cell data with optional settings */
   data?: StandardTableData
+  /** A class name applied to the root of the table */
   tableClassName?: string
+  /** A class name applied to each cell */
   cellClassName?: string
+  /** If the table should collapse on mobile views to show repeating columns on the left for every row */
   responsiveCollapse?: boolean
+  /** If cell text should be translated or left raw */
   translateData?: boolean
+  /** An id applied to the table */
   id?: string
 }
 
-export type StandardTableData = Record<string, React.ReactNode>[] | undefined
-
 const headerName = (header: string | TableHeadersOptions) => {
   if (typeof header === "string") {
     return header
@@ -99,16 +118,16 @@ export const StandardTable = (props: StandardTableProps) => {
     )
   }
 
-  const body = tableData?.map((row: Record<string, React.ReactNode>, dataIndex) => {
+  const body = tableData?.map((row, dataIndex) => {
     const rowKey = row["id"]
-      ? `row-${row["id"] as string}`
+      ? `row-${row["id"].content as string}`
       : process.env.NODE_ENV === "test"
       ? `standardrow-${dataIndex}`
       : nanoid()
 
     const cols = Object.keys(headers)?.map((colKey, colIndex) => {
       const uniqKey = process.env.NODE_ENV === "test" ? `standardcol-${colIndex}` : nanoid()
-      const cell = row[colKey]
+      const cell = row[colKey]?.content
 
       const cellClass = [headerClassName(headers[colKey]), cellClassName].join(" ")
 
@@ -121,6 +140,7 @@ export const StandardTable = (props: StandardTableProps) => {
               : headers[colKey]
           }
           className={cellClass !== " " ? cellClass : undefined}
+          mobileReplacement={row[colKey]?.mobileReplacement}
         >
           {props.translateData && typeof cell === "string" && cell !== ""
             ? getTranslationWithArguments(cell)
@@ -176,11 +196,7 @@ export const StandardTable = (props: StandardTableProps) => {
     tableClasses.push(props.tableClassName)
   }
 
-  const reorder = (
-    list: Record<string, React.ReactNode>[] | undefined,
-    startIndex: number,
-    endIndex: number
-  ) => {
+  const reorder = (list: StandardTableData | undefined, startIndex: number, endIndex: number) => {
     if (!list) return
 
     const result = Array.from(list)

package/tailwind.config.js

@@ -12,106 +12,101 @@ module.exports = {
       print: { raw: "print" },
     },
     fontSize: {
-      "2xs": ".6875rem",
-      xs: ".75rem",
-      sm: ".8125rem",
-      tiny: ".875rem",
-      base: "1rem",
-      lg: "1.25rem",
-      xl: "1.375rem",
-      "2xl": "1.5rem",
-      "3xl": "1.625rem",
-      "4xl": "2rem",
-      "5xl": "2.5rem",
-      "6xl": "3rem",
-      "6.5xl": "4rem",
-      "7xl": "4.5rem",
+      "2xs": "var(--bloom-font-size-2xs)",
+      xs: "var(--bloom-font-size-xs)",
+      sm: "var(--bloom-font-size-sm)",
+      tiny: "var(--bloom-font-size-tiny)",
+      base: "var(--bloom-font-size-base)",
+      lg: "var(--bloom-font-size-lg)",
+      xl: "var(--bloom-font-size-xl)",
+      "2xl": "var(--bloom-font-size-2xl)",
+      "3xl": "var(--bloom-font-size-3xl)",
+      "4xl": "var(--bloom-font-size-4xl)",
+      "5xl": "var(--bloom-font-size-5xl)",
+      "6xl": "var(--bloom-font-size-6xl)",
+      "6.5xl": "var(--bloom-font-size-6_5xl)",
+      "7xl": "var(--bloom-font-size-7xl)",
     },
     fontFamily: {
-      sans: ["Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif"],
-      serif: ["Droid Serif", "Georgia", "Times", "serif"],
-      "alt-sans": ["Lato", "Helvetica", "Arial", "Verdana", "sans-serif"],
+      sans: "var(--bloom-font-sans)",
+      serif: "var(--bloom-font-serif)",
+      "alt-sans": "var(--bloom-font-alt-sans)",
     },
     colors: {
-      primary: "#0077DA",
-      "primary-dark": "#0067be",
-      "primary-darker": "#205493",
-      "primary-light": "#DAEEFF",
-      "primary-lighter": "#F5F8F9",
-      secondary: "#0067be",
-      alert: "#E41D3D",
-      "alert-light": "#F9D2D8",
-      "alert-dark": "#B21D38",
-      success: "#2E8540",
-      "success-light": "#B4E5BE",
-      "success-dark": "#216E1F",
-      warn: "#FDB81E",
-      "warn-light": "#FEE8B6",
-      "warn-dark": "#E5A000",
-      "accent-cool": "#00BED5",
-      "accent-cool-light": "#C8F1FF",
-      "accent-cool-dark": "#009DB0",
-      "accent-warm": "#ff6627",
-      "accent-warm-dark": "#D54309",
-      "accent-warm-light": "#FFD2C0",
-      "accent-warm-lighter": "#FFF7F3",
-      royal: "#B85ED5",
-      "royal-light": "#EED7F5",
-      "royal-dark": "#A131C6",
-      lush: "#99CD00",
-      "lush-light": "#F2FFCD",
-      "lush-dark": "#7CA700",
-      white: "#FFFFFF",
-      black: "#000000",
+      primary: "var(--bloom-color-primary)",
+      "primary-dark": "var(--bloom-color-primary-dark)",
+      "primary-darker": "var(--bloom-color-primary-darker)",
+      "primary-light": "var(--bloom-color-primary-light)",
+      "primary-lighter": "var(--bloom-color-primary-lighter)",
+      secondary: "var(--bloom-color-secondary)",
+      alert: "var(--bloom-color-alert)",
+      "alert-light": "var(--bloom-color-alert-light)",
+      "alert-dark": "var(--bloom-color-alert-dark)",
+      success: "var(--bloom-color-success)",
+      "success-light": "var(--bloom-color-success-light)",
+      "success-dark": "var(--bloom-color-success-dark)",
+      warn: "var(--bloom-color-warn)",
+      "warn-light": "var(--bloom-color-warn-light)",
+      "warn-dark": "var(--bloom-color-warn-dark)",
+      "accent-cool": "var(--bloom-color-accent-cool)",
+      "accent-cool-light": "var(--bloom-color-accent-cool-light)",
+      "accent-cool-dark": "var(--bloom-color-accent-cool-dark)",
+      "accent-warm": "var(--bloom-color-accent-warm)",
+      "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
+      "accent-warm-light": "var(--bloom-color-accent-warm-light)",
+      "accent-warm-lighter": "var(--bloom-color-accent-warm-lighter)",
+      lush: "var(--bloom-color-lush)",
+      white: "var(--bloom-color-white)",
+      black: "var(--bloom-color-black)",
       blue: {
-        800: "#205493",
-        700: "#0067be",
-        600: "#0077DA",
-        300: "#DAEEFF",
-        200: "#F5F8F9",
+        800: "var(--bloom-color-blue-800)",
+        700: "var(--bloom-color-blue-700)",
+        600: "var(--bloom-color-blue-600)",
+        300: "var(--bloom-color-blue-300)",
+        200: "var(--bloom-color-blue-200)",
       },
       red: {
-        700: "#E41D3D",
-        300: "#F9D2D8",
+        700: "var(--bloom-color-red-700)",
+        300: "var(--bloom-color-red-300)",
       },
       yellow: {
-        700: "#FDB81E",
-        300: "#FEE8B6",
+        700: "var(--bloom-color-yellow-700)",
+        300: "var(--bloom-color-yellow-300)",
       },
       green: {
-        700: "#2E8540",
-        300: "#B4E5BE",
+        700: "var(--bloom-color-green-700)",
+        300: "var(--bloom-color-green-300)",
       },
       teal: {
-        700: "#2E8540",
-        300: "#B4E5BE",
+        700: "var(--bloom-color-green-700)",
+        300: "var(--bloom-color-green-300)",
       },
       gray: {
-        950: "#242C2E",
-        900: "#222222",
-        850: "#333333",
-        800: "#30383A",
-        750: "#555555",
-        700: "#767676",
-        600: "#999999",
-        550: "#AAAAAA",
-        500: "#CCCCCC",
-        450: "#DEDEE0",
-        400: "#EFEFEF",
-        300: "#F6F6F6",
-        200: "#F7F7F7",
-        100: "#F9F9F9",
+        950: "var(--bloom-color-gray-950)",
+        900: "var(--bloom-color-gray-900)",
+        850: "var(--bloom-color-gray-850)",
+        800: "var(--bloom-color-gray-800)",
+        750: "var(--bloom-color-gray-750)",
+        700: "var(--bloom-color-gray-700)",
+        600: "var(--bloom-color-gray-600)",
+        550: "var(--bloom-color-gray-550)",
+        500: "var(--bloom-color-gray-500)",
+        450: "var(--bloom-color-gray-450)",
+        400: "var(--bloom-color-gray-400)",
+        300: "var(--bloom-color-gray-300)",
+        200: "var(--bloom-color-gray-200)",
+        100: "var(--bloom-color-gray-100)",
       },
     },
     letterSpacing: {
-      tightest: "-.075em",
-      tighter: "-.05em",
-      tight: "-.025em",
+      tightest: "var(--bloom-letter-spacing-tightest)",
+      tighter: "var(--bloom-letter-spacing-tighter)",
+      tight: "var(--bloom-letter-spacing-tight)",
       normal: "0",
-      wide: ".025em",
-      wider: ".05em",
-      widest: ".12em",
-      ultrawide: ".25em",
+      wide: "var(--bloom-letter-spacing-wide)",
+      wider: "var(--bloom-letter-spacing-wider)",
+      widest: "var(--bloom-letter-spacing-widest)",
+      ultrawide: "var(--bloom-letter-spacing-ultrawide)",
     },
     extend: {
       borderColor: (theme) => ({

package/tailwind.tosass.js

@@ -1,6 +1,7 @@
 /* eslint-env node */
 
 const tailwindToSassVars = (bloomTheme) => {
+  // TODO: we should remove this in favor of just using the new CSS variables
   const bloomColorVars = Object.keys(bloomTheme.theme.colors).map((colorKey) => {
     if (typeof bloomTheme.theme.colors[colorKey] == "object") {
       // create a map variable that can be used by the map-get SCSS function
@@ -17,7 +18,7 @@ const tailwindToSassVars = (bloomTheme) => {
     }
   })
   const bloomScreenVars = Object.keys(bloomTheme.theme.screens).map((screenKey) => {
-    return `$tailwind-screens-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
+    return `$screen-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
   })
 
   // Uncomment this if you want to debug: