@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -1,9 +1,6 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
-export interface DsGridProps {
-	/**
-	 * The content to be rendered inside the grid
-	 */
+export interface DsGridBaseProps {
 	children: ReactNode;
 
 	/**
@@ -17,15 +14,24 @@ export interface DsGridProps {
 	columns?: 2 | 4 | 6 | 8 | 10 | 12;
 
 	/**
-	 * Custom class names to apply to the grid
+	 * Gap between grid cells.
+	 * A number is treated as px. A string is used as-is (e.g. `"1rem"`, `"var(--grid-gutter)"`).
+	 * CSS default (when omitted): `16px` — set by `$gutter` in `_grid-variables.scss`.
 	 */
-	className?: string;
-}
+	gutter?: number | string;
 
-export interface DsGridItemProps {
 	/**
-	 * The content to be rendered inside the grid item
+	 * Padding around the grid container.
+	 * A number is treated as px (uniform). A string is used as-is (e.g. `"16px 20px"`, `"var(--grid-margin)"`).
+	 * CSS default (when omitted): `16px 20px` — set by `$margin-y $margin-x` in `_grid-variables.scss`.
 	 */
+	margin?: number | string;
+
+	className?: string;
+	style?: CSSProperties;
+}
+
+export interface DsGridItemBaseProps {
 	children: ReactNode;
 
 	/**
@@ -48,8 +54,5 @@ export interface DsGridItemProps {
 	 */
 	rowStart?: number;
 
-	/**
-	 * Custom class names to apply to the grid item
-	 */
 	className?: string;
 }

package/src/components/ds-grid/index.ts

@@ -1,2 +1,10 @@
-export * from './ds-grid';
-export * from './ds-grid.types';
+import type { ComponentProps } from 'react';
+
+import { withResponsiveProps } from '../../utils/responsive';
+import { DsGridBase, DsGridItemBase } from './ds-grid';
+
+export const DsGrid = withResponsiveProps(DsGridBase, ['gutter', 'margin']);
+export const DsGridItem = withResponsiveProps(DsGridItemBase, ['colSpan', 'rowSpan']);
+
+export type DsGridProps = ComponentProps<typeof DsGrid>;
+export type DsGridItemProps = ComponentProps<typeof DsGridItem>;

package/src/components/ds-icon/custom-icons/index.ts

@@ -50,6 +50,7 @@ import { SpecialMapView } from './special-map-view';
 
 // Misc icons
 import { SpecialHome } from './special-home';
+import { SpecialLeadingIcon } from './special-leading-icon';
 import { SpecialLego } from './special-lego';
 import { SpecialScheme } from './special-scheme';
 import { SpecialBook } from './special-book';
@@ -120,6 +121,7 @@ export const customIcons = {
 
 	// Misc
 	'special-home': SpecialHome,
+	'special-leading-icon': SpecialLeadingIcon,
 	'special-lego': SpecialLego,
 	'special-scheme': SpecialScheme,
 	'special-book': SpecialBook,

package/src/components/ds-icon/custom-icons/special-leading-icon.tsx

@@ -0,0 +1,11 @@
+import type { FC, SVGProps } from 'react';
+
+/** Leading / input-adjacent building icon from design (AR-58177). */
+export const SpecialLeadingIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 13" fill="none" {...props}>
+		<path
+			d="M7.2 4.81737H7.8C7.95913 4.81737 8.11174 4.75164 8.22426 4.63464C8.33679 4.51765 8.4 4.35896 8.4 4.1935C8.4 4.02804 8.33679 3.86936 8.22426 3.75237C8.11174 3.63537 7.95913 3.56964 7.8 3.56964H7.2C7.04087 3.56964 6.88826 3.63537 6.77574 3.75237C6.66321 3.86936 6.6 4.02804 6.6 4.1935C6.6 4.35896 6.66321 4.51765 6.77574 4.63464C6.88826 4.75164 7.04087 4.81737 7.2 4.81737ZM7.2 7.31283H7.8C7.95913 7.31283 8.11174 7.24711 8.22426 7.13011C8.33679 7.01311 8.4 6.85443 8.4 6.68897C8.4 6.52351 8.33679 6.36483 8.22426 6.24783C8.11174 6.13083 7.95913 6.0651 7.8 6.0651H7.2C7.04087 6.0651 6.88826 6.13083 6.77574 6.24783C6.66321 6.36483 6.6 6.52351 6.6 6.68897C6.6 6.85443 6.66321 7.01311 6.77574 7.13011C6.88826 7.24711 7.04087 7.31283 7.2 7.31283ZM4.2 4.81737H4.8C4.95913 4.81737 5.11174 4.75164 5.22426 4.63464C5.33679 4.51765 5.4 4.35896 5.4 4.1935C5.4 4.02804 5.33679 3.86936 5.22426 3.75237C5.11174 3.63537 4.95913 3.56964 4.8 3.56964H4.2C4.04087 3.56964 3.88826 3.63537 3.77574 3.75237C3.66321 3.86936 3.6 4.02804 3.6 4.1935C3.6 4.35896 3.66321 4.51765 3.77574 4.63464C3.88826 4.75164 4.04087 4.81737 4.2 4.81737ZM4.2 7.31283H4.8C4.95913 7.31283 5.11174 7.24711 5.22426 7.13011C5.33679 7.01311 5.4 6.85443 5.4 6.68897C5.4 6.52351 5.33679 6.36483 5.22426 6.24783C5.11174 6.13083 4.95913 6.0651 4.8 6.0651H4.2C4.04087 6.0651 3.88826 6.13083 3.77574 6.24783C3.66321 6.36483 3.6 6.52351 3.6 6.68897C3.6 6.85443 3.66321 7.01311 3.77574 7.13011C3.88826 7.24711 4.04087 7.31283 4.2 7.31283ZM11.4 11.264H10.8V1.13558C10.8 0.97012 10.7368 0.811436 10.6243 0.694439C10.5117 0.577441 10.3591 0.511713 10.2 0.511713H1.8C1.64087 0.511713 1.48826 0.577441 1.37574 0.694439C1.26321 0.811436 1.2 0.97012 1.2 1.13558V11.264H0.6C0.44087 11.264 0.288258 11.3297 0.175736 11.4467C0.0632141 11.5637 0 11.7224 0 11.8879C0 12.0533 0.0632141 12.212 0.175736 12.329C0.288258 12.446 0.44087 12.5117 0.6 12.5117H11.4C11.5591 12.5117 11.7117 12.446 11.8243 12.329C11.9368 12.212 12 12.0533 12 11.8879C12 11.7224 11.9368 11.5637 11.8243 11.4467C11.7117 11.3297 11.5591 11.264 11.4 11.264ZM6.6 12.5117H5.4V9.91228H6.6V12.5117ZM9.6 11.264H7.8V9.28841C7.8 9.12295 7.73679 8.96426 7.62426 8.84727C7.51174 8.73027 7.35913 8.66454 7.2 8.66454H4.8C4.64087 8.66454 4.48826 8.73027 4.37574 8.84727C4.26321 8.96426 4.2 9.12295 4.2 9.28841V11.264H2.4V1.75945H9.6V11.264Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

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

@@ -1,3 +1,11 @@
+:root {
+	--icon-width-extra-large: 32px;
+	--icon-width-large: 28px;
+	--icon-width-medium: 24px;
+	--icon-width-small: 20px;
+	--icon-width-tiny: 16px;
+}
+
 .icon {
 	&.extra-large {
 		font-size: var(--icon-width-extra-large);

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

@@ -1,8 +1,12 @@
 import classNames from 'classnames';
 import styles from './ds-icon.module.scss';
-import type { DsIconProps } from './ds-icon.types';
+import { iconColors, type DsIconProps } from './ds-icon.types';
 import { customIcons, isCustomIcon } from './custom-icons';
 
+const iconColorSet = new Set<string>(iconColors);
+
+const resolveColor = (color: string): string => (iconColorSet.has(color) ? `var(--icon-${color})` : color);
+
 /**
  * Design system Icon component that renders Google Material Icons, custom SVG icons, or inline SVGs
  */
@@ -11,29 +15,31 @@ const DsIcon = ({
 	size = 'medium',
 	variant = 'outlined',
 	filled,
+	color,
 	className = '',
 	style = {},
 	...rest
 }: DsIconProps) => {
 	const iconClass = classNames(styles.icon, styles[size], { [styles.filled]: filled }, className);
+	const mergedStyle = color ? { color: resolveColor(color), ...style } : style;
 
 	// 1. SVG component passed directly
 	if (typeof icon === 'function') {
 		const SvgComponent = icon;
-		return <SvgComponent className={iconClass} style={style} {...rest} />;
+		return <SvgComponent className={iconClass} style={mergedStyle} {...rest} />;
 	}
 
 	// 2. Custom registered icon from custom-icons registry
 	if (isCustomIcon(icon)) {
 		const SvgComponent = customIcons[icon];
-		return <SvgComponent className={iconClass} style={style} {...rest} />;
+		return <SvgComponent className={iconClass} style={mergedStyle} {...rest} />;
 	}
 
 	// 3. Material Icon (font-based)
 	const variantClass = `material-symbols-${variant}`;
 
 	return (
-		<span className={classNames(iconClass, variantClass)} style={style} {...rest}>
+		<span className={classNames(iconClass, variantClass)} style={mergedStyle} {...rest}>
 			{icon}
 		</span>
 	);

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

@@ -7,6 +7,29 @@ export type IconSize = (typeof iconSizes)[number];
 export const iconVariants = ['outlined', 'rounded'] as const;
 export type IconVariant = (typeof iconVariants)[number];
 
+export const iconColors = [
+	'action',
+	'action-hover',
+	'action-secondary',
+	'disabled',
+	'error',
+	'execution',
+	'information-main',
+	'information-secondary',
+	'inverse',
+	'main',
+	'on-button',
+	'on-dark-disabled',
+	'pause',
+	'pending',
+	'secondary',
+	'success',
+	'success-light',
+	'warning',
+	'warning-light',
+] as const;
+export type IconColor = (typeof iconColors)[number];
+
 export type MaterialIconName = {
 	[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;
 }[keyof typeof materialIcons];
@@ -39,6 +62,13 @@ export interface DsIconProps {
 	 */
 	filled?: boolean;
 
+	/**
+	 * Icon color. Semantic names map to `--icon-*` tokens (e.g. `'error'` →
+	 * `var(--icon-error)`); raw CSS values (hex, rgb, hsl, CSS variables)
+	 * pass through unchanged. Omit to inherit from parent.
+	 */
+	color?: IconColor | (string & {});
+
 	/**
 	 * Additional CSS class names
 	 */

package/src/components/ds-key-value-pair/ds-key-value-pair.module.scss

@@ -10,21 +10,21 @@
 .root[data-orientation='horizontal'] {
 	display: grid;
 	grid-template-columns: auto 1fr;
-	column-gap: var(--spacing-xs);
+	column-gap: var(--xs);
 	align-items: start;
 }
 
 .label {
-	padding-bottom: var(--spacing-4xs);
-	padding-left: var(--spacing-sm);
-	color: var(--color-font-main);
+	padding-bottom: var(--4xs);
+	padding-left: var(--sm);
+	color: var(--font-main);
 	white-space: nowrap;
 	flex-shrink: 0;
 }
 
 .root[data-orientation='horizontal'] .label {
 	padding-bottom: 0;
-	padding-top: var(--spacing-3xs);
+	padding-top: var(--3xs);
 }
 
 .valueContainer {
@@ -43,8 +43,8 @@
 	width: 100%;
 	min-width: 0;
 	min-height: 28px;
-	padding: var(--spacing-3xs) var(--spacing-sm);
-	color: var(--color-font-secondary);
+	padding: var(--3xs) var(--sm);
+	color: var(--font-secondary);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;

package/src/components/ds-key-value-pair/ds-key-value-pair.types.ts

@@ -4,15 +4,25 @@ export const dsKeyValuePairOrientations = ['vertical', 'horizontal'] as const;
 export type DsKeyValuePairOrientation = (typeof dsKeyValuePairOrientations)[number];
 
 export interface DsKeyValuePairProps {
+	/** Label rendered for the key side of the pair (left or top depending on `orientation`). */
 	keyLabel: ReactNode;
 
 	/** Shown when the editor is not active (read-only or not hovered). */
 	value?: ReactNode;
 
-	/** @default false */
+	/**
+	 * When `true`, the pair is rendered as a static display and the editor is never
+	 * revealed (even on hover/focus).
+	 * @default false
+	 */
 	readOnly?: boolean;
 
-	/** @default 'vertical' */
+	/**
+	 * Layout orientation:
+	 * - `vertical`: key stacked above value
+	 * - `horizontal`: key and value side-by-side
+	 * @default 'vertical'
+	 */
 	orientation?: DsKeyValuePairOrientation;
 
 	/** Editor content revealed on hover/focus when not read-only. */

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

@@ -1,13 +1,13 @@
-$pad-x: var(--spacing-lg);
-$pad-y: var(--spacing-standard);
+$pad-x: var(--lg);
+$pad-y: var(--standard);
 $max-width: 90vw;
 $border-size: 1px;
-$border: $border-size solid var(--color-border-secondary);
+$border: $border-size solid var(--border-secondary);
 
 .overlay {
 	position: fixed;
 	inset: 0;
-	background: var(--color-background-brand);
+	background: var(--background-brand);
 	opacity: 0.4;
 	z-index: 1199;
 
@@ -43,7 +43,7 @@ $border: $border-size solid var(--color-border-secondary);
 .modal {
 	position: fixed;
 	inset: 50% auto auto 50%;
-	background: var(--color-background);
+	background: var(--background);
 	border-radius: 4px;
 	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
 	z-index: 1200;
@@ -98,7 +98,7 @@ $border: $border-size solid var(--color-border-secondary);
 .header {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	position: relative;
 	background: inherit;
 	flex-shrink: 0;
@@ -110,7 +110,7 @@ $border: $border-size solid var(--color-border-secondary);
 		left: $pad-x;
 		right: $pad-x;
 		height: $border-size;
-		background: var(--color-border-secondary);
+		background: var(--border-secondary);
 	}
 }
 
@@ -121,7 +121,7 @@ $border: $border-size solid var(--color-border-secondary);
 }
 
 .title {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	margin: 0;
 	flex: 1;
 }
@@ -135,7 +135,7 @@ $border: $border-size solid var(--color-border-secondary);
 
 .actions {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	justify-content: flex-end;
 	margin-left: auto;
 }

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

@@ -13,6 +13,22 @@ export interface DsModalProps extends Pick<
 	DialogProps,
 	'modal' | 'closeOnEscape' | 'closeOnInteractOutside'
 > {
+	/**
+	 * Whether the modal traps focus and blocks interaction with the page behind the
+	 * backdrop. When `false`, users can continue interacting with the underlying page.
+	 * @default true
+	 */
+	modal?: DialogProps['modal'];
+	/**
+	 * Whether pressing the Escape key closes the modal.
+	 * @default true
+	 */
+	closeOnEscape?: DialogProps['closeOnEscape'];
+	/**
+	 * Whether clicking or focusing outside the modal closes it.
+	 * @default true
+	 */
+	closeOnInteractOutside?: DialogProps['closeOnInteractOutside'];
 	/**
 	 * Whether the modal is open
 	 */

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

@@ -1,7 +1,7 @@
 .root {
 	position: relative;
-	background: var(--white);
-	padding: var(--spacing-6);
+	background: var(--color-dap-gray-050);
+	padding: var(--lg);
 	width: 20vw;
 	min-width: 240px;
 	max-width: 480px;
@@ -10,7 +10,7 @@
 
 	&[data-state='open']:hover,
 	&[data-state='open']:has(:focus-visible) {
-		border-color: var(--color-border);
+		border-color: var(--border);
 	}
 
 	&[data-state='closed'] {
@@ -19,10 +19,10 @@
 
 	&.variantFloating {
 		position: absolute;
-		inset-inline-start: var(--spacing-3);
-		top: var(--spacing-3);
+		inset-inline-start: var(--sm);
+		top: var(--sm);
 		border: none;
-		border-radius: var(--spacing-2);
+		border-radius: var(--xs);
 		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
 	}
 
@@ -46,11 +46,11 @@
 	height: var(--size);
 	width: var(--size);
 	padding: 1px;
-	border: 1px solid var(--color-border-secondary);
+	border: 1px solid var(--border-secondary);
 	border-radius: 100%;
-	background: var(--white);
-	color: var(--color-icon-secondary);
-	top: var(--spacing-6);
+	background: var(--color-dap-gray-050);
+	color: var(--icon-action-secondary);
+	top: var(--lg);
 	inset-inline-start: 100%;
 	margin-inline-start: calc(var(--size) / -2);
 
@@ -66,13 +66,13 @@
 
 	&:hover,
 	&:focus-visible {
-		color: var(--color-icon-primary);
-		border-color: var(--color-border-action-primary);
+		color: var(--icon-action);
+		border-color: var(--border-action-primary);
 		outline: none;
-		background: var(--color-background-action-tertiary);
+		background: var(--background-action-tertiary-hover);
 
 		.root:has(&) {
-			border-color: var(--color-border-action-primary);
+			border-color: var(--border-action-primary);
 
 			// Add an inset single-sided border on hover without affecting the layout.
 			&.variantDocked[data-state='open']::before {
@@ -83,7 +83,7 @@
 				width: 1px;
 				top: 0;
 				inset-inline-end: 0;
-				background: var(--color-border-action-primary);
+				background: var(--border-action-primary);
 				pointer-events: none;
 			}
 		}
@@ -93,7 +93,7 @@
 	&::after {
 		content: '';
 		position: absolute;
-		inset: calc(-1 * var(--spacing-1));
+		inset: calc(-1 * var(--3xs));
 	}
 
 	.root.variantFloating & {

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

@@ -5,21 +5,60 @@ import type { ResponsiveValue } from '../../utils/responsive';
 export type DsPanelVariant = 'docked' | 'floating';
 
 export type DsPanelBaseProps = Omit<Collapsible.CollapsibleProps, 'onOpenChange'> & {
+	/**
+	 * Visual treatment of the panel:
+	 * - `docked`: sits flush within the surrounding layout (default)
+	 * - `floating`: elevated card with shadow, detached from the layout
+	 * @default docked
+	 */
 	variant?: DsPanelVariant;
+	/**
+	 * Width of the panel in pixels when expanded.
+	 */
 	width?: number;
+	/**
+	 * Whether the panel edge can be dragged to resize its width.
+	 * @default false
+	 */
 	draggable?: boolean;
+	/**
+	 * Disable the default inner padding so the panel content can bleed to the edges.
+	 * @default false
+	 */
 	disablePadding?: boolean;
+	/**
+	 * Props forwarded to nested sub-components.
+	 */
 	slotProps?: {
+		/**
+		 * Props forwarded to the collapse/expand button shown on the panel edge.
+		 */
 		collapseButton?: DsPanelCollapseButtonProps;
 	};
+	/**
+	 * Called when the panel's open (expanded) state changes. Receives the next
+	 * boolean state.
+	 */
 	onOpenChange?: (open: boolean) => void;
 };
 
 export type DsPanelProps = Omit<DsPanelBaseProps, 'width'> & {
+	/**
+	 * Width of the panel when expanded. Accepts a single number (px) or a
+	 * `ResponsiveValue` to vary width by breakpoint.
+	 */
 	width?: ResponsiveValue<number>;
 };
 
 export type DsPanelCollapseButtonProps = {
+	/**
+	 * Called when the collapse button is clicked.
+	 */
 	onClick?: () => void;
+	/**
+	 * Whether the panel is currently collapsed. Drives the button's chevron
+	 * orientation and aria-label.
+	 * @default false
+	 */
 	collapsed?: boolean;
 };

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

@@ -11,12 +11,12 @@
 	gap: 12px;
 	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
 	border-radius: 2px;
-	background: var(--white);
+	background: var(--color-dap-gray-050);
 	padding: 12px;
 }
 
 .arrow {
-	fill: var(--white);
+	fill: var(--color-dap-gray-050);
 	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.1));
 	width: 18px;
 	height: 10px;

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

@@ -14,7 +14,7 @@ $transition-duration: 0.2s;
 }
 
 .track {
-	stroke: var(--color-background-tertiary);
+	stroke: var(--background-tertiary);
 	transition: stroke $transition-duration;
 }
 
@@ -23,15 +23,15 @@ $transition-duration: 0.2s;
 }
 
 .default {
-	stroke: var(--color-background-selected);
+	stroke: var(--background-primary);
 }
 
 .success {
-	stroke: var(--color-background-success-strong);
+	stroke: var(--background-success-strong);
 }
 
 .error {
-	stroke: var(--color-background-danger-strong);
+	stroke: var(--background-error);
 }
 
 .center {
@@ -39,15 +39,15 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .iconSuccess {
-	color: var(--color-icon-success);
+	color: var(--icon-success);
 }
 
 .iconError {
-	color: var(--color-icon-danger);
+	color: var(--icon-error);
 }
 
 .iconMediumSize.iconMediumSize {

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

@@ -20,7 +20,7 @@ $transition-duration: 0.2s;
 }
 
 .track {
-	stroke: var(--color-background-tertiary);
+	stroke: var(--background-tertiary);
 	transition: stroke $transition-duration;
 }
 
@@ -30,16 +30,16 @@ $transition-duration: 0.2s;
 }
 
 .default .range {
-	stroke: var(--color-background-selected);
+	stroke: var(--background-primary);
 }
 
 .success .track,
 .success .range {
-	stroke: var(--color-background-success-strong);
+	stroke: var(--background-success-strong);
 }
 
 .error .range {
-	stroke: var(--color-background-danger-strong);
+	stroke: var(--background-error);
 }
 
 .center {
@@ -47,15 +47,15 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .iconSuccess {
-	color: var(--color-icon-success);
+	color: var(--icon-success);
 }
 
 .iconError {
-	color: var(--color-icon-danger);
+	color: var(--icon-error);
 }
 
 $icon-medium-size: 44px;