@drivenets/design-system 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",

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}

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

@@ -1,17 +1,76 @@
+@use '../../styles/mixin' as mixins;
+
+$step-padding: var(--spacing-sm);
+$step-gap: var(--spacing-standard);
+$step-border-radius: var(--spacing-3xs);
+
+$step-single-padding-block: var(--spacing-standard);
+$step-single-padding-inline-start: var(--spacing-sm);
+$step-single-padding-inline-end: var(--spacing-md);
+$step-single-border-radius: var(--spacing-xs);
+
+$indicator-size: 36px;
+$indicator-size-single: var(--icon-width-extra-large);
+$indicator-border-width: var(--spacing-4xs);
+$indicator-border-width-current: 3px;
+$indicator-container-padding: 0 var(--spacing-4xs);
+
+$separator-width: var(--spacing-4xs);
+$separator-offset: var(--spacing-sm);
+
+$label-padding: var(--spacing-4xs) 0;
+$label-font-size: var(--font-size-md);
+$label-font-size-single: var(--font-size-sm);
+$label-line-height: 1.5;
+$label-font-weight: var(--font-weight-medium);
+$description-font-size: var(--font-size-sm);
+$description-line-height: 1.4;
+
+$actions-margin-top: var(--spacing-sm);
+$actions-gap: var(--spacing-3xs);
+
+$drag-handle-size: 20px;
+
+$horizontal-current-min-width: 256px;
+$horizontal-description-line-clamp: 2;
+
+.dragHandle {
+	display: grid;
+	place-items: center;
+	flex-shrink: 0;
+	width: $drag-handle-size;
+	height: $drag-handle-size;
+	color: var(--color-font-secondary);
+	cursor: grab;
+}
+.root {
+	background: var(--color-background);
+	overflow-y: auto;
+}
+
+.verticalActions {
+	display: flex;
+	gap: $actions-gap;
+	padding: $step-padding;
+}
+
 .step {
-	padding: 12px;
+	position: relative;
+	padding: $step-padding;
 	display: flex;
-	gap: 16px;
+	gap: $step-gap;
 	background: none;
 	border: none;
 	text-align: start;
 	font-family: inherit;
 
+	@include mixins.disabled-overlay;
+
 	.root.variantSingle & {
-		padding-block: 16px;
-		padding-inline-start: 12px;
-		padding-inline-end: 20px;
-		border-radius: 8px;
+		padding-block: $step-single-padding-block;
+		padding-inline-start: $step-single-padding-inline-start;
+		padding-inline-end: $step-single-padding-inline-end;
+		border-radius: $step-single-border-radius;
 	}
 
 	.root:not(.variantSingle) &[data-complete] {
@@ -19,26 +78,26 @@
 	}
 
 	&[data-current] {
-		border-radius: 4px;
+		border-radius: $step-border-radius;
 		background: var(--color-background-action-secondary-hover);
 	}
 
 	.indicatorContainer {
-		padding: 0 2px;
+		padding: $indicator-container-padding;
 		position: relative;
 		display: flex;
 
 		.indicator {
-			height: 36px;
-			width: 36px;
-			border: 2px solid var(--color-border);
+			height: $indicator-size;
+			width: $indicator-size;
+			border: $indicator-border-width solid var(--color-border);
 			display: grid;
 			place-items: center;
 			border-radius: 100%;
 
 			.variantSingle & {
-				height: 32px;
-				width: 32px;
+				height: $indicator-size-single;
+				width: $indicator-size-single;
 			}
 		}
 
@@ -50,26 +109,27 @@
 		&[data-current] .indicator {
 			background: var(--color-background-selected);
 			color: var(--white);
-			border: 3px solid var(--white);
+			border: $indicator-border-width-current solid var(--white);
 		}
 
 		.separator {
 			position: absolute;
-			width: 2px;
-			height: calc(100% - 12px);
-			top: 36px;
+			width: $separator-width;
+			height: calc(100% - $separator-offset);
+			top: $indicator-size;
 			left: 50%;
-			margin-left: -1px;
+			margin-left: calc($separator-width / -2);
 			background: var(--color-border);
+			z-index: 10;
 
 			&[data-complete] {
 				background: var(--color-background-selected);
 			}
-		}
-	}
 
-	&:last-child .indicatorContainer .separator {
-		display: none;
+			&[data-current] {
+				background: var(--color-background-selected);
+			}
+		}
 	}
 
 	.stepContent {
@@ -84,21 +144,21 @@
 	}
 
 	.stepLabel {
-		padding: 2px 0;
-		font-size: 16px;
-		line-height: 1.5;
-		font-weight: 500;
+		padding: $label-padding;
+		font-size: $label-font-size;
+		line-height: $label-line-height;
+		font-weight: $label-font-weight;
 		color: var(--color-font-secondary);
 
 		.root.variantSingle & {
-			font-size: 14px;
+			font-size: $label-font-size-single;
 		}
 	}
 
 	.stepDescription {
 		margin: 0;
-		font-size: 14px;
-		line-height: 1.4;
+		font-size: $description-font-size;
+		line-height: $description-line-height;
 		color: var(--color-background-deselected);
 	}
 
@@ -123,12 +183,114 @@
 	}
 
 	.stepContent:not(.stepContentSingle) .stepActions {
-		margin-top: 12px;
+		margin-top: $actions-margin-top;
 	}
 
 	.stepActions {
 		margin-inline-start: auto;
 		display: flex;
-		gap: 4px;
+		gap: $actions-gap;
+	}
+}
+
+.step[data-error] {
+	.indicatorContainer .indicator {
+		background: var(--color-background-danger-weak);
+		color: var(--color-background-danger-strong);
+		border-color: var(--color-background-danger-strong);
+	}
+
+	.stepLabel {
+		color: var(--color-font-danger);
+	}
+}
+
+.root[data-orientation='horizontal'] {
+	display: flex;
+	align-items: center;
+	padding: var(--spacing-xs) var(--spacing-standard);
+
+	.stepsContainer {
+		display: flex;
+		flex: 1 1 0;
+		align-items: flex-start;
+		min-width: 0;
+		overflow-x: auto;
+	}
+
+	.horizontalActions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		padding-inline-start: var(--spacing-xs);
+	}
+
+	.step {
+		flex: 1 1 0;
+		padding: var(--spacing-3xs) var(--spacing-xs);
+		gap: var(--spacing-sm);
+		border-radius: var(--spacing-2xs);
+		overflow: clip;
+
+		&[data-current] {
+			min-width: $horizontal-current-min-width;
+			border-radius: var(--spacing-2xs);
+		}
+	}
+
+	.indicatorContainer {
+		padding: 0;
+
+		.indicator {
+			height: $indicator-size;
+			width: $indicator-size;
+		}
+	}
+
+	.stepContent {
+		min-width: 0;
+	}
+
+	.stepLabelRow {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		height: $indicator-size;
+		min-width: 0;
+	}
+
+	.stepLabel {
+		padding: 0;
+		font-size: var(--font-size-sm);
+		line-height: var(--line-height-sm);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 0;
+	}
+
+	.horizontalSeparator {
+		flex: 1 1 0;
+		height: var(--spacing-4xs);
+		min-width: 0;
+		background: var(--color-border-contrast);
+
+		&[data-complete] {
+			background: var(--color-background-selected);
+		}
+
+		&[data-current] {
+			background: var(--color-outline-moderate);
+		}
+	}
+
+	.stepDescription {
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-xs);
+		max-height: var(--spacing-8);
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: $horizontal-description-line-clamp;
+		-webkit-box-orient: vertical;
 	}
 }