@bloom-housing/ui-components 5.1.1-alpha.1 → 5.1.1-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.3...@bloom-housing/ui-components@5.1.1-alpha.4) (2022-08-12)
+
+
+### Bug Fixes
+
+* clean up str variable assignment ([7db94e8](https://github.com/bloom-housing/bloom/commit/7db94e81d65eb7ff7314a435f7d34a93af22049e))
+* fix changing const ([c5b37a9](https://github.com/bloom-housing/bloom/commit/c5b37a9106aab902f11e2a8034ea835c46c53d53))
+* fix html string errors ([1548c60](https://github.com/bloom-housing/bloom/commit/1548c6085b882e8b894bc17d96a096553bf7eccf))
+* remove types from removed dep ([4cd5e14](https://github.com/bloom-housing/bloom/commit/4cd5e148a29b6081f7337f26ed8e9e477e2737a4))
+* replace usage of sanitize-html ([aad2f94](https://github.com/bloom-housing/bloom/commit/aad2f949ae6386d1e460b959808501be1b8c0f06))
+
+
+
+
+
+## [5.1.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.2...@bloom-housing/ui-components@5.1.1-alpha.3) (2022-08-03)
+
+
+### Bug Fixes
+
+* **expandabletext:** add required strings to expandable text ([03bbc46](https://github.com/bloom-housing/bloom/commit/03bbc46b4f8f910efef0a1f984717da0a65794ed))
+* **expandabletext:** fix stories with passing req prop ([057d8fe](https://github.com/bloom-housing/bloom/commit/057d8feb038e07bb3d6784d1d6d4d068ba72460c)), closes [#2925](https://github.com/bloom-housing/bloom/issues/2925)
+* **expandabletext:** fix tests; remove test prop ([28af8fc](https://github.com/bloom-housing/bloom/commit/28af8fc319190c50b2751d29c251e472e48e6971))
+* option typing with import ([dc195f8](https://github.com/bloom-housing/bloom/commit/dc195f8acb8850bab11eafc80a2cea3f8b6e0de5))
+
+
+### Features
+
+* **expandabletext:** fix a broken ci check; fix a prop name ([e839c81](https://github.com/bloom-housing/bloom/commit/e839c811b237164b1cd26bbc888db512f66bc6b0))
+* **expandabletext:** fix type usage ([1a406fe](https://github.com/bloom-housing/bloom/commit/1a406fe7c19639e28bb1fdc19fd9e58a25c8bfd1)), closes [#2925](https://github.com/bloom-housing/bloom/issues/2925)
+* **expandabletext:** remove translations;pass markdown props through component ([e21e88a](https://github.com/bloom-housing/bloom/commit/e21e88a5be527ec860b3515c1dc545a186713e06)), closes [#2925](https://github.com/bloom-housing/bloom/issues/2925)
+
+
+### BREAKING CHANGES
+
+* **expandabletext:** In uses of ExpandableText component, the translations are now being passed down
+instead of done within the component. Any options for the Markdown component used within
+ExpandableText also needs to be passed
+
+
+
+
+
+## [5.1.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.1...@bloom-housing/ui-components@5.1.1-alpha.2) (2022-08-01)
+
+
+### Features
+
+* **errormessage:** add classname to errormessage; apply styles to Field ([b63be81](https://github.com/bloom-housing/bloom/commit/b63be81f2fa5fc523b5804842d0eb4781ed32054)), closes [#2911](https://github.com/bloom-housing/bloom/issues/2911)
+* **errormessage:** add text color ([74adf72](https://github.com/bloom-housing/bloom/commit/74adf72fcd625ad14c51815dce54d3e7beae5e11)), closes [#2911](https://github.com/bloom-housing/bloom/issues/2911)
+* **forms.scss:** apply styling change to error-message class ([2c30044](https://github.com/bloom-housing/bloom/commit/2c300441c580464be1b69f861b5080e74242166e)), closes [#2911](https://github.com/bloom-housing/bloom/issues/2911)
+* **formsigninerrorbox:** add classnames to undo changes ([fa7e9f7](https://github.com/bloom-housing/bloom/commit/fa7e9f7e235e4a6b750d67d7338bebaace202519)), closes [#2911](https://github.com/bloom-housing/bloom/issues/2911)
+* **textarea:** apply lineheight and margin to textarea ([afbe5e4](https://github.com/bloom-housing/bloom/commit/afbe5e49c081bc85da1d4718e2ea1e6b8cc295b0)), closes [#2911](https://github.com/bloom-housing/bloom/issues/2911)
+
+
+
+
+
 ## [5.1.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.0...@bloom-housing/ui-components@5.1.1-alpha.1) (2022-08-01)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.1",
+  "version": "5.1.1-alpha.4",
   "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,7 +85,6 @@
     "@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",
@@ -107,10 +106,9 @@
     "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": "e78464e61bc07c2893128c3da038a52f02bc2d69"
+  "gitHead": "17b005dd65067cb9cf34d498834c448c20d3d2f6"
 }

package/src/actions/ExpandableText.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react"
-import Markdown from "markdown-to-jsx"
-import { t } from "../helpers/translator"
+import Markdown, { MarkdownOptions } from "markdown-to-jsx"
 import "./ExpandableText.scss"
 
 export interface ExpandableTextProps {
@@ -8,6 +7,11 @@ export interface ExpandableTextProps {
   expand?: boolean
   maxLength?: number
   className?: string
+  strings: {
+    readMore: string
+    readLess: string
+  }
+  markdownProps?: MarkdownOptions
 }
 
 const getText = (text: string, expanded: boolean, maxLength: number) => {
@@ -22,10 +26,14 @@ const getText = (text: string, expanded: boolean, maxLength: number) => {
   return position > 0 ? text.substring(0, position) + "..." : text.substring(0, maxLength) + "..."
 }
 
-const moreLessButton = (expanded: boolean, setExpanded: (newValue: boolean) => void) => {
+const moreLessButton = (
+  expanded: boolean,
+  setExpanded: (newValue: boolean) => void,
+  strings: ExpandableTextProps["strings"]
+) => {
   return (
     <span className="button-toggle" onClick={() => setExpanded(!expanded)}>
-      {expanded ? t("t.less") : t("t.more")}
+      {expanded ? strings?.readLess : strings?.readMore}
     </span>
   )
 }
@@ -38,13 +46,14 @@ const ExpandableText = (props: ExpandableTextProps) => {
   if (!props.children) return null
 
   if (props.children.length > maxLength) {
-    button = moreLessButton(expanded, setExpanded)
+    button = moreLessButton(expanded, setExpanded, props.strings)
   }
   return (
-    <div className={`expandable-text ${props.className}`}>
+    <div className={`expandable-text ${props?.className}`}>
+      {" "}
       <Markdown
         children={getText(props.children, expanded, maxLength)}
-        options={{ disableParsingRawHTML: true }}
+        options={props.markdownProps}
       />
       {button}
     </div>

package/src/forms/HouseholdSizeField.tsx

@@ -55,7 +55,11 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
           }
         />
       </span>
-      <ErrorMessage id={"householdsize-error"} error={!!error}>
+      <ErrorMessage
+        id={"householdsize-error"}
+        error={!!error}
+        className="block mt-0 line-normal text-red-700"
+      >
         <AlertBox type="alert" inverted onClose={() => clearErrors()}>
           {t("application.household.dontQualifyHeader")}
         </AlertBox>

package/src/forms/Textarea.scss

@@ -6,6 +6,7 @@
   @apply p-2;
   @apply text-gray-900;
   @apply bg-gray-200;
+  @apply align-top;
   font-size: 1rem;
 }
 
@@ -26,6 +27,8 @@
   @apply text-xs;
   @apply text-alert;
   @apply block;
+  @apply leading-5;
+  @apply mt-2;
 }
 
 .textarea-label {

package/src/global/forms.scss

@@ -326,9 +326,12 @@ input[type="number"] {
 }
 
 .error-message {
+  display: inline-block;
   @apply text-sm;
   @apply text-red-700;
   @apply tracking-wide;
+  @apply leading-5;
+  @apply mt-2;
 }
 
 .field-sub-note {

package/src/helpers/MultiLineAddress.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import sanitizeHtml from "sanitize-html"
+import Markdown from "markdown-to-jsx"
 
 export interface Address {
   city?: string
@@ -19,20 +19,28 @@ export interface MultiLineAddressProps {
 const MultiLineAddress = ({ address }: MultiLineAddressProps) => {
   if (!address) return null
 
+  const makeHtmlString = (address: Address) => {
+    let str = ""
+
+    if (address.placeName) {
+      str += `${address.placeName} <br />`
+    }
+
+    if (address.street || address.street2) {
+      str += `${address.street || ""} ${address.street2 || ""} <br />`
+    }
+
+    if (address.city || address.state || address.zipCode) {
+      str += `${address.city && `${address.city} ,`} ${address.state} ${address.zipCode}`
+    }
+
+    return str
+  }
+
   return (
-    <span
-      dangerouslySetInnerHTML={{
-        __html: sanitizeHtml(
-          `
-            ${address.placeName ? `${address.placeName} <br />` : ""}
-            ${address.street || ""} ${address.street2 || ""}
-            ${address.street || address.street2 ? `<br />` : ""}
-            ${address.city}
-            ${address.city && (address.state || address.zipCode) ? "," : ""} ${address.state} ${` `}
-            ${address.zipCode}
-          `
-        ),
-      }}
+    <Markdown
+      options={{ disableParsingRawHTML: false }}
+      children={`<span>${makeHtmlString(address)}</span>`}
     />
   )
 }

package/src/notifications/ErrorMessage.tsx

@@ -1,11 +1,21 @@
 import React from "react"
 
-const ErrorMessage = (props: { id?: string; error?: boolean; children?: React.ReactNode }) => {
+const ErrorMessage = (props: {
+  id?: string
+  error?: boolean
+  children?: React.ReactNode
+  className?: string
+}) => {
   if (props.error) {
+    const classes = ["error-message"]
+    if (props.className) {
+      classes.push(props.className)
+    }
+
     return (
       <span
         id={props.id}
-        className="error-message"
+        className={classes.join(" ")}
         aria-live="assertive"
         data-test-id={"error-message"}
       >

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

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