@abcagency/hc-ui-components 1.3.18 → 1.3.19

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

@@ -1,99 +1,209 @@
-import React from 'react';
-
-import RecruiterHeadshot from '~/components/modules/maps/list/item-expand-card/recruiter-headshot';
-import RecruiterDetails from '~/components/modules/maps/list/item-expand-card/recruiter-details';
-import RecruiterContactNav from '~/components/modules/maps/list/item-expand-card/recruiter-contact-nav';
-import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
-import CommutePill from '~/components/modules/buttons/commute-pill';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const ListingDetails = ({ item, recruiters }) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const { travelTime } = useMap();
-	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
-	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={siteConfig.useDetailsPostMessage}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					includeDialog={siteConfig.useApplyDialog}
-					internalApplyLink={siteConfig.internalApplyLink}
-					companyName={siteConfig.companyName}
-					applyUrl={item?.applyUrl}
-					itemId={item.id}
-					item={item}
-					trackEvent={trackEvent}
-					eventTypes={eventTypes}
-					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.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;
+// 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';
+
+// import { useMap } from '~/contexts/mapContext';
+// import { useMapList } from '~/contexts/mapListContext';
+// import { useTrackEvent } from '~/contexts/trackEventContext';
+
+// const ListingDetails = ({ item, recruiters }) => {
+// 	const { trackEvent, eventTypes } = useTrackEvent();
+// 	const { travelTime } = useMap();
+// 	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
+// 	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={siteConfig.useDetailsPostMessage}
+// 					navigateToDetails={navigateToDetails}
+// 					navigateToEasyApply={navigateToEasyApply}
+// 					Link={Link}
+// 					linkFormat={linkFormat}
+// 					includeDialog={siteConfig.useApplyDialog}
+// 					internalApplyLink={siteConfig.internalApplyLink}
+// 					companyName={siteConfig.companyName}
+// 					applyUrl={item?.applyUrl}
+// 					itemId={item.id}
+// 					item={item}
+// 					trackEvent={trackEvent}
+// 					eventTypes={eventTypes}
+// 					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.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;
+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
+}) => {
+	console.log(item);
+	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;
+

package/src/components/modules/{maps/list → list}/field-mapper.js

@@ -1,112 +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
-}) => {
-	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%]"> {/* Use percentage for minimum width */}
-								<h3 className="hc-font-bold hc-mb-3 hc-flex-1">{item.fields.position}</h3>
-								<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)}
-									/>
-								</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;
+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
+}) => {
+	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%]"> {/* Use percentage for minimum width */}
+								<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)}
+									/>
+								</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/{maps/list → list}/header.js

@@ -1,47 +1,49 @@
-import React from 'react';
-import { twMerge } from 'tailwind-merge';
-
-import Grid from '~/components/modules/grid';
-import HeaderItem from '~/components/modules/maps/list/header-item';
-
-const ListHeader = ({
-	className,
-	fieldsShown,
-	fieldNames,
-	fieldIsSortable = true,
-	setSortSetting,
-	sortSetting
-}) => {
-	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>
-			))}
-			<HeaderItem key={"favorite"}
-				isSortable={false}
-				field={"favorite"}
-			>
-				Favorite
-			</HeaderItem>
-
-		</Grid>
-	);
-};
-
-export default ListHeader;
+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;