@abcagency/hc-ui-components 1.3.23 → 1.3.24

package/src/components/modules/list/header.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import Grid from '~/components/modules/grid';
+import HeaderItem from '~/components/modules/list/header-item';
+
+const ListHeader = ({
+	className,
+	fieldsShown,
+	fieldNames,
+	fieldIsSortable = true,
+	setSortSetting,
+	sortSetting,
+	includeFavorite = false
+}) => {
+	return (
+		<Grid
+			columns="hc-grid-flow-col hc-auto-cols-fr"
+			gap="hc-gap-0"
+			isAnimated={false}
+			className={twMerge`
+				hc-hidden md:hc-grid hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10
+				${className ?? ""}
+			`}
+		>
+			{fieldsShown.map(field => (
+				<HeaderItem
+					key={field}
+					isSortable={fieldIsSortable}
+					sortSetting={sortSetting}
+					field={field}
+					setSortSetting={setSortSetting}
+				>
+					{fieldNames[field]}
+				</HeaderItem>
+			))}
+			{ includeFavorite == true &&
+			<HeaderItem key={"favorite"}
+				isSortable={false}
+				field={"favorite"}
+			>
+				Favorite
+			</HeaderItem>
+			}
+		</Grid>
+	);
+};
+
+export default ListHeader;

