@abcagency/hc-ui-components 1.3.94 → 1.3.96

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

@@ -1,55 +1,55 @@
-import React from 'react';
-import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
-
-const ListingDetails = ({
-	item,
-	useDetailsPostMessage,
-	navigateToDetails,
-	navigateToEasyApply,
-	Link,
-	linkFormat,
-	easyApplyUrl,
-	easyApplyText,
-	isIframe,
-	useApplyDialog,
-	internalApplyLink,
-	companyName,
-	jobsDomain,
-	trackEvent,
-	eventTypes
-}) => {
-	if (!item) {
-		return null;
-	}
-
-	return (
-		<div className="hc-w-full">
-			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
-				<ApplyButtonGroup
-					useDetailsPostMessage={useDetailsPostMessage}
-					navigateToDetails={navigateToDetails}
-					navigateToEasyApply={navigateToEasyApply}
-					Link={Link}
-					linkFormat={linkFormat}
-					easyApplyUrl={easyApplyUrl}
-					easyApplyText={easyApplyText}
-					isIframe={isIframe}
-					includeDialog={useApplyDialog}
-					internalApplyLink={internalApplyLink}
-					companyName={companyName}
-					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
-            lg:hc-flex-row
-          `}
-				/>
-			</div>
-		</div>
-	);
-};
-
-export default ListingDetails;
-
+import React from 'react';
+import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
+
+const ListingDetails = ({
+	item,
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	linkFormat,
+	easyApplyUrl,
+	easyApplyText,
+	isIframe,
+	useApplyDialog,
+	internalApplyLink,
+	companyName,
+	jobsDomain,
+	trackEvent,
+	eventTypes
+}) => {
+	if (!item) {
+		return null;
+	}
+
+	return (
+		<div className="hc-w-full">
+			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
+				<ApplyButtonGroup
+					useDetailsPostMessage={useDetailsPostMessage}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					linkFormat={linkFormat}
+					easyApplyUrl={easyApplyUrl}
+					easyApplyText={easyApplyText}
+					isIframe={isIframe}
+					includeDialog={useApplyDialog}
+					internalApplyLink={internalApplyLink}
+					companyName={companyName}
+					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
+            lg:hc-flex-row
+          `}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default ListingDetails;
+

package/src/components/modules/list/field-mapper-desktop.jsx

@@ -1,46 +1,46 @@
-import React from 'react';
-import Grid from '~/components/modules/grid';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-import { capitalize } from '~/util/stringUtils';
-
-const FieldMapperDesktop = ({
-	item,
-	fieldsShown,
-	specialFeatures
-}) => {
-	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, index) => {
-				let value = item.fields[field];
-				return (
-					<Grid.Item
-						key={field}
-						className={`
-              hc-hidden md:hc-block hc-px-2
-              ${index === 0 ? "hc-pl-7" : ""}
-              ${field.toLowerCase() === "position" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
-            `}
-					>
-						<span className="hc-sr-only">{capitalize(field)}</span>
-						{value}
-						<br />
-						{specialFeaturePills(field)}
-					</Grid.Item>
-				);
-			})}
-		</>
-	);
-};
-
+import React from 'react';
+import Grid from '~/components/modules/grid';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+import { capitalize } from '~/util/stringUtils';
+
+const FieldMapperDesktop = ({
+	item,
+	fieldsShown,
+	specialFeatures
+}) => {
+	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, index) => {
+				let value = item.fields[field];
+				return (
+					<Grid.Item
+						key={field}
+						className={`
+              hc-hidden md:hc-block hc-px-2
+              ${index === 0 ? "hc-pl-7" : ""}
+              ${field.toLowerCase() === "position" ? "hc-col-span-4 hc-text-balance hc-font-semibold" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+            `}
+					>
+						<span className="hc-sr-only">{capitalize(field)}</span>
+						{value}
+						<br />
+						{specialFeaturePills(field)}
+					</Grid.Item>
+				);
+			})}
+		</>
+	);
+};
+
 export default FieldMapperDesktop;

package/src/components/modules/list/field-mapper-mobile.jsx

@@ -1,105 +1,105 @@
-import React from 'react';
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-
-const FieldMapperMobile = ({
-	item,
-	fieldsShown,
-	specialFeatures,
-	handleFavouriteClick,
-	isFavorite,
-	includeFavorite = true
-}) => {
-	const specialFeaturePills = field => {
-		return field === 'position' && specialFeatures &&
-      Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
-      	return item.fields[featureKey] == 1 && (
-      		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
-      	);
-      });
-	};
-
-	return (
-		<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: "categoryClass",
-						name: "categoryClass",
-						icon: "icon-park-solid:tree-list"
-					},
-					{
-						field: "category",
-						name: "Category",
-						icon: "icon-park-solid:tree-list"
-					},
-					{
-						field: "schedule",
-						name: "Schedule",
-						icon: "gravity-ui:clock-fill"
-					},
-					{
-						field: "city",
-						name: "Location",
-						icon: "fluent:location-16-filled"
-					},
-					{
-						field: "state",
-						name: "Location",
-						icon: "fluent:location-16-filled"
-					},
-					{
-						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>
-	);
-};
-
+import React from 'react';
+import Grid from '~/components/modules/grid';
+import Icon from '~/components/modules/icon';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+
+const FieldMapperMobile = ({
+	item,
+	fieldsShown,
+	specialFeatures,
+	handleFavouriteClick,
+	isFavorite,
+	includeFavorite = true
+}) => {
+	const specialFeaturePills = field => {
+		return field === 'position' && specialFeatures &&
+      Object.entries(specialFeatures).map(([featureKey, featureLabel]) => {
+      	return item.fields[featureKey] == 1 && (
+      		<PillWrapper key={featureKey}>{featureLabel}</PillWrapper>
+      	);
+      });
+	};
+
+	return (
+		<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: "categoryClass",
+						name: "categoryClass",
+						icon: "icon-park-solid:tree-list"
+					},
+					{
+						field: "category",
+						name: "Category",
+						icon: "icon-park-solid:tree-list"
+					},
+					{
+						field: "schedule",
+						name: "Schedule",
+						icon: "gravity-ui:clock-fill"
+					},
+					{
+						field: "city",
+						name: "Location",
+						icon: "fluent:location-16-filled"
+					},
+					{
+						field: "state",
+						name: "Location",
+						icon: "fluent:location-16-filled"
+					},
+					{
+						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 FieldMapperMobile;

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

@@ -1,92 +1,92 @@
-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"
-			size="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-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
-				${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;
+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"
+			size="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-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+				${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;