@bloom-housing/ui-components 7.1.0 → 7.2.1

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

@@ -0,0 +1,286 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detroitStyle = exports.CustomFooter = exports.MultipleSpreadFooterButtons = exports.MultipleFooterButtons = exports.CustomContent = exports.NoContent = exports.WithHeadersContent = exports.WithTagsAndHeaders = exports.WithTags = exports.WithPillHeader = exports.WithHeaders = exports.withStackedTable = exports.WithStandardTable = void 0;
+var React = __importStar(require("react"));
+var __1 = require("../../..");
+var constants_1 = require("../../../.storybook/constants");
+var LinkButton_1 = __importDefault(require("../../actions/LinkButton"));
+var Icon_1 = __importDefault(require("../../icons/Icon"));
+var ListingCard_1 = require("./ListingCard");
+var ListingCard_docs_mdx_1 = __importDefault(require("./ListingCard.docs.mdx"));
+exports.default = {
+    title: "Listing/ListingCard 🚩",
+    id: "page-components/listing-card",
+    component: ListingCard_1.ListingCard,
+    parameters: {
+        docs: {
+            page: ListingCard_docs_mdx_1.default,
+        },
+        badges: [constants_1.BADGES.GEN2],
+    },
+};
+var standardImageCardProps = {
+    imageUrl: "/images/listing.jpg",
+    href: "listing-link",
+    tags: [{ text: "reserved community tag" }],
+    statuses: [{ content: "status content" }],
+};
+var standardTableProps = {
+    headers: {
+        unitType: "t.unitType",
+        minimumIncome: "t.incomeRange",
+        rent: "t.rent",
+    },
+    data: [
+        {
+            unitType: { content: "Row 1 cellA" },
+            minimumIncome: { content: "Row 1 cellB" },
+            rent: { content: React.createElement("strong", null, "Row 1 cellC") },
+        },
+        {
+            unitType: { content: "Row 2 cellA" },
+            minimumIncome: { content: "Row 2 cellB" },
+            rent: { content: React.createElement("strong", null, "Row 2 cellC") },
+        },
+    ],
+    responsiveCollapse: true,
+};
+var WithStandardTable = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link" }] }));
+};
+exports.WithStandardTable = WithStandardTable;
+var withStackedTable = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: {
+            imageUrl: "/images/listing.jpg",
+            href: "listing-link",
+            tags: [{ text: "reserved community tag" }],
+            statuses: [{ content: "status content" }],
+        }, tableProps: {
+            headers: {
+                units: { name: "t.unitType" },
+                availability: { name: "t.availability" },
+                income: { name: "t.incomeRange" },
+                rent: { name: "t.rent" },
+            },
+            stackedData: [
+                {
+                    units: {
+                        cellText: "Studio",
+                        cellSubText: "23 available",
+                        hideSubTextMobile: true,
+                    },
+                    availability: { cellText: "23", cellSubText: "available" },
+                    income: { cellText: "$0 to $6,854", cellSubText: "per month" },
+                    rent: { cellText: "30%", cellSubText: "income" },
+                },
+                {
+                    units: { cellText: "1 BR", cellSubText: "3 available" },
+                    availability: { cellText: "3", cellSubText: "available" },
+                    income: { cellText: "$2,194 to $6,854", cellSubText: "per month" },
+                    rent: { cellText: "$1,295", cellSubText: "income" },
+                },
+            ],
+            headersHiddenDesktop: ["availability"],
+        }, footerButtons: [{ text: "See Details", href: "see-details-link" }], stackedTable: true }));
+};
+exports.withStackedTable = withStackedTable;
+var WithHeaders = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign(__assign({}, standardImageCardProps), { href: undefined }), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link", ariaHidden: true }], contentProps: {
+            contentHeader: {
+                content: "Optional content header",
+                href: "listing-link",
+            },
+            contentSubheader: { content: "Optional content subheader" },
+            tableHeader: { content: "Optional table header" },
+            tableSubheader: { content: "Optional table subheader" },
+        } }));
+};
+exports.WithHeaders = WithHeaders;
+var WithPillHeader = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign(__assign({}, standardImageCardProps), { href: undefined }), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link", ariaHidden: true }], contentProps: {
+            contentHeader: {
+                content: "Optional content header",
+                href: "listing-link",
+            },
+            contentSubheader: { content: "Optional content subheader" },
+            tableHeader: { content: "Optional table header", isPillType: true },
+            tableSubheader: { content: "Optional table subheader" },
+        } }));
+};
+exports.WithPillHeader = WithPillHeader;
+var WithTags = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link" }], contentProps: {
+            contentHeader: { content: "Optional content header" },
+            contentSubheader: { content: "Optional content subheader" },
+        }, cardTags: [
+            { text: "Tag 1 text" },
+            { text: "Tag 2 text" },
+            { text: "A tag with a longer name" },
+        ] }));
+};
+exports.WithTags = WithTags;
+var WithTagsAndHeaders = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link" }], contentProps: {
+            contentHeader: { content: "Optional content header" },
+            contentSubheader: { content: "Optional content subheader" },
+            tableHeader: { content: "Optional table header" },
+            tableSubheader: { content: "Optional table subheader" },
+        }, cardTags: [
+            { text: "Tag 1 text" },
+            { text: "Tag 2 text" },
+            { text: "A tag with a longer name" },
+        ] }));
+};
+exports.WithTagsAndHeaders = WithTagsAndHeaders;
+var WithHeadersContent = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link" }], contentProps: {
+            contentHeader: { content: "Property Listing" },
+            contentSubheader: { content: "Street Address, Local City ST 12345" },
+            tableHeader: { content: "Open Waitlist & Available Units" },
+            tableSubheader: {
+                content: "Includes priority units for mobility impairments",
+            },
+        } }));
+};
+exports.WithHeadersContent = WithHeadersContent;
+var NoContent = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: {
+            imageUrl: "/images/listing.jpg",
+            href: "listing-link",
+        } }));
+};
+exports.NoContent = NoContent;
+var exampleCustomContent = function () {
+    var getHeader = function (header) {
+        return (React.createElement("div", { className: "font-sans font-semibold text-base uppercase text-gray-750 tracking-wider border-0 border-b pb-2 mb-2 md:mt-4" }, header));
+    };
+    var getContentRow = function (prefix, content) {
+        return (React.createElement("div", null,
+            React.createElement("span", { className: "font-semibold" }, prefix),
+            " ",
+            content));
+    };
+    return (React.createElement("div", { className: "text-gray-750" },
+        React.createElement("div", { className: "font-alt-sans font-semibold text-base mb-2 text-gray-900" }, "Available units"),
+        getHeader("Units"),
+        getContentRow("2BR:", "2 available"),
+        getContentRow("3BR:", "5 available"),
+        getContentRow("4BR:", "1 available"),
+        getHeader("Payments"),
+        React.createElement("div", null, "No down payment, but you do need to complete 500 hours of sweat equity. Your monthly payment will be 30% of your income."),
+        React.createElement("div", { className: "mt-4  border-0 border-b pb-2 mb-2" }, "You will need to attend an information session.")));
+};
+var CustomContent = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: {
+            imageUrl: "/images/listing.jpg",
+            href: "listing-link",
+            tags: [{ text: "Habitat for Humanity" }],
+            statuses: [{ content: "status content" }],
+        }, footerButtons: [{ text: "See Details", href: "see-details-link" }] }, exampleCustomContent()));
+};
+exports.CustomContent = CustomContent;
+var MultipleFooterButtons = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [
+            { text: "See Details", href: "see-details-link" },
+            { text: "Apply", href: "apply-link" },
+        ], contentProps: {
+            tableHeader: { content: "Optional table header" },
+            tableSubheader: { content: "Optional table subheader" },
+        } }));
+};
+exports.MultipleFooterButtons = MultipleFooterButtons;
+var MultipleSpreadFooterButtons = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerButtons: [
+            { text: "See Details", href: "see-details-link" },
+            { text: "Apply", href: "apply-link" },
+        ], footerContainerClass: "flex justify-between", contentProps: {
+            tableHeader: { content: "Optional table header" },
+            tableSubheader: { content: "Optional table subheader" },
+        } }));
+};
+exports.MultipleSpreadFooterButtons = MultipleSpreadFooterButtons;
+var getCustomFooter = function () {
+    return (React.createElement("div", { className: "flex justify-between" },
+        React.createElement("span", { className: "w-5 flex items-center" },
+            React.createElement(Icon_1.default, { symbol: "like", size: "large", "aria-label": "favorite" })),
+        React.createElement(LinkButton_1.default, { href: "see-details-link" }, "See Details")));
+};
+var CustomFooter = function () {
+    return (React.createElement(ListingCard_1.ListingCard, { imageCardProps: __assign({}, standardImageCardProps), tableProps: __assign({}, standardTableProps), footerContent: getCustomFooter(), footerContainerClass: "flex justify-between", contentProps: {
+            tableHeader: { content: "Optional table header" },
+            tableSubheader: { content: "Optional table subheader" },
+        } }));
+};
+exports.CustomFooter = CustomFooter;
+var detroitStyle = function () {
+    var cssVarsOverride = "\n    .listing-card-overrides {\n      --bloom-font-sans: Montserrat;\n      --bloom-font-alt-sans: var(--bloom-font-sans);\n      --bloom-color-primary: rgb(41,126,115);\n      --bloom-color-primary-dark: rgb(0,68,69);\n      --primary-appearance-hover-background-color: white;\n      --primary-appearance-hover-label-color: var(--bloom-color-primary-dark);\n      --outlined-appearance-hover-background-color: var(--bloom-color-primary);\n      --outlined-appearance-hover-border-color: var(--bloom-color-primary);\n      --card-header-color: var(--bloom-color-primary-dark);\n    }\n\n    .listing-card-overrides table {\n      font-family: var(--bloom-font-sans);\n    }\n\n    .listing-card-overrides .image-card {\n      --tags-justify-mobile: flex-end;\n      --tags-justify-desktop: flex-end;\n      --border-radius: 24px;\n      --image-height: 340px;\n      --normal-font-size: var(--bloom-font-size-base);\n    }\n    .listing-card-overrides .tag {\n      --normal-padding: var(--bloom-s2) var(--bloom-s3);\n      --label-weight: 700;\n    }\n\n    .listing-card-overrides .listings-row {\n      --tags-flex-order: 2;\n    }\n\n    .listing-card-overrides .button {\n      --normal-rounded: 60px;\n      --normal-padding: 0.5rem 1rem;\n      --normal-font-size: var(--bloom-font-size-base);\n      --label-letter-spacing: normal;\n      --label-transform: none;\n    }\n  ";
+    return (React.createElement(React.Fragment, null,
+        React.createElement("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
+        React.createElement("link", { rel: "preconnect", href: "https://fonts.gstatic.com" }),
+        React.createElement("link", { href: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap", rel: "stylesheet" }),
+        React.createElement("div", { className: "listing-card-overrides" },
+            React.createElement(ListingCard_1.ListingCard, { imageCardProps: {
+                    imageUrl: "https://detroit-public-dev.netlify.app/images/detroitDefault.png",
+                    href: "listing-link",
+                    tags: [
+                        {
+                            iconType: "calendar",
+                            iconColor: "white",
+                            text: "Coming Soon Fall 2022",
+                            styleType: __1.AppearanceStyleType.closed,
+                        },
+                    ],
+                }, tableProps: __assign({}, standardTableProps), footerButtons: [{ text: "See Details", href: "see-details-link" }], contentProps: {
+                    contentHeader: { content: "Optional content header" },
+                    contentSubheader: { content: "Optional content subheader" },
+                }, cardTags: [
+                    { text: "Tag 1 text" },
+                    { text: "Tag 2 text", styleType: __1.AppearanceStyleType.info },
+                    {
+                        text: "A tag with a longer name",
+                        iconType: "phone",
+                        iconColor: "white",
+                        styleType: __1.AppearanceStyleType.primary,
+                    },
+                ] }),
+            React.createElement("style", null, cssVarsOverride))));
+};
+exports.detroitStyle = detroitStyle;
+//# sourceMappingURL=ListingCard.stories.js.map

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

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

package/dist/src/page_components/listing/ListingDetailHeader.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface ListingDetailHeaderProps {
+    imageAlt: string;
+    imageSrc: string;
+    subtitle: string;
+    title: string;
+    children?: React.ReactNode;
+    hideHeader?: boolean;
+    desktopClass?: string;
+}
+declare const ListingDetailHeader: (props: ListingDetailHeaderProps) => JSX.Element;
+export { ListingDetailHeader as default, ListingDetailHeader };

package/dist/src/page_components/listing/ListingDetailHeader.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListingDetailHeader = exports.default = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../../icons/Icon");
+var ListingDetailHeader = function (props) { return (React.createElement("header", { className: props.hideHeader ? "detail-header md:hidden" : "detail-header" },
+    React.createElement("img", { alt: props.imageAlt, className: "detail-header__image ", src: props.imageSrc }),
+    React.createElement("hgroup", { className: "detail-header__hgroup" },
+        React.createElement("h2", { className: "detail-header__title" }, props.title),
+        React.createElement("span", { className: "detail-header__subtitle" }, props.subtitle),
+        React.createElement(Icon_1.Icon, { symbol: "arrowDown", size: "medium" })))); };
+exports.default = ListingDetailHeader;
+exports.ListingDetailHeader = ListingDetailHeader;
+//# sourceMappingURL=ListingDetailHeader.js.map

package/dist/src/page_components/listing/ListingDetailHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingDetailHeader.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetailHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,yCAAuC;AAYvC,IAAM,mBAAmB,GAAG,UAAC,KAA+B,IAAK,OAAA,CAC/D,gCAAQ,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,eAAe;IAC/E,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAC,uBAAuB,EAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,GAAI;IACnF,gCAAQ,SAAS,EAAC,uBAAuB;QACvC,4BAAI,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,KAAK,CAAM;QACvD,8BAAM,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAC,QAAQ,CAAQ;QACjE,oBAAC,WAAI,IAAC,MAAM,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,GAAG,CAClC,CACF,CACV,EATgE,CAShE,CAAA;AAE+B,sCAAO;AAAE,kDAAmB"}

package/dist/src/page_components/listing/ListingDetails.d.ts

@@ -0,0 +1,3 @@
+import { ListingDetailHeaderProps } from "./ListingDetailHeader";
+export declare const ListingDetails: (props: any) => JSX.Element;
+export declare const ListingDetailItem: (props: ListingDetailHeaderProps) => JSX.Element;

package/dist/src/page_components/listing/ListingDetails.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListingDetailItem = exports.ListingDetails = void 0;
+var React = __importStar(require("react"));
+var ResponsiveContentList_1 = require("../../sections/ResponsiveContentList");
+var ListingDetailHeader_1 = require("./ListingDetailHeader");
+var ListingDetails = function (props) { return (React.createElement("div", { className: "w-full md:w-2/3 md:pr-8 md:pt-8" },
+    React.createElement(ResponsiveContentList_1.ResponsiveContentList, null, props.children))); };
+exports.ListingDetails = ListingDetails;
+var ListingDetailItem = function (props) { return (React.createElement(ResponsiveContentList_1.ResponsiveContentItem, { desktopClass: props.desktopClass },
+    React.createElement(ResponsiveContentList_1.ResponsiveContentItemHeader, null,
+        React.createElement(ListingDetailHeader_1.ListingDetailHeader, { title: props.title, subtitle: props.subtitle, imageSrc: props.imageSrc, imageAlt: props.imageAlt, hideHeader: props.hideHeader })),
+    React.createElement(ResponsiveContentList_1.ResponsiveContentItemBody, null, props.children))); };
+exports.ListingDetailItem = ListingDetailItem;
+//# sourceMappingURL=ListingDetails.js.map

package/dist/src/page_components/listing/ListingDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingDetails.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingDetails.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,8EAK6C;AAC7C,6DAAqF;AAE9E,IAAM,cAAc,GAAG,UAAC,KAAU,IAAK,OAAA,CAC5C,6BAAK,SAAS,EAAC,iCAAiC;IAC9C,oBAAC,6CAAqB,QAAE,KAAK,CAAC,QAAQ,CAAyB,CAC3D,CACP,EAJ6C,CAI7C,CAAA;AAJY,QAAA,cAAc,kBAI1B;AAEM,IAAM,iBAAiB,GAAG,UAAC,KAA+B,IAAK,OAAA,CACpE,oBAAC,6CAAqB,IAAC,YAAY,EAAE,KAAK,CAAC,YAAY;IACrD,oBAAC,mDAA2B;QAC1B,oBAAC,yCAAmB,IAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,GAC5B,CAC0B;IAC9B,oBAAC,iDAAyB,QAAE,KAAK,CAAC,QAAQ,CAA6B,CACjD,CACzB,EAbqE,CAarE,CAAA;AAbY,QAAA,iBAAiB,qBAa7B"}

package/dist/src/page_components/listing/ListingMap.d.ts

@@ -0,0 +1,23 @@
+import "mapbox-gl/dist/mapbox-gl.css";
+import "./ListingMap.scss";
+import { Address } from "../../helpers/MultiLineAddress";
+export interface ListingMapProps {
+    address?: Address;
+    listingName?: string;
+    enableCustomPinPositioning?: boolean;
+    setCustomMapPositionChosen?: (customMapPosition: boolean) => void;
+    setLatLong?: (latLong: LatitudeLongitude) => void;
+}
+export interface LatitudeLongitude {
+    latitude: number;
+    longitude: number;
+}
+export interface Viewport {
+    width: string | number;
+    height: string | number;
+    latitude?: number;
+    longitude?: number;
+    zoom: number;
+}
+declare const ListingMap: (props: ListingMapProps) => JSX.Element | null;
+export { ListingMap as default, ListingMap };

package/dist/src/page_components/listing/ListingMap.js

@@ -0,0 +1,123 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListingMap = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+require("mapbox-gl/dist/mapbox-gl.css");
+var react_map_gl_1 = __importStar(require("react-map-gl"));
+require("./ListingMap.scss");
+var MultiLineAddress_1 = require("../../helpers/MultiLineAddress");
+var __1 = require("../../..");
+var Heading_1 = require("../../text/Heading");
+var isValidLatitude = function (latitude) {
+    return latitude >= -90 && latitude <= 90;
+};
+var isValidLongitude = function (longitude) {
+    return longitude >= -180 && longitude <= 180;
+};
+var ListingMap = function (props) {
+    var _a, _b, _c, _d;
+    // Lazy load the map component only when it will become visible on screen
+    var _e = (0, __1.useIntersect)({
+        // `window` isn't set for SSR, so we'll use `global` instead—doesn't really
+        // matter because the map won't ever get rendered in SSR anyway
+        rootMargin: "".concat(global.innerHeight || 0, "px"),
+    }), setIntersectingElement = _e.setIntersectingElement, intersecting = _e.intersecting;
+    var _f = (0, react_1.useState)(false), hasIntersected = _f[0], setHasIntersected = _f[1];
+    if (intersecting && !hasIntersected)
+        setHasIntersected(true);
+    var _g = (0, react_1.useState)({
+        latitude: (_a = props.address) === null || _a === void 0 ? void 0 : _a.latitude,
+        longitude: (_b = props.address) === null || _b === void 0 ? void 0 : _b.longitude,
+    }), marker = _g[0], setMarker = _g[1];
+    var _h = (0, react_1.useState)({
+        latitude: marker.latitude,
+        longitude: marker.longitude,
+        width: "100%",
+        height: 400,
+        zoom: 13,
+    }), viewport = _h[0], setViewport = _h[1];
+    var onViewportChange = function (viewport) {
+        // width and height need to be set here to work properly with
+        // the responsive wrappers
+        var newViewport = __assign({}, viewport);
+        newViewport.width = "100%";
+        newViewport.height = 400;
+        setViewport(newViewport);
+    };
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        onViewportChange(__assign(__assign({}, viewport), { latitude: (_a = props.address) === null || _a === void 0 ? void 0 : _a.latitude, longitude: (_b = props.address) === null || _b === void 0 ? void 0 : _b.longitude }));
+        setMarker({
+            latitude: (_c = props.address) === null || _c === void 0 ? void 0 : _c.latitude,
+            longitude: (_d = props.address) === null || _d === void 0 ? void 0 : _d.longitude,
+        });
+    }, [(_c = props.address) === null || _c === void 0 ? void 0 : _c.latitude, (_d = props.address) === null || _d === void 0 ? void 0 : _d.longitude, props.enableCustomPinPositioning]);
+    var onMarkerDragEnd = (0, react_1.useCallback)(function (event) {
+        if (props.setLatLong) {
+            props.setLatLong({
+                latitude: event.lngLat[1],
+                longitude: event.lngLat[0],
+            });
+        }
+        if (props.setCustomMapPositionChosen) {
+            props.setCustomMapPositionChosen(true);
+        }
+        setMarker({
+            latitude: event.lngLat[1],
+            longitude: event.lngLat[0],
+        });
+    }, []);
+    if (!props.address ||
+        !props.address.latitude ||
+        !props.address.longitude ||
+        !viewport.latitude ||
+        !viewport.longitude)
+        return null;
+    return (react_1.default.createElement("div", { className: "listing-map", ref: setIntersectingElement },
+        react_1.default.createElement("div", { className: "addressPopup" },
+            props.listingName && (react_1.default.createElement(Heading_1.Heading, { priority: 3, styleType: "capsWeighted" }, props.listingName)),
+            react_1.default.createElement(MultiLineAddress_1.MultiLineAddress, { address: props.address })),
+        (process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (react_1.default.createElement(react_map_gl_1.default, __assign({ mapboxApiAccessToken: process.env.mapBoxToken || process.env.MAPBOX_TOKEN, mapStyle: "mapbox://styles/mapbox/streets-v11", scrollZoom: false, onViewportChange: onViewportChange }, viewport), marker.latitude &&
+            marker.longitude &&
+            isValidLatitude(marker.latitude) &&
+            isValidLongitude(marker.longitude) && (react_1.default.createElement(react_1.default.Fragment, null, props.enableCustomPinPositioning ? (react_1.default.createElement(react_map_gl_1.Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20, draggable: true, onDragEnd: onMarkerDragEnd },
+            react_1.default.createElement("div", { className: "pin" }))) : (react_1.default.createElement(react_map_gl_1.Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20 },
+            react_1.default.createElement("div", { className: "pin" })))))))));
+};
+exports.default = ListingMap;
+exports.ListingMap = ListingMap;
+//# sourceMappingURL=ListingMap.js.map