package/src/components/modules/list/item-expand-card/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const CardItemExpand = ({
+	className,
+	content,
+	...props
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardItemExpand;

package/src/components/modules/list/item-expand-card/recruiter-contact-nav.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const RecruiterContactNav = ({
+	children,
+	className
+}) => {
+	return (
+		<nav
+			className={`
+			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</nav>
+	);
+};
+
+export const NavButton = ({
+	className,
+	href,
+	target = '_self',
+	title,
+	icon,
+	...props
+}) => {
+	return (
+		<Button.Anchor
+			href={href}
+			variant="icon"
+			size="sq"
+			target={target}
+			title={title}
+			className={className ?? ''}
+			{...props}
+		>
+			<span className="hc-sr-only">{title}</span>
+			<Button.Icon
+				icon={icon}
+				size="hc-size-8"
+			/>
+		</Button.Anchor>
+	);
+};
+
+RecruiterContactNav.Button = NavButton;
+
+export default RecruiterContactNav;

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

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

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

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

package/src/components/modules/list/item-list.tsx

@@ -0,0 +1,84 @@
+import React, { RefObject, ReactNode } from 'react';
+import Header from '~/components/modules/list/header';
+import Sort from '~/components/modules/filter/sort';
+import Loading from "~/util/loading";
+import { Listing } from '~/types/Listings';
+
+interface ItemsListProps {
+  fieldNames: Record<string, string>;
+  showMap: boolean;
+  fieldsShown: string[];
+  filteredListings: Listing[];
+  loading: boolean;
+  sortSetting: any;
+  setSortSetting: (setting: any) => void;
+  itemLimit: number;
+  loader: RefObject<HTMLDivElement>;
+  scrollContainerRef: RefObject<HTMLDivElement>;
+  itemRefs: any;
+  selectedListItem: Listing | null;
+  children: ReactNode;
+  includeFavorite: boolean;
+}
+
+const ItemsList: React.FC<ItemsListProps> = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	filteredListings,
+	loading,
+	sortSetting,
+	setSortSetting,
+	itemLimit,
+	loader,
+	scrollContainerRef,
+	includeFavorite = false,
+	children
+}) => (
+	<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
+		<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
+			<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
+				{loading && <span>Loading...</span>}
+				{!loading && <span>{filteredListings.length} results</span>}
+			</h2>
+			<div className="hc-block md:hc-hidden">
+				<Sort
+					className={''}
+					fields={fieldsShown}
+					setSortSetting={setSortSetting}
+					fieldNames={fieldNames}
+				/>
+			</div>
+		</div>
+		<div>
+			<Header
+				className={''}
+				setSortSetting={setSortSetting}
+				sortSetting={sortSetting}
+				fieldsShown={fieldsShown}
+				fieldNames={fieldNames}
+				includeFavorite={includeFavorite}
+			/>
+		</div>
+		<div
+			ref={scrollContainerRef}
+			className={`
+        hc-flex-grow hc-overflow-y-auto
+        ${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
+      `}
+		>
+			{loading ? (
+				<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
+					<Loading />
+				</div>
+			) : (
+				children
+			)}
+			<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
+				{filteredListings.length >= itemLimit && <Loading />}
+			</div>
+		</div>
+	</div>
+);
+
+export default ItemsList;

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

@@ -0,0 +1,130 @@
+import React, { forwardRef, useState } from 'react';
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import FieldMapper from '~/components/modules/list/field-mapper';
+
+const ListItem = forwardRef(
+	(
+		{
+			isActive,
+			bodyClassName,
+			className,
+			item,
+			fieldsShown,
+			specialFeatures,
+			onItemSelected,
+			showMap,
+			setMobileTab,
+			handleSettingFavorites,
+			favorites,
+			includeFavorite = true,
+			siteConfig,
+			trackEvent,
+			eventTypes,
+			...props
+		},
+		ref
+	) => {
+		const mapPinColor = !showMap ? null : siteConfig.colors.primary.replace("#", "");
+
+		const handleClick = () => {
+			if (onItemSelected) {
+				onItemSelected(item);
+			}
+		};
+		let isFavorite = favorites.includes(item.id);
+
+		const handleFavouriteClick = (event, item) => {
+			if(!includeFavorite)return;
+			event.stopPropagation();
+			let updatedFavorites;
+			if (isFavorite) {
+				updatedFavorites = favorites.filter(fav => fav !== item.id);
+			} else {
+				updatedFavorites = [...favorites, item.id];
+			}
+			isFavorite = !isFavorite;
+			handleSettingFavorites(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}
+						includeFavorite={includeFavorite}
+						handleFavouriteClick={handleFavouriteClick}
+					/>
+					{includeFavorite &&
+					<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, item);}}
+						/>
+					</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.favorites === nextProps.favorites &&
+    prevProps.item.id === nextProps.item.id &&
+	prevProps.item.fields.travelTime === nextProps.item.fields.travelTime &&
+    prevProps.fieldsShown === nextProps.fieldsShown &&
+    prevProps.bodyClassName === nextProps.bodyClassName &&
+    prevProps.className === nextProps.className
+	);
+});

package/src/components/modules/maps/info-window-card.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const CardInfoWindow = ({ className, content, id }) => {
+	return (
+		<div
+			id={id}
+			className={`
+			hc-relative hc-flex hc-flex-col hc-break-words hc-bg-clip-border
+				${className ?? ""}
+			`}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardInfoWindow;

package/src/components/modules/maps/info-window-content.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const InfoWindowContent = ({
+	items,
+	fullAddress,
+	applyFilters
+}) => {
+	if (!items || items.length < 0) {
+		return null;
+	}
+	return (
+		<div className="hc-flex-auto hc-p-2">
+			<div>
+				<div>
+					<h4 className="hc-text-lg hc-font-bold hc-leading-tight hc-mb-3">
+						{items[0].mapDetails?.entityDisplayName}
+					</h4>
+					<p>{fullAddress}</p>
+					<div className="hc-pt-2">
+						<button
+							className="hc-cursor-pointer hover:hc-opacity-70 hc-text-primary"
+							onClick={applyFilters}
+						>
+							{items.length > 1
+								? `View All ${items.length} jobs at this location`
+								: `View job at this location`}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default InfoWindowContent;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import Tabs from '~/components/modules/maps/tabs';
+
+const MapList = ({ showMap, loading, list, map, filter }) => {
+	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}</div>
+				<div>{showMap && map}</div>
+			</div>
+			<div className="md:hc-hidden">
+				<Tabs
+					showMap={showMap}
+					list={list}
+					map={!loading && showMap && map}
+					filter={filter}
+				/>
+			</div>
+		</>
+	);
+};
+
+export default MapList;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MarkerF } from '@react-google-maps/api';
+
+const MapMarker = ({
+	position,
+	title,
+	icon,
+	zIndex,
+	onLoad,
+	onClick,
+	clusterer,
+	children
+}) => {
+	return (
+		<MarkerF
+			position={position}
+			title={title}
+			options={{ icon: icon }}
+			zIndex={zIndex}
+			onLoad={onLoad}
+			onClick={onClick}
+			clusterer={clusterer}
+		>
+			{children}
+		</MarkerF>
+	);
+};
+
+export default MapMarker;

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { GoogleMap, MarkerClustererF } from "@react-google-maps/api";
+import ShowAllButton from "~/components/modules/buttons/show-all-button";
+import { clusterOptions } from "~/util/mapUtil";
+
+const Map = ({
+	zoom,
+	center,
+	mapContainerRef,
+	onLoad,
+	onIdle,
+	clusterGridSize,
+	markerConfigs,
+	mapMarkers,
+	placeMarkers,
+	mapInteracted,
+	pinIconUrl,
+	setMapInteracted,
+	fitBounds,
+	mapRef,
+	setQuery,
+	filteredListingsLength,
+	setSelectedFilters
+}) => {
+	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" }]
+								}
+							]
+						}}
+					>
+						<MarkerClustererF options={clusterOptions(clusterGridSize, markerConfigs.fillColor)}>
+							{clusterer => (
+								<>
+									{mapMarkers}
+									{placeMarkers}
+								</>
+							)}
+						</MarkerClustererF>
+					</GoogleMap>
+					{mapInteracted && markerConfigs && (
+						<ShowAllButton
+							mapInteracted={mapInteracted}
+							markerConfigs={markerConfigs}
+							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

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