@abcagency/hc-ui-components 1.1.1 → 1.2.0

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

@@ -1,168 +1,167 @@
-import { forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-import React from 'react'
-
-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,55 +1,56 @@
-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={`
-			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,47 +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-blackA6 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;
+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;