@bloom-housing/ui-components 9.0.0 → 9.0.2

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from "./src/blocks/StatusBar";
 export * from "./src/blocks/ViewItem";
 export * from "./src/blocks/StandardCard";
 export * from "./src/blocks/MediaCard";
+export * from "./src/blocks/Tooltip";
 export * from "./src/config";
 export * from "./src/footers/ExygyFooter";
 export * from "./src/footers/SiteFooter";

package/dist/index.js

@@ -20,6 +20,7 @@ export * from "./src/blocks/StatusBar";
 export * from "./src/blocks/ViewItem";
 export * from "./src/blocks/StandardCard";
 export * from "./src/blocks/MediaCard";
+export * from "./src/blocks/Tooltip";
 /* Contexts */
 export * from "./src/config";
 /* Footers */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/dist/src/blocks/ImageCard.d.ts

@@ -1,4 +1,5 @@
 import "./ImageCard.scss";
+import { TooltipProps } from "./Tooltip";
 import { ApplicationStatusType } from "../global/ApplicationStatusType";
 import { AppearanceStyleType } from "../global/AppearanceTypes";
 import { UniversalIconType } from "../icons/Icon";
@@ -9,11 +10,13 @@ export interface StatusBarType {
     hideIcon?: boolean;
     iconType?: UniversalIconType;
 }
+export type ImageTagTooltip = Pick<TooltipProps, "id" | "text">;
 export interface ImageTag {
     text?: string;
     iconType?: UniversalIconType;
     iconColor?: string;
     styleType?: AppearanceStyleType;
+    tooltip?: ImageTagTooltip;
 }
 export interface ImageItem {
     url: string;

package/dist/src/blocks/ImageCard.js

@@ -1,8 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React, { useMemo, useState } from "react";
 import { LocalizedLink } from "../actions/LocalizedLink";
 import { ApplicationStatus } from "../notifications/ApplicationStatus";
 import "./ImageCard.scss";
 import { Tag } from "../text/Tag";
+import { Tooltip } from "./Tooltip";
 import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes";
 import { Icon, IconFillColors } from "../icons/Icon";
 import { Modal } from "../overlays/Modal";
@@ -14,14 +26,14 @@ import { t } from "../helpers/translator";
  * A component that renders an image with optional tags at top and status bars below it
  */
 var ImageCard = function (props) {
-    var _a, _b, _c, _d;
-    var _e = useState(false), showModal = _e[0], setShowModal = _e[1];
+    var _a, _b, _c, _d, _e;
+    var _f = useState(false), showModal = _f[0], setShowModal = _f[1];
     var getStatuses = function () {
         var _a;
         var statuses = (_a = props.statuses) === null || _a === void 0 ? void 0 : _a.map(function (status, index) {
             return (React.createElement(ApplicationStatus, { status: status.status, content: status.content, subContent: status.subContent, withIcon: !status.hideIcon, iconType: status.iconType, vivid: true, key: index }));
         });
-        return (React.createElement("aside", { className: "image-card__status", "aria-label": "".concat(props.description || "", " Statuses") }, statuses));
+        return React.createElement("aside", { "aria-label": "".concat(props.description || "", " Statuses") }, statuses);
     };
     var innerClasses = ["image-card__inner"];
     if (props.images && props.images.length > 1) {
@@ -57,21 +69,23 @@ var ImageCard = function (props) {
                         } })))),
             getStatuses(),
             React.createElement("div", { className: "image-card-tag__wrapper" }, (_d = props.tags) === null || _d === void 0 ? void 0 : _d.map(function (tag, index) {
-                var _a;
-                return (React.createElement(React.Fragment, { key: index },
-                    React.createElement(Tag, { styleType: tag.styleType || AppearanceStyleType.warning },
-                        tag.iconType && (React.createElement(Icon, { size: "medium", symbol: tag.iconType, fill: (_a = tag.iconColor) !== null && _a !== void 0 ? _a : IconFillColors.primary })),
-                        tag.text)));
+                var _a, _b;
+                var tagContent = (React.createElement(Tag, { styleType: tag.styleType || AppearanceStyleType.warning, ariaLabel: tag.tooltip ? "".concat(tag.text || "", " - ").concat(((_a = tag.tooltip) === null || _a === void 0 ? void 0 : _a.text) || "") : undefined },
+                    tag.iconType && (React.createElement(Icon, { size: "medium", symbol: tag.iconType, fill: (_b = tag.iconColor) !== null && _b !== void 0 ? _b : IconFillColors.primary, className: "mr-2" })),
+                    tag.text));
+                if (tag.tooltip) {
+                    return (React.createElement(Tooltip, __assign({ key: index, className: "mt-3" }, tag.tooltip), tagContent));
+                }
+                return React.createElement(React.Fragment, { key: index }, tagContent);
             }))),
