@abcagency/hc-ui-components 1.1.1 → 1.2.0

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

@@ -1,83 +1,83 @@
-import { forwardRef } from "react";
-import * as Select from "@radix-ui/react-select";
-import { twMerge } from "tailwind-merge";
-import Icon from "~/components/modules/icon";
-import Button from "~/components/modules/buttons/default";
-import React from 'react'
-
-const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
-	const handleSortChange = value => {
-		const [field, direction] = value.split("-");
-		setSortSetting({ field, type: direction });
-	};
-
-	return (
-		<div className={className ?? ""}>
-			<Select.Root onValueChange={handleSortChange}>
-				<Select.Trigger asChild aria-label="Sort">
-					<Button.Btn variant="outline" size="sm" className="hc-normal-case">
-						<Button.Body className="hc-justify-center">
-							<Select.Value placeholder={
-								<span className="hc-flex hc-items-center hc-gap-2">
-									Sort
-									<Icon icon="mdi:sort" />
-								</span>
-							} />
-							<Select.Icon>
-								<Button.Icon icon="mdi:chevron-down" />
-							</Select.Icon>
-						</Button.Body>
-					</Button.Btn>
-				</Select.Trigger>
-				<Select.Portal>
-					<Select.Content className={`hc-relative hc-z-[200] hc-overflow-hidden hc-bg-white hc-rounded-md `}>
-						<Select.ScrollUpButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
-							<Icon icon="mdi:chevron-up" />
-						</Select.ScrollUpButton>
-						<Select.Viewport className="hc-p-1">
-							{fields.map(field => (
-								<Select.Group key={field}>
-									<SelectItem value={`${field}-asc`}>
-										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full">
-											{fieldNames[field] ?? field}
-											<Icon icon="mdi:sort-ascending" />
-										</span>
-									</SelectItem>
-									<SelectItem value={`${field}-desc`}>
-										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 w-full">
-											{fieldNames[field] ?? field}
-											<Icon icon="mdi:sort-descending" />
-										</span>
-									</SelectItem>
-								</Select.Group>
-							))}
-						</Select.Viewport>
-						<Select.ScrollDownButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
-							<Icon icon="mdi:chevron-down" />
-						</Select.ScrollDownButton>
-					</Select.Content>
-				</Select.Portal>
-			</Select.Root>
-		</div>
-	);
-};
-
-const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
-	<Select.Item
-		className={twMerge(
-			"hc-text-sm hc-leading-none hc-rounded-sm hc-flex hc-items-center hc-w-full hc-py-1.5 hc-pr-4 hc-pl-7 hc-relative hc-select-none hc-cursor-pointer data-[disabled]:hc-text-gray-500 data-[disabled]:hc-pointer-events-none data-[highlighted]:hc-outline-none data-[highlighted]:hc-bg-primary data-[highlighted]:hc-text-white",
-			className
-		)}
-		{...props}
-		ref={forwardedRef}
-	>
-		<Select.ItemText>{children}</Select.ItemText>
-		<Select.ItemIndicator className="hc-absolute hc-left-0 hc-w-8 hc-inline-flex hc-items-center hc-justify-center">
-			<Icon icon="mdi:check" />
-		</Select.ItemIndicator>
-	</Select.Item>
-));
-
-SelectItem.displayName = "SelectItem";
-
-export default FilterSort;
+import React, { forwardRef } from 'react';
+import * as Select from '@radix-ui/react-select';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+import Button from '~/components/modules/buttons/default';
+
+const FilterSort = ({ className, fields, setSortSetting, fieldNames }) => {
+	const handleSortChange = value => {
+		const [field, direction] = value.split("-");
+		setSortSetting({ field, type: direction });
+	};
+
+	return (
+		<div className={className ?? ""}>
+			<Select.Root onValueChange={handleSortChange}>
+				<Select.Trigger asChild aria-label="Sort">
+					<Button.Btn variant="outline" size="sm" className="hc-normal-case">
+						<Button.Body className="hc-justify-center">
+							<Select.Value placeholder={
+								<span className="hc-flex hc-items-center hc-gap-2">
+									Sort
+									<Icon icon="mdi:sort" />
+								</span>
+							} />
+							<Select.Icon>
+								<Button.Icon icon="mdi:chevron-down" />
+							</Select.Icon>
+						</Button.Body>
+					</Button.Btn>
+				</Select.Trigger>
+				<Select.Portal>
+					<Select.Content className={`hc-relative hc-z-[200] hc-overflow-hidden hc-bg-white hc-rounded-md `}>
+						<Select.ScrollUpButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-up" />
+						</Select.ScrollUpButton>
+						<Select.Viewport className="hc-p-1">
+							{fields.map(field => (
+								<Select.Group key={field}>
+									<SelectItem value={`${field}-asc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 hc-w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-ascending" />
+										</span>
+									</SelectItem>
+									<SelectItem value={`${field}-desc`}>
+										<span className="hc-flex hc-items-center hc-justify-between hc-gap-2 w-full">
+											{fieldNames[field] ?? field}
+											<Icon icon="mdi:sort-descending" />
+										</span>
+									</SelectItem>
+								</Select.Group>
+							))}
+						</Select.Viewport>
+						<Select.ScrollDownButton className="hc-flex hc-items-center hc-justify-center hc-h-5 hc-bg-white hc-text-primary hc-cursor-default">
+							<Icon icon="mdi:chevron-down" />
+						</Select.ScrollDownButton>
+					</Select.Content>
+				</Select.Portal>
+			</Select.Root>
+		</div>
+	);
+};
+
+const SelectItem = forwardRef(({ children, className, ...props }, forwardedRef) => (
+	<Select.Item
+		className={twMerge(
+			"hc-text-sm hc-leading-none hc-rounded-sm hc-flex hc-items-center hc-w-full hc-py-1.5 hc-pr-4 hc-pl-7 hc-relative hc-select-none hc-cursor-pointer data-[disabled]:hc-text-gray-500 data-[disabled]:hc-pointer-events-none data-[highlighted]:hc-outline-none data-[highlighted]:hc-bg-primary data-[highlighted]:hc-text-white",
+			className
+		)}
+		{...props}
+		ref={forwardedRef}
+	>
+		<Select.ItemText>{children}</Select.ItemText>
+		<Select.ItemIndicator className="hc-absolute hc-left-0 hc-w-8 hc-inline-flex hc-items-center hc-justify-center">
+			<Icon icon="mdi:check" />
+		</Select.ItemIndicator>
+	</Select.Item>
+));
+
+SelectItem.displayName = "SelectItem";
+
+export default FilterSort;

package/src/components/modules/grid.js

@@ -1,56 +1,55 @@
-import { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-
-const Grid = forwardRef((props, ref) => {
-	const {
-		as = 'div',
-		isAnimated = false,
-		children,
-		className,
-		autoRows = true,
-		columns = 'md:hc-grid-cols-2',
-		gap = 'hc-gap-12 lg:hc-gap-16',
-		...rest
-	} = props;
-
-	const Container = as;
-
-	return (
-		<Container
-			ref={ref}
-			className={twMerge(
-				'hc-grid',
-				gap,
-				autoRows ? 'hc-auto-rows-min' : '',
-				'hc-grid-cols-1',
-				columns,
-				className ?? ''
-			)}
-			{...rest}
-		>
-			{children}
-		</Container>
-	);
-});
-
-export const GridItem = ({
-	as = 'div',
-	children,
-	className
-}) => {
-	const Container = as;
-
-	return (
-		<Container
-			className={className ?? ''}
-		>
-			{children}
-		</Container>
-	);
-};
-
-Grid.Item = GridItem;
-
-Grid.displayName = 'Grid';
-export default Grid;
+import React, { forwardRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Grid = forwardRef((props, ref) => {
+	const {
+		as = 'div',
+		isAnimated = false,
+		children,
+		className,
+		autoRows = true,
+		columns = 'md:hc-grid-cols-2',
+		gap = 'hc-gap-12 lg:hc-gap-16',
+		...rest
+	} = props;
+
+	const Container = as;
+
+	return (
+		<Container
+			ref={ref}
+			className={twMerge(
+				'hc-grid',
+				gap,
+				autoRows ? 'hc-auto-rows-min' : '',
+				'hc-grid-cols-1',
+				columns,
+				className ?? ''
+			)}
+			{...rest}
+		>
+			{children}
+		</Container>
+	);
+});
+
+export const GridItem = ({
+	as = 'div',
+	children,
+	className
+}) => {
+	const Container = as;
+
+	return (
+		<Container
+			className={className ?? ''}
+		>
+			{children}
+		</Container>
+	);
+};
+
+Grid.Item = GridItem;
+
+Grid.displayName = 'Grid';
+export default Grid;

package/src/components/modules/icon.js

@@ -1,33 +1,33 @@
-import { Icon } from '@iconify/react';
-import React from 'react'
-
-const IconContained = ({
-	className,
-	size,
-	icon,
-	iconClasses,
-	title,
-	...iconProps
-}) => {
-	return (
-		<span
-			title={title}
-			className={`
-			hc-inline-block hc-align-middle
-				${className ?? ''}
-				${size ?? ''}
-			`}
-		>
-			<Icon
-				icon={icon}
-				className={`
-					${iconClasses ?? ''}
-					${size ?? ''}
-				`}
-				{...iconProps}
-			/>
-		</span>
-	);
-};
-
-export default IconContained;
+import React from 'react'
+import { Icon } from '@iconify/react';
+
+const IconContained = ({
+	className,
+	size,
+	icon,
+	iconClasses,
+	title,
+	...iconProps
+}) => {
+	return (
+		<span
+			title={title}
+			className={`
+			hc-inline-block hc-align-middle
+				${className ?? ''}
+				${size ?? ''}
+			`}
+		>
+			<Icon
+				icon={icon}
+				className={`
+					${iconClasses ?? ''}
+					${size ?? ''}
+				`}
+				{...iconProps}
+			/>
+		</span>
+	);
+};
+
+export default IconContained;

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

@@ -1,88 +1,94 @@
-import React, { useEffect } from "react";
-import RecruiterHeadshot from "../maps/list/item-expand-card/recruiter-headshot";
-import RecruiterDetails from "../maps/list/item-expand-card/recruiter-details";
-import ApplyButtonGroup from "../buttons/button-group-apply";
-import RecruiterContactNav from "../maps/list/item-expand-card/recruiter-contact-nav";
-import { useMap } from "~/contexts/mapContext";
-import { useMapList } from "~/contexts/mapListContext";
-import CommutePill from "../buttons/commute-pill";
-
-const ListingDetails = ({ item, recruiters }) => {
-	const { travelTime } = useMap();
-	const { siteConfig, navigateToDetails } = useMapList();
-	if (!item) {
-		return null;
-	}
-	let matchingRecruiter = !recruiters ? null : recruiters[item?.recruiterId];
-	return (<div className="hc-w-full">
-		<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
-			{matchingRecruiter?.headshot && (
-				<RecruiterHeadshot
-					image={`https:${matchingRecruiter.headshot}`}
-					alt={matchingRecruiter?.firstName}
-					className="hc-bg-gray-300"
-				/>
-			)}
-			{matchingRecruiter && (
-				<RecruiterDetails
-					contactNav={
-						<RecruiterContactNav>
-							{matchingRecruiter?.mobilePhone && (
-								<RecruiterContactNav.Button
-									href={`tel:${matchingRecruiter.mobilePhone}`}
-									title={`Call ${matchingRecruiter.mobilePhone}`}
-									icon="fluent:phone-32-regular"
-								/>
-							)}
-							{matchingRecruiter?.email && (
-								<RecruiterContactNav.Button
-									href={`mailto:${matchingRecruiter.email}`}
-									title={`email ${matchingRecruiter.email}`}
-									icon="bi:envelope-at"
-								/>
-							)}
-							{matchingRecruiter?.linkedIn && (
-								<RecruiterContactNav.Button
-									href={matchingRecruiter.linkedIn}
-									title="LinkedIn"
-									icon="ant-design:linkedin-outlined"
-								/>
-							)}
-						</RecruiterContactNav>
-					}
-				>
-					{matchingRecruiter?.firstName && matchingRecruiter?.lastName && (
-						<RecruiterDetails.Title>
-							{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
-						</RecruiterDetails.Title>
-					)}
-					{item.details?.recruiter?.title && (
-						<RecruiterDetails.Text>
-							{item.details.recruiter.title}
-						</RecruiterDetails.Text>
-					)}
-				</RecruiterDetails>
-			)}
-			<ApplyButtonGroup
-				useDetailsPostMessage={siteConfig.useDetailsPostMessage}
-				navigateToDetails={navigateToDetails}
-				includeDialog={siteConfig.useApplyDialog}
-				internalApplyLink={siteConfig.internalApplyLink}
-				companyName={siteConfig.companyName}
-				applyUrl={item?.applyUrl}
-				itemId={item.id}
-				detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.jobsDomain}${item.id}`}
-				className={`
-					lg:hc-flex-col 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
-					${matchingRecruiter ? "lg:hc-flex-col lg:hc-w-auto" : "lg:hc-flex-row"}
-            `}
-			/>
-		</div>
-		<div className="hc-w-full">
-			<CommutePill travelTime={travelTime} className="hc-ml-0" />
-		</div>
-	</div>
-	);
-};
-
-export default ListingDetails;
+import React from 'react';
+
+import RecruiterHeadshot from '~/components/modules/maps/list/item-expand-card/recruiter-headshot';
+import RecruiterDetails from '~/components/modules/maps/list/item-expand-card/recruiter-details';
+import RecruiterContactNav from '~/components/modules/maps/list/item-expand-card/recruiter-contact-nav';
+import ApplyButtonGroup from '~/components/modules/buttons/button-group-apply';
+import CommutePill from '~/components/modules/buttons/commute-pill';
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+
+const ListingDetails = ({ item, recruiters }) => {
+	const { travelTime } = useMap();
+	const { siteConfig, navigateToDetails, navigateToEasyApply, Link } = useMapList();
+	if (!item) {
+		return null;
+	}
+	let matchingRecruiter = !recruiters ? null : recruiters[item?.recruiterId];
+	return (
+		<div className="hc-w-full">
+			<div className="hc-grow hc-flex hc-flex-wrap hc-items-center hc-gap-4">
+				{matchingRecruiter?.headshot && (
+					<RecruiterHeadshot
+						image={`https:${matchingRecruiter.headshot}`}
+						alt={matchingRecruiter?.firstName}
+						className="hc-bg-gray-300"
+					/>
+				)}
+				{matchingRecruiter && (
+					<RecruiterDetails
+						contactNav={
+							<RecruiterContactNav>
+								{matchingRecruiter?.mobilePhone && (
+									<RecruiterContactNav.Button
+										href={`tel:${matchingRecruiter.mobilePhone}`}
+										title={`Call ${matchingRecruiter.mobilePhone}`}
+										icon="fluent:phone-32-regular"
+									/>
+								)}
+								{matchingRecruiter?.email && (
+									<RecruiterContactNav.Button
+										href={`mailto:${matchingRecruiter.email}`}
+										title={`email ${matchingRecruiter.email}`}
+										icon="bi:envelope-at"
+									/>
+								)}
+								{matchingRecruiter?.linkedIn && (
+									<RecruiterContactNav.Button
+										href={matchingRecruiter.linkedIn}
+										title="LinkedIn"
+										icon="ant-design:linkedin-outlined"
+									/>
+								)}
+							</RecruiterContactNav>
+						}
+					>
+						{matchingRecruiter?.firstName && matchingRecruiter?.lastName && (
+							<RecruiterDetails.Title>
+								{`${matchingRecruiter?.firstName} ${matchingRecruiter?.lastName}`}
+							</RecruiterDetails.Title>
+						)}
+						{item.details?.recruiter?.title && (
+							<RecruiterDetails.Text>
+								{item.details.recruiter.title}
+							</RecruiterDetails.Text>
+						)}
+					</RecruiterDetails>
+				)}
+				<ApplyButtonGroup
+					useDetailsPostMessage={siteConfig.useDetailsPostMessage}
+					navigateToDetails={navigateToDetails}
+					navigateToEasyApply={navigateToEasyApply}
+					Link={Link}
+					includeDialog={siteConfig.useApplyDialog}
+					internalApplyLink={siteConfig.internalApplyLink}
+					companyName={siteConfig.companyName}
+					applyUrl={item?.applyUrl}
+					itemId={item.id}
+					item={item}
+					detailsUrl={item.useClientJobUrl ? item?.detailsUrl : `${siteConfig.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
+						${matchingRecruiter ? "lg:hc-flex-col lg:hc-w-auto" : "lg:hc-flex-row"}
+					`}
+				/>
+			</div>
+			<div className="hc-w-full">
+				<CommutePill travelTime={travelTime} className="hc-ml-0" />
+			</div>
+		</div>
+	);
+};
+
+export default ListingDetails;

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

@@ -1,17 +1,17 @@
-import React from 'react'
-
-const CardInfoWindow = ({ className, content, id }) => {
-	return (
-		<div
-			id={id}
-			className={`
-			hc-relative hc-flex hc-flex-col hc-break-words hc-bg-clip-border
-				${className ?? ""}
-			`}
-		>
-			{content}
-		</div>
-	);
-};
-
-export default CardInfoWindow;
+import React from 'react';
+
+const CardInfoWindow = ({ className, content, id }) => {
+	return (
+		<div
+			id={id}
+			className={`
+			hc-relative hc-flex hc-flex-col hc-break-words hc-bg-clip-border
+				${className ?? ""}
+			`}
+		>
+			{content}
+		</div>
+	);
+};
+
+export default CardInfoWindow;