@abcagency/hc-ui-components 1.3.61 → 1.3.63

package/src/components/modules/maps/map.js

@@ -1,64 +1,64 @@
-import React from 'react';
-import { GoogleMap } from "@react-google-maps/api";
-import ShowAllButton from "~/components/modules/buttons/show-all-button";
-
-const Map = ({
-	zoom,
-	center,
-	mapContainerRef,
-	onLoad,
-	onIdle,
-	mapInteracted,
-	pinIconUrl,
-	setMapInteracted,
-	fitBounds,
-	mapRef,
-	setQuery,
-	filteredListingsLength,
-	setSelectedFilters,
-	children
-}) => {
-	return (
-		<>
-			{zoom && center && (
-				<div ref={mapContainerRef} className="hc-h-full hc-relative">
-					<GoogleMap
-						zoom={zoom}
-						onLoad={onLoad}
-						onIdle={onIdle}
-						center={center}
-						mapContainerStyle={{
-							width: "100%",
-							height: "100%"
-						}}
-						options={{
-							styles: [
-								{
-									featureType: "poi",
-									elementType: "labels",
-									stylers: [{ visibility: "off" }]
-								}
-							]
-						}}
-					>
-						{children}
-					</GoogleMap>
-					{mapInteracted && (
-						<ShowAllButton
-							mapInteracted={mapInteracted}
-							setMapInteracted={setMapInteracted}
-							fitBounds={fitBounds}
-							mapRef={mapRef}
-							pinIconUrl={pinIconUrl}
-							setQuery={setQuery}
-							listingCount={filteredListingsLength}
-							setSelectedFilters={setSelectedFilters}
-						/>
-					)}
-				</div>
-			)}
-		</>
-	);
-};
-
-export default Map;
+import React from 'react';
+import { GoogleMap } from "@react-google-maps/api";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+
+const Map = ({
+	zoom,
+	center,
+	mapContainerRef,
+	onLoad,
+	onIdle,
+	mapInteracted,
+	pinIconUrl,
+	setMapInteracted,
+	fitBounds,
+	mapRef,
+	setQuery,
+	filteredListingsLength,
+	setSelectedFilters,
+	children
+}) => {
+	return (
+		<>
+			{zoom && center && (
+				<div ref={mapContainerRef} className="hc-h-full hc-relative">
+					<GoogleMap
+						zoom={zoom}
+						onLoad={onLoad}
+						onIdle={onIdle}
+						center={center}
+						mapContainerStyle={{
+							width: "100%",
+							height: "100%"
+						}}
+						options={{
+							styles: [
+								{
+									featureType: "poi",
+									elementType: "labels",
+									stylers: [{ visibility: "off" }]
+								}
+							]
+						}}
+					>
+						{children}
+					</GoogleMap>
+					{mapInteracted && (
+						<ShowAllButton
+							mapInteracted={mapInteracted}
+							setMapInteracted={setMapInteracted}
+							fitBounds={fitBounds}
+							mapRef={mapRef}
+							pinIconUrl={pinIconUrl}
+							setQuery={setQuery}
+							listingCount={filteredListingsLength}
+							setSelectedFilters={setSelectedFilters}
+						/>
+					)}
+				</div>
+			)}
+		</>
+	);
+};
+
+export default Map;

package/src/components/modules/maps/place-marker.js

