@bloom-housing/ui-components 6.0.0 → 6.0.1-alpha.0

package/src/page_components/listing/listing_sidebar/ReferralApplication.tsx

@@ -5,7 +5,10 @@ import { Icon, IconFillColors } from "../../../icons/Icon"
 interface ReferralApplicationProps {
   description: string
   phoneNumber: string
-  title: string
+  strings: {
+    call?: string
+    title: string
+  }
 }
 
 const ReferralApplication = (props: ReferralApplicationProps) => {
@@ -13,11 +16,11 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.title}</h2>
+      <h2 className="text-caps-underline">{props.strings.title}</h2>
       <p>
         <a href={linkedPhoneNumber}>
-          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
-          {props.phoneNumber}
+          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}
+          {props.strings.call ?? t("t.call")} {props.phoneNumber}
         </a>
       </p>
       <p className="text-tiny mt-4 text-gray-800">{props.description}</p>

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

@@ -5,13 +5,18 @@ type DownloadLotteryResultsProps = {
   resultsDate?: string
   buttonText?: string
   pdfURL?: string
+  strings?: {
+    sectionHeader?: string
+  }
 }
 
 const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
   if (!props.pdfURL) return null
   return (
     <section className="aside-block text-center">
-      <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+      <h2 className="text-caps pb-4">
+        {props.strings?.sectionHeader ?? t("listings.lotteryResults.header")}
+      </h2>
       {props.resultsDate && (
         <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
       )}

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

@@ -66,7 +66,7 @@ const FormSignIn = ({
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" />
-        <h2 className="form-card__title">{t(`nav.signIn`)}</h2>
+        <h1 className="form-card__title">{t(`nav.signIn`)}</h1>
       </div>
       <FormSignInErrorBox
         errors={errors}

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

@@ -27,7 +27,7 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
         <ErrorMessage
           id={`form-sign-in-${errorMessageId}-error`}
           error={!!networkStatus.content}
-          className="block mt-0 leading-normal text-red-700"
+          className="block mt-0 leading-normal text-alert"
         >
           <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content.title}

package/src/sections/InfoCardGrid.scss

@@ -1,5 +1,5 @@
 .info-cards__header {
-  @apply mb-3;
+  @apply my-3;
 
   @screen md {
     margin-right: 1rem;

package/src/sections/InfoCardGrid.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../headers/Heading"
 import "./InfoCardGrid.scss"
 
 export interface InfoCardGridProps {
@@ -10,7 +11,9 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <h2 className="info-cards__title">{props.title}</h2>
+      <Heading style={"sidebarHeader"} priority={2} className={"text-tiny"}>
+        {props.title}
+      </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}
     </header>
     <div className="info-cards__grid">{props.children}</div>

package/src/sections/ListSection.tsx

@@ -11,7 +11,7 @@ const ListSection = (props: ListSectionProps) => (
   <li className="list-section custom-counter__item">
     <header className="list-section__header custom-counter__header">
       <hgroup>
-        <h4 className="custom-counter__title">{props.title}</h4>
+        <h3 className="custom-counter__title">{props.title}</h3>
         <span className="custom-counter__subtitle">{props.subtitle}</span>
       </hgroup>
     </header>

package/src/tables/AgTable.tsx

@@ -23,6 +23,10 @@ export interface AgTableProps {
   sort?: AgTableSort
   headerContent?: React.ReactNode
   className?: string
+  strings?: {
+    filter?: string
+    searchError?: string
+  }
 }
 
 export interface AgTablePagination {
@@ -89,12 +93,12 @@ const AgTable = ({
   headerContent,
   data,
   config: { gridComponents, columns, totalItemsLabel },
+  strings,
 }: AgTableProps) => {
   // local storage key with column state
   const columnStateLsKey = `column-state_${id}`
   const defaultColDef = {
     resizable: true,
-    maxWidth: 300,
   }
 
   const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null)
@@ -190,15 +194,17 @@ const AgTable = ({
             <Field
               dataTestId="ag-search-input"
               name="filter-input"
-              label={t("t.filter")}
+              label={strings?.filter ?? t("t.filter")}
               readerOnly={true}
               register={register}
-              placeholder={t("t.filter")}
+              placeholder={strings?.filter ?? t("t.filter")}
             />
           </div>
           <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
             {!validSearch && (
-              <AlertBox type="notice">{t("applications.table.searchError")}</AlertBox>
+              <AlertBox type="notice">
+                {strings?.searchError ?? t("applications.table.searchError")}
+              </AlertBox>
             )}
           </div>
         </div>

package/src/tables/StandardTable.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react"
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd"
 import { nanoid } from "nanoid"
+import { faGripLines } from "@fortawesome/free-solid-svg-icons"
 import { getTranslationWithArguments } from "../helpers/getTranslationWithArguments"
 import { Icon, IconFillColors } from "../icons/Icon"
 import { t } from "../helpers/translator"
-import { faGripLines } from "@fortawesome/free-solid-svg-icons"
 
 export interface TableHeadersOptions {
   name: string
@@ -51,6 +51,8 @@ export type StandardTableCell = {
   content: React.ReactNode
   /** Text content that will replace this cell's header on mobile views */
   mobileReplacement?: string
+  /** Classname to apply to this row */
+  rowClass?: string
 }
 
 export type StandardTableData = Record<string, StandardTableCell>[]
@@ -74,6 +76,10 @@ export interface StandardTableProps {
   translateData?: boolean
   /** An id applied to the table */
   id?: string
+  strings?: {
+    orderString?: string
+    sortString?: string
+  }
 }
 
 const headerName = (header: string | TableHeadersOptions) => {
@@ -110,12 +116,16 @@ export const StandardTable = (props: StandardTableProps) => {
   }, [props.data])
 
   if (props.draggable) {
-    headerLabels.splice(0, 0, <th key={"header-draggable"}>{t("t.order")}</th>)
     headerLabels.splice(
       0,
       0,
-      <th key={"header-draggable"} className={"table__draggable-cell pl-5"}>
-        {t("t.sort")}
+      <th key={"header-draggable-order"}>{props.strings?.orderString ?? t("t.order")}</th>
+    )
+    headerLabels.splice(
+      0,
+      0,
+      <th key={"header-draggable-sort"} className={"table__draggable-cell pl-5"}>
+        {props.strings?.sortString ?? t("t.sort")}
       </th>
     )
   }
@@ -127,9 +137,11 @@ export const StandardTable = (props: StandardTableProps) => {
       ? `standardrow-${dataIndex}`
       : nanoid()
 
+    let rowClass: string | undefined = ""
     const cols = Object.keys(headers)?.map((colKey, colIndex) => {
       const uniqKey = process.env.NODE_ENV === "test" ? `standardcol-${colIndex}` : nanoid()
       const cell = row[colKey]?.content
+      rowClass = row[colKey]?.rowClass ? row[colKey].rowClass : ""
 
       const cellClass = [headerClassName(headers[colKey]), cellClassName].join(" ")
 
@@ -156,7 +168,7 @@ export const StandardTable = (props: StandardTableProps) => {
         0,
         <Cell
           key={`${dataIndex}-order-draggable`}
-          headerLabel={t("t.sort")}
+          headerLabel={props.strings?.sortString ?? t("t.sort")}
           className={`pl-5 ${cellClassName ?? undefined}`}
         >
           {dataIndex + 1}
@@ -167,7 +179,7 @@ export const StandardTable = (props: StandardTableProps) => {
         0,
         <Cell
           key={`${dataIndex}-sort-draggable`}
-          headerLabel={t("t.sort")}
+          headerLabel={props.strings?.sortString ?? t("t.sort")}
           className={`table__draggable-cell pl-7`}
         >
           <Icon symbol={faGripLines} size={"medium"} fill={IconFillColors.primary} />
@@ -193,7 +205,7 @@ export const StandardTable = (props: StandardTableProps) => {
             )}
           </Draggable>
         ) : (
-          <tr id={rowKey} key={rowKey}>
+          <tr id={rowKey} key={rowKey} className={rowClass ? rowClass : ""}>
             {cols}
           </tr>
         )}

package/src/text/Tag.scss

@@ -11,6 +11,8 @@
   --pill-font-weight: 600;
   --pill-text-transform: uppercase;
   --pill-letter-spacing: var(--bloom-letter-spacing-ultrawide);
+  --pill-capitalized-text-transform: capitalized;
+  --pill-capitalized-letter-spacing: var(--bloom-letter-spacing-wide);
 
   --small-pill-padding: var(--bloom-s1) var(--bloom-s3);
   --small-pill-font-size: var(--bloom-font-size-2xs);
@@ -129,4 +131,9 @@
     padding-block: var(--bloom-s2);
     padding-inline: var(--bloom-s4);
   }
+
+  &.is-capitalized {
+    text-transform: var(--pill-capitalized-text-transform);
+    letter-spacing: var(--pill-capitalized-letter-spacing);
+  }
 }

package/src/text/Tag.tsx

@@ -5,6 +5,7 @@ import "./Tag.scss"
 export interface TagProps extends AppearanceProps {
   className?: string
   pillStyle?: boolean
+  capitalized?: boolean
   children: React.ReactNode
   fillContainer?: boolean
 }
@@ -14,6 +15,7 @@ export const Tag = (props: TagProps) => {
 
   if (props.pillStyle) tagClasses.push("is-pill")
   if (props.fillContainer) tagClasses.push("fill-container")
+  if (props.capitalized) tagClasses.push("is-capitalized")
   if (props.className) tagClasses.push(props.className)
 
   return <span className={tagClasses.join(" ")}>{props.children}</span>