@bloom-housing/ui-components 5.0.1-alpha.2 → 5.0.1-alpha.20

package/CHANGELOG.md

@@ -3,6 +3,194 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.1-alpha.20](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.19...@bloom-housing/ui-components@5.0.1-alpha.20) (2022-07-20)
+
+
+### Bug Fixes
+
+* render html address properly ([#2897](https://github.com/bloom-housing/bloom/issues/2897)) ([87a759a](https://github.com/bloom-housing/bloom/commit/87a759a68c35d1c47ec4fbbec6c947a63993d27c))
+
+
+
+
+
+## [5.0.1-alpha.19](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.18...@bloom-housing/ui-components@5.0.1-alpha.19) (2022-07-19)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.18](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.17...@bloom-housing/ui-components@5.0.1-alpha.18) (2022-07-19)
+
+
+### Features
+
+* visuals for add preference, preference option drawers ([#2877](https://github.com/bloom-housing/bloom/issues/2877)) ([8611034](https://github.com/bloom-housing/bloom/commit/8611034845b45ce4d4e4eb44e790ac2adec0ba94))
+
+
+
+
+
+## [5.0.1-alpha.17](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.16...@bloom-housing/ui-components@5.0.1-alpha.17) (2022-07-15)
+
+
+### Features
+
+* creating users as admin ([#2856](https://github.com/bloom-housing/bloom/issues/2856)) ([dd946d1](https://github.com/bloom-housing/bloom/commit/dd946d1777b4678e89832da527768180f474d129))
+
+
+
+
+
+## [5.0.1-alpha.16](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.15...@bloom-housing/ui-components@5.0.1-alpha.16) (2022-07-13)
+
+
+### Bug Fixes
+
+* add classname prop for custom styling onto application status component ([#2888](https://github.com/bloom-housing/bloom/issues/2888)) ([fedcaa4](https://github.com/bloom-housing/bloom/commit/fedcaa4e4bf537d0207f7d0ecfaf5078879e1fad))
+
+
+
+
+
+## [5.0.1-alpha.15](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.14...@bloom-housing/ui-components@5.0.1-alpha.15) (2022-07-12)
+
+
+### Features
+
+* modal styling updates ([#2857](https://github.com/bloom-housing/bloom/issues/2857)) ([4faf6de](https://github.com/bloom-housing/bloom/commit/4faf6de448a7fff8d4fa1a7a1144674ace311732))
+
+
+
+
+
+## [5.0.1-alpha.14](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.13...@bloom-housing/ui-components@5.0.1-alpha.14) (2022-07-12)
+
+
+### Features
+
+* **preferencelist:** vertically align content at $md bp ([8dc7867](https://github.com/bloom-housing/bloom/commit/8dc786768fe3e2c82e8e345e418148751971a1c2)), closes [#2827](https://github.com/bloom-housing/bloom/issues/2827)
+
+
+
+
+
+## [5.0.1-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.12...@bloom-housing/ui-components@5.0.1-alpha.13) (2022-07-12)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.11...@bloom-housing/ui-components@5.0.1-alpha.12) (2022-07-11)
+
+
+### Bug Fixes
+
+* resolve key warning in contact component ([fe1070a](https://github.com/bloom-housing/bloom/commit/fe1070acdbb7b927d9466f583d2f301127de114f))
+
+
+
+
+
+## [5.0.1-alpha.11](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.10...@bloom-housing/ui-components@5.0.1-alpha.11) (2022-07-11)
+
+
+### Bug Fixes
+
+* ux updates and bug fixes for sidebar components ([#2859](https://github.com/bloom-housing/bloom/issues/2859)) ([1bd3b36](https://github.com/bloom-housing/bloom/commit/1bd3b36415ff55be88ea5ada6184de2c232f2da5))
+
+
+
+
+
+## [5.0.1-alpha.10](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.9...@bloom-housing/ui-components@5.0.1-alpha.10) (2022-07-08)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.8...@bloom-housing/ui-components@5.0.1-alpha.9) (2022-07-07)
+
+
+### Features
+
+* populate jurisdictional preferences on settings page ([#2828](https://github.com/bloom-housing/bloom/issues/2828)) ([2ea5646](https://github.com/bloom-housing/bloom/commit/2ea5646a49dc6782fe0e83e942e1917929fde153))
+
+
+
+
+
+## [5.0.1-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.7...@bloom-housing/ui-components@5.0.1-alpha.8) (2022-07-06)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
+## [5.0.1-alpha.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.6...@bloom-housing/ui-components@5.0.1-alpha.7) (2022-07-02)
+
+
+### Bug Fixes
+
+* switch back to padding for image card leader ([#2851](https://github.com/bloom-housing/bloom/issues/2851)) ([c3fde4a](https://github.com/bloom-housing/bloom/commit/c3fde4adbff2bd116c4acaf39f609d3c0ed0638f))
+
+
+
+
+
+## [5.0.1-alpha.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.5...@bloom-housing/ui-components@5.0.1-alpha.6) (2022-06-29)
+
+
+### Bug Fixes
+
+* hide apply section if there is no data ([#2846](https://github.com/bloom-housing/bloom/issues/2846)) ([5fcaf58](https://github.com/bloom-housing/bloom/commit/5fcaf58acc8cc083c738f53a23beba4e567b2994))
+
+
+
+
+
+## [5.0.1-alpha.5](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.4...@bloom-housing/ui-components@5.0.1-alpha.5) (2022-06-27)
+
+
+### Bug Fixes
+
+* application due date sentence ([#2822](https://github.com/bloom-housing/bloom/issues/2822)) ([62a870e](https://github.com/bloom-housing/bloom/commit/62a870e3696849dc751e410282279e23071db544))
+
+
+
+
+
+## [5.0.1-alpha.4](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.3...@bloom-housing/ui-components@5.0.1-alpha.4) (2022-06-23)
+
+
+### Features
+
+* **preferenceslist:** add storybook example without subtitle ([4a32106](https://github.com/bloom-housing/bloom/commit/4a32106d0f171822961e4dcee5ee9013ee23b329))
+* **preferenceslist:** move ordinal at mobile bp; update text color for contrast ([b063f5d](https://github.com/bloom-housing/bloom/commit/b063f5dd0813778f1d77efa510ee3a2d788be717)), closes [#2827](https://github.com/bloom-housing/bloom/issues/2827)
+* **preferenceslist:** move ordinal left; make other elements align horizontally ([7034cc7](https://github.com/bloom-housing/bloom/commit/7034cc76a04e8c395ae3a51b2f2c4e5cef944086)), closes [Issue#2827](https://github.com/Issue/issues/2827)
+
+
+
+
+
+## [5.0.1-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.2...@bloom-housing/ui-components@5.0.1-alpha.3) (2022-06-23)
+
+
+### Bug Fixes
+
+* mfa verificication fields ([#2842](https://github.com/bloom-housing/bloom/issues/2842)) ([32a3df6](https://github.com/bloom-housing/bloom/commit/32a3df66a883dcffca8b304ba769f8a2d8c5c240))
+
+
+
+
+
 ## [5.0.1-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.1...@bloom-housing/ui-components@5.0.1-alpha.2) (2022-06-23)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -82,6 +82,7 @@ export * from "./src/navigation/LanguageNav"
 export * from "./src/navigation/ProgressNav"
 export * from "./src/navigation/TabNav"
 export * from "./src/navigation/Tabs"
+export * from "./src/navigation/Breadcrumbs"
 
 /* Notifications */
 export * from "./src/notifications/AlertBox"
@@ -115,6 +116,7 @@ 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/ContactAddress"
+export * from "./src/page_components/listing/listing_sidebar/SidebarBlock"
 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/ExpandableSection"
@@ -128,6 +130,7 @@ export * from "./src/page_components/sign-in/FormSignInMFACode"
 export * from "./src/page_components/sign-in/FormSignInAddPhone"
 export * from "./src/page_components/sign-in/FormSignInErrorBox"
 export * from "./src/page_components/forgot-password/FormForgotPassword"
+export * from "./src/page_components/NavigationHeader"
 
 /* Responsive Wrappers */
 export * from "./src/sections/ResponsiveWrappers"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "5.0.1-alpha.2",
+  "version": "5.0.1-alpha.20",
   "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",
@@ -40,6 +40,7 @@
     "@storybook/theming": "^6.3.8",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
+    "@types/dompurify": "^2.3.3",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
     "@types/react-map-gl": "^5.2.10",
@@ -89,6 +90,7 @@
     "axios": "0.21.2",
     "body-scroll-lock": "^3.1.5",
     "dayjs": "^1.10.7",
+    "dompurify": "^2.3.10",
     "jwt-decode": "^2.2.0",
     "markdown-to-jsx": "^6.11.4",
     "nanoid": "^3.1.12",
@@ -108,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "f04434904aa50d2a8012266329dc53f08168defa"
+  "gitHead": "e9eb58b6a83245200b200af3d17fe6987096c256"
 }

package/src/actions/Button.scss

@@ -29,6 +29,10 @@
   font-weight: var(--label-weight);
   line-height: var(--bloom-line-height-snug);
 
+  &.transition {
+    transition: all 200ms ease-out;
+  }
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
@@ -36,6 +40,9 @@
 
   &:hover {
     border-color: var(--bloom-color-primary-dark);
+    &.transition {
+      transition: all 200ms ease-in;
+    }
   }
 
   &:disabled {
@@ -52,6 +59,7 @@
     &:hover {
       background-color: var(--bloom-color-gray-700);
       color: var(--bloom-color-white);
+      border-color: var(--bloom-color-gray-700);
     }
   }
 

package/src/actions/Button.tsx

@@ -4,25 +4,26 @@ import { AppearanceProps, classNamesForAppearanceTypes } from "../global/Appeara
 import { Icon, IconSize, UniversalIconType } from "../icons/Icon"
 
 export interface ButtonProps extends AppearanceProps {
-  id?: string
-  type?: "button" | "submit" | "reset"
+  "data-test-id"?: string
+  ariaHidden?: boolean
+  ariaLabel?: string
   children: React.ReactNode
-  onClick?: (e: React.MouseEvent) => void
+  className?: string
+  dataTestId?: string
+  disabled?: boolean
+  fullWidth?: boolean
   icon?: UniversalIconType
   iconPlacement?: "left" | "right"
   iconSize?: IconSize
+  id?: string
   // TODO: inlineIcon is deprecated
-  inlineIcon?: "left" | "right"
   inline?: boolean
-  unstyled?: boolean
-  fullWidth?: boolean
-  className?: string
-  disabled?: boolean
+  inlineIcon?: "left" | "right"
   loading?: boolean
-  ariaHidden?: boolean
-  ariaLabel?: string
-  dataTestId?: string
-  "data-test-id"?: string
+  onClick?: (e: React.MouseEvent) => void
+  transition?: boolean
+  type?: "button" | "submit" | "reset"
+  unstyled?: boolean
 }
 
 export const buttonClassesForProps = (props: Omit<ButtonProps, "onClick">) => {
@@ -36,6 +37,7 @@ export const buttonClassesForProps = (props: Omit<ButtonProps, "onClick">) => {
   if (props.fullWidth) classNames.push("is-fullwidth")
   if (props.className) classNames.push(props.className)
   if (props.loading) classNames.push("is-loading")
+  if (props.transition) classNames.push("transition")
   return classNames
 }
 

package/src/actions/ExpandableContent.tsx

@@ -15,6 +15,7 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
 
   return (
     <div className={rootClassNames}>
+      {isExpanded && <div>{children}</div>}
       <button
         type="button"
         className="button is-unstyled m-0 no-underline has-toggle"
@@ -25,7 +26,6 @@ const ExpandableContent = ({ children, strings, className }: ExpandableContentPr
       >
         {isExpanded ? strings.readLess : strings.readMore}
       </button>
-      {isExpanded && <div className="mt-6">{children}</div>}
     </div>
   )
 }

package/src/actions/LinkButton.tsx

@@ -3,10 +3,14 @@ import "./Button.scss"
 import { buttonClassesForProps, buttonInner, ButtonProps } from "./Button"
 import { NavigationContext } from "../config/NavigationContext"
 import { isExternalLink } from "../helpers/links"
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"
+import { Icon } from "../icons/Icon"
 
 export interface LinkButtonProps extends Omit<ButtonProps, "onClick"> {
   href: string
   dataTestId?: string
+  newTab?: boolean
+  newTabIcon?: boolean
 }
 
 const LinkButton = (props: LinkButtonProps) => {
@@ -15,8 +19,19 @@ const LinkButton = (props: LinkButtonProps) => {
 
   if (isExternalLink(props.href)) {
     return (
-      <a href={props.href} className={buttonClasses.join(" ")} data-test-id={props.dataTestId}>
+      <a
+        href={props.href}
+        className={buttonClasses.join(" ")}
+        data-test-id={props.dataTestId}
+        target={props.newTab ? "_blank" : "_self"}
+      >
         {buttonInner(props)}
+        {props.newTabIcon && (
+          <>
+            <Icon symbol={faUpRightFromSquare} size={"small"} className={"ml-2"} />
+            <span className="sr-only">{"Opens in a new tab"}</span>
+          </>
+        )}
       </a>
     )
   } else {

package/src/blocks/ImageCard.scss

@@ -61,7 +61,7 @@
 
   @media (min-width: $screen-sm) {
     width: var(--bloom-width-2-3rd);
-    margin-block-start: var(--bloom-s8);
-    margin-inline-end: var(--bloom-s8);
+    padding-block-start: var(--bloom-s8);
+    padding-inline-end: var(--bloom-s8);
   }
 }

package/src/blocks/InfoCard.scss

@@ -35,8 +35,17 @@
 
 .info-card__columns {
   @apply flex;
+  @apply flex-wrap;
 }
 
 .info-card__column {
   @apply flex-1;
 }
+.info-card__column-2 {
+  flex: 1 1 100%;
+  @apply mt-4;
+  @apply mr-4;
+  @media (min-width: 440px) {
+    flex: 1 1 45%;
+  }
+}

package/src/blocks/StandardCard.scss

@@ -19,7 +19,7 @@
 .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);
+  padding: var(--bloom-s6) var(--bloom-s5) var(--bloom-s2) var(--bloom-s5);
 }
 
 .standard-card__blank {

package/src/forms/Field.tsx

@@ -74,7 +74,7 @@ const Field = (props: FieldProps) => {
     if (props.caps) labelClasses.push("field-label--caps")
     if (props.primary) labelClasses.push("text-primary")
     if (props.readerOnly) labelClasses.push("sr-only")
-    if (props.type === "checkbox" || props.type === "radio") {
+    if (props.type === "radio") {
       labelClasses.push("font-semibold")
     }
 

package/src/forms/Textarea.tsx

@@ -23,6 +23,7 @@ export interface TextareaProps {
   wrap?: WrapOptions
   readerOnly?: boolean
   inputProps?: Record<string, unknown>
+  dataTestId?: string
 }
 
 export const Textarea = (props: TextareaProps) => {
@@ -56,6 +57,7 @@ export const Textarea = (props: TextareaProps) => {
         wrap={props.wrap ?? "soft"}
         title={props.label}
         {...inputProps}
+        data-test-id={props.dataTestId}
       />
       {props.note && <p className="field-note font-normal mb-2">{props.note}</p>}
       {props.errorMessage && <span className="textarea-error-message">{props.errorMessage}</span>}

package/src/global/blocks.scss

@@ -133,3 +133,25 @@ $shadow-left-slight: -3px 0px 3px -1px rgba(0, 0, 0, 0.1);
     @apply block;
   }
 }
+
+.sidebar-detail-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bloom-s6);
+  margin-inline: auto;
+  max-width: var(--bloom-screen-2xl);
+
+  @media (min-width: 1000px) {
+    flex-direction: row;
+  }
+
+  & > div {
+    flex-grow: 1;
+  }
+
+  & > aside {
+    @media (min-width: 1000px) {
+      width: var(--bloom-s72);
+    }
+  }
+}

package/src/global/mixins.scss

@@ -93,7 +93,7 @@
         --success-appearance-hover-background-color,
         var(--bloom-color-success-dark)
       );
-      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success));
+      border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success-dark));
       color: var(--success-appearance-hover-label-color, var(--bloom-color-white));
     }
   }
@@ -129,7 +129,7 @@
   }
 
   &.is-borderless {
-    color: var(--bloom-color-primary-darker);
+    color: var(--bloom-color-primary);
     border-color: transparent;
     background: transparent;
 
@@ -152,7 +152,7 @@
       --outlined-appearance-hover-background-color,
       var(--bloom-color-primary-dark)
     );
-    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary));
+    border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary-dark));
     color: var(--outlined-appearance-hover-label-color, var(--bloom-color-white));
   }
 

package/src/global/tokens/borders.scss

@@ -12,4 +12,6 @@
   --bloom-border-2: 2px;
   --bloom-border-4: 4px;
   --bloom-border-8: 8px;
+
+  --bloom-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }

package/src/global/tokens/fonts.scss

@@ -10,6 +10,7 @@
   --bloom-font-size-sm: 0.8125rem;
   --bloom-font-size-tiny: 0.875rem;
   --bloom-font-size-base: 1rem;
+  --bloom-font-size-base-alt: 1.125rem;
   --bloom-font-size-lg: 1.25rem;
   --bloom-font-size-xl: 1.375rem;
   --bloom-font-size-2xl: 1.5rem;

package/src/global/tokens/screens.scss

@@ -3,4 +3,5 @@
   --bloom-screen-md: #{$screen-md};
   --bloom-screen-lg: #{$screen-lg};
   --bloom-screen-xl: #{$screen-xl};
+  --bloom-screen-2xl: #{$screen-2xl};
 }

package/src/headers/PageHeader.scss

@@ -3,6 +3,7 @@
   --background-color: var(--bloom-color-primary-lighter);
   --border-color: var(--bloom-color-gray-450);
   --text-color: inherit;
+  --text-font-family: var(--bloom-font-serif);
   --inverse-background-color: var(--bloom-color-primary-darker);
   --inverse-border-color: var(--bloom-color-primary);
   --inverse-text-color: var(--bloom-color-white);
@@ -27,13 +28,25 @@
 }
 
 .page-header__group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 0 var(--bloom-s5);
   margin: auto;
   max-width: var(--bloom-width-5xl);
+
+  @media (min-width: $screen-sm) {
+    align-items: flex-start;
+  }
+}
+
+.page-header__breadcrumbs {
+  margin-bottom: 10px;
 }
 
 .page-header__title {
   text-align: center;
+  font-family: var(--text-font-family);
 
   @media (min-width: $screen-md) {
     font-size: var(--title-font-size);
@@ -42,6 +55,6 @@
 }
 
 .page-header__lead {
-  margin: auto;
+  font-family: var(--text-font-family);
   max-width: var(--bloom-width-5xl);
 }

package/src/headers/PageHeader.tsx

@@ -8,6 +8,7 @@ export interface PageHeaderProps {
   subtitle?: string
   children?: React.ReactNode
   tabNav?: React.ReactNode
+  breadcrumbs?: React.ReactNode
 }
 
 const PageHeader = (props: PageHeaderProps) => {
@@ -18,8 +19,10 @@ const PageHeader = (props: PageHeaderProps) => {
   return (
     <header className={classNames.join(" ")}>
       <hgroup className="page-header__group">
+        {props?.breadcrumbs && <nav className="page-header__breadcrumbs">{props?.breadcrumbs}</nav>}
+
         {props.title && (
-          <h1 data-test-id="page_header" className="page-header__title">
+          <h1 data-test-id="page-header" className="page-header__title">
             {props.title}
           </h1>
         )}

package/src/helpers/MultiLineAddress.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import DOMPurify from "dompurify"
 
 export interface Address {
   city?: string
@@ -19,18 +20,21 @@ const MultiLineAddress = ({ address }: MultiLineAddressProps) => {
   if (!address) return null
 
   return (
-    <>
-      {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}
-    </>
+    <span
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(
+          `
+            ${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}
+          `,
+          { USE_PROFILES: { html: true } }
+        ),
+      }}
+    />
   )
 }
 

package/src/lists/PreferencesList.scss

@@ -1,10 +1,10 @@
 .preferences-list__item {
   .info-card__title {
     @apply mb-0;
-    @apply ml-4;
 
-    @screen md {
-      @apply ml-2;
+    @media (max-width: $screen-md) {
+      margin-left: 0px;
+      margin-top: var(--bloom-s3);
     }
   }
 }
@@ -37,7 +37,12 @@
   width: 2.5rem;
 
   @screen md {
-    margin-left: -2.65rem;
+    margin-left: -3rem;
+  }
+
+  @media (max-width: $screen-md) {
+    margin-left: 0px;
+    float: none;
   }
 
   sup {
@@ -47,17 +52,16 @@
 }
 
 .preferences-list__subtitle {
-  @apply text-gray-700;
+  @apply text-gray-750;
   @apply text-tiny;
-  @apply ml-4;
 
-  @screen md {
-    @apply ml-2;
+  @media (max-width: $screen-md) {
+    margin-left: 0px;
   }
 }
 
 .preferences-list__description {
-  @apply text-gray-700;
+  @apply text-gray-750;
   @apply text-sm;
   @apply mt-3;
 }