@abcagency/hc-ui-components 1.3.21 → 1.3.23

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

@@ -1,123 +0,0 @@
-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,
-	linkFormat,
-	applyText = 'Apply Now',
-	detailsUrl,
-	detailsText = 'View Details',
-	className,
-	buttonSize = 'sm',
-	applyButtonVariant = 'primary',
-	detailsButtonVariant = 'outline',
-	includeDialog = false,
-	internalApplyLink,
-	itemId,
-	item,
-	companyName,
-	trackEvent,
-	eventTypes
-}) => {
-	const href = linkFormat.replace('[slug]', item.slug ?? item.id);
-
-	const trackApply = () => {
-		trackEvent(eventTypes.APPLY_NOW_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-	};
-
-	const trackViewDetails = () => {
-		trackEvent(eventTypes.VIEW_DETAILS_CLICKED, { jobTitle: item.fields.position, jobCategory: item.fields.category, entityDisplayName: item?.mapDetails?.entityDisplayName });
-	};
-
-	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={href}
-        	variant={detailsButtonVariant}
-        	size={buttonSize}
-        	onClick={trackViewDetails}
-        >
-        	{detailsText}
-        </Button.Link>
-			}
-			{navigateToDetails &&
-        <Button.Anchor
-        	href={href}
-        	onClick={e => {
-        		e.preventDefault();
-        		navigateToDetails(item);
-        		trackViewDetails();
-        	}}
-        	variant={detailsButtonVariant}
-        	size={buttonSize}
-        >
-        	{detailsText}
-        </Button.Anchor>
-			}
-			{detailsUrl && useDetailsPostMessage !== true && navigateToDetails === null &&
-        <Button.Anchor
-        	href={detailsUrl}
-        	variant={detailsButtonVariant}
-        	size={buttonSize}
-        	onClick={trackViewDetails}
-        >
-        	{detailsText}
-        </Button.Anchor>
-			}
-			{useDetailsPostMessage === true && navigateToDetails === null &&
-        <Button.Btn
-        	onClick={() => {trackViewDetails; 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}
-        	onClick={trackApply}
-        >
-        	{applyText}
-        </Button.Anchor>
-			}
-			{applyUrl && !includeDialog && navigateToEasyApply != null &&
-        <Button.Btn
-        	onClick={() => { navigateToEasyApply(item); trackApply(); }}
-        	variant={applyButtonVariant}
-        	size={buttonSize}
-        >
-        	{applyText}
-        </Button.Btn>
-			}
-			{applyUrl && includeDialog &&
-        <ApplyDialog applyUrl={applyUrl} internalApplyLink={internalApplyLink} companyName={companyName}>
-        	<Button.Anchor
-        		variant={applyButtonVariant}
-        		size={buttonSize}
-        		onClick={trackApply}
-        	>
-        		{applyText}
-        	</Button.Anchor>
-        </ApplyDialog>
-			}
-		</nav>
-	);
-};
-
-export default ButtonGroupApply;

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

@@ -1,22 +0,0 @@
-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;

package/src/components/modules/buttons/default.js