-        props.images && props.images.length > 1 && (React.createElement(Modal, { open: showModal, title: props.modalAriaTitle || "Images", scrollable: true, onClose: function () { return setShowModal(!showModal); }, className: "image-card__overlay", modalClassNames: "image-card__gallery-modal", headerClassNames: "sr-only", closeIconColor: IconFillColors.white, actions: [
+        props.images && props.images.length > 1 && (React.createElement(Modal, { open: showModal, title: props.modalAriaTitle || "Images", scrollableModal: true, onClose: function () { return setShowModal(!showModal); }, className: "image-card__overlay", modalClassNames: "image-card__gallery-modal", headerClassNames: "sr-only", closeIconColor: IconFillColors.white, actions: [
                 React.createElement(Button, { onClick: function () { return setShowModal(!showModal); }, size: AppearanceSizeType.small }, props.modalCloseLabel || "Close"),
-            ] }, props.images &&
-            props.images.map(function (image, index) { return (React.createElement("p", { key: index, className: "mb-7" },
-                React.createElement("picture", null,
-                    image.mobileUrl && (React.createElement("source", { media: "(max-width: 767px)", srcSet: image.mobileUrl })),
-                    React.createElement("img", { src: image.url, alt: image.description
-                            ? image.description
-                            : "".concat(props.description || "", " - photo ").concat(index + 1) })))); })))));
+            ] }, (_e = props.images) === null || _e === void 0 ? void 0 : _e.map(function (image, index) { return (React.createElement("p", { key: index, className: "mb-7" },
+            React.createElement("picture", null,
+                image.mobileUrl && React.createElement("source", { media: "(max-width: 767px)", srcSet: image.mobileUrl }),
+                React.createElement("img", { src: image.url, alt: image.description
+                        ? image.description
+                        : "".concat(props.description || "", " - photo ").concat(index + 1) })))); })))));
     var card = image;
     if (props.href) {
         card = (React.createElement(LocalizedLink, { className: "block", href: props.href }, image));

package/dist/src/blocks/ImageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCard.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImageCard.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.tsx"],"names":[],"mappings":"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"}

package/dist/src/blocks/ImageCard.stories.d.ts

@@ -23,6 +23,7 @@ export declare const withOneStatusAndSmaller: () => JSX.Element;
 export declare const withDescriptionAsAlt: () => JSX.Element;
 export declare const withOneStatusAndTag: () => JSX.Element;
 export declare const withMultipleTags: () => JSX.Element;
+export declare const withTooltip: () => JSX.Element;
 export declare const withLongTagsAndIcons: () => JSX.Element;
 export declare const withManyTags: () => JSX.Element;
 export declare const withMultipleAppStatus: () => JSX.Element;

package/dist/src/blocks/ImageCard.stories.js

@@ -53,6 +53,23 @@ export var withOneStatusAndSmaller = function () { return (React.createElement(I
 export var withDescriptionAsAlt = function () { return (React.createElement(ImageCard, { imageUrl: "/images/listing.jpg", description: "An image of the building" })); };
 export var withOneStatusAndTag = function () { return (React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg", tags: [{ text: "Label" }], statuses: [{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }] })); };
 export var withMultipleTags = function () { return (React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg", tags: [{ text: "Label" }, { text: "Label2" }], statuses: [{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }] })); };
+export var withTooltip = function () { return (React.createElement("div", { style: { margin: "5rem" } },
+    React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg", tags: [
+            {
+                text: "Label",
+            },
+            {
+                text: "Label2",
+                iconType: "globe",
+                iconColor: IconFillColors.white,
+                tooltip: {
+                    id: "tooltip",
+                    text: "Here is some helpful tooltip content. Here is even more helpful tooltip content.",
+                },
+            },
+        ], statuses: [
+            { status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") },
+        ] }))); };
 export var withLongTagsAndIcons = function () { return (React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg", tags: [
         { text: "This is a long label", iconType: "mail", iconColor: IconFillColors.white },
         { text: "This is another longer label" },

package/dist/src/blocks/ImageCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImageCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/blocks/InfoCard.d.ts

@@ -5,7 +5,7 @@ export interface InfoCardProps {
     subtitle?: string;
     externalHref?: string;
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 declare const InfoCard: (props: InfoCardProps) => JSX.Element;
 export { InfoCard as default, InfoCard };

package/dist/src/blocks/InfoCard.js

@@ -10,7 +10,7 @@ var InfoCard = function (props) {
         React.createElement("div", { className: "info-card__header" },
             props.externalHref ? (React.createElement("h3", { className: "info-card__title" },
                 React.createElement("a", { href: props.externalHref, target: "_blank" }, props.title))) : (React.createElement("h3", { className: "info-card__title" }, props.title)),
-            props.subtitle && React.createElement("span", { className: "text-xs text-gray-700" }, props.subtitle)),
+            props.subtitle && React.createElement("span", { className: "text-sm text-gray-700" }, props.subtitle)),
         typeof props.children == "string" ? (React.createElement("div", { className: "markdown" },
             React.createElement(Markdown, { options: { disableParsingRawHTML: true }, children: props.children }))) : (props.children)));
 };

package/dist/src/blocks/InfoCard.stories.d.ts

@@ -14,5 +14,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => JSX.Element;
+export declare const NoChildren: () => JSX.Element;
 export declare const WithMarkdown: () => JSX.Element;
 export declare const WithChildComponent: () => JSX.Element;

package/dist/src/blocks/InfoCard.stories.js

@@ -15,7 +15,9 @@ export default {
     },
 };
 export var Default = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" }, "\nParagraph content\n\n----\n\nMore content\n      "))); };
+    React.createElement(InfoCard, { title: "My Card", subtitle: "Subtitle", externalHref: "http://google.com", className: "is-normal-primary-lighter" }, "\nParagraph content\n\n----\n\nMore content\n      "))); };
+export var NoChildren = function () { return (React.createElement(React.Fragment, null,
+    React.createElement(InfoCard, { title: "My Card", subtitle: "Subtitle", externalHref: "http://google.com", className: "is-normal-primary-lighter" }))); };
 export var WithMarkdown = function () { return (React.createElement(InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" }, "\n#### Header 4\n\n* A list\n* of items\n      ")); };
 export var WithChildComponent = function () { return (React.createElement(InfoCard, { title: "My Card", externalHref: "http://google.com", className: "is-normal-primary-lighter" },
     React.createElement(ExpandableText, { strings: { readMore: "More", readLess: "Less" } }, "\nText within _another_ component\u2026\n      "))); };

package/dist/src/blocks/InfoCard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/InfoCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,qBAAqB,MAAM,qBAAqB,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,EAAE,EAAE,kBAAkB;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,qBAAqB;SAC5B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B;IACE,oBAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B,IAEpC,qDAMA,CACQ,CACV,CACJ,EAhB4B,CAgB5B,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,mBAAmB,EAAC,SAAS,EAAC,2BAA2B,IAC7F,iDAKE,CACM,CACZ,EATiC,CASjC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,mBAAmB,EAAC,SAAS,EAAC,2BAA2B;IAC9F,oBAAC,cAAc,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAC5D,iDAEA,CACc,CACR,CACZ,EARuC,CAQvC,CAAA"}
+{"version":3,"file":"InfoCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/InfoCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,qBAAqB,MAAM,qBAAqB,CAAA;AAEvD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;IAClF,EAAE,EAAE,kBAAkB;IACtB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,qBAAqB;SAC5B;QACD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC;KACtB;CACF,CAAA;AAED,MAAM,CAAC,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B;IACE,oBAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,UAAU,EACnB,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B,IAEpC,qDAMA,CACQ,CACV,CACJ,EAjB4B,CAiB5B,CAAA;AAED,MAAM,CAAC,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B;IACE,oBAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,UAAU,EACnB,YAAY,EAAC,mBAAmB,EAChC,SAAS,EAAC,2BAA2B,GACrC,CACD,CACJ,EAT+B,CAS/B,CAAA;AAED,MAAM,CAAC,IAAM,YAAY,GAAG,cAAM,OAAA,CAChC,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,mBAAmB,EAAC,SAAS,EAAC,2BAA2B,IAC7F,iDAKE,CACM,CACZ,EATiC,CASjC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,YAAY,EAAC,mBAAmB,EAAC,SAAS,EAAC,2BAA2B;IAC9F,oBAAC,cAAc,IAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAC5D,iDAEA,CACc,CACR,CACZ,EARuC,CAQvC,CAAA"}

package/dist/src/blocks/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./Tooltip.scss";
+export interface TooltipProps {
+    className?: string;
+    id: string;
+    text: string;
+}
+export interface TooltipPosition {
+    top: number;
+    left: number;
+}
+declare const Tooltip: ({ className, id, text, children }: React.PropsWithChildren<TooltipProps>) => JSX.Element;
+export { Tooltip as default, Tooltip };

package/dist/src/blocks/Tooltip.js

@@ -0,0 +1,28 @@
+import React, { useState, useRef, useEffect } from "react";
+import useKeyPress from "../helpers/useKeyPress";
+import "./Tooltip.scss";
+var Tooltip = function (_a) {
+    var className = _a.className, id = _a.id, text = _a.text, children = _a.children;
+    var _b = useState(null), position = _b[0], setPosition = _b[1];
+    var childrenWrapperRef = useRef(null);
+    var show = function () {
+        var _a;
+        var _b = ((_a = childrenWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {}, x = _b.x, y = _b.y, width = _b.width, height = _b.height;
+        if (x && y && width && height) {
+            setPosition({ top: y, left: x + width / 2 });
+        }
+    };
+    var hide = function () { return setPosition(null); };
+    useKeyPress("Escape", function () { return hide(); });
+    useEffect(function () {
+        window.addEventListener("scroll", function () { return hide(); });
+        return function () {
+            window.removeEventListener("scroll", function () { return hide(); });
+        };
+    }, []);
+    return (React.createElement("div", { className: "tooltip ".concat(className || ""), onFocus: show, onMouseEnter: show, onBlur: hide, onMouseLeave: hide },
+        React.createElement("div", { className: "tooltip__element ".concat(position ? "tooltip__element--visible" : ""), style: position || {}, role: "tooltip", id: id, "data-test-id": "tooltip-element" }, text),
+        React.createElement("div", { className: "tooltip__children", "data-test-id": "tooltip-children", ref: childrenWrapperRef }, children)));
+};
+export { Tooltip as default, Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/src/blocks/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/blocks/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,gBAAgB,CAAA;AAavB,IAAM,OAAO,GAAG,UAAC,EAAwE;QAAtE,SAAS,eAAA,EAAE,EAAE,QAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA;IACxC,IAAA,KAA0B,QAAQ,CAAyB,IAAI,CAAC,EAA/D,QAAQ,QAAA,EAAE,WAAW,QAA0C,CAAA;IACtE,IAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEvD,IAAM,IAAI,GAAG;;QACL,IAAA,KAA0B,CAAA,MAAA,kBAAkB,CAAC,OAAO,0CAAE,qBAAqB,EAAE,KAAI,EAAE,EAAjF,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAA8D,CAAA;QAEzF,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,MAAM,EAAE;YAC7B,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,CAAA;SAC7C;IACH,CAAC,CAAA;IAED,IAAM,IAAI,GAAG,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,CAAA;IAEpC,WAAW,CAAC,QAAQ,EAAE,cAAM,OAAA,IAAI,EAAE,EAAN,CAAM,CAAC,CAAA;IAEnC,SAAS,CAAC;QACR,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAM,OAAA,IAAI,EAAE,EAAN,CAAM,CAAC,CAAA;QAE/C,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAM,OAAA,IAAI,EAAE,EAAN,CAAM,CAAC,CAAA;QACpD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BACE,SAAS,EAAE,kBAAW,SAAS,IAAI,EAAE,CAAE,EACvC,OAAO,EAAE,IAAI,EACb,YAAY,EAAE,IAAI,EAClB,MAAM,EAAE,IAAI,EACZ,YAAY,EAAE,IAAI;QAElB,6BACE,SAAS,EAAE,2BAAoB,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAE,EAC5E,KAAK,EAAE,QAAQ,IAAI,EAAE,EACrB,IAAI,EAAC,SAAS,EACd,EAAE,EAAE,EAAE,kBACO,iBAAiB,IAE7B,IAAI,CACD;QAEN,6BAAK,SAAS,EAAC,mBAAmB,kBAAc,kBAAkB,EAAC,GAAG,EAAE,kBAAkB,IACvF,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/src/blocks/ViewItem.js

@@ -12,7 +12,7 @@ var ViewItem = function (props) {
     if (props.truncated)
         valueClassName += " is-truncated";
     return (React.createElement("div", { id: props.id, className: viewItemClasses.join(" "), "data-test-id": props.dataTestId },
-        props.label && (React.createElement("span", { className: "view-item__label ".concat(props.error ? "text-alert text-sm" : "") }, props.label)),
+        props.label && (React.createElement("span", { className: "view-item__label ".concat(props.error ? "view-item__label-error" : "") }, props.label)),
         props.children && (React.createElement("span", { className: valueClassName, "data-test-id": props.dataTestId }, props.children)),
         props.helper && React.createElement("span", { className: "view-item__helper" }, props.helper)));
 };

package/dist/src/blocks/ViewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewItem.js","sourceRoot":"","sources":["../../../src/blocks/ViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAcxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IACpC,IAAM,eAAe,GAAG,CAAC,WAAW,CAAC,CAAA;IACrC,IAAI,KAAK,CAAC,OAAO;QAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACrD,IAAI,KAAK,CAAC,SAAS;QAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAE1D,IAAI,cAAc,GAAG,kBAAkB,CAAA;IACvC,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,cAAc,IAAI,OAAO,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,cAAc,IAAI,eAAe,CAAA;IAEtD,OAAO,CACL,6BAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAgB,KAAK,CAAC,UAAU;QACpF,KAAK,CAAC,KAAK,IAAI,CACd,8BAAM,SAAS,EAAE,2BAAoB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAE,IAC3E,KAAK,CAAC,KAAK,CACP,CACR;QACA,KAAK,CAAC,QAAQ,IAAI,CACjB,8BAAM,SAAS,EAAE,cAAc,kBAAgB,KAAK,CAAC,UAAU,IAC5D,KAAK,CAAC,QAAQ,CACV,CACR;QACA,KAAK,CAAC,MAAM,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,MAAM,CAAQ,CACtE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"ViewItem.js","sourceRoot":"","sources":["../../../src/blocks/ViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,iBAAiB,CAAA;AAcxB,IAAM,QAAQ,GAAG,UAAC,KAAoB;IACpC,IAAM,eAAe,GAAG,CAAC,WAAW,CAAC,CAAA;IACrC,IAAI,KAAK,CAAC,OAAO;QAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACrD,IAAI,KAAK,CAAC,SAAS;QAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAE1D,IAAI,cAAc,GAAG,kBAAkB,CAAA;IACvC,IAAI,CAAC,KAAK,CAAC,KAAK;QAAE,cAAc,IAAI,OAAO,CAAA;IAC3C,IAAI,KAAK,CAAC,SAAS;QAAE,cAAc,IAAI,eAAe,CAAA;IAEtD,OAAO,CACL,6BAAK,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAgB,KAAK,CAAC,UAAU;QACpF,KAAK,CAAC,KAAK,IAAI,CACd,8BAAM,SAAS,EAAE,2BAAoB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAE,IAC/E,KAAK,CAAC,KAAK,CACP,CACR;QACA,KAAK,CAAC,QAAQ,IAAI,CACjB,8BAAM,SAAS,EAAE,cAAc,kBAAgB,KAAK,CAAC,UAAU,IAC5D,KAAK,CAAC,QAAQ,CACV,CACR;QACA,KAAK,CAAC,MAAM,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAC,MAAM,CAAQ,CACtE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/src/page_components/listing/AdditionalFees.stories.d.ts

@@ -10,3 +10,4 @@ export declare const allFieldsAndFooterNotIncluded: () => JSX.Element;
 export declare const justDepositRange: () => JSX.Element;
 export declare const justApplicationFee: () => JSX.Element;
 export declare const costsNotIncluded: () => JSX.Element;
+export declare const multipleFooters: () => JSX.Element;

package/dist/src/page_components/listing/AdditionalFees.stories.js

@@ -64,4 +64,7 @@ export var costsNotIncluded = function () {
             "Resident responsible for PG&E, internet and phone.  Owner pays for water, trash, and sewage.  Residents encouraged to obtain renter's insurance but this is not a requirement.  Rent is due by the 5th of each month. Late fee $35 and returned check fee is $35 additional.",
         ] }));
 };
+export var multipleFooters = function () {
+    return React.createElement(AdditionalFees, { strings: strings, footerContent: ["Footer 1", "Footer 2", "Footer 3"] });
+};
 //# sourceMappingURL=AdditionalFees.stories.js.map

package/dist/src/page_components/listing/AdditionalFees.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalFees.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/AdditionalFees.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,IAAM,OAAO,GAAG;IACd,aAAa,EAAE,iBAAiB;IAChC,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,iBAAiB;CAClC,CAAA;AACD,MAAM,CAAC,IAAM,2BAA2B,GAAG;IACzC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,gBAAgB,EACzB,cAAc,EAAE,KAAK,EACrB,aAAa,EAAE;YACb;gBACE,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC,CACF;YACL,oDAAoD;YACpD,wHAAwH;YACxH,wDAAwD;SACzD,EACD,OAAO,EAAE,OAAO,GAChB,CACH,CAAA;AACH,CAAC,CAAA;AACD,MAAM,CAAC,IAAM,4BAA4B,GAAG;IAC1C,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,eAAe,EACxB,cAAc,EAAE,KAAK,EACrB,aAAa,EAAE;YACb;gBACE,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC,CACF;YACL,oDAAoD;YACpD,+KAA+K;SAChL,EACD,OAAO,EAAE,OAAO,GAChB,CACH,CAAA;AACH,CAAC,CAAA;AACD,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACxC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,eAAe,EACxB,cAAc,EAAE,KAAK,EACrB,aAAa,EAAE;YACb;gBACE,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC;gBACL,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,uBAAuB,YAEzC,CACF;YACL,oDAAoD;SACrD,EACD,OAAO,wBACF,OAAO,KACV,qBAAqB,EAAE,CAAC,+BAA+B,EAAE,kBAAkB,CAAC,EAC5E,cAAc,EAAE,CAAC,qBAAqB,EAAE,uCAAuC,CAAC,MAElF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,6BAA6B,GAAG;IAC3C,OAAO,oBAAC,cAAc,IAAC,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;AAC9F,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,oBAAC,cAAc,IAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;AACvE,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,OAAO,oBAAC,cAAc,IAAC,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;AACpE,CAAC,CAAA;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE;YACb,8QAA8Q;SAC/Q,GACD,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"AdditionalFees.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/AdditionalFees.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/sections/InfoCardGrid.js

@@ -3,7 +3,7 @@ import { Heading } from "../text/Heading";
 import "./InfoCardGrid.scss";
 var InfoCardGrid = function (props) { return (React.createElement("section", { className: "info-cards" },
     React.createElement("header", { className: "info-cards__header" },
-        React.createElement(Heading, { styleType: "underlineWeighted", priority: 2, className: "text-sm" }, props.title),
+        React.createElement(Heading, { styleType: "underlineWeighted", priority: 2, className: "info-cards__title" }, props.title),
         props.subtitle && React.createElement("p", { className: "info-cards__subtitle" }, props.subtitle)),
     React.createElement("div", { className: "info-cards__grid" }, props.children))); };
 export { InfoCardGrid as default, InfoCardGrid };

package/dist/src/sections/InfoCardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCardGrid.js","sourceRoot":"","sources":["../../../src/sections/InfoCardGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAQ5B,IAAM,YAAY,GAAG,UAAC,KAAwB,IAAK,OAAA,CACjD,iCAAS,SAAS,EAAC,YAAY;IAC7B,gCAAQ,SAAS,EAAC,oBAAoB;QACpC,oBAAC,OAAO,IAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,IACvE,KAAK,CAAC,KAAK,CACJ;QACT,KAAK,CAAC,QAAQ,IAAI,2BAAG,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,CAAK,CACpE;IACT,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,QAAQ,CAAO,CAChD,CACX,EAVkD,CAUlD,CAAA;AAED,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"InfoCardGrid.js","sourceRoot":"","sources":["../../../src/sections/InfoCardGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,qBAAqB,CAAA;AAQ5B,IAAM,YAAY,GAAG,UAAC,KAAwB,IAAK,OAAA,CACjD,iCAAS,SAAS,EAAC,YAAY;IAC7B,gCAAQ,SAAS,EAAC,oBAAoB;QACpC,oBAAC,OAAO,IAAC,SAAS,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,mBAAmB,IACjF,KAAK,CAAC,KAAK,CACJ;QACT,KAAK,CAAC,QAAQ,IAAI,2BAAG,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,QAAQ,CAAK,CACpE;IACT,6BAAK,SAAS,EAAC,kBAAkB,IAAE,KAAK,CAAC,QAAQ,CAAO,CAChD,CACX,EAVkD,CAUlD,CAAA;AAED,OAAO,EAAE,YAAY,IAAI,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/src/text/Tag.d.ts

@@ -7,5 +7,6 @@ export interface TagProps extends AppearanceProps {
     capitalized?: boolean;
     children: React.ReactNode;
     fillContainer?: boolean;
+    ariaLabel?: string;
 }
 export declare const Tag: (props: TagProps) => JSX.Element;

package/dist/src/text/Tag.js

@@ -11,6 +11,6 @@ export var Tag = function (props) {
         tagClasses.push("is-capitalized");
     if (props.className)
         tagClasses.push(props.className);
-    return React.createElement("span", { className: tagClasses.join(" ") }, props.children);
+    return (React.createElement("span", { className: tagClasses.join(" "), "aria-label": props.ariaLabel || undefined }, props.children));
 };
 //# sourceMappingURL=Tag.js.map

package/dist/src/text/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/text/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AACzF,OAAO,YAAY,CAAA;AAUnB,MAAM,CAAC,IAAM,GAAG,GAAG,UAAC,KAAe;IACjC,IAAM,UAAU,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAA;IAEtE,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC/C,IAAI,KAAK,CAAC,aAAa;QAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC1D,IAAI,KAAK,CAAC,WAAW;QAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IACxD,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAErD,OAAO,8BAAM,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAC,QAAQ,CAAQ,CAAA;AACvE,CAAC,CAAA"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/text/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAmB,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AACzF,OAAO,YAAY,CAAA;AAWnB,MAAM,CAAC,IAAM,GAAG,GAAG,UAAC,KAAe;IACjC,IAAM,UAAU,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAA;IAEtE,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC/C,IAAI,KAAK,CAAC,aAAa;QAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAC1D,IAAI,KAAK,CAAC,WAAW;QAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IACxD,IAAI,KAAK,CAAC,SAAS;QAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAErD,OAAO,CACL,8BAAM,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAc,KAAK,CAAC,SAAS,IAAI,SAAS,IAC5E,KAAK,CAAC,QAAQ,CACV,CACR,CAAA;AACH,CAAC,CAAA"}

package/index.ts

@@ -21,6 +21,7 @@ export * from "./src/blocks/StatusBar"
 export * from "./src/blocks/ViewItem"
 export * from "./src/blocks/StandardCard"
 export * from "./src/blocks/MediaCard"
+export * from "./src/blocks/Tooltip"
 
 /* Contexts */
 export * from "./src/config"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
   "homepage": "https://github.com/bloom-housing/ui-components",

package/src/blocks/ImageCard.scss

@@ -1,4 +1,5 @@
 @import "../global/mixins.scss";
+@import "../global/accessibility.scss";
 
 .image-card {
   /* Component Variables */
@@ -18,6 +19,11 @@
   background-color: var(--default-background-color);
   border-radius: var(--border-radius);
 
+  button:focus {
+    outline: none;
+    box-shadow: 0 0 3px 4px var(--bloom-color-accent-cool);
+  }
+
   img {
     border-radius: var(--border-radius);
     width: 100%;
@@ -98,7 +104,8 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
+      color: var(--bloom-color-white);
+      background: rgba(0, 0, 0, 0.6);
       @media (max-width: $screen-sm) {
         font-size: var(--bloom-font-size-xs);
         line-height: var(--bloom-line-height-none);
@@ -119,6 +126,7 @@
   justify-content: var(--tags-justify);
   position: absolute;
   top: 0;
+  z-index: 10;
   width: 100%;
   margin-block-start: var(--bloom-s1);
   padding-inline: var(--bloom-s4);
@@ -157,4 +165,22 @@
   --footer-justify: center;
   --modal-border: none;
   --modal-shadow: none;
+  @media (min-width: $screen-md) {
+    --scroll-max-height: calc(80vh - 200px);
+    max-width: var(--bloom-width-5xl);
+  }
+  section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  button {
+    outline: none;
+  }
+  svg {
+    @extend .sr-only;
+  }
+  footer button:focus {
+    box-shadow: 0 0 3px 4px var(--bloom-color-accent-cool);
+  }
 }

package/src/blocks/ImageCard.stories.tsx

@@ -3,7 +3,7 @@ import { BADGES } from "../../.storybook/constants"
 import { ImageCard } from "./ImageCard"
 import { t } from "../helpers/translator"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
-import { IconFillColors } from "../icons/Icon"
+import { IconFillColors, UniversalIconType } from "../icons/Icon"
 import ImageCardDocumentation from "./ImageCard.docs.mdx"
 
 export default {
@@ -103,6 +103,32 @@ export const withMultipleTags = () => (
   />
 )
 
+export const withTooltip = () => (
+  <div style={{ margin: "5rem" }}>
+    <ImageCard
+      href="/listings"
+      imageUrl="/images/listing.jpg"
+      tags={[
+        {
+          text: "Label",
+        },
+        {
+          text: "Label2",
+          iconType: "globe" as UniversalIconType,
+          iconColor: IconFillColors.white,
+          tooltip: {
+            id: "tooltip",
+            text: "Here is some helpful tooltip content. Here is even more helpful tooltip content.",
+          },
+        },
+      ]}
+      statuses={[
+        { status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") },
+      ]}
+    />
+  </div>
+)
+
 export const withLongTagsAndIcons = () => (
   <ImageCard
     href="/listings"

package/src/blocks/ImageCard.tsx

@@ -3,6 +3,7 @@ import { LocalizedLink } from "../actions/LocalizedLink"
 import { ApplicationStatus } from "../notifications/ApplicationStatus"
 import "./ImageCard.scss"
 import { Tag } from "../text/Tag"
+import { TooltipProps, Tooltip } from "./Tooltip"
 import { ApplicationStatusType } from "../global/ApplicationStatusType"
 import { AppearanceSizeType, AppearanceStyleType } from "../global/AppearanceTypes"
 import { Icon, IconFillColors, UniversalIconType } from "../icons/Icon"
@@ -18,11 +19,14 @@ export interface StatusBarType {
   iconType?: UniversalIconType
 }
 
+export type ImageTagTooltip = Pick<TooltipProps, "id" | "text">
+
 export interface ImageTag {
   text?: string
   iconType?: UniversalIconType
   iconColor?: string
   styleType?: AppearanceStyleType
+  tooltip?: ImageTagTooltip
 }
 
 export interface ImageItem {
@@ -80,11 +84,7 @@ const ImageCard = (props: ImageCardProps) => {
         />
       )
     })
-    return (
-      <aside className="image-card__status" aria-label={`${props.description || ""} Statuses`}>
-        {statuses}
-      </aside>
-    )
+    return <aside aria-label={`${props.description || ""} Statuses`}>{statuses}</aside>
   }
 
   const innerClasses = ["image-card__inner"]
@@ -158,20 +158,34 @@ const ImageCard = (props: ImageCardProps) => {
         {getStatuses()}
         <div className="image-card-tag__wrapper">
           {props.tags?.map((tag, index) => {
-            return (
-              <React.Fragment key={index}>
-                <Tag styleType={tag.styleType || AppearanceStyleType.warning}>
-                  {tag.iconType && (
-                    <Icon
-                      size={"medium"}
-                      symbol={tag.iconType}
-                      fill={tag.iconColor ?? IconFillColors.primary}
-                    />
-                  )}
-                  {tag.text}
-                </Tag>
-              </React.Fragment>
+            const tagContent = (
+              <Tag
+                styleType={tag.styleType || AppearanceStyleType.warning}
+                ariaLabel={
+                  tag.tooltip ? `${tag.text || ""} - ${tag.tooltip?.text || ""}` : undefined
+                }
+              >
+                {tag.iconType && (
+                  <Icon
+                    size={"medium"}
+                    symbol={tag.iconType}
+                    fill={tag.iconColor ?? IconFillColors.primary}
+                    className={"mr-2"}
+                  />
+                )}
+                {tag.text}
+              </Tag>
             )
+
+            if (tag.tooltip) {
+              return (
+                <Tooltip key={index} className="mt-3" {...tag.tooltip}>
+                  {tagContent}
+                </Tooltip>
+              )
+            }
+
+            return <React.Fragment key={index}>{tagContent}</React.Fragment>
           })}
         </div>
       </div>
@@ -179,7 +193,7 @@ const ImageCard = (props: ImageCardProps) => {
         <Modal
           open={showModal}
           title={props.modalAriaTitle || "Images"}
-          scrollable={true}
+          scrollableModal={true}
           onClose={() => setShowModal(!showModal)}
           className="image-card__overlay"
           modalClassNames="image-card__gallery-modal"
@@ -191,24 +205,21 @@ const ImageCard = (props: ImageCardProps) => {
             </Button>,
           ]}
         >
-          {props.images &&
-            props.images.map((image, index) => (
-              <p key={index} className="mb-7">
-                <picture>
-                  {image.mobileUrl && (
-                    <source media="(max-width: 767px)" srcSet={image.mobileUrl} />
-                  )}
-                  <img
-                    src={image.url}
-                    alt={
-                      image.description
-                        ? image.description
-                        : `${props.description || ""} - photo ${index + 1}`
-                    }
-                  />
-                </picture>
-              </p>
-            ))}
+          {props.images?.map((image, index) => (
+            <p key={index} className="mb-7">
+              <picture>
+                {image.mobileUrl && <source media="(max-width: 767px)" srcSet={image.mobileUrl} />}
+                <img
+                  src={image.url}
+                  alt={
+                    image.description
+                      ? image.description
+                      : `${props.description || ""} - photo ${index + 1}`
+                  }
+                />
+              </picture>
+            </p>
+          ))}
         </Modal>
       )}
     </>

package/src/blocks/InfoCard.scss

@@ -46,3 +46,21 @@
     margin-bottom: var(--bloom-s4);
   }
 }
+
+.info-card__columns {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.info-card__column {
+  flex: 1 1 0%;
+}
+
+.info-card__column-2 {
+  flex: 1 1 100%;
+  margin-top: var(--bloom-s4);
+  margin-right: var(--bloom-s4);
+  @media (min-width: 440px) {
+    flex: 1 1 45%;
+  }
+}

package/src/blocks/InfoCard.stories.tsx

@@ -20,6 +20,7 @@ export const Default = () => (
   <>
     <InfoCard
       title="My Card"
+      subtitle="Subtitle"
       externalHref="http://google.com"
       className="is-normal-primary-lighter"
     >
@@ -34,6 +35,17 @@ More content
   </>
 )
 
+export const NoChildren = () => (
+  <>
+    <InfoCard
+      title="My Card"
+      subtitle="Subtitle"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    />
+  </>
+)
+
 export const WithMarkdown = () => (
   <InfoCard title="My Card" externalHref="http://google.com" className="is-normal-primary-lighter">
     {`

package/src/blocks/InfoCard.tsx

@@ -7,7 +7,7 @@ export interface InfoCardProps {
   subtitle?: string
   externalHref?: string
   className?: string
-  children: React.ReactNode
+  children?: React.ReactNode
 }
 
 const InfoCard = (props: InfoCardProps) => {
@@ -28,7 +28,7 @@ const InfoCard = (props: InfoCardProps) => {
         ) : (
           <h3 className="info-card__title">{props.title}</h3>
         )}
-        {props.subtitle && <span className={"text-xs text-gray-700"}>{props.subtitle}</span>}
+        {props.subtitle && <span className={"text-sm text-gray-700"}>{props.subtitle}</span>}
       </div>
       {typeof props.children == "string" ? (
         <div className="markdown">

package/src/blocks/Tooltip.scss

@@ -0,0 +1,43 @@
+.tooltip {
+  @apply relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+.tooltip__element {
+  @apply w-full;
+  @apply fixed;
+  @apply bg-primary-dark;
+  @apply text-white;
+  @apply rounded;
+  @apply p-2;
+  @apply text-sm;
+  @apply font-bold;
+  @apply text-center;
+  @apply normal-case;
+  @apply opacity-0;
+  @apply invisible;
+  transform: translate(-50%, calc(-100% - 10px * 2));
+
+  max-width: 280px;
+  transition: opacity 0.2s;
+
+  &--visible {
+    @apply opacity-100;
+    @apply visible;
+  }
+
+  &::before {
+    content: "";
+    @apply absolute;
+    @apply bottom-0;
+    @apply w-0;
+    @apply h-0;
+    @apply border-solid;
+    left: 50%;
+    bottom: -8px;
+    transform: translateX(-50%);
+    border-width: 10px 7px 0 7px;
+    border-color: theme("colors.primary-dark") transparent transparent transparent;
+  }
+}

package/src/blocks/Tooltip.tsx

@@ -0,0 +1,65 @@
+import React, { useState, useRef, useEffect } from "react"
+import useKeyPress from "../helpers/useKeyPress"
+import "./Tooltip.scss"
+
+export interface TooltipProps {
+  className?: string
+  id: string
+  text: string
+}
+
+export interface TooltipPosition {
+  top: number
+  left: number
+}
+
+const Tooltip = ({ className, id, text, children }: React.PropsWithChildren<TooltipProps>) => {
+  const [position, setPosition] = useState<TooltipPosition | null>(null)
+  const childrenWrapperRef = useRef<HTMLDivElement>(null)
+
+  const show = () => {
+    const { x, y, width, height } = childrenWrapperRef.current?.getBoundingClientRect() || {}
+
+    if (x && y && width && height) {
+      setPosition({ top: y, left: x + width / 2 })
+    }
+  }
+
+  const hide = () => setPosition(null)
+
+  useKeyPress("Escape", () => hide())
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => hide())
+
+    return () => {
+      window.removeEventListener("scroll", () => hide())
+    }
+  }, [])
+
+  return (
+    <div
+      className={`tooltip ${className || ""}`}
+      onFocus={show}
+      onMouseEnter={show}
+      onBlur={hide}
+      onMouseLeave={hide}
+    >
+      <div
+        className={`tooltip__element ${position ? "tooltip__element--visible" : ""}`}
+        style={position || {}}
+        role="tooltip"
+        id={id}
+        data-test-id="tooltip-element"
+      >
+        {text}
+      </div>
+
+      <div className="tooltip__children" data-test-id="tooltip-children" ref={childrenWrapperRef}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { Tooltip as default, Tooltip }

package/src/blocks/ViewItem.scss

@@ -1,59 +1,71 @@
 @import "../global/mixins.scss";
 
 .view-item {
-  @apply relative;
-  @apply text-base;
-  @apply mb-4;
+  --label-font-size: var(--bloom-font-size-sm);
+  --helper-font-size: var(--bloom-font-size-sm);
+  --label-error-font-size: var(--bloom-font-size-sm);
+  --label-text-color: var(--bloom-color-gray-800);
+  --helper-text-color: var(--bloom-color-gray-750);
+  --font-size: var(--bloom-font-size-base);
+  --bottom-margin: var(--bloom-s4);
+
+  font-size: var(--font-size);
+  margin-bottom: var(--bottom-margin);
+  position: relative;
 
   &:last-of-type {
-    @apply mb-0;
+    margin-bottom: 0;
   }
 
   &.is-flagged {
-    @apply bg-warn-light;
-    @apply -my-1;
-    @apply py-1;
-    @apply -ml-8;
-    @apply pl-8;
-    box-shadow: inset 2px 0px 0px 0px $tailwind-warn;
+    background-color: var(--bloom-color-warn-light);
+    margin: calc(var(--bloom-s1) * -1) 0;
+    margin-left: calc(var(--bloom-s8) * -1);
+    padding: var(--bloom-s1) 0;
+    padding-left: var(--bloom-s8);
+    box-shadow: inset 2px 0px 0px 0px var(--bloom-color-warn);
   }
 
   .edit-link {
-    @apply absolute;
+    position: absolute;
     right: 0;
     top: 0;
   }
 }
 
 .view-item__label {
-  @apply text-gray-800;
-  @apply font-sans;
-  @apply text-sm;
-  @apply block;
+  color: var(--label-text-color);
+  font-family: var(--bloom-font-sans);
+  font-size: var(--label-font-size);
+  display: block;
+}
+
+.view-item__label-error {
+  color: var(--bloom-color-alert);
+  font-size: var(--label-error-font-size);
 }
 
 .view-item__value {
-  @apply font-alt-sans;
-  @apply tracking-wide;
-  @apply font-semibold;
-  @apply block;
+  font-family: var(--bloom-font-alt-sans);
+  letter-spacing: var(--bloom-letter-spacing-wide);
+  font-weight: 600;
+  display: block;
   padding-top: 10px;
 
   &.is-truncated {
     @include ellipsis;
   }
 
-  // do not change font-family for inputs
   .field .control .input,
   .error-message {
-    @apply font-sans;
-    @apply font-normal;
+    font-family: var(--bloom-font-sans);
+    font-weight: 400;
   }
 }
 
 .view-item__helper {
-  @apply text-gray-750;
-  @apply font-sans;
-  @apply text-sm;
-  @apply block;
+  color: var(--helper-text-color);
+  font-family: var(--bloom-font-sans);
+  font-size: var(--helper-font-size);
+  display: block;
 }

package/src/blocks/ViewItem.tsx

@@ -25,7 +25,7 @@ const ViewItem = (props: ViewItemProps) => {
   return (
     <div id={props.id} className={viewItemClasses.join(" ")} data-test-id={props.dataTestId}>
       {props.label && (
-        <span className={`view-item__label ${props.error ? "text-alert text-sm" : ""}`}>
+        <span className={`view-item__label ${props.error ? "view-item__label-error" : ""}`}>
           {props.label}
         </span>
       )}

package/src/page_components/listing/AdditionalFees.stories.tsx

@@ -111,3 +111,7 @@ export const costsNotIncluded = () => {
     />
   )
 }
+
+export const multipleFooters = () => {
+  return <AdditionalFees strings={strings} footerContent={["Footer 1", "Footer 2", "Footer 3"]} />
+}

package/src/sections/InfoCardGrid.scss

@@ -1,5 +1,11 @@
+.info-cards {
+  --header-margin: var(--bloom-s3) 0 var(--bloom-s3) 0;
+  --title-font-size: var(--bloom-font-size-sm);
+  --info-card-font-size: var(--bloom-font-size-sm);
+}
+
 .info-cards__header {
-  @apply my-3;
+  margin: var(--header-margin);
 
   @screen md {
     margin-right: 1rem;
@@ -7,18 +13,7 @@
 }
 
 .info-cards__title {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-sm;
-  @apply mb-5;
-  @apply pb-2;
-  @apply border-0;
-  @apply border-b-4;
-  @apply border-primary;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply tracking-widest;
-  @apply inline-block;
+  font-size: var(--title-font-size);
 }
 
 .info-cards__subtitle {
@@ -30,16 +25,17 @@
   @screen md {
     @apply flex;
     @apply flex-wrap;
+    column-gap: 1rem;
   }
 
   .info-card {
     & > :not(.info-card__title) {
-      @apply text-sm;
+      font-size: var(--info-card-font-size);
     }
 
     @screen md {
-      width: calc(50% - 1rem);
-      margin-right: 1rem;
+      width: calc(50% - 0.5rem);
+      margin-right: auto;
     }
   }
 }

package/src/sections/InfoCardGrid.tsx

@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading styleType={"underlineWeighted"} priority={2} className={"text-sm"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"info-cards__title"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}

package/src/text/Tag.tsx

@@ -8,6 +8,7 @@ export interface TagProps extends AppearanceProps {
   capitalized?: boolean
   children: React.ReactNode
   fillContainer?: boolean
+  ariaLabel?: string
 }
 
 export const Tag = (props: TagProps) => {
@@ -18,5 +19,9 @@ export const Tag = (props: TagProps) => {
   if (props.capitalized) tagClasses.push("is-capitalized")
   if (props.className) tagClasses.push(props.className)
 
-  return <span className={tagClasses.join(" ")}>{props.children}</span>
+  return (
+    <span className={tagClasses.join(" ")} aria-label={props.ariaLabel || undefined}>
+      {props.children}
+    </span>
+  )
 }