@drivenets/design-system 0.6.1 → 0.7.1

package/src/components/ds-progress-donut/ds-progress-donut.module.scss

@@ -0,0 +1,67 @@
+$transition-duration: 0.2s;
+
+.root {
+	display: inline-grid;
+}
+
+.small {
+	--size: 80px;
+	--thickness: 4px;
+}
+
+.medium {
+	--size: 120px;
+	--thickness: 6px;
+}
+
+.circle {
+	grid-area: 1 / 1;
+	display: block;
+}
+
+.track {
+	stroke: var(--color-background-tertiary);
+	transition: stroke $transition-duration;
+}
+
+.range {
+	transition: stroke-dashoffset $transition-duration;
+	stroke-linecap: round;
+}
+
+.default .range {
+	stroke: var(--color-background-selected);
+}
+
+.success .track,
+.success .range {
+	stroke: var(--color-background-success-strong);
+}
+
+.error .range {
+	stroke: var(--color-background-danger-strong);
+}
+
+.center {
+	grid-area: 1 / 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-font-main);
+}
+
+.iconSuccess {
+	color: var(--color-icon-success);
+}
+
+.iconError {
+	color: var(--color-icon-danger);
+}
+
+$icon-medium-size: 44px;
+
+.iconMediumSize.iconMediumSize {
+	font-size: $icon-medium-size;
+	width: 1em;
+	height: 1em;
+}

package/src/components/ds-progress-donut/ds-progress-donut.tsx

@@ -0,0 +1,83 @@
+import type React from 'react';
+import { Progress } from '@ark-ui/react';
+import classNames from 'classnames';
+
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+import styles from './ds-progress-donut.module.scss';
+import type {
+	DsProgressDonutProps,
+	ProgressDonutSize,
+	ProgressDonutVariant,
+} from './ds-progress-donut.types';
+import { clampValue } from './utils';
+
+const sizeStyleMap: Record<ProgressDonutSize, string> = Object.freeze({
+	small: styles.small,
+	medium: styles.medium,
+});
+
+const variantStyleMap: Record<ProgressDonutVariant, string> = Object.freeze({
+	default: styles.default,
+	success: styles.success,
+	error: styles.error,
+});
+
+const DsProgressDonut = ({
+	value = 0,
+	size = 'medium',
+	variant = 'default',
+	children,
+	className,
+	style,
+	ref,
+}: DsProgressDonutProps) => {
+	const effectiveValue = variant === 'success' ? 100 : clampValue(value);
+
+	const renderIcon = (iconName: 'check' | 'close', colorClass: string) => (
+		<DsIcon
+			variant="rounded"
+			icon={iconName}
+			size="large"
+			className={classNames({ [styles.iconMediumSize]: size === 'medium' }, colorClass)}
+		/>
+	);
+
+	const renderCenter = () => {
+		if (children) {
+			return children;
+		}
+
+		if (variant === 'success') {
+			return renderIcon('check', styles.iconSuccess);
+		}
+
+		if (variant === 'error') {
+			return renderIcon('close', styles.iconError);
+		}
+
+		return (
+			<DsTypography variant={size === 'medium' ? 'heading3' : 'body-md-md'} asChild>
+				<span>{effectiveValue}%</span>
+			</DsTypography>
+		);
+	};
+
+	return (
+		<Progress.Root
+			ref={ref as React.Ref<HTMLDivElement>}
+			value={effectiveValue}
+			className={classNames(styles.root, sizeStyleMap[size], variantStyleMap[variant], className)}
+			style={style}
+		>
+			<Progress.Circle className={styles.circle}>
+				<Progress.CircleTrack className={styles.track} />
+				<Progress.CircleRange className={styles.range} />
+			</Progress.Circle>
+
+			<div className={styles.center}>{renderCenter()}</div>
+		</Progress.Root>
+	);
+};
+
+export default DsProgressDonut;