@@ -1,194 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-
-import Icon from '~/components/modules/icon';
-
-const linkDefaultClasses = "hc-normal-case hc-text-inherit !hc-font-[inherit] hc-[font-weight:inherit] !hc-p-0 hc-rounded-none";
-const underlineClasses = "!underline decoration-1 underline-offset-2 hover:!no-underline focus:!no-underline";
-
-const ButtonVariant = {
-	none: '',
-	primary: 'hc-bg-primary hc-border hc-border-primary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
-	secondary: 'hc-bg-secondary hc-border hc-border-secondary hc-text-white hover:hc-bg-opacity-70 focus:hc-bg-opacity-70',
-	outline: 'hc-bg-transparent hc-border hc-border-primary hc-text-primary hover:hc-bg-primaryDark hover:hc-border-primaryDark hover:hc-text-white focus:hc-bg-primaryDark focus:hc-border-primaryDark focus:hc-text-white',
-	link: `${linkDefaultClasses} hc-text-primary hover:hc-text-uiText focus:hc-text-uiText`,
-	icon: 'hc-opacity-100 hover:hc-opacity-70 focus:hc-opacity-70'
-};
-
-const ButtonSize = {
-	none: '',
-	default: 'hc-py-2 hc-px-6 hc-text-base',
-	sq: 'hc-p-2.5',
-	sqsm: 'hc-p-1',
-	xs: 'hc-py-1.5 hc-px-3 hc-text-xs',
-	sm: 'hc-py-1.5 hc-px-4 hc-text-sm',
-	lg: 'hc-py-4 hc-px-10 hc-text-lg'
-};
-
-const ButtonDefaults = {
-	style: 'hc-group hc-font-medium hc-uppercase hc-text-center hc-rounded hc-transition',
-	size: ButtonSize.default,
-	variant: ButtonVariant.primary,
-	block: 'hc-block hc-w-full'
-};
-
-const linkVariants = variant => variant === 'link';
-
-const buttonClasses = (variant, size, isBlock, hasUnderline, className) => twMerge(
-	isBlock ? ButtonDefaults.block : linkVariants(variant) ? 'hc-inline' : 'hc-inline-block',
-	ButtonDefaults.style,
-	variant ? ButtonVariant[variant] : ButtonDefaults.variant,
-	size ? ButtonSize[size] : ButtonDefaults.size,
-	hasUnderline ? underlineClasses : '',
-	className ?? ''
-);
-
-const Button = ({
-	children
-}) => {
-	return (
-		{ children }
-	);
-};
-
-export const Anchor = ({
-	children,
-	href,
-	className,
-	size,
-	variant,
-	isBlock,
-	hasUnderline,
-	target = '_blank',
-	...rest
-}) => {
-	return (
-		<a
-			href={href}
-			target={target}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			onClick={href === '#' ? e => {
-				e.preventDefault();
-			} : null}
-			{...rest}
-		>
-			{children}
-		</a>
-	);
-};
-
-export const AnchorLink = ({
-	children,
-	Link,
-	href,
-	className,
-	size,
-	variant,
-	isBlock,
-	hasUnderline,
-	...rest
-}) => {
-	return (
-		<Link
-			href={href}
-			className={`
-				${buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			`}
-			{...rest}
-		>
-			{children}
-		</Link>
-	);
-};
-
-export const ScrollAnchor = forwardRef((props, ref) => {
-	const {
-		children,
-		href,
-		className,
-		size,
-		variant,
-		isBlock,
-		hasUnderline,
-		...rest
-	} = props;
-
-	return (
-		<Link
-			ref={ref}
-			href={`#${href}`}
-			scroll={false}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			{...rest}
-		>
-			{children}
-		</Link>
-	);
-});
-
-export const Btn = forwardRef((props, ref) => {
-	const {
-		children,
-		type = 'button',
-		className,
-		size,
-		variant,
-		isBlock,
-		hasUnderline,
-		...rest
-	} = props;
-	return (
-		<button
-			ref={ref}
-			type={type}
-			className={buttonClasses(variant, size, isBlock, hasUnderline, className)}
-			{...rest}
-		>
-			{children}
-		</button>
-	);
-});
-
-export const ButtonBody = ({
-	children,
-	className
-}) => {
-	return (
-		<span
-			className={twMerge(
-				'hc-inline-flex hc-w-full hc-items-center hc-justify-between hc-gap-1.5',
-				className ?? ''
-			)}
-		>
-			{children}
-		</span>
-	);
-};
-
-export const ButtonIcon = ({
-	icon,
-	size = 'hc-size-4',
-	className
-}) => {
-	return (
-		<Icon
-
-			icon={icon}
-			size={size}
-			className={className ?? ''}
-		/>
-	);
-};
-
-Button.Anchor = Anchor;
-Button.Link = AnchorLink;
-Button.Scroll = ScrollAnchor;
-Button.Btn = Btn;
-Button.Body = ButtonBody;
-Button.Icon = ButtonIcon;
-
-Btn.displayName = 'Button:Button';
-ScrollAnchor.displayName = 'Button:ScrollAnchor';
-export default Button;

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const ButtonItemsPill = forwardRef((
-	{
-		className,
-		activeItemsCount,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`
-				hc-relative hc-z-[2] hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20
-				${className ?? ''}
-			`}
-			{...props}
-		>
-			{activeItemsCount > 9 ? '9+' : activeItemsCount}
-			<Button.Icon
-				icon="uil:times"
-				size="hc-size-3.5"
-			/>
-		</Button.Btn>
-	);
-});
-
-ButtonItemsPill.displayName = 'ButtonItemsPill';
-export default ButtonItemsPill;

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

