@drivenets/design-system 0.0.5 → 0.2.0

package/src/components/ds-tag-filter/utils.test.ts

@@ -0,0 +1,401 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from './utils';
+
+/**
+ * Tests here heavily test implementation details.
+ * Required to ensure proper calculations.
+ */
+
+describe('Tag Filter Utils', () => {
+	describe('fitTagsInRow', () => {
+		it('should return count 0 for empty tag array', () => {
+			const result = fitTagsInRow([], 100, 8);
+
+			expect(result.count).toBe(0);
+			expect(result.usedWidth).toBe(0);
+		});
+
+		it('should fit all tags when they all fit in available width', () => {
+			const tagWidths = [50, 60, 70]; // total: 180 + 2 gaps (16) = 196
+			const availableWidth = 200;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			expect(result.count).toBe(3);
+			expect(result.usedWidth).toBe(196); // 50 + 8 + 60 + 8 + 70 = 196
+		});
+
+		it('should return partial count when not all tags fit', () => {
+			const tagWidths = [50, 60, 70, 80];
+			const availableWidth = 150;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			// 50 = 50, 50 + 8 + 60 = 118, 118 + 8 + 70 = 196 (exceeds 150)
+			expect(result.count).toBe(2);
+			expect(result.usedWidth).toBe(118); // 50 + 8 + 60 = 118
+		});
+
+		it('should not add gap before the first tag', () => {
+			const tagWidths = [100];
+			const availableWidth = 100;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			expect(result.count).toBe(1);
+			expect(result.usedWidth).toBe(100); // No gap added for first tag
+		});
+
+		it('should handle exact fit edge case', () => {
+			const tagWidths = [40, 52]; // 40 + 8 + 52 = 100
+			const availableWidth = 100;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			expect(result.count).toBe(2);
+			expect(result.usedWidth).toBe(100);
+		});
+
+		it('should return 0 when first tag exceeds available width', () => {
+			const tagWidths = [150, 50, 60];
+			const availableWidth = 100;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			expect(result.count).toBe(0);
+			expect(result.usedWidth).toBe(0);
+		});
+
+		it('should handle zero gap correctly', () => {
+			const tagWidths = [30, 30, 30];
+			const availableWidth = 90;
+			const gap = 0;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			expect(result.count).toBe(3);
+			expect(result.usedWidth).toBe(90);
+		});
+
+		it('should account for gap in width calculation', () => {
+			const tagWidths = [45, 45]; // 45 + 8 + 45 = 98
+			const availableWidth = 95;
+			const gap = 8;
+
+			const result = fitTagsInRow(tagWidths, availableWidth, gap);
+
+			// First tag: 45, second would be 45 + 8 = 53, total = 98 > 95
+			expect(result.count).toBe(1);
+			expect(result.usedWidth).toBe(45);
+		});
+	});
+
+	describe('getContainerAvailableWidth', () => {
+		let mockContainer: HTMLDivElement;
+
+		beforeEach(() => {
+			mockContainer = document.createElement('div');
+		});
+
+		afterEach(() => {
+			vi.restoreAllMocks();
+		});
+
+		it('should calculate available width without padding', () => {
+			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
+				width: 500,
+				height: 100,
+				top: 0,
+				left: 0,
+				bottom: 100,
+				right: 500,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				paddingLeft: '0px',
+				paddingRight: '0px',
+			} as CSSStyleDeclaration);
+
+			const result = getContainerAvailableWidth(mockContainer);
+
+			expect(result).toBe(500);
+		});
+
+		it('should subtract padding from container width', () => {
+			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
+				width: 500,
+				height: 100,
+				top: 0,
+				left: 0,
+				bottom: 100,
+				right: 500,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				paddingLeft: '20px',
+				paddingRight: '30px',
+			} as CSSStyleDeclaration);
+
+			const result = getContainerAvailableWidth(mockContainer);
+
+			expect(result).toBe(450); // 500 - 20 - 30 = 450
+		});
+
+		it('should handle string padding values with decimals', () => {
+			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
+				width: 500,
+				height: 100,
+				top: 0,
+				left: 0,
+				bottom: 100,
+				right: 500,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				paddingLeft: '15.5px',
+				paddingRight: '24.5px',
+			} as CSSStyleDeclaration);
+
+			const result = getContainerAvailableWidth(mockContainer);
+
+			expect(result).toBe(460); // 500 - 15.5 - 24.5 = 460
+		});
+
+		it('should default to 0 for invalid padding values', () => {
+			vi.spyOn(mockContainer, 'getBoundingClientRect').mockReturnValue({
+				width: 500,
+				height: 100,
+				top: 0,
+				left: 0,
+				bottom: 100,
+				right: 500,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				paddingLeft: '',
+				paddingRight: '',
+			} as CSSStyleDeclaration);
+
+			const result = getContainerAvailableWidth(mockContainer);
+
+			expect(result).toBe(500); // No padding subtracted
+		});
+	});
+
+	describe('getElementMeasurements', () => {
+		let mockContainer: HTMLDivElement;
+
+		beforeEach(() => {
+			mockContainer = document.createElement('div');
+			document.body.appendChild(mockContainer);
+		});
+
+		afterEach(() => {
+			document.body.removeChild(mockContainer);
+			vi.restoreAllMocks();
+		});
+
+		it('should measure all elements with default gap', () => {
+			// Create mock elements
+			const tag1 = document.createElement('div');
+			tag1.setAttribute('data-measure-tag', '');
+			const tag2 = document.createElement('div');
+			tag2.setAttribute('data-measure-tag', '');
+			const label = document.createElement('div');
+			label.setAttribute('data-measure-label', '');
+			const clearButton = document.createElement('div');
+			clearButton.setAttribute('data-measure-clear', '');
+			const expandTag = document.createElement('div');
+			expandTag.setAttribute('data-measure-expand', '');
+
+			mockContainer.appendChild(tag1);
+			mockContainer.appendChild(tag2);
+			mockContainer.appendChild(label);
+			mockContainer.appendChild(clearButton);
+			mockContainer.appendChild(expandTag);
+
+			// Mock getBoundingClientRect for each element
+			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
+				width: 80,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 80,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(tag2, 'getBoundingClientRect').mockReturnValue({
+				width: 90,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 90,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(label, 'getBoundingClientRect').mockReturnValue({
+				width: 60,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 60,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(clearButton, 'getBoundingClientRect').mockReturnValue({
+				width: 40,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 40,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(expandTag, 'getBoundingClientRect').mockReturnValue({
+				width: 100,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 100,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				gap: '8px',
+			} as CSSStyleDeclaration);
+
+			const result = getElementMeasurements(mockContainer);
+
+			expect(result.tagWidths).toEqual([80, 90]);
+			expect(result.labelWidth).toBe(68); // 60 + 8
+			expect(result.clearButtonWidth).toBe(48); // 40 + 8
+			expect(result.expandTagWidth).toBe(108); // 100 + 8
+			expect(result.gap).toBe(8);
+		});
+
+		it('should handle missing optional elements', () => {
+			const tag1 = document.createElement('div');
+			tag1.setAttribute('data-measure-tag', '');
+			mockContainer.appendChild(tag1);
+
+			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
+				width: 80,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 80,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				gap: '12px',
+			} as CSSStyleDeclaration);
+
+			const result = getElementMeasurements(mockContainer);
+
+			expect(result.tagWidths).toEqual([80]);
+			expect(result.labelWidth).toBe(0); // Missing label
+			expect(result.clearButtonWidth).toBe(0); // Missing clear button
+			expect(result.expandTagWidth).toBe(100); // Fallback width
+			expect(result.gap).toBe(12);
+		});
+
+		it('should use fallback gap when gap is invalid', () => {
+			const tag1 = document.createElement('div');
+			tag1.setAttribute('data-measure-tag', '');
+			mockContainer.appendChild(tag1);
+
+			vi.spyOn(tag1, 'getBoundingClientRect').mockReturnValue({
+				width: 80,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 80,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				gap: '',
+			} as CSSStyleDeclaration);
+
+			const result = getElementMeasurements(mockContainer);
+
+			expect(result.gap).toBe(8); // Fallback to 8
+		});
+
+		it('should handle no tags present', () => {
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				gap: '10px',
+			} as CSSStyleDeclaration);
+
+			const result = getElementMeasurements(mockContainer);
+
+			expect(result.tagWidths).toEqual([]);
+			expect(result.gap).toBe(10);
+		});
+
+		it('should use fallback for expand tag when width is 0', () => {
+			const expandTag = document.createElement('div');
+			expandTag.setAttribute('data-measure-expand', '');
+			mockContainer.appendChild(expandTag);
+
+			vi.spyOn(expandTag, 'getBoundingClientRect').mockReturnValue({
+				width: 0,
+				height: 30,
+				top: 0,
+				left: 0,
+				bottom: 30,
+				right: 0,
+				x: 0,
+				y: 0,
+				toJSON: () => ({}),
+			});
+
+			vi.spyOn(window, 'getComputedStyle').mockReturnValue({
+				gap: '8px',
+			} as CSSStyleDeclaration);
+
+			const result = getElementMeasurements(mockContainer);
+
+			expect(result.expandTagWidth).toBe(8); // 0 + 8 (not using fallback since element exists)
+		});
+	});
+});

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