package/src/components/ds-progress-donut/ds-progress-donut.types.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+
+export const progressDonutSizes = ['small', 'medium'] as const;
+export type ProgressDonutSize = (typeof progressDonutSizes)[number];
+
+export const progressDonutVariants = ['default', 'success', 'error'] as const;
+export type ProgressDonutVariant = (typeof progressDonutVariants)[number];
+
+export interface DsProgressDonutProps {
+	/**
+	 * Progress value between 0 and 100
+	 * @default 0
+	 */
+	value?: number;
+
+	/**
+	 * Size of the donut progress indicator
+	 * @default 'medium'
+	 */
+	size?: ProgressDonutSize;
+
+	/**
+	 * Visual variant of the donut progress indicator
+	 * @default 'default'
+	 */
+	variant?: ProgressDonutVariant;
+
+	/**
+	 * Custom content to display in the center of the donut, overriding the default text or icon
+	 */
+	children?: ReactNode;
+
+	className?: string;
+
+	style?: CSSProperties;
+
+	ref?: Ref<HTMLElement>;
+}

package/src/components/ds-progress-donut/index.ts

@@ -0,0 +1,2 @@
+export { default as DsProgressDonut } from './ds-progress-donut';
+export * from './ds-progress-donut.types';

package/src/components/ds-progress-donut/utils.ts

@@ -0,0 +1 @@
+export { clampValue } from '../../utils/numbers';

package/src/components/ds-progress-linear/ds-progress-linear.module.scss

@@ -0,0 +1,100 @@
+@use '../../styles/typography';
+
+$border-radius: 4px;
+
+.root {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	&.sizeSmall {
+		gap: var(--spacing-4xs);
+	}
+
+	&.sizeMedium,
+	&.sizeLarge {
+		gap: var(--spacing-3xs);
+	}
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.label {
+	@include typography.body-sm-md;
+	color: var(--color-font-main);
+}
+
+.valueText {
+	@include typography.body-sm-reg;
+	color: var(--color-font-main);
+	flex-shrink: 0;
+}
+
+.track {
+	width: 100%;
+	background-color: var(--color-background-tertiary);
+	border-radius: $border-radius;
+	overflow: hidden;
+}
+
+.trackSmall {
+	height: 2px;
+}
+
+.trackMedium {
+	height: 4px;
+}
+
+.trackLarge {
+	height: 8px;
+}
+
+.range {
+	height: 100%;
+	border-radius: $border-radius;
+	transition: width 0.2s ease;
+}
+
+.variantProgress {
+	background-color: var(--color-background-selected);
+}
+
+.variantInterrupted {
+	background-color: var(--color-background-warning-strong);
+}
+
+.variantSuccess {
+	background-color: var(--color-background-success-strong);
+}
+
+.variantError {
+	background-color: var(--color-background-danger-strong);
+}
+
+.caption {
+	@include typography.body-xs-reg;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3xs);
+	padding-top: var(--spacing-4xs);
+}
+
+.captionDefault {
+	color: var(--color-font-secondary);
+}
+
+.captionSuccess {
+	color: var(--color-background-success-strong);
+}
+
+.captionError {
+	color: var(--color-background-danger-strong);
+}
+
+.captionInterrupted {
+	color: var(--color-font-warning);
+}

package/src/components/ds-progress-linear/ds-progress-linear.tsx

