@drivenets/design-system 0.1.0 → 0.2.0

package/src/components/ds-tag/ds-tag.tsx

@@ -0,0 +1,124 @@
+import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
+import classNames from 'classnames';
+import styles from './ds-tag.module.scss';
+import type { DsTagProps } from './ds-tag.types';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system Tag component
+ */
+const DsTag = ({
+	ref,
+	label,
+	className,
+	style = {},
+	size = 'medium',
+	selected = false,
+	variant = 'default',
+	disabled = false,
+	locale = {},
+	onClick,
+	onDelete,
+	slots,
+	...rest
+}: DsTagProps) => {
+	const tagClass = classNames(
+		styles.tag,
+		{
+			[styles.clickable]: onClick !== undefined && !disabled,
+			[styles.selected]: selected && !disabled,
+			[styles.include]: variant === 'include',
+			[styles.exclude]: variant === 'exclude',
+			[styles.disabled]: disabled,
+		},
+		className,
+	);
+
+	const handleDeleteClick = (event: MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		onDelete?.(event);
+	};
+
+	const handleKeyDownTag = (event: KeyboardEvent<HTMLElement>) => {
+		if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onClick(event as KeyboardEvent<HTMLDivElement>);
+
+			return;
+		}
+
+		if (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+
+	const handleKeyDownDelete = (event: KeyboardEvent<HTMLElement>) => {
+		event.stopPropagation();
+
+		if (onDelete && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+
+	const handleClick = (event: MouseEvent<HTMLElement>) => {
+		if (onClick) {
+			event.preventDefault();
+			onClick(event as MouseEvent<HTMLDivElement>);
+		}
+	};
+
+	let iconVariant: 'do_not_disturb_on' | 'check_circle' | null = null;
+
+	if (variant === 'include') {
+		iconVariant = 'check_circle';
+	}
+
+	if (variant === 'exclude') {
+		iconVariant = 'do_not_disturb_on';
+	}
+
+	return (
+		<div
+			ref={ref as Ref<HTMLDivElement>}
+			className={tagClass}
+			style={style}
+			onClick={disabled ? undefined : handleClick}
+			onKeyDown={disabled ? undefined : handleKeyDownTag}
+			role={onClick || onDelete ? 'button' : undefined}
+			tabIndex={disabled || (!onClick && !onDelete) ? undefined : 0}
+			aria-label={typeof label === 'string' ? label : undefined}
+			aria-pressed={onClick && selected && !disabled ? 'true' : undefined}
+			aria-disabled={disabled}
+			{...rest}
+		>
+			{(slots?.icon || iconVariant) && (
+				<span className={classNames(styles.icon)}>
+					{slots?.icon ??
+						(iconVariant && (
+							<DsIcon icon={iconVariant} size="tiny" className={classNames(styles.variantIcon)} />
+						))}
+				</span>
+			)}
+			<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
+				{label}
+			</DsTypography>
+			{onDelete && !disabled && (
+				<button
+					type="button"
+					className={styles.deleteButton}
+					onClick={handleDeleteClick}
+					onKeyDown={handleKeyDownDelete}
+					aria-label={locale.deleteAriaLabel ?? 'Delete tag'}
+					tabIndex={0}
+				>
+					<DsIcon icon="close" size="tiny" />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default DsTag;

package/src/components/ds-tag/ds-tag.types.tsx

@@ -0,0 +1,67 @@
+import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
+
+export const tagSizes = ['medium', 'small'] as const;
+export type TagSize = (typeof tagSizes)[number];
+
+export const tagVariants = ['default', 'include', 'exclude'] as const;
+export type TagVariant = (typeof tagVariants)[number];
+
+export interface DsTagProps {
+	/**
+	 * Ref to the tag element
+	 */
+	ref?: Ref<HTMLElement>;
+	/**
+	 * The label text to display in the tag
+	 */
+	label: ReactNode;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Locale object (you can pass custom strings for localization)
+	 */
+	locale?: {
+		deleteAriaLabel?: string;
+	};
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Optional click handler, if not present Tag will not be in "clickable" state
+	 */
+	onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Callback function when the delete icon is clicked
+	 */
+	onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Size of the tag
+	 * @default 'medium'
+	 */
+	size?: TagSize;
+	/**
+	 * Whether the tag is in a selected/pressed state
+	 * @default false
+	 */
+	selected?: boolean;
+	/**
+	 * Variant of the tag
+	 * @default 'default'
+	 */
+	variant?: TagVariant;
+	/**
+	 * Whether the tag is disabled
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	slots?: {
+		/**
+		 * Icon to display at the start of the input
+		 */
+		icon?: ReactNode;
+	};
+}

package/src/components/ds-tag/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsTag } from './ds-tag';
+export type { TagSize, TagVariant, DsTagProps } from './ds-tag.types';

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -0,0 +1,72 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+	padding: var(--spacing-xs) var(--spacing-standard);
+	background: var(--color-background-selected-weak);
+	border: 1px solid var(--color-outline-weak);
+	border-radius: var(--spacing-3xs);
+	max-height: 88px; // hardcoded value required in the design
+	overflow: hidden;
+
+	&.expanded {
+		max-height: none;
+	}
+}
+
+.row1 {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: var(--spacing-xs);
+	flex-shrink: 0;
+}
+
+.row2 {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: var(--spacing-xs);
+	flex-wrap: wrap;
+}
+
+.label {
+	color: var(--color-font-secondary);
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.expandTag {
+	cursor: pointer;
+	flex-shrink: 0;
+}
+
+.itemCheckbox {
+	display: flex;
+	align-items: center;
+}
+
+.clearContent {
+	background: transparent !important;
+}
+
+.clearButton {
+	margin-left: auto;
+	padding: 0;
+	flex-shrink: 0;
+}
+
+// Hidden container for measuring element widths
+// Must render all elements to get accurate measurements
+.measurementContainer {
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+
+	// Ensure it doesn't affect layout
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	visibility: hidden;
+}

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -0,0 +1,178 @@
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import styles from './ds-tag-filter.module.scss';
+import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
+import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
+import { DsTypography } from '../ds-typography';
+import { DsTag } from '../ds-tag';
+import { DsButton } from '../ds-button';
+import { DsIcon } from '../ds-icon';
+
+/**
+ * Design system TagFilter component
+ *
+ * A component for displaying active filters as tags with overflow handling.
+ * Shows visible tags in up to 2 rows, with the Expand button to show hidden items.
+ */
+const DsTagFilter = ({
+	items,
+	locale = {},
+	className,
+	style,
+	onClearAll,
+	onItemDelete,
+	onItemSelect,
+	onExpand,
+}: DsTagFilterProps) => {
+	const [expanded, setExpanded] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const measurementRef = useRef<HTMLDivElement>(null);
+
+	const { row1TagCount, row2TagCount, hasOverflow } = useTagOverflowCalculation({
+		containerRef,
+		measurementRef,
+		totalItems: items.length,
+		expanded,
+	});
+
+	const {
+		label = 'Filtered by:',
+		clearButton = 'Clear all filters',
+		hiddenCountPlural = 'filters',
+		hiddenCountSingular = 'filter',
+		collapseTagLabel = 'Collapse',
+	} = locale;
+
+	// Split items into row sections
+	const row1Tags = items.slice(0, row1TagCount);
+	const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
+	const hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);
+
+	if (items.length === 0) {
+		return null;
+	}
+
+	const hiddenCount = hiddenTags.length;
+	const hasRow2Content = row2Tags.length > 0 || hasOverflow;
+
+	const renderTag = (item: TagFilterItem) => {
+		const tagProps = item.slotProps?.tag || {};
+
+		return (
+			<DsTag
+				{...tagProps}
+				key={item.id}
+				label={item.label}
+				selected={item.selected}
+				onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+				onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+			/>
+		);
+	};
+
+	const handleExpandToggle = () => {
+		const newExpanded = !expanded;
+		setExpanded(newExpanded);
+		onExpand?.(newExpanded);
+	};
+
+	// Measurement container rendered via portal to keep it outside the component's DOM tree
+	// This prevents Testing Library from finding duplicate elements
+	// We use it to calculate the number of remaining tags to render
+	const measurementContainer = (
+		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
+			{label && (
+				<span data-measure-label="">
+					<DsTypography variant="body-sm-reg" className={styles.label}>
+						{label}
+					</DsTypography>
+				</span>
+			)}
+			{items.map((item) => (
+				<DsTag
+					key={item.id}
+					data-measure-tag=""
+					label={item.label}
+					selected={item.selected}
+					onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+				/>
+			))}
+			{onClearAll && (
+				<DsButton
+					data-measure-clear=""
+					design="v1.2"
+					buttonType="tertiary"
+					variant="ghost"
+					className={styles.clearButton}
+					contentClassName={styles.clearContent}
+					size="small"
+				>
+					<DsIcon icon="close" />
+					{clearButton}
+				</DsButton>
+			)}
+			<DsTag data-measure-expand="" label="+99 filters" className={styles.expandTag} />
+		</div>
+	);
+
+	/**
+	 * IMPORTANT!
+	 * If you make any changes to this layout (styling, JSX, anything that affects it.)
+	 * please, apply the exact same changes to the "measurementContainer"
+	 */
+	return (
+		<>
+			<div
+				ref={containerRef}
+				className={classNames(styles.container, expanded && styles.expanded, className)}
+				style={style}
+			>
+				<div className={styles.row1}>
+					{label && (
+						<DsTypography variant="body-sm-reg" className={styles.label}>
+							{label}
+						</DsTypography>
+					)}
+					{row1Tags.map((item) => renderTag(item))}
+					{onClearAll && (
+						<DsButton
+							design="v1.2"
+							buttonType="tertiary"
+							variant="ghost"
+							className={styles.clearButton}
+							contentClassName={styles.clearContent}
+							size="small"
+							onClick={onClearAll}
+						>
+							<DsIcon icon="close" />
+							{clearButton}
+						</DsButton>
+					)}
+				</div>
+
+				{hasRow2Content && (
+					<div className={styles.row2}>
+						{row2Tags.map((item) => renderTag(item))}
+						{hasOverflow && (
+							<DsTag
+								label={
+									expanded
+										? collapseTagLabel
+										: `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`
+								}
+								selected={expanded}
+								className={styles.expandTag}
+								onClick={handleExpandToggle}
+							/>
+						)}
+					</div>
+				)}
+			</div>
+			{createPortal(measurementContainer, document.body)}
+		</>
+	);
+};
+
+export default DsTagFilter;

package/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import type { DsTagProps } from '../ds-tag';
+
+export interface TagFilterItem {
+	/**
+	 * Unique identifier for the tag
+	 */
+	id: string;
+	/**
+	 * The label text to display in the tag
+	 */
+	label: string;
+	/**
+	 * Additional metadata to store with the tag
+	 */
+	metadata?: Record<string, unknown>;
+	/**
+	 * Whether the tag is selected/checked
+	 */
+	selected?: boolean;
+	/**
+	 * Additional props to pass to the components
+	 */
+	slotProps?: {
+		tag?: Partial<DsTagProps>;
+	};
+}
+
+export interface DsTagFilterProps {
+	/**
+	 * Array of tag items to display
+	 */
+	items: TagFilterItem[];
+	/**
+	 * Locale object (you can pass custom strings for localization)
+	 */
+	locale?: {
+		label?: string;
+		clearButton?: string;
+		collapseTagLabel?: string;
+		hiddenCountSingular?: string;
+		hiddenCountPlural?: string;
+	};
+	/**
+	 * Callback when "Clear all" is clicked
+	 */
+	onClearAll?: () => void;
+	/**
+	 * Callback when a tag is deleted/removed
+	 */
+	onItemDelete?: (item: TagFilterItem) => void;
+	/**
+	 * Callback when a tag is selected
+	 */
+	onItemSelect?: (item: TagFilterItem) => void;
+	/**
+	 * Callback when the Expand button is clicked
+	 */
+	onExpand?: (expanded?: boolean) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+}

package/src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts

@@ -0,0 +1,135 @@
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';
+
+interface UseTagOverflowCalculationOptions {
+	containerRef: RefObject<HTMLDivElement | null>;
+	measurementRef: RefObject<HTMLDivElement | null>;
+	totalItems: number;
+	expanded: boolean;
+}
+
+interface UseTagOverflowCalculationResult {
+	row1TagCount: number;
+	row2TagCount: number;
+	hasOverflow: boolean;
+}
+
+// Extra space needed per row for animated delete button that appears on hover
+const TAG_HOVER_BUTTON_SPACE = 20;
+
+/**
+ * Custom hook to calculate how many tags can fit in 2 rows.
+ *
+ * Row 1: Label + Tags + Clear Button
+ * Row 2: Remaining Tags + Expand Tag (only if overflow)
+ *
+ * Measures actual element widths to determine optimal placement.
+ */
+export const useTagOverflowCalculation = ({
+	containerRef,
+	measurementRef,
+	totalItems,
+	expanded,
+}: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {
+	const [state, setState] = useState<UseTagOverflowCalculationResult>({
+		row1TagCount: 0,
+		row2TagCount: 0,
+		hasOverflow: false,
+	});
+
+	const calculateLayout = useCallback(() => {
+		if (!containerRef.current || !measurementRef.current) {
+			return;
+		}
+
+		const container = containerRef.current;
+		const measurementContainer = measurementRef.current;
+
+		const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =
+			getElementMeasurements(measurementContainer);
+
+		if (tagWidths.length === 0) {
+			setState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });
+			return;
+		}
+
+		const containerWidth = getContainerAvailableWidth(container);
+
+		// Calculate Row 1 available space (Label + Tags + Clear Button)
+		const row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;
+
+		// Calculate how many tags fit in Row 1
+		const row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);
+		const remainingTags = tagWidths.slice(row1Result.count);
+
+		if (remainingTags.length === 0) {
+			// All tags fit in Row 1, no overflow
+			setState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });
+			return;
+		}
+
+		// Calculate with expand tag reserved (pessimistic)
+		const row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;
+		const row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);
+
+		// Check if there's overflow (more remaining tags than fit in Row 2 with expand)
+		const overflowExists = remainingTags.length > row2WithExpandResult.count;
+
+		if (overflowExists) {
+			// Use the count with expand tag space reserved
+			setState({
+				row1TagCount: row1Result.count,
+				row2TagCount: row2WithExpandResult.count,
+				hasOverflow: true,
+			});
+		} else {
+			// No overflow - recalculate Row 2 without reserving expand tag space
+			const row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;
+			const row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);
+
+			// Double-check: if even without expand tag we can't fit all, we have overflow
+			if (row2FullResult.count < remainingTags.length) {
+				setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2WithExpandResult.count,
+					hasOverflow: true,
+				});
+			} else {
+				setState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });
+			}
+		}
+	}, [containerRef, measurementRef]);
+
+	useLayoutEffect(() => {
+		// Use requestAnimationFrame to ensure DOM is fully laid out
+		const rafId = requestAnimationFrame(() => {
+			calculateLayout();
+		});
+
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				calculateLayout();
+			});
+		});
+
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+	}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);
+
+	// When expanded, show all tags
+	if (expanded) {
+		return {
+			row1TagCount: state.row1TagCount,
+			row2TagCount: totalItems - state.row1TagCount,
+			hasOverflow: true, // Keep expand button visible to allow collapse
+		};
+	}
+
+	return state;
+};

package/src/components/ds-tag-filter/index.ts

@@ -0,0 +1,2 @@
+export { default as DsTagFilter } from './ds-tag-filter';
+export type { TagFilterItem, DsTagFilterProps } from './ds-tag-filter.types';