package/dist/src/page_components/listing/ListingMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListingMap.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingMap.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+D;AAC/D,wCAAqC;AACrC,2DAA4C;AAE5C,6BAA0B;AAC1B,mEAA0E;AAC1E,8BAAuC;AACvC,8CAA4C;AAuB5C,IAAM,eAAe,GAAG,UAAC,QAAgB;IACvC,OAAO,QAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,IAAI,EAAE,CAAA;AAC1C,CAAC,CAAA;AAED,IAAM,gBAAgB,GAAG,UAAC,SAAiB;IACzC,OAAO,SAAS,IAAI,CAAC,GAAG,IAAI,SAAS,IAAI,GAAG,CAAA;AAC9C,CAAC,CAAA;AAED,IAAM,UAAU,GAAG,UAAC,KAAsB;;IACxC,yEAAyE;IACnE,IAAA,KAA2C,IAAA,gBAAY,EAAC;QAC5D,2EAA2E;QAC3E,+DAA+D;QAC/D,UAAU,EAAE,UAAG,MAAM,CAAC,WAAW,IAAI,CAAC,OAAI;KAC3C,CAAC,EAJM,sBAAsB,4BAAA,EAAE,YAAY,kBAI1C,CAAA;IACI,IAAA,KAAsC,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApD,cAAc,QAAA,EAAE,iBAAiB,QAAmB,CAAA;IAC3D,IAAI,YAAY,IAAI,CAAC,cAAc;QAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;IAEtD,IAAA,KAAsB,IAAA,gBAAQ,EAAC;QACnC,QAAQ,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ;QACjC,SAAS,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS;KACpC,CAAC,EAHK,MAAM,QAAA,EAAE,SAAS,QAGtB,CAAA;IAEI,IAAA,KAA0B,IAAA,gBAAQ,EAAC;QACvC,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,SAAS,EAAE,MAAM,CAAC,SAAS;QAC3B,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,EAAE;KACG,CAAC,EANP,QAAQ,QAAA,EAAE,WAAW,QAMd,CAAA;IAEd,IAAM,gBAAgB,GAAG,UAAC,QAAkB;QAC1C,6DAA6D;QAC7D,0BAA0B;QAC1B,IAAM,WAAW,gBAAQ,QAAQ,CAAE,CAAA;QACnC,WAAW,CAAC,KAAK,GAAG,MAAM,CAAA;QAC1B,WAAW,CAAC,MAAM,GAAG,GAAG,CAAA;QACxB,WAAW,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;;QACR,gBAAgB,uBACX,QAAQ,KACX,QAAQ,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,EACjC,SAAS,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,IACnC,CAAA;QACF,SAAS,CAAC;YACR,QAAQ,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ;YACjC,SAAS,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS;SACpC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,QAAQ,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,SAAS,EAAE,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAA;IAEzF,IAAM,eAAe,GAAG,IAAA,mBAAW,EAAC,UAAC,KAAU;QAC7C,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,UAAU,CAAC;gBACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;gBACzB,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;aAC3B,CAAC,CAAA;SACH;QACD,IAAI,KAAK,CAAC,0BAA0B,EAAE;YACpC,KAAK,CAAC,0BAA0B,CAAC,IAAI,CAAC,CAAA;SACvC;QACD,SAAS,CAAC;YACR,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;YACzB,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;SAC3B,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IACE,CAAC,KAAK,CAAC,OAAO;QACd,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ;QACvB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;QACxB,CAAC,QAAQ,CAAC,QAAQ;QAClB,CAAC,QAAQ,CAAC,SAAS;QAEnB,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,uCAAK,SAAS,EAAC,aAAa,EAAC,GAAG,EAAE,sBAAsB;QACtD,uCAAK,SAAS,EAAC,cAAc;YAC1B,KAAK,CAAC,WAAW,IAAI,CACpB,8BAAC,iBAAO,IAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,IAC5C,KAAK,CAAC,WAAW,CACV,CACX;YACD,8BAAC,mCAAgB,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CACxC;QACL,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,cAAc,IAAI,CAC1E,8BAAC,sBAAK,aACJ,oBAAoB,EAAE,OAAO,CAAC,GAAG,CAAC,WAAW,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,EACzE,QAAQ,EAAC,oCAAoC,EAC7C,UAAU,EAAE,KAAK,EACjB,gBAAgB,EAAE,gBAAgB,IAC9B,QAAQ,GAEX,MAAM,CAAC,QAAQ;YACd,MAAM,CAAC,SAAS;YAChB,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC;YAChC,gBAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CACpC,8DACG,KAAK,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAClC,8BAAC,qBAAM,IACL,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,SAAS,EAAE,CAAC,EAAE,EACd,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,eAAe;YAE1B,uCAAK,SAAS,EAAC,KAAK,GAAO,CACpB,CACV,CAAC,CAAC,CAAC,CACF,8BAAC,qBAAM,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE;YAC5E,uCAAK,SAAS,EAAC,KAAK,GAAO,CACpB,CACV,CACA,CACJ,CACG,CACT,CACG,CACP,CAAA;AACH,CAAC,CAAA;AACsB,6BAAO;AAAE,gCAAU"}

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const showMapWithPin: () => JSX.Element;

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

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showMapWithPin = void 0;
+var React = __importStar(require("react"));
+var ListingMap_1 = require("./ListingMap");
+var archer_json_1 = __importDefault(require("../../../__tests__/fixtures/archer.json"));
+exports.default = {
+    title: "Listing/Map",
+};
+var listing = Object.assign({}, archer_json_1.default);
+var showMapWithPin = function () {
+    return React.createElement(ListingMap_1.ListingMap, { address: listing.buildingAddress, listingName: listing.name });
+};
+exports.showMapWithPin = showMapWithPin;
+//# sourceMappingURL=ListingMap.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListingMap.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingMap.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAE9B,2CAAyC;AACzC,wFAA4D;AAE5D,kBAAe;IACb,KAAK,EAAE,aAAa;CACrB,CAAA;AAED,IAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,qBAAM,CAAQ,CAAA;AAEzC,IAAM,cAAc,GAAG;IAC5B,OAAO,oBAAC,uBAAU,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,GAAI,CAAA;AACpF,CAAC,CAAA;AAFY,QAAA,cAAc,kBAE1B"}

package/dist/src/page_components/listing/ListingsGroup.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { UniversalIconType } from "../../icons/Icon";
+import "./ListingsGroup.scss";
+export interface ListingsGroupProps {
+    children?: React.ReactNode;
+    header: string;
+    hideButtonText: string;
+    icon?: UniversalIconType;
+    info?: string;
+    listingsCount: number;
+    showButtonText: string;
+}
+declare const ListingsGroup: (props: ListingsGroupProps) => JSX.Element;
+export { ListingsGroup as default, ListingsGroup };