@abcagency/hc-ui-components 1.3.70 → 1.3.72

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

@@ -1,167 +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;
+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 +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;
+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 +1,64 @@
-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;
+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, item, trackEvent, eventTypes, isIframe }) => {
+	const trackApplyOption1 = () => {
+		//console.log('calling trackApplyOption1');
+		trackEvent(eventTypes.APPLY_OPTION_1_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+	};
+	const trackApplyOption2 = () => {
+		//console.log('calling trackApplyOption2');
+		trackEvent(eventTypes.APPLY_OPTION_2_CLICKED, { jobCategory: item.fields.category, jobCategoryClass: item.fields.categoryClass, jobEntity: item.fields.entityName, jobListingId: item.id, jobSchedule: item.fields.schedule });
+	};
+
+	return (
+		<Dialog.Root >
+			<Dialog.Trigger asChild>
+				<div>
+					{children}
+				</div>
+			</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>
+							<div>
+								<Button.Anchor variant="outline" href={internalApplyLink} execOnClick={trackApplyOption1} isIframe={isIframe} iframeMsgType={"APPLY_EMPLOYEE_YES_LINK"}>
+									Yes
+								</Button.Anchor>
+							</div>
+						</Dialog.Close>
+						<Dialog.Close asChild>
+							<div>
+								<Button.Anchor variant="primary" href={applyUrl} execOnClick={trackApplyOption2} isIframe={isIframe} iframeMsgType={"APPLY_NOW_LINK"}>
+									No
+								</Button.Anchor>
+							</div>
+						</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;