@bloom-housing/ui-components 5.1.1-alpha.2 → 5.1.1-alpha.5

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.
 
+## [5.1.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.4...@bloom-housing/ui-components@5.1.1-alpha.5) (2022-08-16)
+
+
+### Bug Fixes
+
+* ensure listing card link region covers image tags ([#2943](https://github.com/bloom-housing/bloom/issues/2943)) ([ebc8d48](https://github.com/bloom-housing/bloom/commit/ebc8d48556b587a4ad8fc9bc294be54b69e88462))
+
+
+
+
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.1.1-alpha.2",
+  "version": "5.1.1-alpha.5",
   "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": "011a850750b1c9a53a364984e1216797ff25351c"
+  "gitHead": "e927a2e8e152e91cbb10ba0e9c13dd3ba51cc5e0"
 }

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/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/page_components/listing/ListingCard.scss

@@ -65,6 +65,7 @@
   .is-card-link::after {
     content: "";
     position: absolute;
+    z-index: 10;
     left: 0;
     top: 0;
     right: 0;