@bloom-housing/ui-components 4.4.1-alpha.9 → 5.0.0

package/index.ts

@@ -16,9 +16,9 @@ export * from "./src/blocks/ImageCard"
 export * from "./src/blocks/InfoCard"
 export * from "./src/blocks/StatusBar"
 export * from "./src/blocks/ViewItem"
+export * from "./src/blocks/StandardCard"
 
 /* Contexts */
-export * from "./src/authentication"
 export * from "./src/config"
 
 /* Footers */
@@ -64,7 +64,6 @@ export * from "./src/helpers/numberOrdinal"
 export * from "./src/helpers/OneLineAddress"
 export * from "./src/helpers/preferences"
 export * from "./src/helpers/resolveObject"
-export * from "./src/helpers/tableSummaries"
 export * from "./src/helpers/translator"
 export * from "./src/helpers/useIntersect"
 export * from "./src/helpers/useMutate"
@@ -85,11 +84,14 @@ export * from "./src/navigation/TabNav"
 export * from "./src/navigation/Tabs"
 
 /* Notifications */
+export * from "./src/notifications/AlertBox"
+export * from "./src/notifications/AlertNotice"
 export * from "./src/notifications/ApplicationStatus"
 export * from "./src/notifications/ErrorMessage"
+export * from "./src/notifications/SiteAlert"
 export * from "./src/notifications/StatusAside"
 export * from "./src/notifications/StatusMessage"
-export * from "./src/notifications"
+export * from "./src/notifications/alertTypes"
 
 /* Overlays */
 export * from "./src/overlays/Overlay"
@@ -106,7 +108,6 @@ export * from "./src/page_components/listing/ListingDetailHeader"
 export * from "./src/page_components/listing/ListingDetails"
 export * from "./src/page_components/listing/ListingMap"
 export * from "./src/page_components/listing/ListingsGroup"
-export * from "./src/page_components/listing/UnitTables"
 export * from "./src/page_components/listing/listing_sidebar/GetApplication"
 export * from "./src/page_components/listing/listing_sidebar/Contact"
 export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
@@ -116,7 +117,7 @@ export * from "./src/page_components/listing/listing_sidebar/ReferralApplication
 export * from "./src/page_components/listing/listing_sidebar/ContactAddress"
 export * from "./src/page_components/listing/listing_sidebar/SubmitApplication"
 export * from "./src/page_components/listing/listing_sidebar/QuantityRowSection"
-export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
+export * from "./src/page_components/listing/listing_sidebar/ExpandableSection"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.4.1-alpha.9",
+  "version": "5.0.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -69,7 +69,10 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.4.1-alpha.7",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -89,6 +92,7 @@
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^6.11.4",
     "nanoid": "^3.1.12",
+    "node-polyglot": "^2.4.0",
     "react": "^17.0.2",
     "react-accessible-accordion": "^3.3.5",
     "react-beautiful-dnd": "^13.1.0",
@@ -101,7 +105,8 @@
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",
     "tailwindcss": "2.2.10",
+    "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "d2f7e17b4ff41e2020e1fe535b2d0ec3e72fb7f1"
+  "gitHead": "6af474347ea32b98bf8a216704cc12efcd838ff6"
 }

package/src/actions/Button.tsx

@@ -1,14 +1,14 @@
 import * as React from "react"
 import "./Button.scss"
 import { AppearanceProps, classNamesForAppearanceTypes } from "../global/AppearanceTypes"