@@ -0,0 +1,65 @@
+export interface FitTagsResult {
+	count: number;
+	usedWidth: number;
+}
+
+export interface ElementMeasurements {
+	tagWidths: number[];
+	labelWidth: number;
+	clearButtonWidth: number;
+	expandTagWidth: number;
+	gap: number;
+}
+
+/**
+ * Calculate how many tags fit within the available width.
+ * Pure function for easy testing.
+ */
+export function fitTagsInRow(tagWidths: number[], availableWidth: number, gap: number): FitTagsResult {
+	let usedWidth = 0;
+	let count = 0;
+
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else {
+			break;
+		}
+	}
+
+	return { count, usedWidth };
+}
+
+/**
+ * Calculate the available width inside a container, accounting for padding.
+ */
+export function getContainerAvailableWidth(container: HTMLDivElement): number {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+
+/**
+ * Measure all relevant elements (tags, label, buttons) inside the measurement container.
+ */
+export function getElementMeasurements(measurementContainer: HTMLDivElement): ElementMeasurements {
+	const tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));
+	const label = measurementContainer.querySelector('[data-measure-label]');
+	const clearButton = measurementContainer.querySelector('[data-measure-clear]');
+	const expandTag = measurementContainer.querySelector('[data-measure-expand]');
+
+	const computedStyle = getComputedStyle(measurementContainer);
+	const gap = parseFloat(computedStyle.gap) || 8;
+
+	const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
+	const labelWidth = label ? label.getBoundingClientRect().width + gap : 0;
+	const clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;
+	// Fallback width for expand tag (~100px for "+99 filters" text) if measurement fails
+	const expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;
+
+	return { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };
+}

