@bloom-housing/ui-components 4.2.3 → 4.3.0

package/index.ts

@@ -52,23 +52,24 @@ export * from "./src/headers/SiteHeader"
 export * from "./src/headers/Heading"
 
 /* Helpers */
-export * from "./src/helpers/address"
 export * from "./src/helpers/capitalize"
 export * from "./src/helpers/dateToString"
+export * from "./src/helpers/debounce"
 export * from "./src/helpers/formOptions"
+export * from "./src/helpers/formatYesNoLabel"
+export * from "./src/helpers/getTranslationWithArguments"
 export * from "./src/helpers/links"
 export * from "./src/helpers/mergeDeep"
+export * from "./src/helpers/MultiLineAddress"
 export * from "./src/helpers/numberOrdinal"
-export * from "./src/helpers/translator"
-export * from "./src/helpers/debounce"
-export * from "./src/helpers/validators"
-export * from "./src/helpers/formatYesNoLabel"
-export * from "./src/helpers/getTranslationWithArguments"
+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"
-export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/validators"
 
 /* Icons */
 export * from "./src/icons/HeaderBadge"
@@ -98,6 +99,7 @@ export * from "./src/overlays/Drawer"
 export * from "./src/overlays/LoadingOverlay"
 
 /* Page Components */
+export * from "./src/page_components/ApplicationTimeline"
 export * from "./src/page_components/listing/AdditionalFees"
 export * from "./src/page_components/listing/ContentAccordion"
 export * from "./src/page_components/listing/ListingCard"
@@ -107,18 +109,19 @@ 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/LeasingAgent"
+export * from "./src/page_components/listing/listing_sidebar/Contact"
 export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
 export * from "./src/page_components/listing/listing_sidebar/NumberedHeader"
 export * from "./src/page_components/listing/listing_sidebar/OrDivider"
 export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
-export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
+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/Waitlist"
+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/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"
+export * from "./src/page_components/sign-in/ResendConfirmationModal"
 export * from "./src/page_components/sign-in/FormSignIn"
 export * from "./src/page_components/sign-in/FormSignInMFAType"
 export * from "./src/page_components/sign-in/FormSignInMFACode"
@@ -143,6 +146,7 @@ export * from "./src/tables/StandardTable"
 export * from "./src/tables/GroupedTable"
 export * from "./src/tables/MinimalTable"
 export * from "./src/tables/StackedTable"
+export * from "./src/tables/CategoryTable"
 
 /* Text */
 export * from "./src/text/Description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.3",
+  "version": "4.3.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",
@@ -24,6 +24,7 @@
     "@babel/preset-env": "^7.15.4",
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
+    "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@storybook/addon-a11y": "^6.3.8",
     "@storybook/addon-actions": "^6.3.8",
     "@storybook/addon-docs": "^6.3.8",
@@ -65,15 +66,16 @@
     "style-loader": "^1.1.3",
     "ts-jest": "^26.4.1",
     "ts-loader": "^8.0.4",
-    "typescript": "^3.9.7",
+    "typescript": "^4.5.5",
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.2.3",
+    "@bloom-housing/backend-core": "^4.3.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
     "@types/markdown-to-jsx": "^6.11.2",
+    "@types/mdx": "^2.0.1",
     "@types/node": "^12.12.67",
     "@types/node-polyglot": "^2.4.1",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -100,5 +102,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "3359b2ef4d1f6530ad9bb026bffe63eaf898c99a"
+  "gitHead": "1a7e221449e2af62cfa67b594779bcf7b900b5fc"
 }

