@abcagency/hc-ui-components 1.3.94 → 1.3.96

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,99 +1,99 @@
-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, containerStyle } = useMapList();
-
-	return (
-		<div
-			style={containerStyle}
-			className={`
-        hc-relative hc-overflow-hidden
-        ${className ?? ""}
-      `}
-		>
-			<Tabs.Root
-				className="hc-flex hc-flex-col hc-h-full"
-				value={mobileTab}
-			>
-				{/* Fixed tab header */}
-				<Tabs.List
-					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary hc-bg-white hc-z-10"
-					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>
-
-				{/* Tab content */}
-				<div className="hc-flex-grow hc-h-[calc(100%-48px)]">
-					{/* List Tab Content */}
-					<Tabs.Content
-						className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
-						value="listTab"
-					>
-						{list}
-					</Tabs.Content>
-
-					{/* Map Tab Content */}
-					{showMap && (
-						<Tabs.Content
-							className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
-							value="mapTab"
-						>
-							{map}
-						</Tabs.Content>
-					)}
-
-					{/* Filter Tab Content */}
-					<Tabs.Content
-						className="hc-h-full hc-bg-white hc-outline-none"
-						value="filterTab"
-					>
-						{filter}
-					</Tabs.Content>
-				</div>
-			</Tabs.Root>
-		</div>
-	);
-};
-
+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, containerStyle } = useMapList();
+
+	return (
+		<div
+			style={containerStyle}
+			className={`
+        hc-relative hc-overflow-hidden
+        ${className ?? ""}
+      `}
+		>
+			<Tabs.Root
+				className="hc-flex hc-flex-col hc-h-full"
+				value={mobileTab}
+			>
+				{/* Fixed tab header */}
+				<Tabs.List
+					className="hc-w-full hc-shrink-0 hc-flex hc-divide-x hc-divide-primary hc-bg-white hc-z-10"
+					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>
+
+				{/* Tab content */}
+				<div className="hc-flex-grow hc-h-[calc(100%-48px)]">
+					{/* List Tab Content */}
+					<Tabs.Content
+						className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
+						value="listTab"
+					>
+						{list}
+					</Tabs.Content>
+
+					{/* Map Tab Content */}
+					{showMap && (
+						<Tabs.Content
+							className="hc-h-full hc-overflow-auto hc-bg-white hc-outline-none"
+							value="mapTab"
+						>
+							{map}
+						</Tabs.Content>
+					)}
+
+					{/* Filter Tab Content */}
+					<Tabs.Content
+						className="hc-h-full hc-bg-white hc-outline-none"
+						value="filterTab"
+					>
+						{filter}
+					</Tabs.Content>
+				</div>
+			</Tabs.Root>
+		</div>
+	);
+};
+
 export default MapTabs;

package/src/constants/eventTypes.js

@@ -1,18 +1,18 @@
-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",
-	APPLY_OPEN_CLICKED: "apply_open_clicked",
-	APPLY_OPTION_1_CLICKED: "apply_option_1_clicked",
-	APPLY_OPTION_2_CLICKED: "apply_option_2_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",
+	APPLY_OPEN_CLICKED: "apply_open_clicked",
+	APPLY_OPTION_1_CLICKED: "apply_option_1_clicked",
+	APPLY_OPTION_2_CLICKED: "apply_option_2_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"
+};