@bloom-housing/ui-components 5.0.1-alpha.0 → 5.0.1-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,125 @@
 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.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
+
+
+
+
+
+## [5.0.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.0.1-alpha.0...@bloom-housing/ui-components@5.0.1-alpha.1) (2022-06-21)
+
+
+### Features
+
+* **listingcard:** add compatability for jsx elements in subheader ([#2821](https://github.com/bloom-housing/bloom/issues/2821)) ([77693dc](https://github.com/bloom-housing/bloom/commit/77693dcee60be8deba641595ed6ae5e141d14a51))
+
+
+### BREAKING CHANGES
+
+* **listingcard:** prop name change for header from "text" to "content"
+
+
+
+
+
 ## [5.0.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.4.1-alpha.27...@bloom-housing/ui-components@5.0.1-alpha.0) (2022-06-16)
 
 

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.0",
+  "version": "5.0.1-alpha.11",
   "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",
@@ -108,5 +108,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "d71641de95b74bd55700866f9b54fd52c47deaac"
+  "gitHead": "7641496db149c31bf7307ed44367ae1b3688e2b7"
 }

package/src/actions/Button.docs.mdx

@@ -50,12 +50,12 @@ You can apply CSS variables to the `.button` selector to customize the appearanc
 | `--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      |
+| `--warning-appearance-background-color`       | <Swatch colorVar="--bloom-color-warn" />         | Warning background color             |
+| `--warning-appearance-border-color`           | <Swatch colorVar="--bloom-color-warn" />         | Warning border color                 |
+| `--warning-appearance-label-color`            | <Swatch colorVar="--bloom-color-white" />        | Warning label color                  |
+| `--warning-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-warn-dark" />    | Hover state warning background color |
+| `--warning-appearance-hover-border-color`     | <Swatch colorVar="--bloom-color-warn" />         | Hover state warning border color     |
+| `--warning-appearance-hover-label-color`      | <Swatch colorVar="--bloom-color-white" />        | Hover state warning label color      |
 
 ### Typographic & Spacing Variables
 

package/src/actions/Button.scss

@@ -1,18 +1,38 @@
 @import "../global/mixins.scss";
 
 .button {
+  /* Component Variables */
+  --normal-rounded: var(--bloom-rounded);
+  --normal-padding: var(--bloom-s4) var(--bloom-s6);
+  --label-transform: uppercase;
+  --label-font: var(--bloom-font-alt-sans);
+  --label-letter-spacing: var(--bloom-letter-spacing-widest);
+  --normal-font-size: var(--bloom-font-size-sm);
+  --label-weight: bold;
+  --small-rounded: var(--bloom-rounded);
+  --small-padding: var(--bloom-s3) var(--bloom-s6);
+  --small-font-size: var(--bloom-font-size-xs);
+  --big-rounded: var(--bloom-rounded);
+  --big-padding: var(--bloom-s6);
+  --big-font-size: var(--bloom-font-size-sm);
+
+  /* Base Styles */
   position: relative;
-  border-radius: var(--normal-rounded, var(--bloom-rounded));
-  padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
+  border-radius: var(--normal-rounded);
+  padding: var(--normal-padding);
   text-align: center;
-  text-transform: var(--label-transform, uppercase);
-  font-family: var(--label-font, var(--bloom-font-alt-sans));
+  text-transform: var(--label-transform);
+  font-family: var(--label-font);
   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);
+  letter-spacing: var(--label-letter-spacing);
+  font-size: var(--normal-font-size);
+  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);
@@ -20,6 +40,9 @@
 
   &:hover {
     border-color: var(--bloom-color-primary-dark);
+    &.transition {
+      transition: all 200ms ease-in;
+    }
   }
 
   &:disabled {
@@ -40,15 +63,15 @@
   }
 
   &.is-small {
-    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));
+    border-radius: var(--small-rounded);
+    padding: var(--small-padding);
+    font-size: var(--small-font-size);
   }
 
   &.is-big {
-    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));
+    border-radius: var(--big-rounded);
+    padding: var(--big-padding);
+    font-size: var(--big-font-size);
   }
 
   &.is-normal-case {

package/src/actions/Button.tsx

@@ -4,24 +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
-  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">) => {
@@ -35,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
 }
 
