@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/maps/info-window-content.js

@@ -1,60 +1,58 @@
-import React from "react";
-import { DistanceMatrixService } from "@react-google-maps/api";
-import { useMapList } from "~/contexts/mapListContext";
-import { useMap } from "~/contexts/mapContext";
-import CommutePill from "../buttons/commute-pill";
-
-const InfoWindowContent = ({
-	item,
-	filterListingsByLocation
-}) => {
-	const { setSelectedFilters, setQuery, setMobileTab, selectedFilters } = useMapList();
-	let items = item && item.items ? Object.values(item.items) : null;
-
-	if (!items || items.length < 0) {
-		return;
-	}
-	const addressParts = [
-		items[0].mapDetails?.address?.street,
-		items[0].mapDetails?.address?.city,
-		items[0].mapDetails?.address?.state,
-		items[0].mapDetails?.address?.zip
-	];
-	const fullAddress = addressParts.filter(Boolean).join(', ');
-
-	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={() => {
-								setMobileTab("listTab");
-								setSelectedFilters({
-									...selectedFilters,
-									cityState: {
-										[items[0].fields.cityState]: true
-									}
-								});
-								filterListingsByLocation();
-							}}
-						>
-							{items.length > 1
-								? `View All ${items.length} jobs at this location`
-								: `View job at this location`}
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default InfoWindowContent;
+import React from 'react';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const InfoWindowContent = ({
+	item,
+	filterListingsByLocation
+}) => {
+	const { setSelectedFilters, setQuery, setMobileTab, selectedFilters } = useMapList();
+	let items = item && item.items ? Object.values(item.items) : null;
+
+	if (!items || items.length < 0) {
+		return;
+	}
+	const addressParts = [
+		items[0].mapDetails?.address?.street,
+		items[0].mapDetails?.address?.city,
+		items[0].mapDetails?.address?.state,
+		items[0].mapDetails?.address?.zip
+	];
+	const fullAddress = addressParts.filter(Boolean).join(', ');
+
+	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={() => {
+								setMobileTab("listTab");
+								setSelectedFilters({
+									...selectedFilters,
+									cityState: {
+										[items[0].fields.cityState]: true
+									}
+								});
+								filterListingsByLocation();
+							}}
+						>
+							{items.length > 1
+								? `View All ${items.length} jobs at this location`
+								: `View job at this location`}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default InfoWindowContent;

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

@@ -1,111 +1,112 @@
-import Grid from '~/components/modules/grid';
-import Icon from '~/components/modules/icon';
-import { capitalize } from '~/util/stringUtils';
-import PillWrapper from '~/components/modules/buttons/pill-wrapper';
-import CommutePill from "~/components/modules/buttons/commute-pill";
-import React from 'react'
-
-const FieldMapper = ({
-	item,
-	fieldsShown,
-	specialFeatures,
-	handleFavouriteClick,
-	isFavorite
-}) => {
-	const orderedFields = fieldsShown.filter(field => field in item.fields);
-
-	const specialFeaturePills = (field, mobile = false) => {
-		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"
-					>
-						<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
+}) => {
+	const orderedFields = fieldsShown.filter(field => field in item.fields);
+
+	const specialFeaturePills = (field, mobile = false) => {
+		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-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;

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

@@ -1,90 +1,91 @@
-import Button from "~/components/modules/buttons/default";
-import { useState, useEffect } from "react";
-import React from 'react'
-
-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 hc-font-bold hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${className ?? ""}
-			`}
-			{...rest}
-		>
-			<Button.Body>
-				{children}
-				{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"
+			className={`
+				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hc-font-bold 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>
+				{children}
+				{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/maps/list/header.js

@@ -1,46 +1,47 @@
-import { twMerge } from "tailwind-merge";
-import Grid from "~/components/modules/grid";
-import HeaderItem from "~/components/modules/maps/list/header-item";
-import React from 'react'
-
-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-pl-6 hc-pr-8 hc-hidden hc-md:grid hc-flex-auto hc-bg-uiAccent/10 hc-border-b hc-border-uiAccent/10 hc-sticky hc-top-0 hc-z-10 hc-pb-[20px]
-				${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/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;