@abcagency/hc-ui-components 1.3.21 → 1.3.23

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

@@ -1,108 +0,0 @@
-import React, { Fragment } from 'react';
-import { Combobox, Transition } from '@headlessui/react';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from "~/components/modules/icon";
-
-const FilterCommute = ({
-	className,
-	ready,
-	status,
-	data,
-	selected,
-	isCurrentLocation,
-	inputRef,
-	handleSelect,
-	setValue,
-	setSelected,
-	clearSuggestions,
-	commuteLocation,
-	setIsCurrentLocation,
-	fetchLocation,
-	setCommuteLocation
-}) => {
-	return (
-		<div className={`relative ${className ?? ""}`}>
-			<label
-				htmlFor="commute"
-				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
-			>
-				<Icon
-					icon="ri:pin-distance-fill"
-					size="hc-size-5"
-					className="hc-text-uiAccent/30"
-				/>
-				<span>
-					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
-				</span>
-			</label>
-
-			<Combobox value={selected} onChange={handleSelect}>
-				<div className="hc-relative hc-mt-1">
-					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
-						<Combobox.Input
-							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
-							onChange={e => {
-								setCommuteLocation("");
-								setValue(e.target.value);
-								setSelected(e.target.value);
-							}}
-							value={selected}
-							disabled={!ready}
-							placeholder="Starting point"
-							ref={inputRef}
-						/>
-						<Button.Btn
-							variant="icon"
-							size="sqsm"
-							onClick={() => {
-								setIsCurrentLocation(!isCurrentLocation);
-								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
-								if (isCurrentLocation || commuteLocation) {
-									setCommuteLocation("");
-									setSelected("");
-								} else if (!commuteLocation) { fetchLocation(); }
-							}}
-
-							className=""
-						>
-							<span className="hc-sr-only">Use your location</span>
-							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:my-location" />}
-						</Button.Btn>
-					</div>
-					<Transition
-						as={Fragment}
-						leave="hc-transition hc-ease-in hc-duration-100"
-						leaveFrom="hc-opacity-100"
-						leaveTo="hc-opacity-0"
-						afterLeave={clearSuggestions}
-					>
-						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
-							{status === "OK" &&
-								data.map(data => (
-									<Combobox.Option
-										key={data.place_id}
-										value={data.description}
-										className={({ active }) =>
-											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
-											}`
-										}
-									>
-										{({ selected }) => (
-											<span
-												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
-											>
-												{data.description}
-											</span>
-										)}
-									</Combobox.Option>
-								))}
-						</Combobox.Options>
-					</Transition>
-				</div>
-			</Combobox>
-		</div>
-	);
-};
-
-export default FilterCommute;

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import Button from '~/components/modules/buttons/default';
-
-const Filter = ({
-	className,
-	hasActiveFilters,
-	filteredListings,
-	selectedFilters,
-	setMobileTab,
-	handleReset,
-	children
-}) => {
-	return (
-		<div
-			className={`
-        hc-relative hc-max-h-[95vh] md:hc-max-h-screen hc-overflow-y-auto hc-overflow-x-auto
-        ${className ?? ""}
-      `}
-		>
-			<div className="hc-px-4 md:hc-pt-4 hc-space-y-4">
-				{children}
-			</div>
-			<div className="hc-sticky hc-bottom-0 hc-inset-x-0 hc-flex hc-items-center hc-justify-between hc-gap-2 hc-py-2 hc-px-4 hc-mt-2 hc-bg-white md:hc-bg-gray-100">
-				<Button.Btn
-					onClick={handleReset}
-					variant="outline"
-					size="sm"
-				>
-          Reset
-				</Button.Btn>
-				{selectedFilters && Object.keys(selectedFilters).length > 0 &&
-          <Button.Btn
-          	onClick={() => setMobileTab("listTab")}
-          	variant="primary"
-          	size="sm"
-          	className={`
-              md:hc-hidden
-              ${hasActiveFilters ? "hc-opacity-0 hc-pointer-events-none" : "hc-opacity-100"}
-            `}
-          >
-          	<Button.Body>
-          		<Button.Icon
-          			icon="fluent:search-12-filled"
-          			size="hc-size-3.5"
-          		/>
-              Show {filteredListings.length} Jobs
-          	</Button.Body>
-          </Button.Btn>
-				}
-			</div>
-		</div>
-	);
-};
-
-export default Filter;

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

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

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

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

@@ -1,65 +0,0 @@
-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="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

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

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

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

@@ -1,109 +0,0 @@
-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,
-	recruiters,
-	travelTime,
-	useDetailsPostMessage,
-	navigateToDetails,
-	navigateToEasyApply,
-	Link,
-	linkFormat,
-	useApplyDialog,
-	internalApplyLink,
-	companyName,
-	jobsDomain,
-	trackEvent,
-	eventTypes
-}) => {
-	if (!item) {
-		return null;
-	}
-
-	let matchingRecruiter = !recruiters ? null : recruiters[item?.recruiterId];
-
-	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={`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;
-