@drivenets/design-system 0.7.3 → 0.9.0

package/src/components/ds-time-picker/ds-time-picker.utils.unit.test.ts

@@ -0,0 +1,316 @@
+import { describe, expect, it, vi } from 'vitest';
+import { clampTime, formatTime, parseTime, timeScrollerAdapter } from './ds-time-picker.utils';
+
+const createTime = (h: number, m: number) => {
+	const d = new Date(2025, 0, 1);
+	d.setHours(h, m, 0, 0);
+	return d;
+};
+
+function assertDate(value: unknown): asserts value is Date {
+	expect(value).toBeInstanceOf(Date);
+}
+
+describe('Time Picker Utils', () => {
+	describe('clampTime', () => {
+		it('should return the original date when within bounds', () => {
+			const date = createTime(10, 30);
+			const result = clampTime(date, createTime(8, 0), createTime(18, 0));
+
+			expect(result).toBe(date);
+		});
+
+		it('should clamp to min when time is before min', () => {
+			const date = createTime(6, 0);
+			const min = createTime(8, 0);
+			const result = clampTime(date, min);
+
+			expect(result.getHours()).toBe(8);
+			expect(result.getMinutes()).toBe(0);
+		});
+
+		it('should clamp to max when time is after max', () => {
+			const date = createTime(20, 0);
+			const max = createTime(18, 30);
+			const result = clampTime(date, undefined, max);
+
+			expect(result.getHours()).toBe(18);
+			expect(result.getMinutes()).toBe(30);
+		});
+
+		it('should not clamp when min and max are undefined', () => {
+			const date = createTime(12, 0);
+			const result = clampTime(date);
+
+			expect(result).toBe(date);
+		});
+
+		it('should preserve the date portion when clamping', () => {
+			const date = new Date(2025, 5, 15, 6, 0, 0, 0);
+			const min = createTime(8, 0);
+			const result = clampTime(date, min);
+
+			expect(result.getFullYear()).toBe(2025);
+			expect(result.getMonth()).toBe(5);
+			expect(result.getDate()).toBe(15);
+		});
+	});
+
+	describe('formatTime', () => {
+		it('should return empty string for undefined', () => {
+			expect(formatTime(undefined)).toBe('');
+		});
+
+		it('should return empty string for null', () => {
+			expect(formatTime(null)).toBe('');
+		});
+
+		it('should format midnight as 12:00 AM', () => {
+			expect(formatTime(createTime(0, 0))).toBe('12:00 AM');
+		});
+
+		it('should format noon as 12:00 PM', () => {
+			expect(formatTime(createTime(12, 0))).toBe('12:00 PM');
+		});
+
+		it('should format afternoon time', () => {
+			expect(formatTime(createTime(14, 30))).toBe('02:30 PM');
+		});
+
+		it('should format morning time', () => {
+			expect(formatTime(createTime(9, 5))).toBe('09:05 AM');
+		});
+
+		it('should pad single-digit hours', () => {
+			expect(formatTime(createTime(1, 0))).toBe('01:00 AM');
+		});
+
+		it('should pad single-digit minutes', () => {
+			expect(formatTime(createTime(10, 3))).toBe('10:03 AM');
+		});
+
+		it('should format 11:59 PM', () => {
+			expect(formatTime(createTime(23, 59))).toBe('11:59 PM');
+		});
+	});
+
+	describe('parseTime', () => {
+		it('should parse valid AM time', () => {
+			expect(parseTime('09:30 AM')).toEqual({ hours: 9, minutes: 30 });
+		});
+
+		it('should parse valid PM time', () => {
+			expect(parseTime('02:45 PM')).toEqual({ hours: 14, minutes: 45 });
+		});
+
+		it('should convert 12 AM to hour 0', () => {
+			expect(parseTime('12:00 AM')).toEqual({ hours: 0, minutes: 0 });
+		});
+
+		it('should keep 12 PM as hour 12', () => {
+			expect(parseTime('12:00 PM')).toEqual({ hours: 12, minutes: 0 });
+		});
+
+		it('should handle case-insensitive period', () => {
+			expect(parseTime('09:30 am')).toEqual({ hours: 9, minutes: 30 });
+			expect(parseTime('09:30 Am')).toEqual({ hours: 9, minutes: 30 });
+		});
+
+		it('should parse single-digit hour', () => {
+			expect(parseTime('1:00 AM')).toEqual({ hours: 1, minutes: 0 });
+		});
+
+		it('should return null for empty string', () => {
+			expect(parseTime('')).toBeNull();
+		});
+
+		it('should return null for garbage input', () => {
+			expect(parseTime('not a time')).toBeNull();
+		});
+
+		it('should return null for missing period', () => {
+			expect(parseTime('09:30')).toBeNull();
+		});
+
+		it('should return null for hour 0', () => {
+			expect(parseTime('00:30 AM')).toBeNull();
+		});
+
+		it('should return null for hour 13', () => {
+			expect(parseTime('13:00 PM')).toBeNull();
+		});
+
+		it('should return null for minute 60', () => {
+			expect(parseTime('09:60 AM')).toBeNull();
+		});
+	});
+
+	describe('timeScrollerAdapter', () => {
+		it('should extract hour, minute, period from a PM date', () => {
+			const adapter = timeScrollerAdapter(createTime(14, 30));
+
+			expect(adapter.slotProps.hour.value).toBe(2);
+			expect(adapter.slotProps.minute.value).toBe(30);
+			expect(adapter.slotProps.period.value).toBe('PM');
+		});
+
+		it('should extract hour, minute, period from an AM date', () => {
+			const adapter = timeScrollerAdapter(createTime(9, 15));
+
+			expect(adapter.slotProps.hour.value).toBe(9);
+			expect(adapter.slotProps.minute.value).toBe(15);
+			expect(adapter.slotProps.period.value).toBe('AM');
+		});
+
+		it('should return 12 for midnight', () => {
+			const adapter = timeScrollerAdapter(createTime(0, 0));
+
+			expect(adapter.slotProps.hour.value).toBe(12);
+			expect(adapter.slotProps.period.value).toBe('AM');
+		});
+
+		it('should return 12 for noon', () => {
+			const adapter = timeScrollerAdapter(createTime(12, 0));
+
+			expect(adapter.slotProps.hour.value).toBe(12);
+			expect(adapter.slotProps.period.value).toBe('PM');
+		});
+
+		it('should return undefined fields when no date', () => {
+			const adapter = timeScrollerAdapter(null);
+
+			expect(adapter.slotProps.hour.value).toBeUndefined();
+			expect(adapter.slotProps.minute.value).toBeUndefined();
+			expect(adapter.slotProps.period.value).toBeUndefined();
+		});
+
+		describe('onHourChange', () => {
+			it('should call setDate with the correct 24h hour', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const adapter = timeScrollerAdapter(createTime(14, 30), setDate);
+
+				adapter.slotProps.hour.onChange(5);
+
+				expect(setDate).toHaveBeenCalledOnce();
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(17);
+				expect(result.getMinutes()).toBe(30);
+			});
+
+			it('should default to AM when no date is provided', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const adapter = timeScrollerAdapter(undefined, setDate);
+
+				adapter.slotProps.hour.onChange(9);
+
+				expect(setDate).toHaveBeenCalledOnce();
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(9);
+				expect(result.getMinutes()).toBe(0);
+			});
+		});
+
+		describe('onMinuteChange', () => {
+			it('should call setDate with the new minute', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const adapter = timeScrollerAdapter(createTime(14, 30), setDate);
+
+				adapter.slotProps.minute.onChange(45);
+
+				expect(setDate).toHaveBeenCalledOnce();
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(14);
+				expect(result.getMinutes()).toBe(45);
+			});
+		});
+
+		describe('onPeriodChange', () => {
+			it('should toggle from PM to AM', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const adapter = timeScrollerAdapter(createTime(14, 30), setDate);
+
+				adapter.slotProps.period.onChange('AM');
+
+				expect(setDate).toHaveBeenCalledOnce();
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(2);
+				expect(result.getMinutes()).toBe(30);
+			});
+
+			it('should toggle from AM to PM', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const adapter = timeScrollerAdapter(createTime(9, 15), setDate);
+
+				adapter.slotProps.period.onChange('PM');
+
+				expect(setDate).toHaveBeenCalledOnce();
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(21);
+				expect(result.getMinutes()).toBe(15);
+			});
+		});
+
+		describe('validation callbacks', () => {
+			it('should not include validation callbacks when no min/max', () => {
+				const adapter = timeScrollerAdapter(createTime(10, 0));
+
+				expect(adapter.slotProps.hour.isDisabled).toBeUndefined();
+				expect(adapter.slotProps.minute.isDisabled).toBeUndefined();
+				expect(adapter.slotProps.period.isDisabled).toBeUndefined();
+			});
+
+			it('should disable AM when min is in PM range', () => {
+				const min = createTime(13, 0);
+				const adapter = timeScrollerAdapter(createTime(14, 0), undefined, min);
+
+				expect(adapter.slotProps.period.isDisabled?.('AM')).toBe(true);
+				expect(adapter.slotProps.period.isDisabled?.('PM')).toBe(false);
+			});
+
+			it('should disable PM when max is in AM range', () => {
+				const max = createTime(11, 0);
+				const adapter = timeScrollerAdapter(createTime(9, 0), undefined, undefined, max);
+
+				expect(adapter.slotProps.period.isDisabled?.('PM')).toBe(true);
+				expect(adapter.slotProps.period.isDisabled?.('AM')).toBe(false);
+			});
+
+			it('should disable hours outside min/max range', () => {
+				const min = createTime(9, 0);
+				const max = createTime(17, 0);
+				const adapter = timeScrollerAdapter(createTime(10, 0), undefined, min, max);
+
+				expect(adapter.slotProps.hour.isDisabled?.(8)).toBe(true);
+				expect(adapter.slotProps.hour.isDisabled?.(10)).toBe(false);
+			});
+
+			it('should disable minutes outside min/max range', () => {
+				const min = createTime(9, 30);
+				const adapter = timeScrollerAdapter(createTime(9, 45), undefined, min);
+
+				expect(adapter.slotProps.minute.isDisabled?.(15)).toBe(true);
+				expect(adapter.slotProps.minute.isDisabled?.(30)).toBe(false);
+				expect(adapter.slotProps.minute.isDisabled?.(45)).toBe(false);
+			});
+
+			it('should clamp setDate result to min/max', () => {
+				const setDate = vi.fn<(date: Date | null) => void>();
+				const min = createTime(9, 0);
+				const max = createTime(17, 0);
+				const adapter = timeScrollerAdapter(createTime(10, 0), setDate, min, max);
+
+				adapter.slotProps.hour.onChange(7);
+
+				const result = setDate.mock.calls[0]?.[0];
+				assertDate(result);
+				expect(result.getHours()).toBe(9);
+				expect(result.getMinutes()).toBe(0);
+			});
+		});
+	});
+});

