@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/accordions/filters.js

@@ -1,44 +1,47 @@
-import Accordion from "~/components/modules/accordions/default";
-import AccordionFilterItem from "./filterItem";
-import FilterCard from "~/components/modules/cards/filter";
-import Loading from "~/util/loading";
-import { useMapList } from "~/contexts/mapListContext";
-import React from 'react'
-const AccordionFilters = ({
-	className,
-	defaultValue,
-	setDefaultValue,
-	setLocation,
-	setSelectedListItem
-}) => {
-	const { filterOptions, selectedFilters, setSelectedFilters, favorites, filterByFavorites, setFilterByFavorites } = useMapList();
-
-	return (
-		<FilterCard className={className ?? ""}>
-			<FilterCard.Title icon="fa-solid:sliders-h">
-				<span>
-					Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
-				</span>
-			</FilterCard.Title>
-
-			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
-				{!filterOptions?.filters && (
-					<Accordion.Item>
-						<Loading />
-					</Accordion.Item>
-				)}
-				{filterOptions?.filters && filterOptions?.filters.map(filter => (
-					<AccordionFilterItem
-						key={filter.id}
-						filter={filter}
-						setDefaultValue={setDefaultValue}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
-					/>
-				))}
-			</Accordion>
-		</FilterCard>
-	);
-};
-
-export default AccordionFilters;
+import React from 'react'
+import Accordion from '~/components/modules/accordions/default';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
+import FilterCard from '~/components/modules/cards/filter';
+
+import { useMapList } from '~/contexts/mapListContext';
+
+import Loading from '~/util/loading';
+
+const AccordionFilters = ({
+	className,
+	defaultValue,
+	setDefaultValue,
+	setLocation,
+	setSelectedListItem
+}) => {
+	const { filterOptions, selectedFilters, setSelectedFilters, favorites, filterByFavorites, setFilterByFavorites } = useMapList();
+
+	return (
+		<FilterCard className={className ?? ""}>
+			<FilterCard.Title icon="fa-solid:sliders-h">
+				<span>
+					Filter <span className="md:hc-hidden lg:hc-inline">your search</span>
+				</span>
+			</FilterCard.Title>
+
+			<Accordion defaultValue={defaultValue} className="hc-space-y-4" >
+				{!filterOptions?.filters && (
+					<Accordion.Item>
+						<Loading />
+					</Accordion.Item>
+				)}
+				{filterOptions?.filters && filterOptions?.filters.map(filter => (
+					<AccordionFilterItem
+						key={filter.id}
+						filter={filter}
+						setDefaultValue={setDefaultValue}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={prevFilters => { setSelectedFilters(prevFilters); setLocation(null); setSelectedListItem(null); }}
+					/>
+				))}
+			</Accordion>
+		</FilterCard>
+	);
+};
+
+export default AccordionFilters;

package/src/components/modules/buttons/button-group-apply.js