@@ -0,0 +1,107 @@
+import { Progress } from '@ark-ui/react';
+import classNames from 'classnames';
+
+import { DsIcon, type IconName } from '../ds-icon';
+
+import styles from './ds-progress-linear.module.scss';
+import type { DsProgressLinearProps, ProgressLinearVariant } from './ds-progress-linear.types';
+import { calculatePercentage } from './utils';
+
+const rangeVariantClass: Record<ProgressLinearVariant, string | undefined> = Object.freeze({
+	initial: undefined,
+	progress: styles.variantProgress,
+	interrupted: styles.variantInterrupted,
+	success: styles.variantSuccess,
+	error: styles.variantError,
+});
+
+const captionVariantClass: Record<ProgressLinearVariant, string> = Object.freeze({
+	initial: styles.captionDefault,
+	progress: styles.captionDefault,
+	interrupted: styles.captionInterrupted,
+	success: styles.captionSuccess,
+	error: styles.captionError,
+});
+
+const captionIcon: Partial<Record<ProgressLinearVariant, IconName>> = Object.freeze({
+	success: 'check_circle',
+	error: 'cancel',
+	interrupted: 'warning',
+});
+
+const sizeClass: Record<string, string> = Object.freeze({
+	small: styles.sizeSmall,
+	medium: styles.sizeMedium,
+	large: styles.sizeLarge,
+});
+
+const trackSizeClass: Record<string, string> = Object.freeze({
+	small: styles.trackSmall,
+	medium: styles.trackMedium,
+	large: styles.trackLarge,
+});
+
+/**
+ * Design system ProgressLinear component
+ */
+const DsProgressLinear = ({
+	value = 0,
+	min = 0,
+	max = 100,
+	variant = 'progress',
+	size = 'medium',
+	label,
+	showValue = true,
+	caption,
+	className,
+	style,
+	ref,
+}: DsProgressLinearProps) => {
+	const hasHeader = label !== undefined || showValue;
+	const icon = captionIcon[variant];
+	const percentage = calculatePercentage(value, min, max);
+
+	const renderCaption = (caption?: DsProgressLinearProps['caption']) => {
+		if (caption === undefined) {
+			return null;
+		}
+
+		if (typeof caption !== 'string') {
+			return caption;
+		}
+
+		return (
+			<div className={classNames(styles.caption, captionVariantClass[variant])}>
+				{icon && <DsIcon icon={icon} size="tiny" filled />}
+				<span>{caption}</span>
+			</div>
+		);
+	};
+
+	return (
+		<Progress.Root
+			ref={ref}
+			value={value}
+			min={min}
+			max={max}
+			className={classNames(styles.root, sizeClass[size], className)}
+			style={style}
+		>
+			{hasHeader && (
+				<div className={styles.header}>
+					{label && <Progress.Label className={styles.label}>{label}</Progress.Label>}
+
+					{showValue && <Progress.ValueText className={styles.valueText}>{percentage}%</Progress.ValueText>}
+				</div>
+			)}
+
+			<Progress.Track className={classNames(styles.track, trackSizeClass[size])}>
+				<Progress.Range className={classNames(styles.range, rangeVariantClass[variant])} />
+			</Progress.Track>
+
+			{renderCaption(caption)}
+		</Progress.Root>
+	);
+};
+
+export default DsProgressLinear;

package/src/components/ds-progress-linear/ds-progress-linear.types.ts

@@ -0,0 +1,72 @@
+import type React from 'react';
+
+export const progressLinearVariants = ['initial', 'progress', 'interrupted', 'success', 'error'] as const;
+export type ProgressLinearVariant = (typeof progressLinearVariants)[number];
+
+export const progressLinearSizes = ['small', 'medium', 'large'] as const;
+export type ProgressLinearSize = (typeof progressLinearSizes)[number];
+
+export interface DsProgressLinearProps {
+	/**
+	 * The current progress value (0–100)
+	 * @default 0
+	 */
+	value?: number;
+
+	/**
+	 * The minimum value
+	 * @default 0
+	 */
+	min?: number;
+
+	/**
+	 * The maximum value
+	 * @default 100
+	 */
+	max?: number;
+
+	/**
+	 * The visual variant controlling bar color and caption styling
+	 * @default 'progress'
+	 */
+	variant?: ProgressLinearVariant;
+
+	/**
+	 * The size of the progress bar track
+	 * @default 'medium'
+	 */
+	size?: ProgressLinearSize;
+
+	/**
+	 * Label displayed above the progress bar (left side)
+	 */
+	label?: React.ReactNode;
+
+	/**
+	 * Whether to show the percentage value text (right side of label row)
+	 * @default true
+	 */
+	showValue?: boolean;
+
+	/**
+	 * Caption/helper text below the progress bar.
+	 * When a string is provided, it is auto-styled with an icon and color based on the variant.
+	 * When a ReactNode is provided, it is rendered as-is.
+	 */
+	caption?: React.ReactNode | string;
+
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: React.CSSProperties;
+
+	/**
+	 * Ref to the root element
+	 */
+	ref?: React.Ref<HTMLDivElement>;
+}

package/src/components/ds-progress-linear/index.ts

