@abcagency/hc-ui-components 1.3.14 → 1.3.16

package/src/components/modules/maps/list/item-expand-card/recruiter-details.js

@@ -1,68 +1,68 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-const RecruiterDetails = ({
-	contactNav,
-	className,
-	children
-}) => {
-	return (
-		<div
-			className={twMerge`
-				hc-grow
-				${className ?? ''}
-			`}
-		>
-			{children}
-
-			{contactNav &&
-				<div className="hc-inline-flex">
-					{contactNav}
-				</div>
-			}
-		</div>
-	);
-};
-
-export const Title = ({
-	as = 'h4',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-base hc-font-medium
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-export const Text = ({
-	as = 'p',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-sm hc-text-uiText/60
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-RecruiterDetails.Title = Title;
-RecruiterDetails.Text = Text;
-
-export default RecruiterDetails;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const RecruiterDetails = ({
+	contactNav,
+	className,
+	children
+}) => {
+	return (
+		<div
+			className={twMerge`
+				hc-grow
+				${className ?? ''}
+			`}
+		>
+			{children}
+
+			{contactNav &&
+				<div className="hc-inline-flex">
+					{contactNav}
+				</div>
+			}
+		</div>
+	);
+};
+
+export const Title = ({
+	as = 'h4',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-base hc-font-medium
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const Text = ({
+	as = 'p',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-sm hc-text-uiText/60
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+RecruiterDetails.Title = Title;
+RecruiterDetails.Text = Text;
+
+export default RecruiterDetails;

package/src/components/modules/maps/list/item-expand-card/recruiter-headshot.js

@@ -1,22 +1,22 @@
-import React from 'react';
-
-const RecruiterHeadshot = ({
-	image,
-	alt,
-	className,
-	imageClassName
-}) => {
-	return (
-		<div className={className ?? ''}>
-			<img
-				src={image}
-				width="96"
-				height="96"
-				alt={alt}
-				className={imageClassName ?? ''}
-			/>
-		</div>
-	);
-};
-
-export default RecruiterHeadshot;
+import React from 'react';
+
+const RecruiterHeadshot = ({
+	image,
+	alt,
+	className,
+	imageClassName
+}) => {
+	return (
+		<div className={className ?? ''}>
+			<img
+				src={image}
+				width="96"
+				height="96"
+				alt={alt}
+				className={imageClassName ?? ''}
+			/>
+		</div>
+	);
+};
+
+export default RecruiterHeadshot;

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

@@ -1,133 +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';
-
-const ListItem = forwardRef(
-	(
-		{
-			isActive,
-			bodyClassName,
-			className,
-			item,
-			fieldsShown,
-			specialFeatures,
-			onItemSelected,
-			showMap,
-			setMobileTab,
-			favorites,
-			setFavorites,
-			...props
-		},
-		ref
-	) => {
-		const { siteConfig } = useMapList();
-		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 {
-				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/components/modules/maps/map-list.js

@@ -1,74 +1,74 @@
-import React from 'react';
-
-import List from '~/components/modules/maps/list';
-import Map from '~/components/modules/maps/map';
-import Tabs from '~/components/modules/maps/tabs';
-import Filter from '~/components/modules/filter';
-
-const MapList = ({
-	loading = false,
-	mapDetails,
-	markerConfigs,
-	itemExpandedContent,
-	fieldsShown,
-	specialFeatures,
-	fieldNames,
-	showMap,
-	placeMappings
-}) => {
-
-	const listProps = {
-		fieldsShown: fieldsShown,
-		fieldNames: fieldNames,
-		itemExpandedContent: itemExpandedContent,
-		loading: loading,
-		showMap: showMap,
-		specialFeatures: specialFeatures
-	};
-
-	const mapProps = {
-		mapDetails: mapDetails,
-		markerConfigs: markerConfigs,
-		placeMappings: placeMappings,
-		clusterGridSize: 60,
-		showMap: showMap
-	};
-
-	// useEffect(() => {
-	// 	if (selectedItem !== null) {
-	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, []);
-	const map = <Map {...mapProps} />;
-	return (
-		<>
-			<div
-				className={`
-					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
-					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
-				`}
-			>
-				<div>
-					<List {...listProps} />
-				</div>
-				<div>{showMap && map}</div>
-			</div>
-			<div className="md:hc-hidden">
-				<Tabs
-					showMap={showMap}
-					list={<List {...listProps} />}
-					map={!loading && showMap && map}
-					filter={
-						<Filter
-							showMap={showMap}
-							className="md:hc-hidden"
-						/>
-					}
-				/>
-			</div>
-		</>
-	);
-};
-
-export default MapList;
+import React from 'react';
+
+import List from '~/components/modules/maps/list';
+import Map from '~/components/modules/maps/map';
+import Tabs from '~/components/modules/maps/tabs';
+import Filter from '~/components/modules/filter';
+
+const MapList = ({
+	loading = false,
+	mapDetails,
+	markerConfigs,
+	itemExpandedContent,
+	fieldsShown,
+	specialFeatures,
+	fieldNames,
+	showMap,
+	placeMappings
+}) => {
+
+	const listProps = {
+		fieldsShown: fieldsShown,
+		fieldNames: fieldNames,
+		itemExpandedContent: itemExpandedContent,
+		loading: loading,
+		showMap: showMap,
+		specialFeatures: specialFeatures
+	};
+
+	const mapProps = {
+		mapDetails: mapDetails,
+		markerConfigs: markerConfigs,
+		placeMappings: placeMappings,
+		clusterGridSize: 60,
+		showMap: showMap
+	};
+
+	// useEffect(() => {
+	// 	if (selectedItem !== null) {
+	// 		trackEvent("Map", "View Location", selectedItem[titlePropName]);
+	// 	}
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, []);
+	const map = <Map {...mapProps} />;
+	return (
+		<>
+			<div
+				className={`
+					${showMap == false ? "md:hc-grid-rows-[100vh]" : "md:hc-grid-rows-[50vh_50vh]"}
+					md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
+				`}
+			>
+				<div>
+					<List {...listProps} />
+				</div>
+				<div>{showMap && map}</div>
+			</div>
+			<div className="md:hc-hidden">
+				<Tabs
+					showMap={showMap}
+					list={<List {...listProps} />}
+					map={!loading && showMap && map}
+					filter={
+						<Filter
+							showMap={showMap}
+							className="md:hc-hidden"
+						/>
+					}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;