@abcagency/hc-ui-components 1.3.17 → 1.3.18

package/src/components/modules/filter/search.js

@@ -1,92 +1,93 @@
-import React, { useRef, useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from '~/components/modules/icon';
-import FilterCard from '~/components/modules/cards/filter';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const Search = ({
-	inputPlaceholder = "Keywords",
-	showSearchIcon = false,
-	className,
-	labelClassName
-}) => {
-	const [inputValue, setInputValue] = useState(query != null ? query : "");
-	const debounceTimer = useRef(null);
-	const {
-		query,
-		setQuery,
-		siteConfig
-	} = useMapList();
-	const handleInputChange = e => {
-		setInputValue(e.target.value);
-		if (debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-		}
-		debounceTimer.current = setTimeout(() => {
-			setQuery(e.target.value);
-		}, 500);
-	};
-
-	const handleReset = () => {
-		setInputValue("");
-		setQuery("");
-	};
-
-	useEffect(() => {
-		if (query == null) {
-			setInputValue("");
-		}
-	}, [query]);
-	inputPlaceholder = siteConfig.searchConfig.placeholder;
-	return (
-		<FilterCard as="form" className={className ?? ""}>
-			<FilterCard.Title
-				as="label"
-				icon="fluent:search-12-filled"
-				className={labelClassName ?? ""}
-			>
-				<span>
-					{siteConfig.searchConfig.label}
-				</span>
-			</FilterCard.Title>
-
-			<div className="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
-				{showSearchIcon && (
-					<Icon
-						icon="fluent:search-12-filled"
-						size="hc-size-4"
-						className="hc-mr-2 hc-text-uiAccent/50"
-					/>
-				)}
-				<input
-					type="text"
-					name="search"
-					onKeyDown={e => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-						}
-					}}
-					placeholder={inputPlaceholder}
-					value={inputValue}
-					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
-					onChange={handleInputChange}
-				/>
-
-				<Button.Btn
-					type="reset"
-					variant="icon"
-					size="sqsm"
-					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
-					onClick={handleReset}
-				>
-					<span className="sr-only">Clear</span>
-					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
-				</Button.Btn>
-			</div>
-		</FilterCard>
-	);
-};
-
-export default Search;
+import React, { useRef, useState, useEffect } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from '~/components/modules/icon';
+import FilterCard from '~/components/modules/cards/filter';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const Search = ({
+	inputPlaceholder = "Keywords",
+	showSearchIcon = false,
+	className,
+	labelClassName
+}) => {
+	const {
+		query,
+		setQuery,
+		siteConfig
+	} = useMapList();
+	const [inputValue, setInputValue] = useState(query != null ? query : "");
+	const debounceTimer = useRef(null);
+
+	const handleInputChange = e => {
+		setInputValue(e.target.value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(e.target.value);
+		}, 500);
+	};
+
+	const handleReset = () => {
+		setInputValue("");
+		setQuery("");
+	};
+
+	useEffect(() => {
+		if (query == null) {
+			setInputValue("");
+		}
+	}, [query]);
+	inputPlaceholder = siteConfig.searchConfig.placeholder;
+	return (
+		<FilterCard as="form" className={className ?? ""}>
+			<FilterCard.Title
+				as="label"
+				icon="fluent:search-12-filled"
+				className={labelClassName ?? ""}
+			>
+				<span>
+					{siteConfig.searchConfig.label}
+				</span>
+			</FilterCard.Title>
+
+			<div className="hc-relative hc-flex hc-items-center hc-px-2 hc-rounded hc-bg-white hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent">
+				{showSearchIcon && (
+					<Icon
+						icon="fluent:search-12-filled"
+						size="hc-size-4"
+						className="hc-mr-2 hc-text-uiAccent/50"
+					/>
+				)}
+				<input
+					type="text"
+					name="search"
+					onKeyDown={e => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+						}
+					}}
+					placeholder={inputPlaceholder}
+					value={inputValue}
+					className="hc-w-full hc-px-0 hc-py-2 hc-text-sm hc-border-0 hc-transition-colors placeholder:hc-text-uiText/50 focus:hc-ring-0 focus:hc-outline-none"
+					onChange={handleInputChange}
+				/>
+
+				<Button.Btn
+					type="reset"
+					variant="icon"
+					size="sqsm"
+					className={`transition-opacity ${inputValue ? "hc-opacity-100" : "hc-opacity-0 hc-pointer-events-none"}`}
+					onClick={handleReset}
+				>
+					<span className="sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;