@@ -1,27 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import Button from '~/components/modules/buttons/default';
-
-export const PillWrapper = forwardRef((
-	{
-		className,
-		children,
-		...props
-	},
-	ref
-) => {
-	return (
-		<Button.Btn
-			ref={ref}
-			size="none"
-			variant="none"
-			className={`hc-relative hc-group hc-inline-flex hc-items-center hc-gap-px hc-ml-auto hc-mr-1.5 hc-pl-1.5 hc-pr-1 hc-py-0.5 hc-rounded hc-bg-primary/10 hc-text-xs hc-font-bold hc-text-primary hc-ring-1 hc-ring-inset hc-ring-primary/20 ${className}`}
-			{...props}
-		>
-			{children}
-		</Button.Btn>
-	);
-});
-
-PillWrapper.displayName = 'PillWrapper';
-export default PillWrapper;

package/src/components/modules/buttons/show-all-button.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const ShowAllButton = ({ mapInteracted, markerConfigs, setMapInteracted, fitBounds, mapRef, pinIconUrl, setSelectedFilters, setQuery, listingCount }) => {
-	if (!mapInteracted || !markerConfigs) {
-		return null;
-	}
-
-	return (
-		<button
-			style={{ fontFamily: 'Roboto, Arial, sans-serif', fontSize: '14px', fontWeight: '500' }}
-			className="hc-absolute hc-bottom-10 hc-left-2.5 hc-z-10 hc-flex hc-items-center hc-justify-center hc-pl-2 hc-pb-1 hc-pt-1.5 hc-pr-3 hc-bg-white hc-text-black hc-border-none hc-rounded-full hc-shadow hc-cursor-pointer hc-text-sm hc-font-medium"
-			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if (listingCount < 2) { setSelectedFilters({}); setQuery(null); }; }}
-		>
-			<img src={pinIconUrl} alt="Pin Icon" className="hc-size-5" />
-			Show All
-		</button>
-	);
-};
-
-export default ShowAllButton;

package/src/components/modules/cards/default.js

@@ -1,167 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-
-const cardClasses = (className, hasShadow) => twMerge(
-	'hc-relative hc-flex hc-flex-wrap hc-flex-col hc-bg-clip-border hc-break-words hc-bg-white hc-border hc-border-gray-100',
-	hasShadow ? 'hc-shadow-lg' : '',
-	className ?? ''
-);
-
-const Card = ({ children }) => {
-	return (
-		<>{children}</>
-	);
-};
-
-export const CardDefault = forwardRef((
-	{
-		as = 'div',
-		className,
-		hasShadow = false,
-		image,
-		body,
-		children,
-		footer,
-		...rest
-	},
-	ref
-) => {
-	const Container = as;
-
-	return (
-		<Container
-			ref={ref}
-			className={cardClasses(className, hasShadow)}
-			{...rest}
-		>
-			{image}
-			{children}
-			{body}
-			{footer}
-		</Container>
-	);
-});
-
-const CardLink = ({
-	as = 'link',
-	href,
-	className,
-	hasShadow = false,
-	image,
-	body,
-	children,
-	footer,
-	...rest
-}) => {
-	const Container = as === 'link' ? Link : as;
-
-	return (
-		<Container
-			to={href}
-			className={twMerge(
-				cardClasses(className, hasShadow),
-				'hc-group hc-transition hover:hc-shadow-xl hover:hc-border-indigo-300 focus:hc-shadow-xl focus:hc-border-indigo-300'
-			)}
-			{...rest}
-		>
-			{image && image}
-			{children}
-			{body && body}
-			{footer && footer}
-		</Container>
-	);
-};
-
-export const CardImage = ({
-	image,
-	alt,
-	className,
-	imageClassName,
-	...rest
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-w-full',
-				className ?? ''
-			)}
-		>
-			<img
-				src={typeof image === 'string' ? image : image.src}
-				width={image.width ? image.width : null}
-				height={image.height ? image.height : null}
-				alt={alt ?? ''}
-				className={twMerge(
-					'hc-w-full hc-h-auto',
-					imageClassName ?? ''
-				)}
-				{...rest}
-			/>
-		</div>
-	);
-};
-
-export const CardBody = ({
-	children,
-	className
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-flex-auto hc-p-4 md:hc-px-6 lg:hc-px-8',
-				className ?? ''
-			)}
-		>
-			{children}
-		</div>
-	);
-};
-
-export const CardTitle = ({
-	as = 'h3',
-	children,
-	className,
-	...rest
-}) => {
-	const Title = as;
-
-	return (
-		<Title
-			className={twMerge(
-				'hc-text-2xl hc-font-bold',
-				className ?? ''
-			)}
-			{...rest}
-		>
-			{children}
-		</Title>
-	);
-};
-
-export const CardFooter = ({
-	children,
-	className
-}) => {
-	return (
-		<div
-			className={twMerge(
-				'hc-py-2 hc-px-4 md:hc-px-6 lg:hc-px-8 hc-bg-gray-100',
-				className ?? ''
-			)}
-		>
-			{children}
-		</div>
-	);
-};
-
-Card.Default = CardDefault;
-Card.Link = CardLink;
-Card.Image = CardImage;
-Card.Body = CardBody;
-Card.Title = CardTitle;
-Card.Footer = CardFooter;
-
-CardDefault.displayName = 'Card:Default';
-
-export default Card;

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

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import Card from '~/components/modules/cards/default';
-import Icon from '~/components/modules/icon';
-
-const CardFilter = ({
-	as,
-	className,
-	children,
-	...rest
-}) => {
-	return (
-		<Card.Default
-			as={as}
-			className={`
-			hc-bg-uiAccent/5 hc-border hc-border-uiAccent/20 hc-rounded
-				${className ?? ''}
-			`}
-			{...rest}
-		>
-			<Card.Body className="!hc-p-3">
-				{children}
-			</Card.Body>
-		</Card.Default>
-	);
-};
-
-export const CardTitle = ({
-	as,
-	children,
-	icon,
-	className,
-	...rest
-}) => {
-	return (
-		<Card.Title
-			as={as}
-			className={`
-			hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText
-				${className ?? ''}
-			`}
-			{...rest}
-		>
-			<Icon
-				icon={icon}
-				size="hc-size-5"
-				className="hc-text-uiAccent/30"
-			/>
-			{children}
-		</Card.Title>
-	);
-};
-
-CardFilter.Title = CardTitle;
-
-export default CardFilter;