@@ -0,0 +1,2 @@
+export { default as DsProgressLinear } from './ds-progress-linear';
+export * from './ds-progress-linear.types';

package/src/components/ds-progress-linear/utils.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+
+import { calculatePercentage } from './utils';
+
+describe('calculatePercentage', () => {
+	it('should return 0 when max equals min', () => {
+		expect(calculatePercentage(50, 100, 100)).toBe(0);
+	});
+
+	it('should return 0 when max is less than min', () => {
+		expect(calculatePercentage(50, 100, 50)).toBe(0);
+	});
+
+	it('should calculate 0% for value at minimum', () => {
+		expect(calculatePercentage(0, 0, 100)).toBe(0);
+	});
+
+	it('should calculate 100% for value at maximum', () => {
+		expect(calculatePercentage(100, 0, 100)).toBe(100);
+	});
+
+	it('should calculate 50% for value at midpoint', () => {
+		expect(calculatePercentage(50, 0, 100)).toBe(50);
+	});
+
+	it('should round to nearest integer for fractional percentages', () => {
+		expect(calculatePercentage(33, 0, 100)).toBe(33);
+		expect(calculatePercentage(66, 0, 100)).toBe(66);
+		expect(calculatePercentage(67, 0, 100)).toBe(67);
+	});
+
+	it('should handle non-zero minimum values', () => {
+		expect(calculatePercentage(50, 25, 75)).toBe(50);
+		expect(calculatePercentage(25, 25, 75)).toBe(0);
+		expect(calculatePercentage(75, 25, 75)).toBe(100);
+	});
+
+	it('should handle negative values', () => {
+		expect(calculatePercentage(-50, -100, 0)).toBe(50);
+		expect(calculatePercentage(-100, -100, 0)).toBe(0);
+		expect(calculatePercentage(0, -100, 0)).toBe(100);
+	});
+
+	it('should handle decimal values and round correctly', () => {
+		expect(calculatePercentage(33.3, 0, 100)).toBe(33);
+		expect(calculatePercentage(33.5, 0, 100)).toBe(34);
+		expect(calculatePercentage(33.7, 0, 100)).toBe(34);
+	});
+
+	it('should handle value below minimum (clamping not enforced)', () => {
+		// Component doesn't clamp values, so negative percentages are possible
+		expect(calculatePercentage(-10, 0, 100)).toBe(-10);
+	});
+
+	it('should handle value above maximum (clamping not enforced)', () => {
+		// Component doesn't clamp values, so > 100% is possible
+		expect(calculatePercentage(150, 0, 100)).toBe(150);
+	});
+
+	it('should handle large numbers', () => {
+		expect(calculatePercentage(5000, 0, 10000)).toBe(50);
+		expect(calculatePercentage(1000000, 0, 2000000)).toBe(50);
+	});
+
+	it('should handle small decimal ranges', () => {
+		expect(calculatePercentage(0.5, 0, 1)).toBe(50);
+		expect(calculatePercentage(0.25, 0, 1)).toBe(25);
+		expect(calculatePercentage(0.75, 0, 1)).toBe(75);
+	});
+});

package/src/components/ds-progress-linear/utils.ts

@@ -0,0 +1,7 @@
+export function calculatePercentage(value: number, min: number, max: number): number {
+	if (max <= min) {
+		return 0;
+	}
+
+	return Math.round(((value - min) / (max - min)) * 100);
+}

package/src/components/ds-radio-group/ds-radio-group.tsx