@@ -1,41 +1,41 @@
-import React from 'react';
-import { Marker, InfoWindowF } from '@react-google-maps/api';
-
-const PlaceMarker = ({
-	marker,
-	index,
-	selectedPlaceMarker,
-	setSelectedPlaceMarker,
-	placesWindow,
-	setPlacesWindow
-}) => {
-	const markerKey = `marker-${marker.title}-${index}`;
-
-	const placeMarkerClickHandler = () => {
-		setSelectedPlaceMarker(markerKey);
-		setPlacesWindow(true);
-	};
-
-	return (
-		<Marker
-			key={markerKey}
-			position={marker.position}
-			title={marker.title}
-			icon={marker.icon}
-			options={{ optimized: false }}
-			onClick={placeMarkerClickHandler}
-		>
-			{selectedPlaceMarker === markerKey && placesWindow && marker && (
-				<InfoWindowF
-					position={marker.position}
-					onCloseClick={() => setPlacesWindow(false)}
-					options={{ maxWidth: 400 }}
-				>
-					<div>{marker.title}</div>
-				</InfoWindowF>
-			)}
-		</Marker>
-	);
-};
-
-export default PlaceMarker;
+import React from 'react';
+import { Marker, InfoWindowF } from '@react-google-maps/api';
+
+const PlaceMarker = ({
+	marker,
+	index,
+	selectedPlaceMarker,
+	setSelectedPlaceMarker,
+	placesWindow,
+	setPlacesWindow
+}) => {
+	const markerKey = `marker-${marker.title}-${index}`;
+
+	const placeMarkerClickHandler = () => {
+		setSelectedPlaceMarker(markerKey);
+		setPlacesWindow(true);
+	};
+
+	return (
+		<Marker
+			key={markerKey}
+			position={marker.position}
+			title={marker.title}
+			icon={marker.icon}
+			options={{ optimized: false }}
+			onClick={placeMarkerClickHandler}
+		>
+			{selectedPlaceMarker === markerKey && placesWindow && marker && (
+				<InfoWindowF
+					position={marker.position}
+					onCloseClick={() => setPlacesWindow(false)}
+					options={{ maxWidth: 400 }}
+				>
+					<div>{marker.title}</div>
+				</InfoWindowF>
+			)}
+		</Marker>
+	);
+};
+
+export default PlaceMarker;

package/src/components/modules/maps/tabs.js

