@bloom-housing/ui-components 5.1.1-alpha.9 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.0...@bloom-housing/ui-components@6.0.0) (2022-08-25)
+
+
+* 2022-08-24 release (#2993) ([6f1deac](https://github.com/bloom-housing/bloom/commit/6f1deac5370fa8286b051b09431d153d22901b3a)), closes [#2993](https://github.com/bloom-housing/bloom/issues/2993) [#2821](https://github.com/bloom-housing/bloom/issues/2821) [#2764](https://github.com/bloom-housing/bloom/issues/2764) [#2767](https://github.com/bloom-housing/bloom/issues/2767) [#2787](https://github.com/bloom-housing/bloom/issues/2787) [#2769](https://github.com/bloom-housing/bloom/issues/2769) [#2781](https://github.com/bloom-housing/bloom/issues/2781) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2847](https://github.com/bloom-housing/bloom/issues/2847) [#2830](https://github.com/bloom-housing/bloom/issues/2830) [#2788](https://github.com/bloom-housing/bloom/issues/2788) [#2842](https://github.com/bloom-housing/bloom/issues/2842) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [Issue#2827](https://github.com/Issue/issues/2827) [#2822](https://github.com/bloom-housing/bloom/issues/2822) [#2846](https://github.com/bloom-housing/bloom/issues/2846) [#2851](https://github.com/bloom-housing/bloom/issues/2851) [#2594](https://github.com/bloom-housing/bloom/issues/2594) [#2812](https://github.com/bloom-housing/bloom/issues/2812) [#2799](https://github.com/bloom-housing/bloom/issues/2799) [#2828](https://github.com/bloom-housing/bloom/issues/2828) [#2843](https://github.com/bloom-housing/bloom/issues/2843) [#2827](https://github.com/bloom-housing/bloom/issues/2827) [#2875](https://github.com/bloom-housing/bloom/issues/2875) [#2859](https://github.com/bloom-housing/bloom/issues/2859) [#2848](https://github.com/bloom-housing/bloom/issues/2848) [#2785](https://github.com/bloom-housing/bloom/issues/2785)
+
+
+### BREAKING CHANGES
+
+* prop name change for header from "text" to "content"
+
+* chore(release): version
+
+ - @bloom-housing/shared-helpers@5.0.1-alpha.2
+ - @bloom-housing/partners@5.0.1-alpha.2
+ - @bloom-housing/public@5.0.1-alpha.2
+ - @bloom-housing/ui-components@5.0.1-alpha.1
+
+
+
+
+
+## [5.1.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.11...@bloom-housing/ui-components@5.1.1-alpha.12) (2022-08-24)
+
+
+### Features
+
+* show preference details on listing form ([#2989](https://github.com/bloom-housing/bloom/issues/2989)) ([b4b2b9e](https://github.com/bloom-housing/bloom/commit/b4b2b9ee75c4895ea5b0694dddbf0c8979c0e251))
+
+
+
+
+
+## [5.1.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.10...@bloom-housing/ui-components@5.1.1-alpha.11) (2022-08-23)
+
+
+* refactor!: preferences & programs data model merged (#2904) ([8e027ff](https://github.com/bloom-housing/bloom/commit/8e027ff905118f36c61bc0f974231d9bb8911131)), closes [#2904](https://github.com/bloom-housing/bloom/issues/2904)
+
+
+### BREAKING CHANGES
+
+* The preference and program entities have been merged into a single entity called MultiselectQuestion
+
+
+
+
+
+## [5.1.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.9...@bloom-housing/ui-components@5.1.1-alpha.10) (2022-08-23)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [5.1.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.8...@bloom-housing/ui-components@5.1.1-alpha.9) (2022-08-22)
 
 

package/index.ts

@@ -1,5 +1,6 @@
 /* Actions */
 export * from "./src/actions/Button"
+export * from "./src/actions/ButtonGroup"
 export * from "./src/actions/ExpandableText"
 export * from "./src/actions/LinkButton"
 export * from "./src/actions/LocalizedLink"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.9",
+  "version": "6.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",
@@ -85,6 +85,7 @@
     "@types/react-dom": "^16.9.5",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.4.0",
+    "@types/sanitize-html": "^2.6.2",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
     "aria-autocomplete": "^1.4.0",
@@ -106,9 +107,10 @@
     "react-tabs": "^3.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.1",
+    "sanitize-html": "^2.7.1",
     "tailwindcss": "2.2.10",
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "b9ed99bd1b58d8057bae8782616aa43f53f1294e"
+  "gitHead": "4144d01ef184f31f6fd2c943ee2487025170126c"
 }

package/src/actions/ButtonGroup.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { ButtonGroup } from "./ButtonGroup"
+
+# ButtonGroup
+
+The button group component lets you place multiple buttons along a horizontal or vertical (mobile primarily) axis and group/space buttons according to some simple flex rules.
+
+<Canvas>
+  <Story id="actions-button-group--two-columns" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={ButtonGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.button-group` selector to customize the appearance of the component.
+
+| Name                       | Type  | Description                                                                         | Default                                             |
+| -------------------------- | ----- | ----------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `--background-color`       | Color | Background behind the buttons                                                       | <Swatch colorVar="--bloom-color-primary-lighter" /> |
+| `--padding-block`          | Size  | The space around the buttons in the block (vertical) direction                      | `--bloom-s8`                                        |
+| `--padding-inline-desktop` | Size  | The space around the buttons in the inline (horizontal) direction on larger screens | `--bloom-s16`                                       |
+| `--padding-inline-mobile`  | Size  | The space around the buttons in the inline (horizontal) direction on small screens  | `--bloom-s4`                                        |
+| `--inner-button-gap`       | Size  | The gap between buttons whether in separate columns or within the same column       | `--bloom-s3`                                        |

package/src/actions/ButtonGroup.scss

@@ -0,0 +1,61 @@
+.button-group {
+  --background-color: var(--bloom-color-primary-lighter);
+  --padding-block: var(--bloom-s8);
+  --padding-inline-desktop: var(--bloom-s16);
+  --padding-inline-mobile: var(--bloom-s4);
+  --inner-button-gap: var(--bloom-s3);
+
+  --padding-inline: var(--padding-inline-desktop);
+
+  @media (max-width: $screen-sm) {
+    --padding-inline: var(--padding-inline-mobile);
+  }
+
+  background-color: var(--background-color);
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--inner-button-gap);
+
+  & > .button-group__column {
+    display: flex;
+    gap: var(--inner-button-gap);
+
+    .button {
+      @media (max-width: $screen-sm) {
+        --normal-rounded: var(--small-rounded);
+        --normal-padding: var(--small-padding);
+        --normal-font-size: var(--small-font-size);
+      }
+    }
+  }
+
+  &.has-between-spacing {
+    justify-content: space-between;
+  }
+
+  &.has-even-spacing {
+    justify-content: space-evenly;
+  }
+
+  &.has-fullwidth-mobile-buttons {
+    &,
+    & > .button-group__column {
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+
+        .button {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &.is-reversed {
+    &,
+    & > .button-group__column {
+      flex-direction: row-reverse;
+    }
+  }
+}

package/src/actions/ButtonGroup.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import "./ButtonGroup.scss"
+
+export enum ButtonGroupSpacing {
+  between = "between",
+  even = "even",
+}
+
+export interface ButtonGroupProps {
+  /** Pass either Button components in, or fragments which can contain one or more buttons */
+  columns: React.ReactNodeArray
+  /** Between spacing pushes the columns far apart, even spacing keeps them closer together */
+  spacing?: ButtonGroupSpacing
+  /** When true, buttons will collapse to a single column on small screens and go full-width */
+  fullwidthMobile?: boolean
+  /** When true, the flex ordering of columns will reverse (aka RTL) */
+  reversed?: boolean
+}
+
+const ButtonGroup = ({
+  spacing = ButtonGroupSpacing.between,
+  columns,
+  fullwidthMobile,
+  reversed,
+}: ButtonGroupProps) => {
+  const spacingClassName = `has-${spacing}-spacing`
+  const classNames = ["button-group", spacingClassName]
+  if (fullwidthMobile) classNames.push("has-fullwidth-mobile-buttons")
+  if (reversed) classNames.push("is-reversed")
+
+  return (
+    <div className={classNames.join(" ")}>
+      {columns.map((column, index) => (
+        <div key={index} className="button-group__column">
+          {column}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { ButtonGroup as default, ButtonGroup }

package/src/blocks/FormCard.scss

@@ -69,7 +69,6 @@
 
   @screen print {
     @apply py-2;
-    @apply px-0;
   }
 }
 
@@ -87,13 +86,7 @@
 }
 
 .form-card__group {
-  @screen md {
-    @apply px-8;
-  }
-
-  @screen print {
-    @apply px-0;
-  }
+  @apply px-8;
 }
 
 .form-card__header {

package/src/headers/SiteHeader.tsx

@@ -147,7 +147,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }
                 dropdownOptionKeyDown(event, index)
               }}
-              data-test-id={`${option.title}-${index}`}
+              data-test-id={`${option.title}`}
             >
               {dropdownOptionContent(option)}
             </button>
@@ -301,7 +301,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
                   className={`navbar-link ${props.menuItemClassName && props.menuItemClassName}`}
                   href={menuLink.href}
                   key={`${menuLink.title}-${index}`}
-                  data-test-id={`${menuLink.title}-${index}`}
+                  data-test-id={`${menuLink.title}`}
                 >
                   {menuContent}
                 </LinkComponent>
@@ -340,8 +340,8 @@ const SiteHeader = (props: SiteHeaderProps) => {
                 }}
                 onMouseEnter={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
                 onMouseLeave={() => changeMenuShow(menuLink.title, activeMenus, setActiveMenus)}
-                data-test-id={`${menuLink.title}-${index}`}
                 role={"button"}
+                data-test-id={`${menuLink.title}`}
               >
                 {menuContent}
               </span>

package/src/locales/general.json

@@ -345,6 +345,7 @@
   "application.programs.rentBasedOnIncome.flatRent.description": "I would like to apply for an affordable flat rent apartment, which has a set monthly rent amount that is below market rate. Note - applicants with Section 8 Mobile Housing Choice Vouchers (HCV) are welcome to apply.",
   "application.programs.rentBasedOnIncome.flatRent.label": "Affordable apartment with flat rent",
   "application.programs.rentBasedOnIncome.summary": "Flat Rent & Rent Based on Income",
+  "application.programs.selectBelow": "Please select all that apply:",
   "application.programs.servedInMilitary.doNotConsider.label": "No",
   "application.programs.servedInMilitary.servedInMilitary.label": "Yes",
   "application.programs.servedInMilitary.summary": "Veteran of the US Military",
@@ -909,6 +910,7 @@
   "t.preferNotToSay": "Prefer not to say",
   "t.preferences": "Preferences",
   "t.previous": "Previous",
+  "t.programs": "Programs",
   "t.propertyAmenities": "Property Amenities",
   "t.range": "%{from} to %{to}",
   "t.readLess": "read less",

package/src/navigation/ProgressNav.scss

@@ -9,7 +9,7 @@
 
 .progress-nav__item {
   @apply text-2xs;
-  @apply px-2;
+  @apply px-1;
   @apply py-3;
   @apply relative;
   @apply text-center;
@@ -22,6 +22,7 @@
   @screen md {
     @apply text-sm;
     @apply p-0;
+    @apply px-2;
   }
 
   &:before {

package/src/overlays/Drawer.scss

@@ -104,3 +104,10 @@
   @apply pb-4;
   @apply overflow-y-visible;
 }
+
+.drawer__small {
+  width: 100%;
+  @screen md {
+    width: 45rem;
+  }
+}

package/src/overlays/Modal.scss

@@ -52,7 +52,6 @@
     max-height: calc(100vh - 200px);
     overflow-y: auto;
   }
-
   p {
     color: var(--content-font-color);
   }

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

@@ -1,5 +1,5 @@
 import * as React from "react"
-import Heading from "../../../../headers/Heading"
+import { Heading } from "../../../../headers/Heading"
 
 export type EventType = {
   timeString?: string

package/src/prototypes/Swatch.tsx

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