package/src/actions/Button.docs.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Button } from "./Button"
+
+# Button
+
+The button component offers flexible usage with a variety of different appearance options. Size, color, and shape can be controlled via standardized props.
+
+<Canvas>
+  <Button>This is a Button</Button>
+</Canvas>
+
+## Variants
+
+There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
+
+<Canvas>
+  <Story id="actions-button--small-and-primary" />
+</Canvas>
+
+Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
+
+## Component Properties
+
+<ArgsTable of={Button} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button` selector to customize the appearance of the component.
+
+### Color Variables
+
+| Name                                          | Color                                            | Description                          |
+| --------------------------------------------- | ------------------------------------------------ | ------------------------------------ |
+| `--primary-appearance-background-color`       | <Swatch colorVar="--bloom-color-primary" />      | Primary background color             |
+| `--primary-appearance-border-color`           | <Swatch colorVar="--bloom-color-primary" />      | Primary border color                 |
+| `--primary-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Primary label color                  |
+| `--primary-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary background color |
+| `--primary-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary border color     |
+| `--primary-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state primary label color      |
+| `--success-appearance-background-color`       | <Swatch colorVar="--bloom-color-success" />      | Success background color             |
+| `--success-appearance-border-color`           | <Swatch colorVar="--bloom-color-success" />      | Success border color                 |
+| `--success-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Success label color                  |
+| `--success-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-success-dark" /> | Hover state success background color |
+| `--success-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-success" />      | Hover state success border color     |
+| `--success-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state success label color      |
+| `--alert-appearance-background-color`         | <Swatch colorVar="--bloom-color-alert" />        | Alert background color               |
+| `--alert-appearance-border-color`             | <Swatch colorVar="--bloom-color-alert" />        | Alert border color                   |
+| `--alert-appearance-label-color`              | <Swatch colorVar="--bloom-color-white" />        | Alert label color                    |
+| `--alert-appearance-hover-background-color`   | <Swatch colorVar="--bloom-color-alert-dark" />   | Hover state alert background color   |
+| `--alert-appearance-hover-border-color`       | <Swatch colorVar="--bloom-color-alert" />        | Hover state alert border color       |
+| `--alert-appearance-hover-label-color`        | <Swatch colorVar="--bloom-color-white" />        | Hover state alert label color        |
+| `--warn-appearance-background-color`          | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
+| `--warn-appearance-border-color`              | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
+| `--warn-appearance-label-color`               | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
+| `--warn-appearance-hover-background-color`    | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
+| `--warn-appearance-hover-border-color`        | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
+| `--warn-appearance-hover-label-color`         | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
+
+### Typographic & Spacing Variables
+
+| Name                     | Type        | Description                                         | Default                                             |
+| ------------------------ | ----------- | --------------------------------------------------- | --------------------------------------------------- |
+| `--label-font`           | Font        | Font family of the button label                     | `--bloom-font-alt-sans`                             |
+| `--label-transform`      | Case        | Text case of the button label                       | `uppercase`                                         |
+| `--label-letter-spacing` | Size        | The average gap between letters of the button label | `--bloom-letter-spacing-widest`                     |
+| `--label-weight`         | Font Weight | Typographic weight of the button label              | `bold`                                              |
+| `--normal-rounded`       | Size        | Border radius of a normal-size button               | `--bloom-rounded`                                   |
+| `--normal-padding`       | Size        | Padding of the normal-size button interior          | `--bloom-s4` (top/bottom) `--bloom-s6` (left/right) |
+| `--normal-font-size`     | Size        | Font size of the normal-size button                 | `--bloom-font-size-sm`                              |
+| `--small-rounded`        | Size        | Border radius of a small-size button                | `--bloom-rounded`                                   |
+| `--small-padding`        | Size        | Padding of the small-size button interior           | `--bloom-s3` (top/bottom) `--bloom-s6` (left/right) |
+| `--small-font-size`      | Size        | Font size of the small-size button                  | `--bloom-font-size-xs`                              |
+| `--big-rounded`          | Size        | Border radius of a large-size button                | `--bloom-rounded`                                   |
+| `--big-padding`          | Size        | Padding of the large-size button interior           | `--bloom-s6`                                        |
+| `--big-font-size`        | Size        | Font size of the large-size button                  | `--bloom-font-size-sm`                              |

package/src/actions/Button.scss

@@ -1,59 +1,58 @@
 @import "../global/mixins.scss";
 
 .button {
-  @apply relative;
-  @apply rounded;
-  @apply px-6;
-  @apply py-4;
-  @apply text-lg;
-  @apply text-center;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply inline-block;
-  @apply tracking-widest;
-  @apply text-sm;
-  @apply font-bold;
-  @apply leading-snug;
+  position: relative;
+  border-radius: var(--normal-rounded, var(--bloom-rounded));
+  padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
+  text-align: center;
+  text-transform: var(--label-transform, uppercase);
+  font-family: var(--label-font, var(--bloom-font-alt-sans));
+  display: inline-block;
+  letter-spacing: var(--label-letter-spacing, var(--bloom-letter-spacing-widest));
+  font-size: var(--normal-font-size, var(--bloom-font-size-sm));
+  font-weight: var(--label-weight, bold);
+  line-height: var(--bloom-line-height-snug);
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
+    box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
   }
 
   &:hover {
-    @apply border-primary-dark;
+    border-color: var(--bloom-color-primary-dark);
   }
 
   &:disabled {
     pointer-events: none;
-    @apply bg-white;
-    @apply border-gray-450;
-    @apply text-gray-450;
+    background-color: var(--bloom-color-white);
+    border-color: var(--bloom-color-gray-450);
+    color: var(--bloom-color-gray-450);
   }
 
   &.is-secondary {
-    @apply border-gray-700;
-    @apply text-gray-700;
+    border-color: var(--bloom-color-gray-700);
+    color: var(--bloom-color-gray-700);
 
     &:hover {
-      @apply bg-gray-700;
-      @apply text-white;
+      background-color: var(--bloom-color-gray-700);
+      color: var(--bloom-color-white);
     }
   }
 
   &.is-small {
-    @apply text-xs;
-    @apply px-6;
-    @apply py-3;
+    border-radius: var(--small-rounded, var(--bloom-rounded));
+    padding: var(--small-padding, var(--bloom-s3) var(--bloom-s6));
+    font-size: var(--small-font-size, var(--bloom-font-size-xs));
   }
 
   &.is-big {
-    @apply px-6;
-    @apply py-6;
+    border-radius: var(--big-rounded, var(--bloom-rounded));
+    padding: var(--big-padding, var(--bloom-s6));
+    font-size: var(--big-font-size, var(--bloom-font-size-sm));
   }
 
   &.is-normal-case {
-    @apply normal-case;
+    text-transform: none;
   }
 
   &.is-unstyled {
@@ -62,74 +61,72 @@
 
   &.is-unstyled,
   &.is-inline {
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply text-tiny;
+    text-transform: none;
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    font-weight: 400;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    font-size: var(--bloom-font-size-tiny);
 
     &:hover {
-      @apply text-primary;
+      color: var(--bloom-color-primary);
       background: transparent;
     }
   }
 
   &.is-inline {
-    @apply text-primary;
-    @apply font-semibold;
-    @apply text-tiny;
-    @apply m-0;
-    @apply no-underline;
+    color: var(--bloom-color-primary);
+    font-weight: 600;
+    font-size: var(--bloom-font-size-tiny);
+    margin: 0;
+    text-decoration: none;
 
     &.has-icon-left {
       .button__icon {
-        @apply mr-1;
+        margin-right: var(--bloom-s1);
       }
     }
     &.has-icon-right {
       .button__icon {
-        @apply ml-1;
+        margin-left: var(--bloom-s1);
       }
     }
   }
 
   &.has-icon-left {
     .button__icon {
-      @apply mr-3;
+      margin-right: var(--bloom-s3);
     }
   }
   &.has-icon-right {
     .button__icon {
-      @apply ml-3;
+      margin-left: var(--bloom-s3);
     }
   }
 
   &.is-text-caps {
-    @apply text-primary-dark;
-    @apply normal-case;
-    @apply border-0;
-    @apply p-0;
-    @apply font-sans;
-    @apply tracking-normal;
-    @apply font-normal;
-    @apply underline;
-    @apply m-4;
-    @apply uppercase;
-    @apply text-tiny;
-    @apply block;
+    color: var(--bloom-color-primary-dark);
+    border: none;
+    padding: 0;
+    font-family: var(--bloom-font-sans);
+    letter-spacing: normal;
+    text-decoration: underline;
+    margin: var(--bloom-s4);
+    text-transform: uppercase;
+    font-size: var(--bloom-font-size-tiny);
+    display: block;
 
     &:hover {
-      @apply text-primary-dark;
+      color: var(--bloom-color-primary-dark);
       background: transparent;
     }
   }
 
   &.is-fullwidth {
-    @apply w-full;
+    width: 100%;
   }
 
   &.is-loading {

package/src/authentication/timeout.tsx

@@ -98,6 +98,7 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
       ariaDescription={promptText}
       actions={modalActions}
       hideCloseIcon
+      role="alertdialog"
     >
       {promptText}
     </Modal>

package/src/blocks/DashBlock.tsx

@@ -1,5 +1,6 @@
-import React from "react"
+import React, { useContext } from "react"
 import "./DashBlocks.scss"
+import { NavigationContext } from "../config/NavigationContext"
 
 interface DashBlockProps {
   href?: string
@@ -10,6 +11,7 @@ interface DashBlockProps {
   dataTestId?: string
 }
 const DashBlock = (props: DashBlockProps) => {
+  const { LinkComponent } = useContext(NavigationContext)
   const { href, title, subtitle, icon, children } = props
   let content, wrapper
   if (children) {
@@ -24,9 +26,9 @@ const DashBlock = (props: DashBlockProps) => {
   )
   if (href) {
     wrapper = (
-      <a href={href} className="dash-item">
+      <LinkComponent href={href} className="dash-item">
         {header}
-      </a>
+      </LinkComponent>
     )
   } else {
     wrapper = (

package/src/blocks/DashBlocks.scss

@@ -1,5 +1,6 @@
 .dash-blocks {
   @apply w-full;
+  @apply mb-8;
 
   @screen md {
     @apply flex;
@@ -8,6 +9,7 @@
 }
 
 .dash-block {
+  align-self: stretch;
   @screen md {
     @apply px-2;
     flex: 50%;
@@ -24,13 +26,14 @@
   @apply bg-white;
   @apply p-4;
   @apply pt-8;
+  @apply pb-8;
   @apply text-tiny;
 
   @screen md {
     @apply rounded-lg;
     @apply border;
     @apply p-8;
-    @apply mb-8;
+    @apply h-full;
   }
 
   p {

package/src/blocks/FormCard.tsx

@@ -14,7 +14,7 @@ const FormCard = (props: FormCardProps) => {
       <article className={classNames}>
         <div className="form-card__header">
           <header className="form-card__header_group">
-            <h5 className="form-card__header_title">{props.header}</h5>
+            <h1 className="form-card__header_title">{props.header}</h1>
           </header>
 
           <div className="form-card__header_nav">{props.children}</div>

package/src/forms/FieldGroup.tsx

@@ -5,37 +5,38 @@ import { UseFormMethods, RegisterOptions } from "react-hook-form"
 import { Field } from "./Field"
 import { t } from "../helpers/translator"
 
-interface FieldSingle {
-  id: string
-  label: string
-  value?: string
+export interface FieldSingle {
+  additionalText?: boolean
   dataTestId?: string
   defaultChecked?: boolean
-  description?: React.ReactNode
   defaultText?: string
+  description?: React.ReactNode
   disabled?: boolean
-  note?: string
+  id: string
   inputProps?: Record<string, unknown>
+  label: string
+  uniqueName?: boolean
+  note?: string
   subFields?: FieldSingle[]
   type?: string
-  additionalText?: boolean
+  value?: string
 }
 
 interface FieldGroupProps {
+  dataTestId?: string
   error?: boolean
   errorMessage?: string
-  name: string
-  type?: string
-  groupLabel?: string
+  fieldClassName?: string
+  fieldGroupClassName?: string
+  fieldLabelClassName?: string
   fields?: FieldSingle[]
+  groupLabel?: string
   groupNote?: string
   groupSubNote?: string
+  name: string
   register: UseFormMethods["register"]
+  type?: string
   validation?: RegisterOptions
-  fieldGroupClassName?: string
-  fieldClassName?: string
-  fieldLabelClassName?: string
-  dataTestId?: string
 }
 
 const FieldGroup = ({
@@ -75,7 +76,7 @@ const FieldGroup = ({
           type={type}
           id={item.id}
           defaultValue={item.value || item.id}
-          name={subfieldsExist() ? `${name}-${item.value}` : name}
+          name={subfieldsExist() || item.uniqueName ? `${name}-${item.value}` : name}
           onClick={(e) => {
             // We cannot reliably target an individual checkbox in a field group since they have the same name, so we keep track on our own
             if (e.currentTarget.checked) {
@@ -152,7 +153,7 @@ const FieldGroup = ({
     )
   }
   return (
-    <>
+    <div>
       {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
       {groupNote && <p className="field-note mb-4">{groupNote}</p>}
 
@@ -176,7 +177,7 @@ const FieldGroup = ({
           {errorMessage}
         </ErrorMessage>
       )}
-    </>
+    </div>
   )
 }
 

package/src/global/app-css.scss

@@ -1,3 +1,10 @@
+/* Design Tokens: */
+@import "tokens/borders.scss";
+@import "tokens/colors.scss";
+@import "tokens/fonts.scss";
+@import "tokens/screens.scss";
+@import "tokens/sizes.scss";
+
 html {
   @apply antialiased;
 }

package/src/global/markdown.scss

@@ -30,4 +30,24 @@
     list-style: disc;
     @apply ml-6;
   }
+
+  &.markdown-informational {
+    font-size: 0.9em;
+    @apply text-gray-750;
+
+    h3 {
+      @apply font-sans;
+      @apply font-bold;
+      @apply text-base;
+      @apply text-black;
+    }
+
+    li {
+      @apply mb-4;
+    }
+
+    a {
+      @apply underline;
+    }
+  }
 }