-import { Icon, IconSize, IconTypes } from "../icons/Icon"
+import { Icon, IconSize, UniversalIconType } from "../icons/Icon"
 
 export interface ButtonProps extends AppearanceProps {
   id?: string
   type?: "button" | "submit" | "reset"
   children: React.ReactNode
   onClick?: (e: React.MouseEvent) => void
-  icon?: IconTypes
+  icon?: UniversalIconType
   iconPlacement?: "left" | "right"
   iconSize?: IconSize
   // TODO: inlineIcon is deprecated

package/src/actions/ExpandableContent.tsx

@@ -1,15 +1,20 @@
 import React, { useState } from "react"
-import { t } from "@bloom-housing/ui-components"
 
 type ExpandableContentProps = {
   children: React.ReactChild
+  strings: {
+    readMore?: string
+    readLess?: string
+  }
+  className?: string
 }
 
-const ExpandableContent = ({ children }: ExpandableContentProps) => {
+const ExpandableContent = ({ children, strings, className }: ExpandableContentProps) => {
   const [isExpanded, setExpanded] = useState(false)
+  const rootClassNames = className ? `${className}` : undefined
 
   return (
-    <div>
+    <div className={rootClassNames}>
       <button
         type="button"
         className="button is-unstyled m-0 no-underline has-toggle"
@@ -18,9 +23,8 @@ const ExpandableContent = ({ children }: ExpandableContentProps) => {
           setExpanded(!isExpanded)
         }}
       >
-        {t(isExpanded ? "t.readLess" : "t.readMore")}
+        {isExpanded ? strings.readLess : strings.readMore}
       </button>
-
       {isExpanded && <div className="mt-6">{children}</div>}
     </div>
   )

package/src/blocks/ImageCard.tsx

@@ -6,19 +6,19 @@ import { Tag } from "../text/Tag"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceStyleType } from "../global/AppearanceTypes"
 import { t } from "../helpers/translator"
-import { Icon, IconFillColors, IconTypes } from "../icons/Icon"
+import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
 
 export interface StatusBarType {
   status?: ApplicationStatusType
   content: string
   subContent?: string
   hideIcon?: boolean
-  iconType?: IconTypes
+  iconType?: UniversalIconType
 }
 
 export interface ImageTag {
   text?: string
-  iconType?: IconTypes
+  iconType?: UniversalIconType
   iconColor?: string
 }
 

package/src/blocks/StandardCard.docs.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { StandardCard } from "./StandardCard"
+
+# Standard Card
+
+The standard card component displays a title with a child element (e.g table) and optional footer.
+
+<Canvas>
+  <Story id="blocks-standard-card" />
+</Canvas>
+
+
+## Component Properties
+
+<ArgsTable of={StandardCard} />
+
+## Theming Variables
+
+<Canvas>
+  <Story id="blocks-standard-card--style-overrides" />
+</Canvas>
+
+You can apply CSS variables to the `.standard-card` selector to customize the appearance of the component.
+
+| Name                         | Type  | Description                                               | Default                         |
+| ---------------------------- | ----- | --------------------------------------------------------- | ------------------------------- |
+| `--font-family`              | Font  | Title font family                                         | `--bloom-font-alt-sans`         |
+| `--border-radius`            | Size  | Card border radius                                        | `--bloom-rounded-lg`            |
+| `--border-width`             | Size  | Card border width                                         | `--bloom-border-1`              |
+| `--border-color`             | Size  | Card border color                                         | `--bloom-color-gray-500`        |
+| `--title-color`              | Color | Card title color                                          | `--bloom-color-gray-900`        |
+| `--background-color`         | Size  | Card background color                                     | `--bloom-color-white`           |
+| `--blank-color`              | Color | Empty state text color                                    | `--bloom-color-gray-750`        |
+| `--blank-background`         | Color | Empty state background color                              | `--bloom-color-gray-200`        |

package/src/blocks/StandardCard.scss

@@ -0,0 +1,33 @@
+.standard-card {
+  --font-family: var(--bloom-font-alt-sans);
+  --border-radius: var(--bloom-rounded-lg);
+  --border-width: var(--bloom-border-1);
+  --border-color: var(--bloom-color-gray-500);
+  --title-color: var(--bloom-color-gray-900);
+  --background-color: var(--bloom-color-white);
+  --blank-color: var(--bloom-color-gray-750);
+  --blank-background: var(--bloom-color-gray-200);
+}
+
+.standard-card__inner {
+  @apply overflow-hidden;
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  background-color: var(--background-color);
+}
+
+.standard-card__title {
+  color: var(--title-color);
+  font-family: var(--font-family);
+  padding: var(--bloom-s6) var(--bloom-s6) var(--bloom-s2) var(--bloom-s7);
+}
+
+.standard-card__blank {
+  color: var(--blank-color);
+  background-color: var(--blank-background);
+  padding: var(--bloom-s3) var(--bloom-s7);
+}
+
+.standard-card__footer {
+  margin-top: var(--bloom-s3);
+}

package/src/blocks/StandardCard.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import { Heading } from "../headers/Heading"
+import "./StandardCard.scss"
+
+export interface StandardCardProps {
+  className?: string
+  title?: string
+  children?: React.ReactNode
+  footer?: React.ReactNode
+  emptyStateMessage: string
+}
+
+const StandardCard = ({
+  className = "",
+  title,
+  children,
+  footer,
+  emptyStateMessage,
+}: StandardCardProps) => {
+  return (
+    <div className={`standard-card ${className}`}>
+      <div className="standard-card__inner">
+        {title && (
+          <Heading className="standard-card__title" priority={3}>
+            {title}
+          </Heading>
+        )}
+
+        {children ? children : <div className="standard-card__blank">{emptyStateMessage}</div>}
+      </div>
+
+      {footer && <div className="standard-card__footer">{footer}</div>}
+    </div>
+  )
+}
+
+export { StandardCard as default, StandardCard }

package/src/config/index.ts

@@ -1,2 +1 @@
-export { ConfigProvider, ConfigContext } from "./ConfigContext"
 export * from "./NavigationContext"

package/src/forms/FieldGroup.tsx

@@ -103,7 +103,7 @@ const FieldGroup = ({
 
         {item.description && (
           <div className="ml-8 -mt-1 mb-5">
-            <ExpandableContent>
+            <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
               <p className="field-note mb-2 -mt-2">{item.description}</p>
             </ExpandableContent>
           </div>

package/src/forms/HouseholdSizeField.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import { t } from "../helpers/translator"
 import { ErrorMessage } from "../notifications/ErrorMessage"
-import { AlertBox, AlertNotice } from "../notifications"
+import { AlertBox } from "../notifications/AlertBox"
+import { AlertNotice } from "../notifications/AlertNotice"
 import { UseFormMethods, FieldError } from "react-hook-form"
 
 export interface HouseholdSizeFieldProps {

package/src/global/tables.scss

@@ -86,7 +86,7 @@ table {
     }
 
     thead tr th {
-      @apply border-0;
+      @apply border-gray-450;
       @apply py-2;
       background: transparent;
     }
@@ -102,6 +102,9 @@ table {
       @apply border-b;
       background: transparent;
     }
+    tr:last-child td {
+      @apply border-b-0;
+    }
   }
   &.is-flush-left {
     thead tr th:first-of-type {
@@ -367,6 +370,9 @@ table.td-plain {
   .table__thumbnail img {
     @apply -my-1;
   }
+  .table__is-dragging {
+    @apply border-t;
+  }
 }
 
 .table__draggable-cell {

package/src/helpers/formOptions.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import { t } from "./translator"
-import { Language } from "@bloom-housing/backend-core/types"
 import { SelectOption } from "../forms/Select"
 
 export interface FormOptionsProps {
@@ -8,14 +7,6 @@ export interface FormOptionsProps {
   keyPrefix?: string
 }
 
-export const applicationLanguageKeys = [Language.en, Language.es, Language.zh, Language.vi]
-
-export enum RoleOption {
-  Administrator = "administrator",
-  Partner = "partner",
-}
-export const roleKeys = Object.values(RoleOption)
-
 export const numberOptions = (end: number, start = 1): SelectOption[] => {
   const nums = []
   for (let i = start; i <= end; i++) {