@abcagency/hc-ui-components 1.3.57 → 1.3.59

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/filter/item.js

@@ -1,69 +1,69 @@
-import React from 'react';
-import Icon from '~/components/modules/icon';
-
-const FilterItem = ({
-	className,
-	item,
-	type,
-	itemKey,
-	hasCount,
-	field,
-	activeItem,
-	setActiveItem,
-	changeHandler,
-	isExternalLink = false,
-	externalLinkUrl,
-	trackEvent,
-	eventTypes,
-	...rest
-}) => {
-	const itemName = item.name ? item.name : item;
-
-	return (
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-		<label
-		  onClick={() =>
-			{
-				if(!isExternalLink) return;
-			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
-				window.location.href = externalLinkUrl;
-			}}
-			className={`
-        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
-        ${className ?? ""}
-      `}
-			{...rest}
-		>
-			{isExternalLink ? (
-				<Icon
-					icon="tabler:external-link"
-					size="hc-size-4"
-					className={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}
-				></Icon>
-			) : (
-				<input
-					id={itemKey}
-					name={field}
-					disabled={item.count === 0}
-					value={itemName}
-					type={type}
-					className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
-					checked={activeItem}
-					onChange={() => {
-						setActiveItem(!activeItem);
-						changeHandler();
-					}}
-				/>
-			)}
-
-			<span className="hc-text-left hc-font-medium">{itemName}</span>
-			{hasCount && !isExternalLink && (
-				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
-          ({item.count})
-				</span>
-			)}
-		</label>
-	);
-};
-
-export default FilterItem;
+import React from 'react';
+import Icon from '~/components/modules/icon';
+
+const FilterItem = ({
+	className,
+	item,
+	type,
+	itemKey,
+	hasCount,
+	field,
+	activeItem,
+	setActiveItem,
+	changeHandler,
+	isExternalLink = false,
+	externalLinkUrl,
+	trackEvent,
+	eventTypes,
+	...rest
+}) => {
+	const itemName = item.name ? item.name : item;
+
+	return (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+		<label
+		  onClick={() =>
+			{
+				if(!isExternalLink) return;
+			    trackEvent(eventTypes.EXTERNAL_LINK_CLICKED, { link: externalLinkUrl });
+				window.location.href = externalLinkUrl;
+			}}
+			className={`
+        hc-flex hc-items-start hc-gap-2 hc-px-2 hc-py-1.5 hc-rounded-sm hc-text-sm hc-cursor-pointer hc-transition hover:hc-bg-uiAccent/5
+        ${className ?? ""}
+      `}
+			{...rest}
+		>
+			{isExternalLink ? (
+				<Icon
+					icon="tabler:external-link"
+					size="hc-size-4"
+					className={'hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30'}
+				></Icon>
+			) : (
+				<input
+					id={itemKey}
+					name={field}
+					disabled={item.count === 0}
+					value={itemName}
+					type={type}
+					className="hc-size-4 hc-mt-px hc-text-primary hc-border-uiAccent/30 hc-transition-colors hc-rounded-sm"
+					checked={activeItem}
+					onChange={() => {
+						setActiveItem(!activeItem);
+						changeHandler();
+					}}
+				/>
+			)}
+
+			<span className="hc-text-left hc-font-medium">{itemName}</span>
+			{hasCount && !isExternalLink && (
+				<span className="hc-inline-block hc-mt-1 hc-ml-auto hc-text-xs hc-leading-none hc-text-primary">
+          ({item.count})
+				</span>
+			)}
+		</label>
+	);
+};
+
+export default FilterItem;