@abcagency/hc-ui-components 1.3.58 → 1.3.60

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

@@ -1,55 +1,55 @@
-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;
+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/location.js

@@ -1,51 +1,51 @@
-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 => {
-						if(filter.id === 'entityName' && (!selectedFilters.cityState && !selectedFilters.state)){
-							return;
-						}
-						return(<AccordionFilterItem
-							key={filter.id}
-							filter={filter}
-							setDefaultValue={setDefaultValue}
-							selectedFilters={selectedFilters}
-							setSelectedFilters={prevFilters => {
-								setSelectedFilters(prevFilters);
-								setLocation(null);
-								setSelectedListItem(null);
-							}}
-						/>);
-					})}
-					{children}
-				</Accordion>
-			)}
-		</FilterCard>
-	);
-};
-
-export default FilterLocation;
+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 => {
+						if(filter.id === 'entityName' && (!selectedFilters.cityState && !selectedFilters.state)){
+							return;
+						}
+						return(<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 +1,42 @@
-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;
+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,79 +1,79 @@
-import React, { useRef } 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,
-	handleSubmitInput,
-	handleReset,
-	label
-}) => {
-	const inputRef = useRef(null);
-	const buttonRef = useRef(null);
-
-	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"
-					ref={inputRef}
-					onKeyDown={e => {
-						if (e.key === 'Enter') {
-							e.preventDefault();
-							buttonRef.current.click(); // Trigger the hidden button on Enter key press
-						}
-					}}
-					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
-				   id="SearchButton"
-					ref={buttonRef}
-					type="button"
-					className="hidden hc-invisible"
-					onClick={() => handleSubmitInput(inputRef.current.value)}
-				>
-                    Hidden Submit
-				</button>
-
-				<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="hc-sr-only">Clear</span>
-					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
-				</Button.Btn>
-			</div>
-		</FilterCard>
-	);
-};
-
-export default Search;
+import React, { useRef } 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,
+	handleSubmitInput,
+	handleReset,
+	label
+}) => {
+	const inputRef = useRef(null);
+	const buttonRef = useRef(null);
+
+	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"
+					ref={inputRef}
+					onKeyDown={e => {
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							buttonRef.current.click(); // Trigger the hidden button on Enter key press
+						}
+					}}
+					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
+				   id="SearchButton"
+					ref={buttonRef}
+					type="button"
+					className="hidden hc-invisible"
+					onClick={() => handleSubmitInput(inputRef.current.value)}
+				>
+                    Hidden Submit
+				</button>
+
+				<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="hc-sr-only">Clear</span>
+					<Button.Icon icon="uil:times" className="hc-text-uiAccent" />
+				</Button.Btn>
+			</div>
+		</FilterCard>
+	);
+};
+
+export default Search;