@@ -64,6 +64,7 @@ const Item: React.FC<DsRadioGroupItemProps> = ({
  * Use compound component pattern instead: DsRadioGroup.Root + DsRadioGroup.Item
  * @deprecated
  */
+/* c8 ignore start */
 export const DsRadioGroupLegacy: React.FC<DsRadioGroupLegacyProps> = ({
 	options,
 	value,
@@ -99,6 +100,7 @@ export const DsRadioGroupLegacy: React.FC<DsRadioGroupLegacyProps> = ({
 		))}
 	</RadioGroupPrimitive.Root>
 );
+/* c8 ignore stop */
 
 /**
  * Design system RadioGroup component

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

@@ -30,6 +30,7 @@ const DsSelect = ({
 	className,
 	placeholder = 'Click to select a value',
 	disabled,
+	renderOption,
 	...multiselectProps
 }: DsSelectProps) => {
 	const [searchTerm, setSearchTerm] = useState('');
@@ -191,7 +192,7 @@ const DsSelect = ({
 									<Select.Item item={item}>
 										{multiselectProps.multiple && <DsCheckbox checked={checked} />}
 										{item.icon && <DsIcon className={styles.itemIcon} icon={item.icon} aria-hidden="true" />}
-										<Select.ItemText>{item.label}</Select.ItemText>
+										<Select.ItemText>{renderOption ? renderOption(item) : item.label}</Select.ItemText>
 									</Select.Item>
 								</DsTypography>
 							);

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { ReactNode } from 'react';
 import type { IconName } from '../ds-icon';
 
 export type SelectSize = 'default' | 'small';
@@ -56,6 +57,12 @@ export type DsSelectProps = {
 	 * @default 'default'
 	 */
 	size?: SelectSize;
+	/**
+	 * Custom render function for dropdown options.
+	 * When provided, replaces the default label text inside each dropdown item.
+	 * The string `label` is still used for search, trigger text, chips, and accessibility.
+	 */
+	renderOption?: (option: DsSelectOption) => ReactNode;
 } & (
 	| {
 			clearable?: undefined | false;

package/src/components/ds-stepper/components/ds-step.tsx

@@ -109,7 +109,7 @@ export function DsStep({
 			<div {...context.stepsApi.getIndicatorProps({ index })} className={styles.indicatorContainer}>
 				{renderIndicator()}
 
-				{!isHorizontal && <DsStepSeparator index={index} />}
+				{!isHorizontal && !isSingleVariant && <DsStepSeparator index={index} />}
 			</div>
 
 			{children}

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

@@ -32,6 +32,7 @@ $actions-gap: var(--spacing-3xs);
 $drag-handle-size: 20px;
 
 $horizontal-current-min-width: 256px;
+$horizontal-other-min-width: 50px;
 $horizontal-description-line-clamp: 2;
 
 .dragHandle {
@@ -46,6 +47,10 @@ $horizontal-description-line-clamp: 2;
 .root {
 	background: var(--color-background);
 	overflow-y: auto;
+
+	&.floating {
+		border-radius: inherit;
+	}
 }
 
 .verticalActions {
@@ -213,7 +218,7 @@ $horizontal-description-line-clamp: 2;
 	.stepsContainer {
 		display: flex;
 		flex: 1 1 0;
-		align-items: flex-start;
+		align-items: stretch;
 		min-width: 0;
 		overflow-x: auto;
 	}
@@ -227,14 +232,23 @@ $horizontal-description-line-clamp: 2;
 
 	.step {
 		flex: 1 1 0;
+		align-self: stretch;
+		align-items: center;
 		padding: var(--spacing-3xs) var(--spacing-xs);
 		gap: var(--spacing-sm);
 		border-radius: var(--spacing-2xs);
 		overflow: clip;
+		min-width: $horizontal-other-min-width;
 
 		&[data-current] {
+			flex-grow: 2;
+			max-width: none;
 			min-width: $horizontal-current-min-width;
 			border-radius: var(--spacing-2xs);
+
+			.stepLabel {
+				flex-shrink: 0;
+			}
 		}
 	}
 
@@ -266,7 +280,7 @@ $horizontal-description-line-clamp: 2;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		flex-shrink: 0;
+		flex-shrink: 1;
 	}
 
 	.horizontalSeparator {

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

@@ -33,15 +33,17 @@ export function DsStepper({
 				{...stepsApi.getRootProps()}
 				className={classnames(
 					styles.root,
+					'scrollbar-thin',
 					{
 						[styles.variantSingle]: variant === 'single',
+						[styles.floating]: floating,
 					},
 					className,
 				)}
 			>
 				{isHorizontal ? (
 					<>
-						<div className={styles.stepsContainer}>{children}</div>
+						<div className={classnames(styles.stepsContainer, 'scrollbar-thin')}>{children}</div>
 
 						{actions && <div className={styles.horizontalActions}>{actions}</div>}
 					</>