@bloom-housing/ui-components 4.2.2-alpha.1 → 4.2.2-alpha.12

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)