package/src/components/ds-time-picker/index.ts

@@ -0,0 +1,3 @@
+export { default as DsTimePicker } from './ds-time-picker';
+export type { DsTimePickerProps, DsTimePickerLocale, DsTimePickerSlotProps } from './ds-time-picker.types';
+export { formatTime } from './ds-time-picker.utils';

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

@@ -1,17 +1,11 @@
-@use '../../styles/typography';
-
 .tooltip {
 	color: var(--color-font-on-action);
 	background-color: var(--color-background-brand);
 	padding: var(--spacing-xs) var(--spacing-sm);
 	border-radius: var(--exo-spacing-2x-small);
-	// approx. 6 grid columns
 	max-width: 384px;
+	overflow-wrap: break-word;
 	z-index: 9999;
-
-	.content {
-		@include typography.line-clamp(3);
-	}
 }
 
 .arrow {

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

@@ -5,7 +5,7 @@ import styles from './ds-tooltip.module.scss';
 import type { DsTooltipProps } from './ds-tooltip.types';
 import { DsTypography } from '../ds-typography';
 
-const DsTooltip: FC<DsTooltipProps> = ({ content, children }) => {
+const DsTooltip: FC<DsTooltipProps> = ({ content, children, slotProps }) => {
 	if (content === undefined) {
 		return children;
 	}
@@ -14,14 +14,14 @@ const DsTooltip: FC<DsTooltipProps> = ({ content, children }) => {
 			<Tooltip.Root>
 				<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
 				<Tooltip.Portal>
-					<Tooltip.Content className={classNames(styles.tooltip)} side="top" align="center" sideOffset={4}>
-						{isValidElement(content) ? (
-							content
-						) : (
-							<DsTypography variant="body-xs-reg" className={styles.content}>
-								{content}
-							</DsTypography>
-						)}
+					<Tooltip.Content
+						className={classNames(styles.tooltip, slotProps?.content?.className)}
+						style={slotProps?.content?.style}
+						side="top"
+						align="center"
+						sideOffset={4}
+					>
+						{isValidElement(content) ? content : <DsTypography variant="body-xs-reg">{content}</DsTypography>}
 						<Tooltip.Arrow className={styles.arrow} />
 					</Tooltip.Content>
 				</Tooltip.Portal>

package/src/components/ds-tooltip/ds-tooltip.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 export interface DsTooltipProps {
 	/**
@@ -9,4 +9,10 @@ export interface DsTooltipProps {
 	 * The content to be rendered inside the tooltip
 	 */
 	children: ReactNode;
+	slotProps?: {
+		content?: {
+			className?: string;
+			style?: CSSProperties;
+		};
+	};
 }

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
 export * from './components/ds-breadcrumb';
 export * from './components/ds-button';
+export * from './components/ds-button-v3';
 export * from './components/ds-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
@@ -14,6 +15,8 @@ export * from './components/ds-comment-indicator';
 export * from './components/ds-comments-drawer';
 export * from './components/ds-confirmation';
 export * from './components/ds-date-input';
+export * from './components/ds-date-picker';
+export * from './components/ds-date-range-picker';
 export * from './components/ds-dialog';
 export * from './components/ds-divider';
 export * from './components/ds-drawer';
@@ -24,6 +27,7 @@ export * from './components/ds-filter-status-icon';
 export * from './components/ds-form-control';
 export * from './components/ds-grid';
 export * from './components/ds-icon';
+export * from './components/ds-key-value-pair';
 export * from './components/ds-loader';
 export * from './components/ds-modal';
 export * from './components/ds-number-input';
@@ -39,6 +43,8 @@ export * from './components/ds-select';
 export * from './components/ds-skeleton';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
+export * from './components/ds-split-button';
+export * from './components/ds-stack';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';
@@ -48,9 +54,11 @@ export * from './components/ds-tag';
 export * from './components/ds-tag-filter';
 export * from './components/ds-text-input';
 export * from './components/ds-textarea';
+export * from './components/ds-time-picker';
 export * from './components/ds-toast';
 export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';
+export * from './utils/responsive';

package/src/styles/_breakpoints.module.scss

@@ -0,0 +1,5 @@
+@use 'variables' as var;
+
+:export {
+	breakpointLg: #{var.$breakpoint-lg};
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,13 @@
+@use 'variables' as var;
+
+@mixin lg {
+	@media (min-width: #{var.$breakpoint-lg}) {
+		@content;
+	}
+}
+
+@mixin md {
+	@media (max-width: #{var.$breakpoint-lg - 1}) {
+		@content;
+	}
+}