@abcagency/hc-ui-components 1.1.1 → 1.2.0

package/src/components/modules/accordions/MapAccordionItem.js

@@ -1,69 +1,72 @@
-import Accordion from "~/components/modules/accordions/default";
-import ListItem from "~/components/modules/maps/list/list-item";
-import ItemExpandCard from "~/components/modules/maps/list/item-expand-card";
-import { useMap } from "~/contexts/mapContext";
-import { setStorageObject } from "~/util/localStorageUtil";
-import { useEffect } from "react";
-import { useMapList } from "~/contexts/mapListContext";
-import React from 'react'
-const MapAccordionItem = ({
-	item,
-	itemRefs,
-	itemExpandedContent,
-	fieldsShown,
-	showMap,
-	hasListItemSelected,
-	specialFeatures,
-	isActive
-}) => {
-	const {
-		mapItems,
-		recruiters,
-		setMobileTab,
-		favorites,
-		handleSettingFavorites
-	} = useMapList();
-	const { selectItem } = useMap();
-	const setSelectedItemAndZoomMap = item => {
-		if (isActive) {
-			localStorage.removeItem("selectedListItem");
-			mapItems.find(x => x.items.hasOwnProperty(item.id)) || null;
-			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
-		} else {
-			setStorageObject("selectedListItem", item);
-			let location = mapItems.find(x => x.items.hasOwnProperty(item.id)) || null;
-			selectItem(item, location, 12, {
-				lat: location?.latitude,
-				lng: location?.longitude
-			});
-		}
-	};
-	return (
-		<Accordion.Item key={item.id} id={item.id}>
-			<Accordion.Trigger.Blank>
-				<ListItem
-					ref={el => (itemRefs.current[item.id] = el)}
-					id={item.id}
-					key={item.id}
-					item={item}
-					fieldsShown={fieldsShown}
-					onClick={() => setSelectedItemAndZoomMap(item)}
-					showMap={showMap}
-					isActive={isActive}
-					setMobileTab={setMobileTab}
-					specialFeatures={specialFeatures}
-					className={hasListItemSelected ? isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85" : ""}
-					favorites={favorites}
-					setFavorites={handleSettingFavorites}
-				/>
-			</Accordion.Trigger.Blank>
-			{isActive &&
-				<Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
-					<ItemExpandCard content={itemExpandedContent(item, recruiters)} />
-				</Accordion.Content>
-			}
-		</Accordion.Item>
-	);
-};
-
-export default MapAccordionItem;
+import React from 'react'
+
+import Accordion from '~/components/modules/accordions/default';
+import ListItem from '~/components/modules/maps/list/list-item';
+import ItemExpandCard from '~/components/modules/maps/list/item-expand-card';
+
+import { useMap } from '~/contexts/mapContext';
+import { useMapList } from '~/contexts/mapListContext';
+
+import { setStorageObject } from '~/util/localStorageUtil';
+
+const MapAccordionItem = ({
+	item,
+	itemRefs,
+	itemExpandedContent,
+	fieldsShown,
+	showMap,
+	hasListItemSelected,
+	specialFeatures,
+	isActive
+}) => {
+	const {
+		mapItems,
+		recruiters,
+		setMobileTab,
+		favorites,
+		handleSettingFavorites
+	} = useMapList();
+	const { selectItem } = useMap();
+	const setSelectedItemAndZoomMap = item => {
+		if (isActive) {
+			localStorage.removeItem("selectedListItem");
+			mapItems.find(x => x.items.hasOwnProperty(item.id)) || null;
+			selectItem(null, null, 9, { lat: 39.8283, lng: -98.5795 });
+		} else {
+			setStorageObject("selectedListItem", item);
+			let location = mapItems.find(x => x.items.hasOwnProperty(item.id)) || null;
+			selectItem(item, location, 12, {
+				lat: location?.latitude,
+				lng: location?.longitude
+			});
+		}
+	};
+	return (
+		<Accordion.Item key={item.id} id={item.id}>
+			<Accordion.Trigger.Blank>
+				<ListItem
+					ref={el => (itemRefs.current[item.id] = el)}
+					id={item.id}
+					key={item.id}
+					item={item}
+					fieldsShown={fieldsShown}
+					onClick={() => setSelectedItemAndZoomMap(item)}
+					showMap={showMap}
+					isActive={isActive}
+					setMobileTab={setMobileTab}
+					specialFeatures={specialFeatures}
+					className={hasListItemSelected ? isActive ? "!hc-border-secondary hc-border hc-border-b-0" : "hc-opacity-85" : ""}
+					favorites={favorites}
+					setFavorites={handleSettingFavorites}
+				/>
+			</Accordion.Trigger.Blank>
+			{isActive &&
+				<Accordion.Content bodyClassName="hc-px-2 hc-py-2 hc-pt-0 hc-bg-uiAccent/5 hc-border-secondary hc-border hc-border-t-0">
+					<ItemExpandCard content={itemExpandedContent(item, recruiters)} />
+				</Accordion.Content>
+			}
+		</Accordion.Item>
+	);
+};
+
+export default MapAccordionItem;

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

@@ -1,173 +1,171 @@
-import { forwardRef } from 'react';
-import * as RadixAccordion from '@radix-ui/react-accordion';
-import { twMerge } from 'tailwind-merge';
-import Icon from '~/components/modules/icon';
-import React from 'react';
-import trackEvent from '~/hooks/useEventTracker';
-
-const Accordion = ({
-	className,
-	type = 'single',
-	defaultValue,
-	collapsible = true,
-	children
-}) => {
-	return (
-		<RadixAccordion.Root
-			type={type}
-			value={defaultValue ?? null}
-			collapsible={collapsible}
-			className={className ?? ''}
-			onValueChange={value => trackEvent('Engagement', 'Open Accordion', value)}
-		>
-			{children}
-		</RadixAccordion.Root>
-	);
-};
-
-export const AccordionItem = forwardRef((
-	{
-		id,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => {
-	return (
-		<RadixAccordion.Item
-			ref={forwardedRef}
-			value={id}
-			className={className ?? ''}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Item>
-	);
-});
-
-export const AccordionTrigger = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge(
-				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hc-focus-visible:ring hc-focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-				className ?? ''
-			)}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="hc-size-5"
-				className="hc-transition-transform hc-group-data-[state=open]:!hc-rotate-180"
-				aria-hidden="true"
-			/>
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerHasHeader = forwardRef((
-	{
-		header,
-		headerClassName,
-		iconClassName,
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header
-		className={twMerge(
-			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
-			headerClassName ?? ''
-		)}
-	>
-		<RadixAccordion.Trigger
-			ref={forwardedRef}
-			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
-			{...props}
-		>
-			{children}
-			<Icon
-				icon="uil:angle-down"
-				size="w-5 h-5"
-				className={twMerge(
-					'hc-transition-transform group-data-[state=open]:!hc-hc-rotate-180',
-					iconClassName ?? ''
-				)}
-				aria-hidden="true"
-			/>
-			{header}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionTriggerBlank = forwardRef((
-	{
-		children,
-		className,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Header asChild>
-		<RadixAccordion.Trigger
-			asChild
-			ref={forwardedRef}
-			{...props}
-		>
-			{children}
-		</RadixAccordion.Trigger>
-	</RadixAccordion.Header>
-));
-
-export const AccordionContent = forwardRef((
-	{
-		children,
-		className,
-		bodyClassName,
-		...props
-	},
-	forwardedRef
-) => (
-	<RadixAccordion.Content
-		ref={forwardedRef}
-		className={twMerge(
-			'data-[state=open]:hc-animate-slideDown hc-data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
-			className ?? ''
-		)}
-		{...props}
-	>
-		<div
-			className={twMerge(
-				'p-4 pt-0.5',
-				bodyClassName ?? ''
-			)}
-		>
-			{children}
-		</div>
-	</RadixAccordion.Content>
-));
-
-Accordion.Item = AccordionItem;
-Accordion.Trigger = AccordionTrigger;
-Accordion.Trigger.Blank = AccordionTriggerBlank;
-Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
-Accordion.Content = AccordionContent;
-
-AccordionItem.displayName = 'AccordionItem';
-AccordionTrigger.displayName = 'AccordionTrigger';
-AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
-AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
-AccordionContent.displayName = 'AccordionContent';
-
-export default Accordion;
+import React, { forwardRef } from 'react';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import { twMerge } from 'tailwind-merge';
+
+import Icon from '~/components/modules/icon';
+
+const Accordion = ({
+	className,
+	type = 'single',
+	defaultValue,
+	collapsible = true,
+	children
+}) => {
+	return (
+		<RadixAccordion.Root
+			type={type}
+			value={defaultValue ?? null}
+			collapsible={collapsible}
+			className={className ?? ''}
+		>
+			{children}
+		</RadixAccordion.Root>
+	);
+};
+
+export const AccordionItem = forwardRef((
+	{
+		id,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => {
+	return (
+		<RadixAccordion.Item
+			ref={forwardedRef}
+			value={id}
+			className={className ?? ''}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Item>
+	);
+});
+
+export const AccordionTrigger = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge(
+				'hc-group hc-flex hc-justify-between hc-w-full hc-p-4 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none hfocus-visible:hcring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
+				className ?? ''
+			)}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="hc-size-5"
+				className="hc-transition-transform group-data-[state=open]:!hc-rotate-180"
+				aria-hidden="true"
+			/>
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerHasHeader = forwardRef((
+	{
+		header,
+		headerClassName,
+		iconClassName,
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header
+		className={twMerge(
+			'hc-group hc-flex hc-items-start hc-justify-between hc-w-full hc-p-4 hc-pr-3 hc-font-bold hc-text-left hc-text-uiText focus:hc-outline-none focus-visible:hc-ring focus-visible:hc-ring-uiAccent focus-visible:hc-ring-opacity-75 hover:hc-text-primary focus:hc-text-primary hc-transition data-[state=open]:hc-text-primary',
+			headerClassName ?? ''
+		)}
+	>
+		<RadixAccordion.Trigger
+			ref={forwardedRef}
+			className={twMerge('hc-flex hc-items-center hc-justify-between hc-w-full', className ?? '')}
+			{...props}
+		>
+			{children}
+			<Icon
+				icon="uil:angle-down"
+				size="w-5 h-5"
+				className={twMerge(
+					'hc-transition-transform group-data-[state=open]:!hc-rotate-180',
+					iconClassName ?? ''
+				)}
+				aria-hidden="true"
+			/>
+			{header}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionTriggerBlank = forwardRef((
+	{
+		children,
+		className,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Header asChild>
+		<RadixAccordion.Trigger
+			asChild
+			ref={forwardedRef}
+			{...props}
+		>
+			{children}
+		</RadixAccordion.Trigger>
+	</RadixAccordion.Header>
+));
+
+export const AccordionContent = forwardRef((
+	{
+		children,
+		className,
+		bodyClassName,
+		...props
+	},
+	forwardedRef
+) => (
+	<RadixAccordion.Content
+		ref={forwardedRef}
+		className={twMerge(
+			'data-[state=open]:hc-animate-slideDown data-[state=closed]:hc-animate-slideUp hc-overflow-hidden',
+			className ?? ''
+		)}
+		{...props}
+	>
+		<div
+			className={twMerge(
+				'hc-p-4 hc-pt-0.5',
+				bodyClassName ?? ''
+			)}
+		>
+			{children}
+		</div>
+	</RadixAccordion.Content>
+));
+
+Accordion.Item = AccordionItem;
+Accordion.Trigger = AccordionTrigger;
+Accordion.Trigger.Blank = AccordionTriggerBlank;
+Accordion.Trigger.HasHeader = AccordionTriggerHasHeader;
+Accordion.Content = AccordionContent;
+
+AccordionItem.displayName = 'AccordionItem';
+AccordionTrigger.displayName = 'AccordionTrigger';
+AccordionTriggerBlank.displayName = 'AccordionTriggerBlank';
+AccordionTriggerHasHeader.displayName = 'AccordionTriggerHasHeader';
+AccordionContent.displayName = 'AccordionContent';
+
+export default Accordion;

package/src/components/modules/accordions/filterItem.js

@@ -1,53 +1,53 @@
-import { memo } from "react";
-import React from 'react';
-import Accordion from "~/components/modules/accordions/default";
-import FilterItem from "~/components/modules/filter/item";
-import ItemsPill from "~/components/modules/buttons/items-pill";
-
-const AccordionFilterItem = memo(({ filter, setDefaultValue, setSelectedFilters, selectedFilters }) => {
-	const fieldKey = filter.id;
-	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
-		? Object.keys(selectedFilters[fieldKey]).length
-		: 0;
-
-	const handleClearFilters = () => {
-		setSelectedFilters(prevFilters => {
-			const updatedFilters = { ...prevFilters };
-			delete updatedFilters[fieldKey];
-			return updatedFilters;
-		});
-	};
-	return (
-		<Accordion.Item key={filter.id} id={filter.id}>
-			<Accordion.Trigger.HasHeader
-				onClick={() => setDefaultValue(filter.id)}
-				className="hc-stretched-link hc-text-left"
-				iconClassName="hc-order-last"
-				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
-				header={
-					activeItemsCount > 0 && (
-						<ItemsPill
-							activeItemsCount={activeItemsCount}
-							onClick={handleClearFilters}
-						/>
-					)
-				}
-			>
-				{filter.title}
-			</Accordion.Trigger.HasHeader>
-			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
-				{filter.items.sort().map(item => (
-					<FilterItem
-						key={item.name}
-						item={item}
-						field={filter.id}
-						selectedFilters={selectedFilters}
-						setSelectedFilters={setSelectedFilters}
-					/>
-				))}
-			</Accordion.Content>
-		</Accordion.Item>
-	);
-});
-AccordionFilterItem.displayName = 'AccordionItem';
-export default AccordionFilterItem;
+import React, { memo } from 'react';
+
+import Accordion from '~/components/modules/accordions/default';
+import FilterItem from '~/components/modules/filter/item';
+import ItemsPill from '~/components/modules/buttons/items-pill';
+
+const AccordionFilterItem = memo(({ filter, setDefaultValue, setSelectedFilters, selectedFilters }) => {
+	const fieldKey = filter.id;
+	const activeItemsCount = selectedFilters != null && selectedFilters[fieldKey]
+		? Object.keys(selectedFilters[fieldKey]).length
+		: 0;
+
+	const handleClearFilters = () => {
+		setSelectedFilters(prevFilters => {
+			const updatedFilters = { ...prevFilters };
+			delete updatedFilters[fieldKey];
+			return updatedFilters;
+		});
+	};
+	return (
+		<Accordion.Item key={filter.id} id={filter.id}>
+			<Accordion.Trigger.HasHeader
+				onClick={() => setDefaultValue(filter.id)}
+				className="hc-stretched-link hc-text-left"
+				iconClassName="hc-order-last"
+				headerClassName="hc-relative hc-py-2 hc-rounded hc-border hc-border-uiAccent/20 hc-bg-white hc-text-sm hc-transition data-[state=open]:hc-border-b-transparent data-[state=open]:hc-rounded-b-none"
+				header={
+					activeItemsCount > 0 && (
+						<ItemsPill
+							activeItemsCount={activeItemsCount}
+							onClick={handleClearFilters}
+						/>
+					)
+				}
+			>
+				{filter.title}
+			</Accordion.Trigger.HasHeader>
+			<Accordion.Content bodyClassName="hc-px-2 hc-py-1 hc-bg-white hc-rounded-b hc-border hc-border-uiAccent/20 hc-border-t-0 hc-max-h-[20vh] md:hc-max-h-[25vh] hc-overflow-auto">
+				{filter.items.sort().map(item => (
+					<FilterItem
+						key={item.name}
+						item={item}
+						field={filter.id}
+						selectedFilters={selectedFilters}
+						setSelectedFilters={setSelectedFilters}
+					/>
+				))}
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+});
+AccordionFilterItem.displayName = 'AccordionItem';
+export default AccordionFilterItem;