@bloom-housing/ui-components 13.0.0 → 13.0.2

package/src/forms/PhoneField.tsx

@@ -18,7 +18,7 @@ export const PhoneField = (props: {
   control?: any
   disabled?: boolean
   required?: boolean
-  mask?: (args: any) => JSX.Element
+  mask?: (args: any) => React.JSX.Element
   dataTestId?: string
 }) => {
   const labelClasses = []

package/src/forms/checkbox.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 export default {
   title: "Forms/Checkbox",
-  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+  decorators: [(storyFn: () => React.JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
 }
 
 export const standard = () => (

package/src/forms/radio.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 export default {
   title: "Forms/Radio",
-  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+  decorators: [(storyFn: () => React.JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
 }
 
 export const standard = () => (

package/src/headers/SiteHeader.scss

@@ -253,6 +253,10 @@
   max-width: var(--logo-max-width);
   box-shadow: var(--logo-box-shadow);
 
+  background-color: var(--logo-background-color);
+  border-bottom: 0;
+  display: flex;
+
   @media (min-width: $screen-md) {
     height: var(--logo-desktop-height);
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
@@ -268,10 +272,6 @@
   @media (min-width: $screen-print) {
     margin-top: 0;
   }
-
-  background-color: var(--logo-background-color);
-  border-bottom: 0;
-  display: flex;
 }
 
 @media print {
@@ -552,14 +552,14 @@
 .site-header__notice {
   width: 100%;
   background-color: var(--bloom-color-primary);
+  text-align: left;
+  color: var(--bloom-color-white);
+  display: var(--notice-display-mobile);
 
   @media (min-width: $screen-md) {
     text-align: right;
     display: var(--notice-display-desktop);
   }
-  text-align: left;
-  color: var(--bloom-color-white);
-  display: var(--notice-display-mobile);
 }
 
 .site-header__notice-text {

package/src/headers/SiteHeader.tsx

@@ -343,7 +343,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
     return (
       <>
         {props.menuLinks.map((menuLink, index) => {
-          let menuContent: JSX.Element
+          let menuContent: React.JSX.Element
           if (menuLink.subMenuLinks) {
             menuContent = getDesktopDropdown(menuLink.title, menuLink.subMenuLinks)
           } else {

package/src/headers/StepHeader.scss

@@ -28,13 +28,14 @@
   color: var(--number-color);
   min-width: var(--circle-mobile-size);
   height: var(--circle-mobile-size);
+  padding: 0rem var(--circle-x-padding);
+  margin-inline-end: var(--title-spacing);
+  border-radius: 50%;
+
   @media (min-width: $screen-md) {
     min-width: var(--circle-desktop-size);
     height: var(--circle-desktop-size);
   }
-  padding: 0rem var(--circle-x-padding);
-  margin-inline-end: var(--title-spacing);
-  border-radius: 50%;
 }
 
 .step-header__title {

package/src/headers/StepHeader.tsx

@@ -18,7 +18,7 @@ const StepHeader = ({
   className,
   priority,
 }: StepHeaderProps) => {
-  const Tag = `h${priority || 2}` as keyof JSX.IntrinsicElements
+  const Tag = `h${priority || 2}` as keyof React.JSX.IntrinsicElements
 
   return (
     <Tag className={`step-header ${className || ""}`}>

package/src/text/Heading.tsx

@@ -21,7 +21,7 @@ const HeaderStyleMap = {
 
 const Heading = (props: HeadingProps) => {
   const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
-  const Tag = `h${priority}` as keyof JSX.IntrinsicElements
+  const Tag = `h${priority}` as keyof React.JSX.IntrinsicElements
   const classNames = []
   if (props.styleType) classNames.push(HeaderStyleMap[props.styleType])
   if (props.className) classNames.push(props.className)

package/dist/__tests__/page_components/ListingMap.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/page_components/ListingMap.test.js

@@ -1,14 +0,0 @@
-import React from "react";
-import { render, cleanup } from "@testing-library/react";
-import { ListingMap } from "../../src/page_components/listing/ListingMap";
-import Archer from "../fixtures/archer.json";
-afterEach(cleanup);
-describe("<ListingMap>", function () {
-    it("renders without error", function () {
-        var listing = Object.assign({}, Archer);
-        var getByText = render(React.createElement(ListingMap, { address: listing.buildingAddress, listingName: listing.name })).getByText;
-        expect(getByText(listing.name)).toBeTruthy();
-        expect(getByText(listing.buildingAddress.street, { exact: false })).toBeTruthy();
-    });
-});
-//# sourceMappingURL=ListingMap.test.js.map

package/dist/__tests__/page_components/ListingMap.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListingMap.test.js","sourceRoot":"","sources":["../../../__tests__/page_components/ListingMap.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAA;AACzE,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAE5C,SAAS,CAAC,OAAO,CAAC,CAAA;AAElB,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAQ,CAAA;QACxC,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,GAAI,CAC5E,UAFgB,CAEhB;QACD,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC5C,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAClF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

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

@@ -1,23 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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, { useState, useCallback, useEffect } from "react";
-import "mapbox-gl/dist/mapbox-gl.css";
-import MapGL, { Marker } from "react-map-gl";
-import "./ListingMap.scss";
-import { MultiLineAddress } from "../../helpers/MultiLineAddress";
-import { useIntersect } from "../../..";
-import { Heading } from "../../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 = 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 = useState(false), hasIntersected = _f[0], setHasIntersected = _f[1];
-    if (intersecting && !hasIntersected)
-        setHasIntersected(true);
-    var _g = 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 = 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);
-    };
-    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 = 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.createElement("div", { className: "listing-map", ref: setIntersectingElement },
-        React.createElement("div", { className: "addressPopup" },
-            props.listingName && (React.createElement(Heading, { priority: 3, styleType: "capsWeighted" }, props.listingName)),
-            React.createElement(MultiLineAddress, { address: props.address })),
-        (process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (React.createElement(MapGL, __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.createElement(React.Fragment, null, props.enableCustomPinPositioning ? (React.createElement(Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20, draggable: true, onDragEnd: onMarkerDragEnd },
-            React.createElement("div", { className: "pin" }))) : (React.createElement(Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20 },
-            React.createElement("div", { className: "pin" })))))))));
-};
-export { ListingMap as default, ListingMap };
-//# sourceMappingURL=ListingMap.js.map

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

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

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

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

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

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ListingMap } from "./ListingMap";
-import Archer from "../../../__tests__/fixtures/archer.json";
-export default {
-    title: "Listing/Map",
-};
-var listing = Object.assign({}, Archer);
-export var showMapWithPin = function () {
-    return React.createElement(ListingMap, { address: listing.buildingAddress, listingName: listing.name });
-};
-//# sourceMappingURL=ListingMap.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListingMap.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingMap.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,MAAM,MAAM,yCAAyC,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,aAAa;CACrB,CAAA;AAED,IAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAQ,CAAA;AAEhD,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,OAAO,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,GAAI,CAAA;AACpF,CAAC,CAAA"}

package/src/page_components/listing/ListingMap.scss

@@ -1,40 +0,0 @@
-.listing-map {
-  min-height: 12rem;
-}
-
-.pin {
-  @apply absolute;
-  width: 30px;
-  height: 30px;
-  border-radius: 50% 50% 50% 0;
-  background: #89849b;
-  transform: rotate(-45deg);
-  left: 50%;
-  top: 50%;
-  margin: -20px 0 0 -20px;
-  animation-name: bounce;
-  animation-fill-mode: both;
-  animation-duration: 1s;
-
-  &:after {
-    @apply absolute;
-    @apply rounded-full;
-    content: "";
-    width: 14px;
-    height: 14px;
-    margin: 8px 0 0 8px;
-    background: #2f2f2f;
-  }
-}
-
-.addressPopup {
-  @apply bg-white;
-  @apply p-4;
-  @apply shadow-md;
-  @apply inline-block;
-  @apply float-left;
-  @apply relative;
-  left: 15px;
-  top: 15px;
-  z-index: 1;
-}

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

@@ -1,14 +0,0 @@
-import * as React from "react"
-
-import { ListingMap } from "./ListingMap"
-import Archer from "../../../__tests__/fixtures/archer.json"
-
-export default {
-  title: "Listing/Map",
-}
-
-const listing = Object.assign({}, Archer) as any
-
-export const showMapWithPin = () => {
-  return <ListingMap address={listing.buildingAddress} listingName={listing.name} />
-}

package/src/page_components/listing/ListingMap.tsx

@@ -1,153 +0,0 @@
-import React, { useState, useCallback, useEffect } from "react"
-import "mapbox-gl/dist/mapbox-gl.css"
-import MapGL, { Marker } from "react-map-gl"
-
-import "./ListingMap.scss"
-import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
-import { useIntersect } from "../../.."
-import { Heading } from "../../text/Heading"
-
-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
-}
-
-const isValidLatitude = (latitude: number) => {
-  return latitude >= -90 && latitude <= 90
-}
-
-const isValidLongitude = (longitude: number) => {
-  return longitude >= -180 && longitude <= 180
-}
-
-const ListingMap = (props: ListingMapProps) => {
-  // Lazy load the map component only when it will become visible on screen
-  const { setIntersectingElement, intersecting } = 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: `${global.innerHeight || 0}px`,
-  })
-  const [hasIntersected, setHasIntersected] = useState(false)
-  if (intersecting && !hasIntersected) setHasIntersected(true)
-
-  const [marker, setMarker] = useState({
-    latitude: props.address?.latitude,
-    longitude: props.address?.longitude,
-  })
-
-  const [viewport, setViewport] = useState({
-    latitude: marker.latitude,
-    longitude: marker.longitude,
-    width: "100%",
-    height: 400,
-    zoom: 13,
-  } as Viewport)
-
-  const onViewportChange = (viewport: Viewport) => {
-    // width and height need to be set here to work properly with
-    // the responsive wrappers
-    const newViewport = { ...viewport }
-    newViewport.width = "100%"
-    newViewport.height = 400
-    setViewport(newViewport)
-  }
-
-  useEffect(() => {
-    onViewportChange({
-      ...viewport,
-      latitude: props.address?.latitude,
-      longitude: props.address?.longitude,
-    })
-    setMarker({
-      latitude: props.address?.latitude,
-      longitude: props.address?.longitude,
-    })
-  }, [props.address?.latitude, props.address?.longitude, props.enableCustomPinPositioning])
-
-  const onMarkerDragEnd = useCallback((event: any) => {
-    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 (
-    <div className="listing-map" ref={setIntersectingElement}>
-      <div className="addressPopup">
-        {props.listingName && (
-          <Heading priority={3} styleType={"capsWeighted"}>
-            {props.listingName}
-          </Heading>
-        )}
-        <MultiLineAddress address={props.address} />
-      </div>
-      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (
-        <MapGL
-          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) && (
-              <>
-                {props.enableCustomPinPositioning ? (
-                  <Marker
-                    latitude={marker.latitude}
-                    longitude={marker.longitude}
-                    offsetTop={-20}
-                    draggable={true}
-                    onDragEnd={onMarkerDragEnd}
-                  >
-                    <div className="pin"></div>
-                  </Marker>
-                ) : (
-                  <Marker latitude={marker.latitude} longitude={marker.longitude} offsetTop={-20}>
-                    <div className="pin"></div>
-                  </Marker>
-                )}
-              </>
-            )}
-        </MapGL>
-      )}
-    </div>
-  )
-}
-export { ListingMap as default, ListingMap }