@abcagency/hc-ui-components 1.3.21 → 1.3.23

package/src/components/modules/list/field-mapper.js

@@ -1,114 +0,0 @@
-import React from 'react';
-
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-
-import { capitalize } from '~/util/stringUtils';
-
-const FieldMapper = ({
-	item,
-	fieldsShown,
-	specialFeatures,
-	handleFavouriteClick,
-	isFavorite,
-	includeFavorite = true
-}) => {
-	const orderedFields = fieldsShown.filter(field => field in item.fields);
-
-	const specialFeaturePills = field => {
-		return field === 'position' && specialFeatures &&
-			Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-				return item.fields[featureKey] === 1 && (
-					<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
-				);
-			});
-	};
-
-	return (
-		<>
-			{orderedFields.map(field => {
-				let value = item.fields[field];
-				return (
-					<Grid.Item
-						key={field}
-						className={`
-							hc-hidden md:hc-block
-							${field.toLowerCase() === "position" ? "hc-col-span-2 hc-text-balance hc-pr-2 hc-font-semibold" : "hc-col-span-1"}
-						`}
-					>
-						<span className="hc-sr-only">{capitalize(field)}</span>
-						{value}
-						<br />
-						{specialFeaturePills(field)}
-					</Grid.Item>
-				);
-			})}
-			<Grid.Item className="md:hc-hidden">
-				{fieldsShown.includes("position") &&
-					<>
-						<div className="hc-flex hc-items-start">
-							<div className="hc-flex hc-justify-between hc-items-center hc-min-w-[100%]"> {}
-								<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
-								{includeFavorite && <div className="hc-flex hc-justify-end hc-pb-2">
-									<Icon
-										icon={isFavorite ? "mdi:heart" : "mdi:heart-outline"}
-										size="hc-size-3.5"
-										iconClasses={isFavorite ? "hc-text-primary" : ""}
-										className={`hc-transition-opacity hc-duration-300 hc-cursor-pointer
-									${isFavorite ? "hc-opacity-100" : "hc-text-uiText/60 group-hover:hc-opacity-100"}
-									`}
-										onClick={e => handleFavouriteClick(e, item)}
-									/>
-								</div>
-								}
-							</div>
-						</div>
-						{specialFeatures && <div className='hc-pb-4'>{specialFeaturePills("position", true)} </div>}
-					</>
-				}
-
-				<ul className="hc-space-y-2 hc-text-xs">
-					{[
-						{
-							field: "category",
-							name: "Category",
-							icon: "icon-park-solid:tree-list"
-						},
-						{
-							field: "schedule",
-							name: "Schedule",
-							icon: "gravity-ui:clock-fill"
-						},
-						{
-							field: "cityState",
-							name: "Location",
-							icon: "fluent:location-16-filled"
-						},
-						{
-							field: "travelTime",
-							name: "Commute",
-							icon: "ri:pin-distance-fill"
-						}
-					].map(listItem => (
-						(fieldsShown.includes(listItem.field) && item.fields[listItem.field]) &&
-						<li
-							key={listItem.field}
-							className="hc-flex hc-gap-2"
-						>
-							<Icon
-								icon={listItem.icon}
-								size="hc-size-3.5"
-								className="hc-text-uiAccent/30"
-							/>
-							<span className="hc-sr-only">{listItem.name}</span>
-							{item.fields[listItem.field]}
-						</li>
-					))}
-				</ul>
-			</Grid.Item>
-		</>
-	);
-};
-
-export default FieldMapper;

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

@@ -1,91 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-const SORT_STATE = {
-	notSorted: "not-sorted",
-	sortedAsc: "sorted-asc",
-	sortedDesc: "sorted-desc"
-};
-
-const HeaderItem = ({
-	className,
-	children,
-	field,
-	setSortSetting,
-	sortSetting,
-	isSortable,
-	...rest
-}) => {
-	const [isSorted, setIsSorted] = useState(SORT_STATE.notSorted);
-
-	const handleChange = field => {
-		if (isSortable === false)
-			return;
-		let setting = {
-			field: field,
-			type: isSorted === SORT_STATE.sortedAsc ? "desc" : "asc"
-		};
-		setSortSetting(setting);
-		isSorted === SORT_STATE.notSorted
-			? setIsSorted(SORT_STATE.sortedAsc)
-			: isSorted === SORT_STATE.sortedAsc
-				? setIsSorted(SORT_STATE.sortedDesc)
-				: setIsSorted(SORT_STATE.sortedAsc);
-	};
-
-	useEffect(() => {
-		if (sortSetting?.field != null && sortSetting.field != field) {
-			setIsSorted(SORT_STATE.notSorted);
-		} else if (
-			sortSetting?.field != null &&
-			isSorted == SORT_STATE.notSorted &&
-			sortSetting.field == field
-		) {
-			setIsSorted(
-				sortSetting.type == "asc"
-					? SORT_STATE.sortedAsc
-					: SORT_STATE.sortedDesc
-			);
-		}
-	}, [sortSetting, isSorted, field]);
-
-	return (
-		<Button.Btn
-			onClick={() => handleChange(field)}
-			variant="none"
-			className={`
-				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${field.toLowerCase() === "position" ? "hc-col-span-2" : "hc-col-span-1"}
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<Button.Body>
-				<span className="hc-font-semibold">{children}</span>
-				{isSortable && (
-					<div className="hc-flex hc-flex-col hc-pr-2">
-						<Button.Icon
-							icon="bi:caret-up-fill"
-							size="hc-size-2.5"
-							className={`
-							hc-transition-opacity
-								${isSorted === "sorted-asc" ? "hc-opacity-100 hc-text-primary" : "hc-opacity-30"}
-							`}
-						/>
-						<Button.Icon
-							icon="bi:caret-down-fill"
-							size="hc-size-2.5"
-							className={`
-								transition-opacity
-								${isSorted === "sorted-desc" ? "hc-opacity-100" : "hc-opacity-30"}
-							`}
-						/>
-					</div>
-				)}
-			</Button.Body>
-		</Button.Btn>
-	);
-};
-
-export default HeaderItem;

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

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

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

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

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

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

@@ -1,85 +0,0 @@
-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;
-  itemExpandedContent: (item: Listing, recruiters: any) => JSX.Element | 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

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

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

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