@drivenets/design-system 0.5.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -97,22 +97,23 @@
     "rollup-plugin-sass": "^1.15.3",
     "sass-embedded": "^1.97.3",
     "storybook": "^10.2.7",
-    "tsdown": "^0.18.4",
+    "tsdown": "^0.20.3",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
     "zod": "^3.25.76",
-    "@drivenets/vite-plugin-design-system": "0.0.5"
+    "@drivenets/vite-plugin-design-system": "0.0.6"
   },
   "scripts": {
     "lint": "pnpm generate-scss-dts; eslint --max-warnings=0 .",
     "typecheck": "pnpm generate-scss-dts; tsc",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest",
+    "test": "vitest --project=\"!requires-build\"",
     "test:coverage": "vitest --coverage",
+    "test:requires-build": "vitest --project=requires-build",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",
     "build:storybook": "storybook build",

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

@@ -1,3 +1,5 @@
+@use '../../styles/mixin' as mixins;
+
 $border-radius: 8px;
 $min-width-small: 224px;
 $min-width-medium: 264px;
@@ -13,18 +15,8 @@ $transition-duration: 0.2s;
 	overflow: hidden;
 	box-sizing: border-box;
 	border-radius: $border-radius;
-}
 
-.root[data-disabled] {
-	&::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		// TODO: remove once we import all the tokens from figma
-		background: rgba(255, 255, 255, 0.6);
-		pointer-events: none;
-		border-radius: inherit;
-	}
+	@include mixins.disabled-overlay;
 }
 
 .root[data-size='small'] {

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

@@ -23,6 +23,11 @@
 		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
 	}
 
+	&.dragging {
+		cursor: grabbing;
+		user-select: none;
+	}
+
 	&.disablePadding {
 		padding: 0;
 	}
@@ -89,6 +94,7 @@
 	}
 
 	.root.variantFloating & {
+		z-index: 1;
 		top: 50%;
 		transform: translateY(-50%);
 	}

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

@@ -1,9 +1,89 @@
+import { useEffect, useRef } from 'react';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import classnames from 'classnames';
 import styles from './ds-panel.module.scss';
 import { DsIcon } from '../ds-icon';
 import type { DsPanelCollapseButtonProps, DsPanelProps } from './ds-panel.types';
 
