@abcagency/hc-ui-components 1.3.23 → 1.3.24

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+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="z-99 hc-fit-content hc-h-fit 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;

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

@@ -0,0 +1,108 @@
+import React, { Fragment } from 'react';
+import { Combobox, Transition } from '@headlessui/react';
+
+import Button from '~/components/modules/buttons/default';
+import Icon from "~/components/modules/icon";
+
+const FilterCommute = ({
+	className,
+	ready,
+	status,
+	data,
+	selected,
+	isCurrentLocation,
+	inputRef,
+	handleSelect,
+	setValue,
+	setSelected,
+	clearSuggestions,
+	commuteLocation,
+	setIsCurrentLocation,
+	fetchLocation,
+	setCommuteLocation
+}) => {
+	return (
+		<div className={`relative ${className ?? ""}`}>
+			<label
+				htmlFor="commute"
+				className="hc-flex hc-items-center hc-gap-2 hc-mb-2 hc-text-xs hc-uppercase hc-font-bold hc-text-uiText"
+			>
+				<Icon
+					icon="ri:pin-distance-fill"
+					size="hc-size-5"
+					className="hc-text-uiAccent/30"
+				/>
+				<span>
+					<span className="md:hc-hidden lg:hc-inline">Calculate your</span> commute
+				</span>
+			</label>
+
+			<Combobox value={selected} onChange={handleSelect}>
+				<div className="hc-relative hc-mt-1">
+					<div className="hc-relative hc-flex hc-items-center hc-w-full hc-pr-2 hc-cursor-default hc-overflow-hidden hc-rounded hc-bg-white hc-text-left hc-border hc-border-uiAccent/20 focus-within:hc-ring-1 focus-within:hc-ring-uiAccent focus:hc-outline-none">
+						<Combobox.Input
+							className="hc-w-full hc-border-none hc-py-2 hc-pl-4 hc-pr-1 hc-text-sm hc-leading-5 hc-text-gray-900 focus:hc-ring-0 placeholder:hc-text-gray-400"
+							onChange={e => {
+								setCommuteLocation("");
+								setValue(e.target.value);
+								setSelected(e.target.value);
+							}}
+							value={selected}
+							disabled={!ready}
+							placeholder="Starting point"
+							ref={inputRef}
+						/>
+						<Button.Btn
+							variant="icon"
+							size="sqsm"
+							onClick={() => {
+								setIsCurrentLocation(!isCurrentLocation);
+								localStorage.setItem('isCurrentLocation', !isCurrentLocation);
+								if (isCurrentLocation || commuteLocation) {
+									setCommuteLocation("");
+									setSelected("");
+								} else if (!commuteLocation) { fetchLocation(); }
+							}}
+
+							className=""
+						>
+							<span className="hc-sr-only">Use your location</span>
+							{commuteLocation ? <Icon icon="mdi:times"></Icon> : <Button.Icon className={isCurrentLocation ? 'hc-text-blue-500' : 'hc-text-current'} icon="mdi:my-location" />}
+						</Button.Btn>
+					</div>
+					<Transition
+						as={Fragment}
+						leave="hc-transition hc-ease-in hc-duration-100"
+						leaveFrom="hc-opacity-100"
+						leaveTo="hc-opacity-0"
+						afterLeave={clearSuggestions}
+					>
+						<Combobox.Options className="hc-absolute hc-z-20 hc-mt-1 hc-max-h-60 hc-w-full hc-overflow-auto hc-rounded hc-bg-white hc-py-1 hc-text-base hc-shadow hc-ring-1 hc-ring-uiAccent/10 focus:hc-outline-none sm:hc-text-sm">
+							{status === "OK" &&
+								data.map(data => (
+									<Combobox.Option
+										key={data.place_id}
+										value={data.description}
+										className={({ active }) =>
+											`hc-relative hc-cursor-default hc-select-none hc-px-4 hc-py-2 ${active ? "hc-bg-primary hc-text-white" : "hc-text-uiText"
+											}`
+										}
+									>
+										{({ selected }) => (
+											<span
+												className={`hc-block hc-truncate ${selected ? "hc-font-bold" : "hc-font-medium"}`}
+											>
+												{data.description}
+											</span>
+										)}
+									</Combobox.Option>
+								))}
+						</Combobox.Options>
+					</Transition>
+				</div>
+			</Combobox>
+		</div>
+	);
+};
+
+export default FilterCommute;

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

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