@abcagency/hc-ui-components 1.3.17 → 1.3.19

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

@@ -1,89 +1,89 @@
-import React, { useState } from 'react';
-
-import FilterSearch from '~/components/modules/filter/search';
-import FiltersAccordion from '~/components/modules/accordions/filters';
-import FilterLocations from '~/components/modules/filter/location';
-import Button from '~/components/modules/buttons/default';
-
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import { useTrackEvent } from '~/contexts/trackEventContext';
-
-const Filter = ({
-	className,
-	showMap
-}) => {
-	const { trackEvent, eventTypes } = useTrackEvent();
-	const [hasActiveFilters, setHasActiveFilters] = useState(false);
-	const [defaultValue, setDefaultValue] = useState(null);
-	const { setSelectedListItem, setLocation, filterReset } = useMap();
-	const {
-		filteredListings,
-		selectedFilters,
-		setSelectedFilters,
-		setMobileTab,
-		handleSettingFavorites,
-		setQuery,
-		siteConfig
-	} = useMapList();
-
-	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">
-				<FiltersAccordion
-					setHasActiveFilters={setHasActiveFilters}
-					defaultValue={defaultValue}
-					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-					setLocation={setLocation}
-					setSelectedListItem={setSelectedListItem}
-				/>
-				<FilterSearch />
-				{siteConfig.hideLocations !== true &&
-					<FilterLocations
-						setHasActiveFilters={setHasActiveFilters}
-						defaultValue={defaultValue}
-						showMap={showMap}
-						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
-						setLocation={setLocation}
-						setSelectedListItem={setSelectedListItem}
-					/>
-				}
-			</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={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
-					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;
+import React, { useState } from 'react';
+
+import FilterSearch from '~/components/modules/filter/search';
+import FiltersAccordion from '~/components/modules/accordions/filters';
+import FilterLocations from '~/components/modules/filter/location';
+import Button from '~/components/modules/buttons/default';
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+
+const Filter = ({
+	className,
+	showMap
+}) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const [hasActiveFilters, setHasActiveFilters] = useState(false);
+	const [defaultValue, setDefaultValue] = useState(null);
+	const { setSelectedListItem, setLocation, filterReset } = useMap();
+	const {
+		filteredListings,
+		selectedFilters,
+		setSelectedFilters,
+		setMobileTab,
+		handleSettingFavorites,
+		setQuery,
+		siteConfig
+	} = useMapList();
+
+	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">
+				<FiltersAccordion
+					setHasActiveFilters={setHasActiveFilters}
+					defaultValue={defaultValue}
+					setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+					setLocation={setLocation}
+					setSelectedListItem={setSelectedListItem}
+				/>
+				<FilterSearch />
+				{siteConfig.hideLocations !== true &&
+					<FilterLocations
+						setHasActiveFilters={setHasActiveFilters}
+						defaultValue={defaultValue}
+						showMap={showMap}
+						setDefaultValue={value => { setDefaultValue(value == defaultValue ? "" : value); }}
+						setLocation={setLocation}
+						setSelectedListItem={setSelectedListItem}
+					/>
+				}
+			</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={() => {trackEvent(eventTypes.FILTERS_RESET, { filtersRemoved: selectedFilters }); filterReset(); setSelectedFilters({}); setQuery(null); handleSettingFavorites(null); }}
+					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/radio-item.js

@@ -42,7 +42,6 @@ const RadioItem = ({
 				onClick={() => {
 					changeHandler();
 				}}
-				onChange={() => { }}
 			/>
 			<span className="hc-font-medium">{item.key}</span>
 			{isActive &&

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

@@ -1,92 +1,93 @@
-import React, { useRef, useState, useEffect } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from '~/components/modules/icon';
-import FilterCard from '~/components/modules/cards/filter';
-
-import { useMapList } from '~/contexts/mapListContext';
-
-const Search = ({
-	inputPlaceholder = "Keywords",
-	showSearchIcon = false,
-	className,
-	labelClassName
-}) => {
-	const [inputValue, setInputValue] = useState(query != null ? query : "");
-	const debounceTimer = useRef(null);
-	const {
-		query,
-		setQuery,
-		siteConfig
-	} = useMapList();
-	const handleInputChange = e => {
-		setInputValue(e.target.value);
-		if (debounceTimer.current) {
-			clearTimeout(debounceTimer.current);
-		}
-		debounceTimer.current = setTimeout(() => {
-			setQuery(e.target.value);
-		}, 500);
-	};
-
-	const handleReset = () => {
-		setInputValue("");
-		setQuery("");
-	};
-
-	useEffect(() => {
-		if (query == null) {
-			setInputValue("");
-		}
-	}, [query]);
-	inputPlaceholder = siteConfig.searchConfig.placeholder;
-	return (
-		<FilterCard as="form" className={className ?? ""}>
-			<FilterCard.Title
-				as="label"
-				icon="fluent:search-12-filled"
-				className={labelClassName ?? ""}
-			>
-				<span>
-					{siteConfig.searchConfig.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;
+import React, { useRef, useState, useEffect } from 'react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from '~/components/modules/icon';
+import FilterCard from '~/components/modules/cards/filter';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+const Search = ({
+	inputPlaceholder = "Keywords",
+	showSearchIcon = false,
+	className,
+	labelClassName
+}) => {
+	const {
+		query,
+		setQuery,
+		siteConfig
+	} = useMapList();
+	const [inputValue, setInputValue] = useState(query != null ? query : "");
+	const debounceTimer = useRef(null);
+
+	const handleInputChange = e => {
+		setInputValue(e.target.value);
+		if (debounceTimer.current) {
+			clearTimeout(debounceTimer.current);
+		}
+		debounceTimer.current = setTimeout(() => {
+			setQuery(e.target.value);
+		}, 500);
+	};
+
+	const handleReset = () => {
+		setInputValue("");
+		setQuery("");
+	};
+
+	useEffect(() => {
+		if (query == null) {
+			setInputValue("");
+		}
+	}, [query]);
+	inputPlaceholder = siteConfig.searchConfig.placeholder;
+	return (
+		<FilterCard as="form" className={className ?? ""}>
+			<FilterCard.Title
+				as="label"
+				icon="fluent:search-12-filled"
+				className={labelClassName ?? ""}
+			>
+				<span>
+					{siteConfig.searchConfig.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/jobListing/listing-details-container.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+import { useTrackEvent } from '~/contexts/trackEventContext';
+import ListingDetails from '~/components/modules/jobListing/listing-details';
+
+const ListingDetailsContainer = ({ item, recruiters }) => {
+	const { trackEvent, eventTypes } = useTrackEvent();
+	const { travelTime } = useMap();
+	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat } = useMapList();
+
+	const {
+	  useDetailsPostMessage,
+	  useApplyDialog,
+	  internalApplyLink,
+	  companyName,
+	  jobsDomain
+	} = siteConfig;
+
+	return (
+	  <ListingDetails
+		item={item}
+		recruiters={recruiters}
+		travelTime={travelTime}
+		useDetailsPostMessage={useDetailsPostMessage}
+		navigateToDetails={navigateToDetails}
+		navigateToEasyApply={navigateToEasyApply}
+		Link={Link}
+		linkFormat={linkFormat}
+		useApplyDialog={useApplyDialog}
+		internalApplyLink={internalApplyLink}
+		companyName={companyName}
+		jobsDomain={jobsDomain}
+		trackEvent={trackEvent}
+		eventTypes={eventTypes}
+	  />
+	);
+  };
+
+  export default ListingDetailsContainer;