@@ -75,6 +78,7 @@ const Button = (props: ButtonProps) => {
       className={buttonClasses.join(" ")}
       onClick={props.onClick}
       disabled={props.disabled || props.loading}
+      aria-hidden={props.ariaHidden}
       aria-label={props.ariaLabel}
       data-test-id={props.dataTestId || props["data-test-id"]}
     >

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,14 +19,26 @@ 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 {
     return (
       <LinkComponent
         href={props.href}
+        aria-hidden={props.ariaHidden}
         className={buttonClasses.join(" ")}
         data-test-id={props.dataTestId}
       >

package/src/blocks/ImageCard.docs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { ImageCard } from "./ImageCard"
+
+# Image Card
+
+The image card component renders an image with optional tags at top and status bars below it.
+
+<Canvas>
+  <Story id="blocks-image-card--with-one-status-and-tag" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={ImageCard} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.image-card` selector to customize the appearance of the component. Interior tags themselves are customizable separately, see the **Text/Tag** documentation for details.
+
+| Name                         | Type                                         | Description                                                        | Default                  |
+| ---------------------------- | -------------------------------------------- | ------------------------------------------------------------------ | ------------------------ |
+| `--default-background-color` | <Swatch colorVar="--bloom-color-gray-500" /> | Background color when an image URL isn't available                 | `--bloom-color-gray-500` |
+| `--border-radius`            | Size                                         | The border radius of the card                                      | `0px`                    |
+| `--image-height`             | Size                                         | A height limit for the image area                                  | `auto`                   |
+| `--tags-justify-mobile`      | Flex Jusification                            | The horizontal alignment of tags over the image on mobile screens  | `center`                 |
+| `--tags-justify-desktop`     | Flex Jusification                            | The horizontal alignment of tags over the image on desktop screens | `flex-start`             |

package/src/blocks/ImageCard.scss

@@ -1,92 +1,67 @@
 @import "../global/mixins.scss";
 
-.image-card__wrapper {
-  @apply relative;
+.image-card {
+  /* Component Variables */
+  --default-background-color: var(--bloom-color-gray-500);
+  --border-radius: 0px;
+  --image-height: auto;
+  --tags-justify-mobile: center;
+  --tags-justify-desktop: flex-start;
+
+  position: relative;
 }
 
-.image-card {
-  @apply relative;
-  @apply bg-gray-500;
+.image-card__inner {
+  position: relative;
+  background-color: var(--default-background-color);
+  border-radius: var(--border-radius);
+
   img {
-    @apply w-full;
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: var(--image-height);
+    object-fit: cover;
   }
 }
 
 .image-card-tag__wrapper {
-  @apply flex;
-  @apply items-center;
-  @apply justify-center;
-  @apply absolute;
-  @apply z-10;
-  @apply w-full;
-  @apply mt-1;
-  @apply px-4;
-  @apply flex-wrap;
+  --tags-justify: var(--tags-justify-mobile);
 
-  @screen md {
-    @apply items-start;
-    @apply justify-start;
-  }
-}
-
-.image-card__figcaption {
-  @apply absolute;
-  @apply inset-x-0;
-  @apply bottom-0;
-  @apply py-1;
-}
+  display: flex;
+  align-items: center;
+  justify-content: var(--tags-justify);
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  margin-block-start: var(--bloom-s1);
+  padding-inline: var(--bloom-s4);
+  flex-wrap: wrap;
+  max-width: 100%;
 
-.image-card__placeholder {
-  height: 300px;
-}
+  @media (min-width: $screen-sm) {
+    --tags-justify: var(--tags-justify-desktop);
+  }
 
-.image-card__tag {
-  @apply absolute;
-  @apply top-0;
-  @apply p-3;
-  @apply m-5;
-}
+  .tag {
+    margin-top: var(--bloom-s3);
+    margin-inline: var(--bloom-s2);
 
-.image-card__title {
-  @apply text-white;
-  @apply text-left;
-  @apply text-lg;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply relative;
-  @apply z-10;
-  @apply tracking-wider;
-  @apply px-5;
-  @apply pb-1;
-  @screen md {
-    @apply text-3xl;
+    .ui-icon {
+      margin-inline-end: var(--bloom-s2);
+    }
   }
 }
 
-.image-card__subtitle {
-  @apply text-white;
-  @apply text-left;
-  @apply uppercase;
-  @apply font-alt-sans;
-  @apply text-sm;
-  @apply px-5;
-  @apply pb-3;
-  @apply relative;
-  @apply z-10;
-  @apply tracking-widest;
+.image-card__placeholder {
+  height: 300px;
 }
 
 .image-card--leader {
-  @apply w-full;
-
-  @screen md {
-    @apply w-2/3;
-    @apply pr-8;
-    @apply pt-8;
-  }
+  width: 100%;
 
-  .image-card__title {
-    @apply text-4xl;
-    @apply text-center;
+  @media (min-width: $screen-sm) {
+    width: var(--bloom-width-2-3rd);
+    padding-block-start: var(--bloom-s8);
+    padding-inline-end: var(--bloom-s8);
   }
 }

package/src/blocks/ImageCard.tsx

@@ -20,27 +20,26 @@ export interface ImageTag {
   text?: string
   iconType?: UniversalIconType
   iconColor?: string
+  styleType?: AppearanceStyleType
 }
 
 export interface ImageCardProps {
+  /** A description of the image, used as alt text */
   description?: string
+  /** A link, used to wrap the entire component */
   href?: string
+  /** An image URL, used as the background image */
   imageUrl?: string
+  /** A list of status indicators, an ApplicationStatus component is rendered for each item at the bottom of the card */
   statuses?: StatusBarType[]
+  /** A list of image tags, a Tag component is rendered for each over the image */
   tags?: ImageTag[]
 }
 
 /**
  * @component ImageCard
  *
- * A component that renders an image with optional status bars below it
- *
- * @prop description - A description of the image, used as alt text
- * @prop href - A link, used to wrap the entire component
- * @prop imageUrl - An image URL, used as a background image
- * @prop statuses - A list of status indicators, an ApplicationStatus component is rendered for each item at the bottom of the card
- * @prop tags - A list of image tags, a Tag component is rendered for each over the image
- *
+ * A component that renders an image with optional tags at top and status bars below it
  */
 const ImageCard = (props: ImageCardProps) => {
   const getStatuses = () => {
@@ -61,18 +60,17 @@ const ImageCard = (props: ImageCardProps) => {
   }
 
   const image = (
-    <div className="image-card__wrapper">
+    <div className="image-card">
       <div className="image-card-tag__wrapper">
         {props.tags?.map((tag, index) => {
           return (
             <React.Fragment key={index}>
-              <Tag styleType={AppearanceStyleType.warning} className={"mt-3 mr-2 ml-2"}>
+              <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
                 {tag.iconType && (
                   <Icon
                     size={"medium"}
                     symbol={tag.iconType}
                     fill={tag.iconColor ?? IconFillColors.primary}
-                    className={"mr-2"}
                   />
                 )}
                 {tag.text}
@@ -81,7 +79,7 @@ const ImageCard = (props: ImageCardProps) => {
           )
         })}
       </div>
-      <figure className="image-card">
+      <figure className="image-card__inner">
         {props.imageUrl ? (
           <img src={props.imageUrl} alt={props.description || t("listings.buildingImageAltText")} />
         ) : (

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 {