+function useDraggable(enabled: boolean) {
+	const rootRef = useRef<HTMLDivElement>(null);
+	const positionRef = useRef({ x: 0, y: 0 });
+	const dragRef = useRef<{
+		startX: number;
+		startY: number;
+		originX: number;
+		originY: number;
+	} | null>(null);
+
+	useEffect(() => {
+		const root = rootRef.current;
+
+		if (!root) {
+			return;
+		}
+
+		if (!enabled) {
+			positionRef.current = { x: 0, y: 0 };
+			root.style.transform = '';
+
+			return;
+		}
+
+		const handleMouseDown = (e: MouseEvent) => {
+			const target = e.target as HTMLElement;
+
+			if (!target.closest('[data-drag-handle]')) {
+				return;
+			}
+
+			e.preventDefault();
+
+			dragRef.current = {
+				startX: e.clientX,
+				startY: e.clientY,
+				originX: positionRef.current.x,
+				originY: positionRef.current.y,
+			};
+
+			root.classList.add(styles.dragging);
+		};
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!dragRef.current) {
+				return;
+			}
+
+			positionRef.current = {
+				x: dragRef.current.originX + (e.clientX - dragRef.current.startX),
+				y: dragRef.current.originY + (e.clientY - dragRef.current.startY),
+			};
+
+			root.style.transform = `translate(${String(positionRef.current.x)}px, ${String(positionRef.current.y)}px)`;
+		};
+
+		const handleMouseUp = () => {
+			if (!dragRef.current) {
+				return;
+			}
+
+			dragRef.current = null;
+			root.classList.remove(styles.dragging);
+		};
+
+		root.addEventListener('mousedown', handleMouseDown);
+		document.addEventListener('mousemove', handleMouseMove);
+		document.addEventListener('mouseup', handleMouseUp);
+
+		return () => {
+			root.removeEventListener('mousedown', handleMouseDown);
+			document.removeEventListener('mousemove', handleMouseMove);
+			document.removeEventListener('mouseup', handleMouseUp);
+		};
+	}, [enabled]);
+
+	return rootRef;
+}
+
 export function DsPanel({
 	open,
 	onOpenChange,
@@ -11,11 +91,16 @@ export function DsPanel({
 	className,
 	slotProps,
 	variant = 'docked',
+	draggable = false,
 	disablePadding = false,
 	...props
 }: DsPanelProps) {
+	const isDraggable = variant === 'floating' && draggable;
+	const rootRef = useDraggable(isDraggable);
+
 	return (
 		<Collapsible.Root
+			ref={rootRef}
 			open={open}
 			onOpenChange={onOpenChange}
 			className={classnames(styles.root, className, {

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

@@ -4,6 +4,7 @@ export type DsPanelVariant = 'docked' | 'floating';
 
 export type DsPanelProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
 	variant?: DsPanelVariant;
+	draggable?: boolean;
 	disablePadding?: boolean;
 	slotProps?: {
 		collapseButton?: DsPanelCollapseButtonProps;

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

@@ -2,31 +2,49 @@ import type { ReactNode } from 'react';
 import { useStepper } from '../hooks/use-stepper';
 import { DsStepLabel } from './ds-step-label';
 import { DsStepDescription } from './ds-step-description';
+import { DsStepSeparator } from './ds-step-separator';
 import classnames from 'classnames';
 import styles from '../ds-stepper.module.scss';
 
-type DsStepContentProps = {
+export type DsStepContentProps = {
 	index: number;
-	label: string;
-	description?: string;
+	label: ReactNode;
+	description?: ReactNode;
 	actions?: ReactNode;
 };
 
 export function DsStepContent({ index, label, description, actions }: DsStepContentProps) {
-	const { variant, stepsApi } = useStepper();
+	const { variant, orientation, stepsApi } = useStepper();
 	const { current } = stepsApi.getItemState({ index });
 
+	const isHorizontal = orientation === 'horizontal';
+	const showDescription = variant !== 'single' && description;
+
 	return (
 		<div
 			className={classnames(styles.stepContent, {
 				[styles.stepContentSingle]: variant === 'single',
 			})}
 		>
-			<DsStepLabel>{label}</DsStepLabel>
+			{isHorizontal ? (
+				<>
+					<div className={styles.stepLabelRow}>
+						<DsStepLabel>{label}</DsStepLabel>
+
+						<DsStepSeparator index={index} />
+					</div>
+
+					{showDescription && <DsStepDescription>{description}</DsStepDescription>}
+				</>
+			) : (
+				<>
+					<DsStepLabel>{label}</DsStepLabel>
 
-			{variant !== 'single' && description && <DsStepDescription>{description}</DsStepDescription>}
+					{showDescription && <DsStepDescription>{description}</DsStepDescription>}
 
-			{actions && current && <div className={styles.stepActions}>{actions}</div>}
+					{actions && current && <div className={styles.stepActions}>{actions}</div>}
+				</>
+			)}
 		</div>
 	);
 }

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

@@ -1,12 +1,17 @@
-import type { PropsWithChildren } from 'react';
 import { useStepper } from '../hooks/use-stepper';
 import DsButton from '../../ds-button/ds-button';
+import type { DsButtonProps } from '../../ds-button/versions/ds-button-legacy';
 
-export function DsNextStepButton({ children }: PropsWithChildren) {
+export type DsNextStepButtonProps = Pick<
+	DsButtonProps,
+	'variant' | 'size' | 'className' | 'style' | 'children'
+>;
+
+export function DsNextStepButton({ children, size = 'small', ...rest }: DsNextStepButtonProps) {
 	const context = useStepper();
 
 	return (
-		<DsButton {...context.stepsApi.getNextTriggerProps()} size="small">
+		<DsButton {...context.stepsApi.getNextTriggerProps()} size={size} {...rest}>
 			{children}
 		</DsButton>
 	);

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

@@ -0,0 +1,22 @@
+import { useStepper } from '../hooks/use-stepper';
+import styles from '../ds-stepper.module.scss';
+
+type DsStepSeparatorProps = {
+	index: number;
+};
+
+export function DsStepSeparator({ index }: DsStepSeparatorProps) {
+	const { stepsApi, orientation } = useStepper();
+	const { last } = stepsApi.getItemState({ index });
+
+	if (last) {
+		return null;
+	}
+
+	return (
+		<div
+			{...stepsApi.getSeparatorProps({ index })}
+			className={orientation === 'horizontal' ? styles.horizontalSeparator : styles.separator}
+		/>
+	);
+}

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

@@ -1,20 +1,45 @@
-import type { PropsWithChildren } from 'react';
+import type { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { useStepper } from '../hooks/use-stepper';
 import classnames from 'classnames';
 import styles from '../ds-stepper.module.scss';
 import DsIcon from '../../ds-icon/ds-icon';
+import { DsStepSeparator } from './ds-step-separator';
 
-type DsStepProps = PropsWithChildren<{
+export type DsStepProps = PropsWithChildren<{
 	index: number;
 	className?: string;
+	disabled?: boolean;
+	/**
+	 * Represents the variant type that determines the state or style of a component.
+	 * @default 'default'
+	 */
+	variant?: 'error' | 'default';
+	slots?: {
+		indicator?: ReactNode;
+	};
+	slotProps?: {
+		indicator?: {
+			className?: string;
+			onClick?: (event: MouseEvent<HTMLElement>) => void;
+		};
+	};
 }>;
 
-export function DsStep({ index, children, className }: DsStepProps) {
+export function DsStep({
+	index,
+	children,
+	className,
+	disabled,
+	variant = 'default',
+	slots,
+	slotProps,
+}: DsStepProps) {
 	const context = useStepper();
 
 	const { completed, current, last } = context.stepsApi.getItemState({ index });
 
 	const isSingleVariant = context.variant === 'single';
+	const isHorizontal = context.orientation === 'horizontal';
 	const isLast = last && context.stepsApi.value === index + 1;
 
 	const shouldHide = isSingleVariant && !current && !isLast;
@@ -23,7 +48,7 @@ export function DsStep({ index, children, className }: DsStepProps) {
 		return null;
 	}
 
-	const isClickable = completed && !isSingleVariant;
+	const isClickable = completed && !isSingleVariant && !disabled;
 
 	const Wrapper = isClickable ? 'button' : 'div';
 
@@ -35,22 +60,56 @@ export function DsStep({ index, children, className }: DsStepProps) {
 			}
 		: {};
 
+	const indicatorClassName = classnames(styles.indicator, slotProps?.indicator?.className);
+
+	const renderIndicator = () => {
+		if (slots?.indicator) {
+			return (
+				<span {...slotProps?.indicator} className={indicatorClassName}>
+					{slots.indicator}
+				</span>
+			);
+		}
+
+		if (variant === 'error') {
+			return (
+				<span {...slotProps?.indicator} className={slotProps?.indicator?.className}>
+					<DsIcon icon="close" className={indicatorClassName} />
+				</span>
+			);
+		}
+
+		if (completed) {
+			return (
+				<span {...slotProps?.indicator} className={slotProps?.indicator?.className}>
+					<DsIcon icon="check" className={indicatorClassName} />
+				</span>
+			);
+		}
+
+		return (
+			<span {...slotProps?.indicator} className={indicatorClassName}>
+				{index + 1}
+			</span>
+		);
+	};
+
 	return (
 		<Wrapper
 			{...context.stepsApi.getItemProps({ index })}
 			data-current={current ? '' : undefined}
 			data-complete={completed ? '' : undefined}
+			data-disabled={disabled ? '' : undefined}
+			data-error={variant === 'error' ? '' : undefined}
 			className={classnames(styles.step, className)}
 			{...props}
 		>
+			{context.floating && <DsIcon icon="drag_indicator" className={styles.dragHandle} data-drag-handle="" />}
+
 			<div {...context.stepsApi.getIndicatorProps({ index })} className={styles.indicatorContainer}>
-				{completed ? (
-					<DsIcon icon="check" className={styles.indicator} />
-				) : (
-					<span className={styles.indicator}>{index + 1}</span>
-				)}
+				{renderIndicator()}
 
-				<div {...context.stepsApi.getSeparatorProps({ index })} className={styles.separator} />
+				{!isHorizontal && <DsStepSeparator index={index} />}
 			</div>
 
 			{children}