@drivenets/design-system 0.4.0 → 0.6.0

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;
 	}
 }

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

@@ -7,27 +7,51 @@ import type { DsStepperProps } from './ds-stepper.types';
 export function DsStepper({
 	count,
 	variant,
+	orientation = 'vertical',
+	floating = false,
 	activeStep,
 	onStepChange,
 	onComplete,
 	children,
+	className,
+	actions,
 }: DsStepperProps) {
-	const stepsApi = useSteps({ count, activeStep, onStepChange, onComplete });
+	const stepsApi = useSteps({ count, activeStep, onStepChange, onComplete, orientation });
+
+	const isHorizontal = orientation === 'horizontal';
 
 	return (
 		<StepperContext.Provider
 			value={{
 				stepsApi,
 				variant,
+				orientation,
+				floating,
 			}}
 		>
 			<div
 				{...stepsApi.getRootProps()}
-				className={classnames(styles.root, {
-					[styles.variantSingle]: variant === 'single',
-				})}
+				className={classnames(
+					styles.root,
+					{
+						[styles.variantSingle]: variant === 'single',
+					},
+					className,
+				)}
 			>
-				{children}
+				{isHorizontal ? (
+					<>
+						<div className={styles.stepsContainer}>{children}</div>
+
+						{actions && <div className={styles.horizontalActions}>{actions}</div>}
+					</>
+				) : (
+					<>
+						{children}
+
+						{actions && <div className={styles.verticalActions}>{actions}</div>}
+					</>
+				)}
 			</div>
 		</StepperContext.Provider>
 	);

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

@@ -1,12 +1,22 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import type * as steps from '@zag-js/steps';
 
 export type DsStepperVariant = 'single';
 
+export type DsStepperOrientation = 'horizontal' | 'vertical';
+
 export type DsStepperProps = PropsWithChildren<
 	{
 		variant?: DsStepperVariant;
+		orientation?: DsStepperOrientation;
+		floating?: boolean;
 		onComplete?: steps.Props['onStepComplete'];
 		activeStep?: steps.Props['step'];
+		className?: string;
+		/**
+		 * Optional actions rendered at the end of the stepper.
+		 * Horizontal: displayed after the steps. Vertical: displayed at the bottom.
+		 */
+		actions?: ReactNode;
 	} & Pick<steps.Props, 'onStepChange' | 'count'>
 >;

package/src/components/ds-stepper/hooks/use-stepper.ts

@@ -1,10 +1,12 @@
 import { createContext, useContext } from 'react';
-import type { DsStepperVariant } from '../ds-stepper.types';
+import type { DsStepperOrientation, DsStepperVariant } from '../ds-stepper.types';
 import type { useSteps } from './use-steps';
 
 type StepsContext = {
 	stepsApi: ReturnType<typeof useSteps>;
 	variant: DsStepperVariant | undefined;
+	orientation: DsStepperOrientation;
+	floating: boolean;
 };
 
 export const StepperContext = createContext<StepsContext | null>(null);

package/src/components/ds-stepper/hooks/use-steps.ts

@@ -3,15 +3,16 @@ import * as steps from '@zag-js/steps';
 import { normalizeProps, useMachine } from '@zag-js/react';
 import type { DsStepperProps } from '../ds-stepper.types';
 
-type UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete'>;
+type UseSteps = Pick<DsStepperProps, 'activeStep' | 'onStepChange' | 'count' | 'onComplete' | 'orientation'>;
 
-export function useSteps({ count, activeStep, onStepChange, onComplete }: UseSteps) {
+export function useSteps({ count, activeStep, onStepChange, onComplete, orientation }: UseSteps) {
 	const service = useMachine(steps.machine, {
 		id: useId(),
 		count,
 		step: activeStep,
 		onStepChange,
 		onStepComplete: onComplete,
+		orientation,
 	});
 
 	return steps.connect(service, normalizeProps);

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

@@ -1,6 +1,6 @@
 export { DsStepper } from './ds-stepper';
-export { DsStep } from './components/ds-step';
-export { DsStepContent } from './components/ds-step-content';
-export { DsNextStepButton } from './components/ds-step-next-button';
+export { DsStep, type DsStepProps } from './components/ds-step';
+export { DsStepContent, type DsStepContentProps } from './components/ds-step-content';
+export { DsNextStepButton, type DsNextStepButtonProps } from './components/ds-step-next-button';
 
-export type { DsStepperProps, DsStepperVariant } from './ds-stepper.types';
+export type { DsStepperProps, DsStepperVariant, DsStepperOrientation } from './ds-stepper.types';

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -76,6 +76,7 @@ export const DsTableCell = <TData, TValue>({
 											key={i}
 											value={label}
 											disabled={isDisabled}
+											className={action.className}
 											onClick={(e) => e.stopPropagation()}
 											onSelect={() => action.onClick(row.original)}
 										>

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -39,6 +39,11 @@ export type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
 	 * Optional icon to be displayed for the action
 	 */
 	icon?: IconType;
+
+	/**
+	 * Optional className to apply custom styling to the action item
+	 */
+	className?: string;
 };
 
 /**

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-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';

package/src/styles/_mixin.scss

@@ -1 +1,2 @@
+@import './mixins/disabled';
 @import './mixins/list';

package/src/styles/mixins/_disabled.scss

@@ -0,0 +1,18 @@
+// Disabled state overlay mixin
+// Creates a semi-transparent overlay on disabled elements
+
+@mixin disabled-overlay {
+	&[data-disabled] {
+		position: relative;
+		cursor: not-allowed;
+
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background: rgba(255, 255, 255, 0.6);
+			pointer-events: none;
+			border-radius: inherit;
+		}
+	}
+}

package/src/components/ds-table/utils/story-data-generator.ts

@@ -1,91 +0,0 @@
-import type { SortingState } from '@tanstack/react-table';
-import type { Status } from '../ds-table.stories';
-
-export type Person = {
-	id: string;
-	firstName: string;
-	lastName: string;
-	age: number;
-	visits: number;
-	status: Status;
-	progress: number;
-};
-
-export interface GeneratedDataResult {
-	data: Person[];
-	meta: {
-		totalRowCount: number;
-	};
-}
-
-/**
- * Generates mock data for table stories with pagination support
- */
-export const generatePersonData = (
-	start: number,
-	size: number,
-	sorting: SortingState,
-	totalRows: number = 10_000,
-): GeneratedDataResult => {
-	const firstNames = ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry', 'Ivy', 'Jack'];
-	const lastNames = [
-		'Smith',
-		'Johnson',
-		'Williams',
-		'Brown',
-		'Jones',
-		'Garcia',
-		'Miller',
-		'Davis',
-		'Rodriguez',
-		'Martinez',
-	];
-	const statuses: Status[] = ['single', 'relationship', 'complicated'];
-
-	// Generate all data first for sorting
-	const allData = Array.from({ length: totalRows }).map((_, index) => {
-		const i = index + 1;
-		return {
-			id: i.toString(),
-			firstName: firstNames[i % firstNames.length] as string,
-			lastName: lastNames[i % lastNames.length] as string,
-			age: 20 + (i % 50),
-			visits: Math.floor(Math.random() * 500) + 1,
-			status: statuses[i % statuses.length] as Status,
-			progress: Math.floor(Math.random() * 100) + 1,
-		} satisfies Person;
-	});
-
-	// Apply sorting if provided
-	const sortedData = [...allData];
-	const sort = sorting[0];
-	if (sort) {
-		const { id, desc } = sort;
-		sortedData.sort((a, b) => {
-			const aValue = a[id as keyof Person];
-			const bValue = b[id as keyof Person];
-			if (desc) {
-				return aValue < bValue ? 1 : -1;
-			}
-			return aValue > bValue ? 1 : -1;
-		});
-	}
-
-	// Return paginated slice
-	return {
-		data: sortedData.slice(start, start + size),
-		meta: {
-			totalRowCount: sortedData.length,
-		},
-	};
-};
-
-/**
- * Simulates an API call with network delay
- */
-export const simulateApiCall = async <T>(dataGenerator: () => T, delayMs: number = 200): Promise<T> => {
-	await delay(delayMs);
-	return dataGenerator();
-};
-
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));