@@ -1,81 +1,81 @@
-import React from 'react';
-import * as Tabs from '@radix-ui/react-tabs';
-
-import Button from '~/components/modules/buttons/default';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const MapTabs = ({
-	map,
-	list,
-	filter,
-	className,
-	showMap
-}) => {
-	const tabButtonClasses =
-		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
-	const { mobileTab, setMobileTab } = useMapList();
-	return (
-		<div
-			className={`
-				hc-relative hc-overflow-hidden
-				${className ?? ""}
-			`}
-		>
-			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
-				//defaultValue="listTab"
-				value={mobileTab}
-			>
-				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
-					aria-label="Review positions"
-				>
-					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
-								List
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-					{showMap && (
-						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
-							<Button.Btn
-								variant="outline"
-								isBlock
-								className={tabButtonClasses}
-							>
-								<Button.Body className="hc-justify-center">
-									<Button.Icon icon="mdi:map" size="hc-size-5" />
-									Map
-								</Button.Body>
-							</Button.Btn>
-						</Tabs.Trigger>
-					)}
-					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
-						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
-							<Button.Body className="hc-justify-center">
-								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
-								Filter
-							</Button.Body>
-						</Button.Btn>
-					</Tabs.Trigger>
-				</Tabs.List>
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
-					{list}
-				</Tabs.Content>
-				{showMap && (
-					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
-						{map}
-					</Tabs.Content>
-				)}
-				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
-					{filter}
-				</Tabs.Content>
-			</Tabs.Root>
-		</div>
-	);
-};
-
-export default MapTabs;
+import React from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+
+import Button from '~/components/modules/buttons/default';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const MapTabs = ({
+	map,
+	list,
+	filter,
+	className,
+	showMap
+}) => {
+	const tabButtonClasses =
+		"hc-flex hc-items-center hc-gap-2 hc-rounded-none hc-border-x-0 data-[state=active]:hc-bg-primary data-[state=active]:hc-text-white";
+	const { mobileTab, setMobileTab } = useMapList();
+	return (
+		<div
+			className={`
+				hc-relative hc-overflow-hidden
+				${className ?? ""}
+			`}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-screen hc-min-h-screen"
+				//defaultValue="listTab"
+				value={mobileTab}
+			>
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary"
+					aria-label="Review positions"
+				>
+					<Tabs.Trigger value="listTab" asChild onClick={() => setMobileTab("listTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="mdi:view-list" size="hc-size-5" />
+								List
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+					{showMap && (
+						<Tabs.Trigger value="mapTab" asChild onClick={() => setMobileTab("mapTab")}>
+							<Button.Btn
+								variant="outline"
+								isBlock
+								className={tabButtonClasses}
+							>
+								<Button.Body className="hc-justify-center">
+									<Button.Icon icon="mdi:map" size="hc-size-5" />
+									Map
+								</Button.Body>
+							</Button.Btn>
+						</Tabs.Trigger>
+					)}
+					<Tabs.Trigger value="filterTab" asChild onClick={() => setMobileTab("filterTab")}>
+						<Button.Btn variant="outline" isBlock className={tabButtonClasses}>
+							<Button.Body className="hc-justify-center">
+								<Button.Icon icon="fluent:search-12-filled" size="hc-size-5" />
+								Filter
+							</Button.Body>
+						</Button.Btn>
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="listTab">
+					{list}
+				</Tabs.Content>
+				{showMap && (
+					<Tabs.Content className="hc-grow hc-bg-white hc-outline-none" value="mapTab">
+						{map}
+					</Tabs.Content>
+				)}
+				<Tabs.Content className="hc-grow hc-bg-white hc-outline-none hc-p-2" value="filterTab">
+					{filter}
+				</Tabs.Content>
+			</Tabs.Root>
+		</div>
+	);
+};
+
+export default MapTabs;

package/src/constants/eventTypes.js

@@ -1,15 +1,15 @@
-export const eventTypes = {
-	FILTER_APPLIED: "filter_applied",
-	MAP_MARKER_CLICKED: "map_marker_clicked",
-	JOB_LISTING_SELECTED: "job_listing_selected",
-	APPLY_NOW_CLICKED: "apply_now_clicked",
-	EASY_APPLY_CLICKED: "easy_apply_clicked",
-	VIEW_DETAILS_CLICKED: "view_details_clicked",
-	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
-	POI_APPLIED: "point_of_interest_applied",
-	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
-	FAVORITE_SELECTED: "favorite_job_selected",
-	LIST_SORTED: "jobs_list_sorted",
-	FILTERS_RESET: "filter_reset_button_clicked",
-	EXTERNAL_LINK_CLICKED: "external_link_clicked"
-};
+export const eventTypes = {
+	FILTER_APPLIED: "filter_applied",
+	MAP_MARKER_CLICKED: "map_marker_clicked",
+	JOB_LISTING_SELECTED: "job_listing_selected",
+	APPLY_NOW_CLICKED: "apply_now_clicked",
+	EASY_APPLY_CLICKED: "easy_apply_clicked",
+	VIEW_DETAILS_CLICKED: "view_details_clicked",
+	COMMUTE_ORIGIN_ADDED: "commute_origin_added",
+	POI_APPLIED: "point_of_interest_applied",
+	VIEW_JOBS_AT_Location: "view_jobs_at_location_clicked",
+	FAVORITE_SELECTED: "favorite_job_selected",
+	LIST_SORTED: "jobs_list_sorted",
+	FILTERS_RESET: "filter_reset_button_clicked",
+	EXTERNAL_LINK_CLICKED: "external_link_clicked"
+};

package/src/constants/placeTypes.js

@@ -1,8 +1,8 @@
-export const placeTypes = {
-	FOOD: "food",
-	STORE: "shopping",
-	TOURIST_ATTRACTION: "attractions",
-	TRANSIT_STATION: "transit",
-	SCHOOL: "schools",
-	PLACE_OF_WORSHIP: "worship"
-};
+export const placeTypes = {
+	FOOD: "food",
+	STORE: "shopping",
+	TOURIST_ATTRACTION: "attractions",
+	TRANSIT_STATION: "transit",
+	SCHOOL: "schools",
+	PLACE_OF_WORSHIP: "worship"
+};