@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/maps/list/index.js

@@ -1,104 +1,107 @@
-import React from 'react';
-import { Icon } from "@iconify/react";
-import Accordion from "~/components/modules/accordions/default";
-import Header from "~/components/modules/maps/list/header";
-import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
-import useListLogic from '~/hooks/useList';
-import Sort from '~/components/modules/filter/sort';
-import Loading from "~/util/loading";
-import { useMap } from '~/contexts/mapContext';
-import { useMapList } from '~/contexts/mapListContext';
-import ListingDetails from "~/components/modules/jobListing/listing-details";
-
-const ItemsList = ({
-	fieldNames,
-	showMap,
-	fieldsShown,
-	specialFeatures
-}) => {
-
-	const {
-		itemLimit,
-		sortSetting,
-		loader,
-		scrollContainerRef,
-		itemRefs,
-		setSortSetting
-	} = useListLogic();
-	const { selectedListItem } = useMap();
-	const { mapItems, filteredListings, loading, commuteLocation } = useMapList();
-	const itemExpandedContent = (item, recruiters) =>
-		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
-	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
-		fieldsShown.push('travelTime');
-		fieldNames['travelTime'] = 'Commute';
-	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
-		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
-	}
-
-	return (
-		<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
-			<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
-				<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
-					{loading &&
-						<span>Loading...</span>
-					}
-					{!loading &&
-						<span>{filteredListings.length} results</span>
-					}
-				</h2>
-				<div className="hc-block md:hc-hidden">
-					<Sort
-						fields={fieldsShown}
-						setSortSetting={setSortSetting}
-						fieldNames={fieldNames}
-					/>
-				</div>
-			</div>
-			<div>
-				<Header
-					setSortSetting={setSortSetting}
-					sortSetting={sortSetting}
-					fieldsShown={fieldsShown}
-					fieldNames={fieldNames}
-				/>
-			</div>
-			<div
-				ref={scrollContainerRef}
-				className={`
-					hc-flex-grow hc-overflow-y-auto
-					${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
-				`}
-			>
-				{loading ? (
-					<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
-						<Loading />
-					</div>
-				) : (
-					<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
-						{filteredListings.slice(0, itemLimit).map(item => {
-							return (<MapAccordionItem
-								key={item.id}
-								showMap={showMap}
-								item={item}
-								itemRefs={itemRefs}
-								fieldsShown={fieldsShown}
-								itemExpandedContent={itemExpandedContent}
-								specialFeatures={specialFeatures}
-								mapItems={mapItems}
-								isActive={selectedListItem?.id == item.id}
-								hasListItemSelected={selectedListItem != null}
-							/>
-							);
-						})}
-					</Accordion>
-				)}
-				<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
-					{filteredListings.length >= itemLimit && <Loading />}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default ItemsList;
+import React from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import Header from '~/components/modules/maps/list/header';
+import MapAccordionItem from '~/components/modules/accordions/MapAccordionItem';
+import Sort from '~/components/modules/filter/sort';
+import ListingDetails from '~/components/modules/jobListing/listing-details';
+
+import useListLogic from '~/hooks/useList';
+
+import Loading from "~/util/loading";
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+
+const ItemsList = ({
+	fieldNames,
+	showMap,
+	fieldsShown,
+	specialFeatures
+}) => {
+
+	const {
+		itemLimit,
+		sortSetting,
+		loader,
+		scrollContainerRef,
+		itemRefs,
+		setSortSetting
+	} = useListLogic();
+	const { selectedListItem } = useMap();
+	const { mapItems, filteredListings, loading, commuteLocation } = useMapList();
+	const itemExpandedContent = (item, recruiters) =>
+		item ? <ListingDetails item={item} recruiters={recruiters} /> : null;
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
+
+	return (
+		<div className="hc-relative hc-bg-white md:hc-px-4 hc-flex hc-flex-col">
+			<div className="hc-flex hc-flex-wrap hc-items-center hc-justify-between hc-gap-4 md:hc-mb-2 hc-p-3 md:hc-p-0 hc-bg-uiAccent/10 md:hc-bg-transparent hc-border-b md:hc-border-none hc-border-uiAccent/20">
+				<h2 className="hc-text-gray-500 hc-font-semibold hc-text-xs md:hc-text-sm">
+					{loading &&
+						<span>Loading...</span>
+					}
+					{!loading &&
+						<span>{filteredListings.length} results</span>
+					}
+				</h2>
+				<div className="hc-block md:hc-hidden">
+					<Sort
+						fields={fieldsShown}
+						setSortSetting={setSortSetting}
+						fieldNames={fieldNames}
+					/>
+				</div>
+			</div>
+			<div>
+				<Header
+					setSortSetting={setSortSetting}
+					sortSetting={sortSetting}
+					fieldsShown={fieldsShown}
+					fieldNames={fieldNames}
+				/>
+			</div>
+			<div
+				ref={scrollContainerRef}
+				className={`
+					hc-flex-grow hc-overflow-y-auto
+					${showMap ? "md:hc-max-h-45vh hc-max-h-[100vh]" : "md:hc-max-h-95vh hc-max-h-[95vh]"}
+				`}
+			>
+				{loading ? (
+					<div className="hc-flex hc-justify-center hc-items-center hc-pt-20">
+						<Loading />
+					</div>
+				) : (
+					<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000]" defaultValue={selectedListItem?.id}>
+						{filteredListings.slice(0, itemLimit).map(item => {
+							return (<MapAccordionItem
+								key={item.id}
+								showMap={showMap}
+								item={item}
+								itemRefs={itemRefs}
+								fieldsShown={fieldsShown}
+								itemExpandedContent={itemExpandedContent}
+								specialFeatures={specialFeatures}
+								mapItems={mapItems}
+								isActive={selectedListItem?.id == item.id}
+								hasListItemSelected={selectedListItem != null}
+							/>
+							);
+						})}
+					</Accordion>
+				)}
+				<div ref={loader} style={{ height: "100px", textAlign: "center" }}>
+					{filteredListings.length >= itemLimit && <Loading />}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ItemsList;

package/src/components/modules/maps/list/item-expand-card/index.js

@@ -1,21 +1,22 @@
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-const CardItemExpand = ({
-	className,
-	content,
-	...props
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{content}
-		</div>
-	);
-};
-
-export default CardItemExpand;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const CardItemExpand = ({
+	className,
+	content,
+	...props
+}) => {
+	return (
+		<div
+			className={twMerge(
+				'hc-flex hc-flex-col lg:hc-flex-row hc-flex-wrap hc-items-stretch hc-gap-x-4 hc-w-full lg:hc-pt-2 hc-border-t hc-border-uiAccent/20',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardItemExpand;

package/src/components/modules/maps/list/item-expand-card/recruiter-contact-nav.js

@@ -1,48 +1,50 @@
-import Button from '~/components/modules/buttons/default';
-import React from 'react'
-const RecruiterContactNav = ({
-	children,
-	className
-}) => {
-	return (
-		<nav
-			className={`
-			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</nav>
-	);
-};
-
-export const NavButton = ({
-	className,
-	href,
-	target = '_self',
-	title,
-	icon,
-	...props
-}) => {
-	return (
-		<Button.Anchor
-			href={href}
-			variant="icon"
-			size="sq"
-			target={target}
-			title={title}
-			className={className ?? ''}
-			{...props}
-		>
-			<span className="hc-sr-only">{title}</span>
-			<Button.Icon
-				icon={icon}
-				size="hc-size-8"
-			/>
-		</Button.Anchor>
-	);
-};
-
-RecruiterContactNav.Button = NavButton;
-
-export default RecruiterContactNav;
+import React from 'react';
+
+import Button from '~/components/modules/buttons/default';
+
+const RecruiterContactNav = ({
+	children,
+	className
+}) => {
+	return (
+		<nav
+			className={`
+			hc-inline-flex hc-items-center hc-justify-between hc-gap-2 hc-mt-2
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</nav>
+	);
+};
+
+export const NavButton = ({
+	className,
+	href,
+	target = '_self',
+	title,
+	icon,
+	...props
+}) => {
+	return (
+		<Button.Anchor
+			href={href}
+			variant="icon"
+			size="sq"
+			target={target}
+			title={title}
+			className={className ?? ''}
+			{...props}
+		>
+			<span className="hc-sr-only">{title}</span>
+			<Button.Icon
+				icon={icon}
+				size="hc-size-8"
+			/>
+		</Button.Anchor>
+	);
+};
+
+RecruiterContactNav.Button = NavButton;
+
+export default RecruiterContactNav;

package/src/components/modules/maps/list/item-expand-card/recruiter-details.js

@@ -1,67 +1,68 @@
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-const RecruiterDetails = ({
-	contactNav,
-	className,
-	children
-}) => {
-	return (
-		<div
-			className={twMerge`
-				hc-grow
-				${className ?? ''}
-			`}
-		>
-			{children}
-
-			{contactNav &&
-				<div className="hc-inline-flex">
-					{contactNav}
-				</div>
-			}
-		</div>
-	);
-};
-
-export const Title = ({
-	as = 'h4',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-base hc-font-medium
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-export const Text = ({
-	as = 'p',
-	className,
-	children
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={twMerge`
-				hc-text-sm hc-text-uiText/60
-				${className ?? ''}
-			`}
-		>
-			{children}
-		</Container>
-	);
-};
-
-RecruiterDetails.Title = Title;
-RecruiterDetails.Text = Text;
-
-export default RecruiterDetails;
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const RecruiterDetails = ({
+	contactNav,
+	className,
+	children
+}) => {
+	return (
+		<div
+			className={twMerge`
+				hc-grow
+				${className ?? ''}
+			`}
+		>
+			{children}
+
+			{contactNav &&
+				<div className="hc-inline-flex">
+					{contactNav}
+				</div>
+			}
+		</div>
+	);
+};
+
+export const Title = ({
+	as = 'h4',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-base hc-font-medium
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const Text = ({
+	as = 'p',
+	className,
+	children
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={twMerge`
+				hc-text-sm hc-text-uiText/60
+				${className ?? ''}
+			`}
+		>
+			{children}
+		</Container>
+	);
+};
+
+RecruiterDetails.Title = Title;
+RecruiterDetails.Text = Text;
+
+export default RecruiterDetails;

package/src/components/modules/maps/list/item-expand-card/recruiter-headshot.js

@@ -1,22 +1,22 @@
-import React from 'react'
-
-const RecruiterHeadshot = ({
-	image,
-	alt,
-	className,
-	imageClassName
-}) => {
-	return (
-		<div className={className ?? ''}>
-			<img
-				src={image}
-				width="96"
-				height="96"
-				alt={alt}
-				className={imageClassName ?? ''}
-			/>
-		</div>
-	);
-};
-
-export default RecruiterHeadshot;
+import React from 'react';
+
+const RecruiterHeadshot = ({
+	image,
+	alt,
+	className,
+	imageClassName
+}) => {
+	return (
+		<div className={className ?? ''}>
+			<img
+				src={image}
+				width="96"
+				height="96"
+				alt={alt}
+				className={imageClassName ?? ''}
+			/>
+		</div>
+	);
+};
+
+export default RecruiterHeadshot;