@abcagency/hc-ui-components 1.0.0

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

@@ -0,0 +1,21 @@
+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="w-5 h-5"
+					className="text-uiAccent/30"
+				/>
+				commute time = {travelTime}
+			</PillWrapper>
+		</div>
+	);
+};
+
+export default CommutePill;

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

@@ -0,0 +1,196 @@
+import { forwardRef } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+import Icon from '~/components/modules/icon';
+import React from 'react'
+const linkDefaultClasses = "normal-case text-inherit !font-[inherit] [font-weight:inherit] !p-0 rounded-none";
+const underlineClasses = "!underline decoration-1 underline-offset-2 hover:!no-underline focus:!no-underline";
+
+const ButtonVariant = {
+	none: '',
+	primary: 'bg-primary border border-primary text-white hover:bg-opacity-70 focus:bg-opacity-70',
+	secondary: 'bg-secondary border border-secondary text-white hover:bg-opacity-70 focus:bg-opacity-70',
+	outline: 'bg-transparent border border-primary text-primary hover:bg-primaryDark hover:border-primaryDark hover:text-white focus:bg-primaryDark focus:border-primaryDark  focus:text-white',
+	link: `${linkDefaultClasses} text-primary hover:text-uiText focus:text-uiText`,
+	icon: 'opacity-100 hover:opacity-70 focus:opacity-70'
+};
+
+const ButtonSize = {
+	none: '',
+	default: 'py-2 px-6 text-base',
+	sq: 'p-2.5',
+	sqsm: 'p-1',
+	xs: 'py-1.5 px-3 text-xs',
+	sm: 'py-1.5 px-4 text-sm',
+	lg: 'py-4 px-10 text-lg'
+};
+
+const ButtonDefaults = {
+	style: 'group font-medium uppercase text-center rounded transition',
+	size: ButtonSize.default,
+	variant: ButtonVariant.primary,
+	block: 'block w-full'
+};
+
+const linkVariants = variant => variant === 'link';
+
+const buttonClasses = (variant, size, isBlock, hasUnderline, className) => twMerge(
+	isBlock ? ButtonDefaults.block : linkVariants(variant) ? 'inline' : '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,
+	href,
+	className,
+	activeClassName,
+	partiallyActive = false,
+	size,
+	variant,
+	isBlock,
+	hasUnderline,
+	...rest
+}) => {
+	const router = useRouter();
+
+	return (
+		<Link
+			href={href}
+			className={`
+				${buttonClasses(variant, size, isBlock, hasUnderline, className)}
+				${(activeClassName && router.pathname === href) || (router.pathname.startsWith(href) && partiallyActive) ? activeClassName : ''}
+			`}
+			{...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(
+				'inline-flex w-full items-center justify-between gap-1.5',
+				className ?? ''
+			)}
+		>
+			{children}
+		</span>
+	);
+};
+
+export const ButtonIcon = ({
+	icon,
+	size = 'w-4 h-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,31 @@
+import { forwardRef } from 'react';
+import React 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="relative z-[2] group inline-flex items-center gap-px ml-auto mr-1.5 pl-1.5 pr-1 py-0.5 rounded bg-primary/10 text-xs font-bold text-primary ring-1 ring-inset ring-primary/20"
+			{...props}
+		>
+			{activeItemsCount > 9 ? '9+' : activeItemsCount}
+			<Button.Icon
+				icon="uil:times"
+				size="w-3.5 h-3.5"
+			/>
+		</Button.Btn>
+	);
+});
+
+ButtonItemsPill.displayName = 'ButtonItemsPill';
+export default ButtonItemsPill;

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

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import Button from '~/components/modules/buttons/default';
+import React from 'react'
+export const PillWrapper = forwardRef((
+	{
+		className,
+		children,
+		...props
+	},
+	ref
+) => {
+	return (
+		<Button.Btn
+			ref={ref}
+			size="none"
+			variant="none"
+			className={`relative group inline-flex items-center gap-px ml-auto mr-1.5 pl-1.5 pr-1 py-0.5 rounded bg-primary/10 text-xs font-bold text-primary ring-1 ring-inset 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="absolute bottom-10 left-2.5 z-10 flex items-center justify-center pl-2 pb-1 pt-1.5 pr-3 bg-white text-black border-none rounded-full shadow cursor-pointer text-sm font-medium"
+			onClick={() => { setMapInteracted(false); fitBounds(mapRef.current, true); if(listingCount < 2){ setSelectedFilters({}); setQuery(null);};}}
+		>
+			<img src={pinIconUrl} alt="Pin Icon" className="w-5 h-5" />
+            Show All
+		</button>
+	);
+};
+
+export default ShowAllButton;

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

@@ -0,0 +1,168 @@
+import { forwardRef } from 'react';
+import { Link } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+import React from 'react'
+
+const cardClasses = (className, hasShadow) => twMerge(
+  'relative flex flex-wrap flex-col bg-clip-border break-words bg-white border border-gray-100',
+  hasShadow ? '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),
+        'group transition hover:shadow-xl hover:border-indigo-300 focus:shadow-xl focus:border-indigo-300'
+      )}
+      {...rest}
+    >
+      {image && image}
+      {children}
+      {body && body}
+      {footer && footer}
+    </Container>
+  );
+};
+
+export const CardImage = ({
+  image,
+  alt,
+  className,
+  imageClassName,
+  ...rest
+}) => {
+  return (
+    <div
+      className={twMerge(
+        '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(
+          'w-full h-auto',
+          imageClassName ?? ''
+        )}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export const CardBody = ({
+  children,
+  className
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'flex-auto p-4 md:px-6 lg:px-8',
+        className ?? ''
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardTitle = ({
+  as = 'h3',
+  children,
+  className,
+  ...rest
+}) => {
+  const Title = as;
+
+  return (
+    <Title
+      className={twMerge(
+        'text-2xl font-bold',
+        className ?? ''
+      )}
+      {...rest}
+    >
+      {children}
+    </Title>
+  );
+};
+
+export const CardFooter = ({
+  children,
+  className
+}) => {
+  return (
+    <div
+      className={twMerge(
+        'py-2 px-4 md:px-6 lg:px-8 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,55 @@
+import Card from '~/components/modules/cards/default';
+import Icon from '~/components/modules/icon';
+import React from 'react'
+
+const CardFilter = ({
+	as,
+	className,
+	children,
+	...rest
+}) => {
+	return (
+		<Card.Default
+			as={as}
+			className={`
+				bg-uiAccent/5 border border-uiAccent/20 rounded
+				${className ?? ''}
+			`}
+			{...rest}
+		>
+			<Card.Body className="!p-3">
+				{children}
+			</Card.Body>
+		</Card.Default>
+	);
+};
+
+export const CardTitle = ({
+	as,
+	children,
+	icon,
+	className,
+	...rest
+}) => {
+	return (
+		<Card.Title
+			as={as}
+			className={`
+				flex items-center gap-2 mb-2 text-xs uppercase font-bold text-uiText
+				${className ?? ''}
+			`}
+			{...rest}
+		>
+			<Icon
+				icon={icon}
+				size="w-5 h-5"
+				className="text-uiAccent/30"
+			/>
+			{children}
+		</Card.Title>
+	);
+};
+
+CardFilter.Title = CardTitle;
+
+export default CardFilter;

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

@@ -0,0 +1,47 @@
+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="bg-blackA6 fixed inset-0 animate-overlayShow" />
+			<Dialog.Content className="fit-content animate-contentShow fixed inset-0 m-auto max-h-[85vh] w-[90vw] max-w-[450px] rounded-[6px] bg-white p-[25px] shadow-lg focus:outline-none flex flex-col items-center text-center">
+				<Dialog.Title className="text-[17px] font-medium w-full">
+                        Career Opportunities
+				</Dialog.Title>
+				<Dialog.Description className="mt-4 mb-5 text-[15px] leading-normal w-full">
+                        Are you currently a {companyName} employee?
+				</Dialog.Description>
+				<div className="flex justify-center space-x-4 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="absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] items-center justify-center rounded-full focus:outline-none"
+						variant="ghost" aria-label="Close">
+						<Icon
+							icon="mdi:times"
+							className="cursor-pointer text-black hover:text-gray-500 hover:opacity-75"
+						/>
+					</Button.Anchor>
+				</Dialog.Close>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+);
+
+export default ApplyDialog;