package/src/components/modules/dialogs/apply-dialog.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-
-import Button from '~/components/modules/buttons/default';
-import Icon from '~/components/modules/icon';
-
-const ApplyDialog = ({ children, applyUrl, internalApplyLink, companyName }) => (
-
-	<Dialog.Root >
-		<Dialog.Trigger asChild>
-			{children}
-		</Dialog.Trigger>
-		<Dialog.Portal>
-			<Dialog.Overlay className="hc-bg-black/50 hc-fixed hc-inset-0 hc-animate-overlayShow" />
-			<Dialog.Content className="hc-fit-content hc-animate-contentShow hc-fixed hc-inset-0 hc-m-auto hc-max-h-[85vh] hc-w-[90vw] hc-max-w-[450px] hc-rounded-[6px] hc-bg-white hc-p-[25px] hc-shadow-lg focus:hc-outline-none hc-flex hc-flex-col hc-items-center hc-text-center">
-				<Dialog.Title className="hc-text-[17px] hc-font-medium hc-w-full">
-					Career Opportunities
-				</Dialog.Title>
-				<Dialog.Description className="hc-mt-4 hc-mb-5 hc-text-[15px] hc-leading-normal hc-w-full">
-					Are you currently a {companyName} employee?
-				</Dialog.Description>
-				<div className="hc-flex hc-justify-center hc-space-x-4 hc-w-full">
-					<Dialog.Close asChild>
-						<Button.Anchor variant="outline" href={internalApplyLink}>
-							Yes
-						</Button.Anchor>
-					</Dialog.Close>
-					<Dialog.Close asChild>
-						<Button.Anchor variant="primary" href={applyUrl}>
-							No
-						</Button.Anchor>
-					</Dialog.Close>
-				</div>
-				<Dialog.Close asChild>
-					<Button.Anchor className="hc-absolute hc-top-[10px] hc-right-[10px] hc-inline-flex hc-h-[25px] hc-w-[25px] hc-items-center hc-justify-center hc-rounded-full focus:hc-outline-none"
-						variant="ghost" aria-label="Close">
-						<Icon
-							icon="mdi:times"
-							className="hc-cursor-pointer hc-text-black hover:hc-text-gray-500 hover:hc-opacity-75"
-						/>
-					</Button.Anchor>
-				</Dialog.Close>
-			</Dialog.Content>
-		</Dialog.Portal>
-	</Dialog.Root>
-);
-
-export default ApplyDialog;