@abcagency/hc-ui-components 1.3.23 → 1.3.24

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const FilterItem = ({
+	className,
+	item,
+	type,
+	itemKey,
+	hasCount,
+	field,
+	activeItem,
+	setActiveItem,
+	changeHandler,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+
+	return (
+		<label
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			<input
+				id={itemKey}
+				name={field}
+				disabled={item.count === 0}
+				value={itemName}
+				type={type}
+				className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
+				checked={activeItem}
+				onChange={() => {
+					setActiveItem(!activeItem);
+					changeHandler();
+				}}
+			/>
+			<span className="font-medium">{itemName}</span>
+			{hasCount && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+          ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import Accordion from '~/components/modules/accordions/default';
+import FilterCard from '~/components/modules/cards/filter';
+import AccordionFilterItem from '~/components/containers/accordions/filter-item-container';
+import Loading from '~/util/loading';
+
+const FilterLocation = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem,
+	locations,
+	setSelectedFilters,
+	selectedFilters,
+	children
+}) => {
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fluent:location-16-filled">
+				<span>
+					<span className="hc-hidden lg:hc-inline">Job</span> location
+				</span>
+			</FilterCard.Title>
+			{!locations && <Loading />}
+			{locations && (
+				<Accordion defaultValue={defaultValue} className="hc-space-y-4">
+					{locations?.map(filter => (
+						<AccordionFilterItem
+							key={filter.id}
+							filter={filter}
+							setDefaultValue={setDefaultValue}
+							selectedFilters={selectedFilters}
+							setSelectedFilters={prevFilters => {
+								setSelectedFilters(prevFilters);
+								setLocation(null);
+								setSelectedListItem(null);
+							}}
+						/>
+					))}
+					{children}
+				</Accordion>
+			)}
+		</FilterCard>
+	);
+};
+
+export default FilterLocation;

package/src/components/modules/filter/radio-item.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Icon from '~/components/modules/icon';
+
+const RadioItem = ({
+	className,
+	item,
+	field,
+	isActive,
+	changeHandler,
+	...rest
+}) => {
+	return (
+		<label
+			key={item.key}
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${item.count === 0 ? 'hc-text-uiDisabled hc-cursor-not-allowed' : 'hover:hc-bg-uiAccent/5'}
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			<input
+				key={item.key}
+				id={item.key}
+				name={field}
+				value={item.key}
+				type="radio"
+				className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-full"
+				checked={isActive}
+				onClick={changeHandler}
+			/>
+			<span className="hc-font-medium">{item.key}</span>
+			{isActive &&
+        <div className="hc-w-full hc-unselect-div">
+        	<Icon className="hc-float-right" icon="mdi:times"></Icon>
+        </div>
+			}
+		</label>
+	);
+};
+
+export default RadioItem;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import Button from '~/components/modules/buttons/default';
+import Icon from '~/components/modules/icon';
+import FilterCard from '~/components/modules/cards/filter';
+
+const Search = ({
+	inputPlaceholder,
+	showSearchIcon,
+	className,
+	labelClassName,
+	inputValue,
+	handleInputChange,
+	handleReset,
+	label
+}) => {
+	return (
+		<FilterCard as="form" className={className ?? ""}>
+			<FilterCard.Title
+				as="label"
+				icon="fluent:search-12-filled"
+				className={labelClassName ?? ""}
+			>
+				<span>
+					{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="hc-sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;

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

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+import * as Select from '@radix-ui/react-select';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+import Button from '~/components/modules/buttons/default';
+
+const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
+	const handleSortChange = value => {
+		const [field, direction] = value.split("-");
+		setSortSetting({ field, type: direction });
+	};
+
+	return (
+		<div className={className ?? ""}>
+			<Select.Root onValueChange={handleSortChange}>
+				<Select.Trigger asChild aria-label="Sort">
+					<Button.Btn variant="outline" size="sm" className="hc-normal-case">
+						<Button.Body className="hc-justify-center">
+							<Select.Value placeholder={
+								<span className="hc-flex hc-items-center hc-gap-2">
+									Sort
+									<Icon icon="mdi:sort" />
+								</span>
+							} />
+							<Select.Icon>
+								<Button.Icon icon="mdi:chevron-down" />
+							</Select.Icon>
+						</Button.Body>
+					</Button.Btn>
+				</Select.Trigger>
+				<Select.Portal>
+					<Select.Content className={`hc-relative hc-z-[200] hc-overflow-hidden hc-bg-white hc-rounded-md `}>
+						<Select.ScrollUpButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-up" />
+						</Select.ScrollUpButton>
+						<Select.Viewport className="hc-p-1">
+							{fields.map(field => (
+								<Select.Group key={field}>
+									<SelectItem value={`${field}-asc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-ascending" />
+										</span>
+									</SelectItem>
+									<SelectItem value={`${field}-desc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-descending" />
+										</span>
+									</SelectItem>
+								</Select.Group>
+							))}
+						</Select.Viewport>
+						<Select.ScrollDownButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-down" />
+						</Select.ScrollDownButton>
+					</Select.Content>
+				</Select.Portal>
+			</Select.Root>
+		</div>
+	);
+};
+
+const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Select.Item
+		className={twMerge(
+			"hc-text-sm hc-leading-none hc-rounded-sm hc-flex hc-items-center hc-w-full hc-py-1.5 hc-pr-4 hc-pl-7 hc-relative hc-select-none hc-cursor-pointer data-[disabled]:hc-text-gray-500 data-[disabled]:hc-pointer-events-none data-[highlighted]:hc-outline-none data-[highlighted]:hc-bg-primary data-[highlighted]:hc-text-white",
+			className
+		)}
+		{...props}
+		ref={forwardedRef}
+	>
+		<Select.ItemText>{children}</Select.ItemText>
+		<Select.ItemIndicator className="hc-absolute hc-left-0 hc-w-8 hc-inline-flex hc-items-center hc-justify-center">
+			<Icon icon="mdi:check" />
+		</Select.ItemIndicator>
+	</Select.Item>
+));
+
+SelectItem.displayName = "SelectItem";
+
+export default FilterSort;

package/src/components/modules/grid.js

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Grid = forwardRef((props, ref) => {
+	const {
+		as = 'div',
+		children,
+		className,
+		autoRows = true,
+		columns = 'md:hc-grid-cols-2',
+		gap = 'hc-gap-12 lg:hc-gap-16',
+		...rest
+	} = props;
+
+	const Container = as;
+
+	return (
+		<Container
+			ref={ref}
+			className={twMerge(
+				'hc-grid',
+				gap,
+				autoRows ? 'hc-auto-rows-min' : '',
+				'hc-grid-cols-1',
+				columns,
+				className ?? ''
+			)}
+			{...rest}
+		>
+			{children}
+		</Container>
+	);
+});
+
+export const GridItem = ({
+	as = 'div',
+	children,
+	className
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={className ?? ''}
+		>
+			{children}
+		</Container>
+	);
+};
+
+Grid.Item = GridItem;
+
+Grid.displayName = 'Grid';
+export default Grid;

package/src/components/modules/icon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+
+const IconContained = ({
+	className,
+	size,
+	icon,
+	iconClasses,
+	title,
+	...iconProps
+}) => {
+	return (
+		<span
+			title={title}
+			className={`
+			hc-inline-block hc-align-middle
+				${className ?? ''}
+				${size ?? ''}
+			`}
+		>
+			<Icon
+				icon={icon}
+				className={`
+					${iconClasses ?? ''}
+					${size ?? ''}
+				`}
+				{...iconProps}
+			/>
+		</span>
+	);
+};
+
+export default IconContained;

package/src/components/modules/jobListing/listing-details.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import RecruiterHeadshot from '~/components/modules/list/item-expand-card/recruiter-headshot';
+import RecruiterDetails from '~/components/modules/list/item-expand-card/recruiter-details';
+import RecruiterContactNav from '~/components/modules/list/item-expand-card/recruiter-contact-nav';
+import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
+import CommutePill from '~/components/modules/buttons/commute-pill';
+
+const ListingDetails = ({
+	item,
+	recruiter,
+	travelTime,
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	useApplyDialog,
+	internalApplyLink,
+	companyName,
+	jobsDomain,
+	trackEvent,
+	eventTypes
+}) => {
+	if (!item) {
+		return null;
+	}
+
+	let matchingRecruiter = recruiter;
+	console.log(matchingRecruiter);
+	return (
+		<div className="hc-w-full">
+			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
+				{matchingRecruiter?.headshot && (
+					<RecruiterHeadshot
+						image={`${matchingRecruiter.headshot.includes("http") ? '' :'https:'}${matchingRecruiter.headshot}`}
+						alt={matchingRecruiter?.firstName}
+						className="hc-bg-gray-300"
+					/>
+				)}
+				{matchingRecruiter && (
+					<RecruiterDetails
+						contactNav={
+							<RecruiterContactNav>
+								{matchingRecruiter?.mobilePhone && (
+									<RecruiterContactNav.Button
+										href={`tel:${matchingRecruiter.mobilePhone}`}
+										title={`Call ${matchingRecruiter.mobilePhone}`}
+										icon="fluent:phone-32-regular"
+									/>
+								)}
+								{matchingRecruiter?.email && (
+									<RecruiterContactNav.Button
+										href={`mailto:${matchingRecruiter.email}`}
+										title={`email ${matchingRecruiter.email}`}
+										icon="bi:envelope-at"
+									/>
+								)}
+								{matchingRecruiter?.linkedIn && (
+									<RecruiterContactNav.Button
+										href={matchingRecruiter.linkedIn}
+										title="LinkedIn"
+										icon="ant-design:linkedin-outlined"
+									/>
+								)}
+							</RecruiterContactNav>
+						}
+					>
+						{matchingRecruiter?.firstName || matchingRecruiter?.lastName && (
+							<RecruiterDetails.Title>
+								{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
+							</RecruiterDetails.Title>
+						)}
+						{item.details?.recruiter?.title && (
+							<RecruiterDetails.Text>
+								{item.details.recruiter.title}
+							</RecruiterDetails.Text>
+						)}
+					</RecruiterDetails>
+				)}
+				<ApplyButtonGroup
+					useDetailsPostMessage={useDetailsPostMessage}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					includeDialog={useApplyDialog}
+					internalApplyLink={internalApplyLink}
+					companyName={companyName}
+					applyUrl={item?.applyUrl}
+					itemId={item.id}
+					item={item}
+					trackEvent={trackEvent}
+					eventTypes={eventTypes}
+					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${jobsDomain}${item.id}`}
+					className={`
+            lg:hc-w-auto hc-order-first lg:hc-order-last md:hc-self-center hc-py-2 lg:hc-p-0 lg:hc-mb-0 hc-border-b lg:hc-border-none hc-border-uiAccent/20
+            ${matchingRecruiter ? "lg:hc-flex-col lg:hc-w-auto" : "lg:hc-flex-row"}
+          `}
+				/>
+			</div>
+			<div className="hc-w-full">
+				<CommutePill travelTime={travelTime} className="hc-ml-0" />
+			</div>
+		</div>
+	);
+};
+
+export default ListingDetails;
+

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

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

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