package/src/components/modules/maps/list/list-item/index.js

@@ -1,135 +1,135 @@
-import React, { forwardRef } from 'react';
-
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import FieldMapper from '~/components/modules/maps/list/field-mapper';
-
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			favorites,
-			setFavorites,
-			...props
-		},
-		ref
-	) => {
-		const { siteConfig } = useMapList();
-		const { trackEvent, eventTypes } = useTrackEvent();
-		const mapPinColor = siteConfig.colors.primary.replace("#", "");
-
-		const handleClick = () => {
-			if (onItemSelected) {
-				onItemSelected(item);
-			}
-		};
-
-		let isFavorite = favorites.includes(item.id);
-
-		const handleFavouriteClick = event => {
-			event.stopPropagation();
-			let updatedFavorites;
-			if (isFavorite) {
-				updatedFavorites = favorites.filter(fav => fav !== item.id);
-			} else {
-				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-				updatedFavorites = [...favorites, item.id];
-			}
-			isFavorite = !isFavorite;
-			setFavorites(updatedFavorites);
-		};
-
-		return (
-			<button
-				ref={ref}
-				onClick={handleClick}
-				className={`
-					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
-					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
-					${className ?? ""}
-        `}
-				{...props}
-			>
-				<Grid
-					columns="hc-grid-flow-col hc-auto-cols-fr"
-					gap="hc-gap-2"
-					isAnimated={false}
-					className={`
-						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
-						${bodyClassName ?? ""}
-					`}
-				>
-					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
-						<span className="hc-sr-only">Expand row</span>
-						<Icon
-							icon="fluent-emoji-high-contrast:plus"
-							size="hc-size-2.5"
-							className={`
-								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
-								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
-							`}
-						/>
-
-					</Grid.Item>
-
-					<FieldMapper
-						item={item}
-						fieldsShown={fieldsShown}
-						specialFeatures={specialFeatures}
-						isFavorite={isFavorite}
-						handleFavouriteClick={handleFavouriteClick}
-					/>
-					<Grid.Item
-						key={"favorites"}
-						className="hc-hidden md:hc-block hc-col-span-1"
-					>
-						<Icon
-							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-							size="hc-size-3.5"
-							iconClasses={isFavorite ? "hc-text-primary" : ""}
-							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
-							className={`
-							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
-						`}
-							onClick={e => handleFavouriteClick(e)}
-						/>
-					</Grid.Item>
-				</Grid>
-
-				{showMap && (
-					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
-						<img
-							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
-							alt={`Map of location for ${item.fields.position}`}
-							className="hc-w-full hc-h-full hc-object-cover"
-						/>
-					</div>
-				)}
-			</button>
-		);
-	}
-);
-
-ListItem.displayName = "ListItem";
-
-export default React.memo(ListItem, (prevProps, nextProps) => {
-	return (
-		(prevProps.isActive === nextProps.isActive ||
-			prevProps.isActive !== nextProps.isActive) &&
-		prevProps.bodyClassName === nextProps.bodyClassName &&
-		prevProps.className === nextProps.className &&
-		prevProps.fieldsShown === nextProps.fieldsShown &&
-		prevProps.item.id === nextProps.item.id
-	);
-});
+import React, { forwardRef } from 'react';
+
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/maps/list/field-mapper';
+
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			favorites,
+			setFavorites,
+			...props
+		},
+		ref
+	) => {
+		const { siteConfig } = useMapList();
+		const { trackEvent, eventTypes } = useTrackEvent();
+		const mapPinColor = siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = event => {
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				trackEvent(eventTypes.FAVORITE_SELECTED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			setFavorites(updatedFavorites);
+		};
+
+		return (
+			<button
+				ref={ref}
+				onClick={handleClick}
+				className={`
+					hc-group hc-relative hc-flex md:hc-flex-col hc-w-full md:hc-pl-4 hc-text-left hc-bg-clip-border hc-border hc-border-transparent hc-break-words hc-overflow-hidden hc-cursor-pointer hc-transition-colors hover:hc-bg-uiAccent/5 focus:hover:hc-bg-uiAccent/5
+					${isActive ? "hc-bg-uiAccent/5 hc-border-secondary hc-border" : "hc-text-uiText hc-bg-white"}
+					${className ?? ""}
+        `}
+				{...props}
+			>
+				<Grid
+					columns="hc-grid-flow-col hc-auto-cols-fr"
+					gap="hc-gap-2"
+					isAnimated={false}
+					className={`
+						hc-block md:hc-grid hc-p-2 hc-ps-4 hc-w-full hc-grow hc-leading-tight hc-text-sm md:hc-text-xs lg:hc-text-sm
+						${bodyClassName ?? ""}
+					`}
+				>
+					<Grid.Item className="hc-hidden md:hc-block md:hc-absolute md:hc-left-1.5 hc-top-1.5">
+						<span className="hc-sr-only">Expand row</span>
+						<Icon
+							icon="fluent-emoji-high-contrast:plus"
+							size="hc-size-2.5"
+							className={`
+								hc-opacity-0 hc-text-uiText/60 hc-transition group-hover:hc-opacity-100 group-active:hc-opacity-100
+								${isActive ? "hc-opacity-100 hc-rotate-45" : ""}
+							`}
+						/>
+
+					</Grid.Item>
+
+					<FieldMapper
+						item={item}
+						fieldsShown={fieldsShown}
+						specialFeatures={specialFeatures}
+						isFavorite={isFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					<Grid.Item
+						key={"favorites"}
+						className="hc-hidden md:hc-block hc-col-span-1"
+					>
+						<Icon
+							icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
+							size="hc-size-3.5"
+							iconClasses={isFavorite ? "hc-text-primary" : ""}
+							title={!isFavorite ? 'Add job to favorites' : 'Remove job from favorites'}
+							className={`
+							hc-pr-2 hc-transition-opacity hc-duration-300 hc-cursor-pointer hc-opacity-100"
+						`}
+							onClick={e => handleFavouriteClick(e)}
+						/>
+					</Grid.Item>
+				</Grid>
+
+				{showMap && (
+					<div onClick={() => { setMobileTab("mapTab"); handleClick(); }} className="md:hc-hidden hc-w-2/5 sm:hc-w-1/3 hc-p-1.5 hc-my-1 hc-bg-uiAccent/5 hc-border hc-border-uiAccent/10 hc-rounded-sm">
+						<img
+							src={`https://maps.googleapis.com/maps/api/staticmap?scale=2&center=${item.mapDetails?.latitude},${item.mapDetails?.longitude}&zoom=10&size=240x180&maptype=roadmap&markers=color:0x${mapPinColor}%7Clabel:•%7C${item.mapDetails?.latitude},${item.mapDetails?.longitude}&key=${process.env.GOOGLE_MAPS_API_KEY}`}
+							alt={`Map of location for ${item.fields.position}`}
+							className="hc-w-full hc-h-full hc-object-cover"
+						/>
+					</div>
+				)}
+			</button>
+		);
+	}
+);
+
+ListItem.displayName = "ListItem";
+
+export default React.memo(ListItem, (prevProps, nextProps) => {
+	return (
+		(prevProps.isActive === nextProps.isActive ||
+			prevProps.isActive !== nextProps.isActive) &&
+		prevProps.bodyClassName === nextProps.bodyClassName &&
+		prevProps.className === nextProps.className &&
+		prevProps.fieldsShown === nextProps.fieldsShown &&
+		prevProps.item.id === nextProps.item.id
+	);
+});

package/src/constants/eventTypes.js

@@ -1,13 +1,13 @@
-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",
-	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: "filters_reset_button_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",
+	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"
+};