package/src/components/ds-toggle/ds-toggle.module.scss

@@ -0,0 +1,154 @@
+.root {
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	width: fit-content;
+
+	--switch-track-width: 36px;
+	--thumb-size: 16px;
+	--thumb-gap: 2px;
+	--transition-duration: 200ms;
+	--switch-track-diff: calc(var(--switch-track-width) - var(--thumb-size));
+	--switch-thumb-x: var(--switch-track-diff);
+	--icon-spacing: 2px;
+
+	&.small {
+		--switch-track-width: 26px;
+		--thumb-size: 12px;
+		--icon-spacing: 1px;
+	}
+
+	[data-part='control'] {
+		position: relative;
+		outline: 2px solid transparent;
+		display: inline-flex;
+		flex-shrink: 0;
+		justify-content: flex-start;
+		box-sizing: content-box;
+		cursor: pointer;
+		border-radius: 9999px;
+		transition-property: background-color, color, fill, stroke, opacity, transform, outline-color, opacity;
+		transition-duration: var(--transition-duration);
+		padding: var(--thumb-gap);
+		width: var(--switch-track-width);
+		height: var(--thumb-size);
+
+		&[data-state='unchecked'] {
+			background: var(--color-background-deselected);
+
+			&[data-hover] {
+				background: var(--color-background-deselected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-action-hover);
+				background: var(--color-background-deselected-hover);
+			}
+
+			.iconCheck {
+				opacity: 0;
+			}
+
+			.iconClose {
+				opacity: 1;
+			}
+		}
+
+		&[data-state='checked'] {
+			background: var(--color-background-selected);
+
+			&[data-hover] {
+				background: var(--color-background-selected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-selected);
+				background: var(--color-background-selected-hover);
+			}
+
+			.iconCheck {
+				opacity: 1;
+			}
+
+			.iconClose {
+				opacity: 0;
+			}
+		}
+
+		&[data-disabled] {
+			cursor: not-allowed;
+			background: var(--color-background-disable);
+
+			&[data-hover] {
+				background: var(--color-background-deselected-hover);
+			}
+
+			&[data-focus-visible] {
+				outline-color: var(--color-background-action-hover);
+				background: var(--color-background-deselected-hover);
+			}
+		}
+	}
+
+	[data-part='thumb'] {
+		border-radius: 9999px;
+		position: relative;
+		transition-property: transform;
+		background: var(--color-background);
+		transition-duration: var(--transition-duration);
+		height: 100%;
+		aspect-ratio: 1/1;
+
+		&:before {
+			content: '';
+			transition: background-color var(--transition-duration) ease-in-out;
+			position: absolute;
+			background-color: transparent;
+			z-index: 10;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		&[data-state='checked'] {
+			transform: translateX(var(--switch-thumb-x));
+		}
+	}
+
+	[data-part='label'] {
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		margin-left: var(--spacing-xs);
+
+		.labelInfo {
+			width: 100%;
+			color: var(--color-font-secondary);
+		}
+
+		&[data-disabled] {
+			color: var(--color-font-disabled);
+			cursor: default;
+
+			.labelInfo {
+				color: var(--color-background-disable);
+			}
+		}
+	}
+
+	.icon {
+		color: var(--color-icon-inverse);
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+
+	.iconCheck {
+		left: var(--icon-spacing);
+	}
+
+	.iconClose {
+		right: var(--icon-spacing);
+	}
+}

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

@@ -0,0 +1,78 @@
+import { Switch, type SwitchCheckedChangeDetails } from '@ark-ui/react/switch';
+import classNames from 'classnames';
+import type { DsToggleProps } from './ds-toggle.types';
+import styles from './ds-toggle.module.scss';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+import type { Ref } from 'react';
+
+/**
+ * Design system Toggle component
+ */
+const DsToggle = ({
+	ref,
+	label,
+	name,
+	labelInfo,
+	className,
+	style = {},
+	onChange,
+	onValueChange,
+	size = 'default',
+	children,
+	checked,
+	...rest
+}: DsToggleProps) => {
+	const isSmall = size === 'small';
+	const iconSize = isSmall ? 'tiny' : 'small';
+	const checkIconClass = classNames(styles.icon, styles.iconCheck);
+	const closeIconClass = classNames(styles.icon, styles.iconClose);
+
+	const rootClass = classNames(
+		styles.root,
+		{
+			[styles.small]: isSmall,
+		},
+		className,
+	);
+
+	const handleCheckedChange = (e: SwitchCheckedChangeDetails) => {
+		onValueChange?.(e.checked);
+	};
+
+	return (
+		<Switch.Root
+			ref={ref as Ref<HTMLLabelElement>}
+			style={style}
+			className={rootClass}
+			label={label}
+			checked={checked}
+			name={name}
+			onCheckedChange={handleCheckedChange}
+			onClick={onChange}
+			{...rest}
+		>
+			<Switch.Control>
+				<DsIcon icon="check" size={iconSize} className={checkIconClass} />
+				<Switch.Thumb />
+				<DsIcon icon="close" size={iconSize} className={closeIconClass} />
+			</Switch.Control>
+
+			{label ? (
+				<Switch.Label>
+					<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
+					{!!labelInfo && (
+						<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+							{labelInfo}
+						</DsTypography>
+					)}
+				</Switch.Label>
+			) : (
+				children
+			)}
+			<Switch.HiddenInput />
+		</Switch.Root>
+	);
+};
+
+export default DsToggle;