@@ -1,85 +1,113 @@
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-import Button from '~/components/modules/buttons/default';
-import ApplyDialog from '../dialogs/apply-dialog';
-
-const ButtonGroupApply = ({
-	applyUrl,
-	useDetailsPostMessage,
-	navigateToDetails,
-	applyText = 'Apply Now',
-	detailsUrl,
-	detailsText = 'View Details',
-	className,
-	buttonSize = 'default',
-	applyButtonVariant = 'primary',
-	detailsButtonVariant = 'outline',
-	includeDialog = false,
-	internalApplyLink,
-	itemId,
-	companyName
-}) => {
-
-	const applyButton = () => {
-		return <Button.Anchor
-			variant={applyButtonVariant}
-			size={buttonSize}
-		>
-			{applyText}
-		</Button.Anchor>;;
-	};
-
-	return (
-		<nav
-			className={twMerge`
-				hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
-				${className ?? ''}
-			`}
-		>
-			{navigateToDetails !== null &&
-				<Button.Btn
-					onClick={() => { navigateToDetails(itemId) }}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Btn>
-			}
-			{detailsUrl && useDetailsPostMessage !== true && navigateToDetails === null &&
-				<Button.Anchor
-					href={detailsUrl}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Anchor>
-			}
-			{useDetailsPostMessage === true && navigateToDetails === null &&
-				<Button.Btn
-					onClick={() => { window.parent.postMessage({ itemId: itemId, type: 'LISTING_ID' }, '*'); }}
-					variant={detailsButtonVariant}
-					size={buttonSize}
-				>
-					{detailsText}
-				</Button.Btn>}
-			{applyUrl && !includeDialog &&
-				<>
-					<Button.Anchor
-						href={applyUrl}
-						variant={applyButtonVariant}
-						size={buttonSize}
-					>
-						{applyText}
-					</Button.Anchor>
-				</>
-			}
-			{applyUrl && includeDialog &&
-				<ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
-					{applyButton()}
-				</ApplyDialog>
-			}
-		</nav>
-	);
-};
-
-export default ButtonGroupApply;
+import React from 'react'
+import { twMerge } from 'tailwind-merge';
+
+import Button from '~/components/modules/buttons/default';
+import ApplyDialog from '../dialogs/apply-dialog';
+
+const ButtonGroupApply = ({
+	applyUrl,
+	useDetailsPostMessage,
+	navigateToDetails,
+	navigateToEasyApply,
+	Link,
+	applyText = 'Apply Now',
+	detailsUrl,
+	detailsText = 'View Details',
+	className,
+	buttonSize = 'default',
+	applyButtonVariant = 'primary',
+	detailsButtonVariant = 'outline',
+	includeDialog = false,
+	internalApplyLink,
+	itemId,
+	item,
+	companyName
+}) => {
+	const applyButton = () => {
+		return <Button.Anchor
+			variant={applyButtonVariant}
+			size={buttonSize}
+		>
+			{applyText}
+		</Button.Anchor>;;
+	};
+
+	return (
+		<nav
+			className={twMerge`
+				hc-flex hc-flex-row hc-justify-between hc-gap-2 hc-w-full
+				${className ?? ''}
+			`}
+		>
+			{Link &&
+				<Button.Link
+					Link={Link}
+					href={`/careers/${item.id}`}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+				>
+					{detailsText}
+				</Button.Link>
+			}
+			{navigateToDetails &&
+				<Button.Anchor
+					href={`/careers/${item.id}`}
+					onClick={e => {
+						e.preventDefault();
+						navigateToDetails(item);
+					}}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+				>
+					{detailsText}
+				</Button.Anchor>
+			}
+			{detailsUrl && useDetailsPostMessage !== true && navigateToDetails === null &&
+				<Button.Anchor
+					href={detailsUrl}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+				>
+					{detailsText}
+				</Button.Anchor>
+			}
+			{useDetailsPostMessage === true && navigateToDetails === null &&
+				<Button.Btn
+					onClick={() => { window.parent.postMessage({ itemId: itemId, type: 'LISTING_ID' }, '*'); }}
+					variant={detailsButtonVariant}
+					size={buttonSize}
+				>
+					{detailsText}
+				</Button.Btn>}
+			{applyUrl && !includeDialog && navigateToEasyApply == null &&
+				<>
+					<Button.Anchor
+						href={applyUrl}
+						variant={applyButtonVariant}
+						size={buttonSize}
+					>
+						{applyText}
+					</Button.Anchor>
+				</>
+			}
+			{applyUrl && !includeDialog && navigateToEasyApply != null &&
+				<>
+					<Button.Btn
+						onClick={() => { navigateToEasyApply(item) }}
+						variant={applyButtonVariant}
+						size={buttonSize}
+					>
+						{applyText}
+					</Button.Btn>
+				</>
+			}
+			{applyUrl && includeDialog &&
+				<ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
+					{applyButton()}
+				</ApplyDialog>
+			}
+		</nav>
+	);
+};
+
+export default ButtonGroupApply;

package/src/components/modules/buttons/commute-pill.js

@@ -1,21 +1,22 @@
-import React from 'react';
-import Icon from "~/components/modules/icon";
-import PillWrapper from './pill-wrapper';
-
-const CommutePill = ({ travelTime }) => {
-	if (!travelTime) return;
-	return (
-		<div className="pt-2">
-			<PillWrapper >
-				<Icon
-					icon="ri:pin-distance-fill"
-					size="hc-size-5"
-					className="hc-text-uiAccent/30"
-				/>
-				commute time = {travelTime}
-			</PillWrapper>
-		</div>
-	);
-};
-
-export default CommutePill;
+import React from 'react';
+
+import Icon from '~/components/modules/icon';
+import PillWrapper from '~/components/modules/buttons/pill-wrapper';
+
+const CommutePill = ({ travelTime }) => {
+	if (!travelTime) return;
+	return (
+		<div className="pt-2">
+			<PillWrapper >
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="hc-size-5"
+					className="hc-text-uiAccent/30"
+				/>
+				commute time = {travelTime}
+			</PillWrapper>
+		</div>
+	);
+};
+
+export default CommutePill;