@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-tag/ds-tag.figma.ts

@@ -7,7 +7,18 @@
 // is a single variant backed by an internal, non-exposed include/exclude sub-toggle, so it can
 // only be surfaced as one code value — it maps to `variant="include"`; switch to `variant="exclude"`
 // for the exclude case. `label` is content, pulled from the tag text when present, otherwise a
-// placeholder; `value` (required only for `key-value`) is emitted as a placeholder.
+// placeholder; `value` (required by `key-value`, `operator-filter` and `query-filter`) is emitted
+// as a placeholder.
+//
+// Three code props are deliberately not derived from this node:
+// - `shape` — the pill radius is not modelled in Figma at all, so `shape="round"` is a code-side
+//   choice.
+// - `warning` / `onExpandClick` — the warning ellipse and `Part_expandCollapseBtn_v01` are hidden
+//   layers in every variant of this node, so the emitted example leaves both off; add them in code
+//   when the design that consumes the tag shows them.
+//
+// `operator-filter` nests a `DsButtonV4` trigger that does not exist in code. The trigger is a
+// consumer-owned slot, so the example emits a `DsSelect` placeholder for the developer to wire.
 import figma from 'figma';
 
 const instance = figma.selectedInstance;
@@ -17,6 +28,8 @@ const variant =
 		default: 'default',
 		'include-exclude': 'include',
 		'key-value': 'key-value',
+		'operator-filter': 'operator-filter',
+		'query-filter': 'query-filter',
 	}) ?? 'default';
 
 const size = instance.getEnum('Size', { medium: 'medium', small: 'small' }) ?? 'medium';
@@ -32,10 +45,13 @@ const state = instance.getEnum('State', {
 const labelNode = instance.findText('Tag-name', { traverseInstances: true });
 const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Label';
 
+const requiresValue = variant === 'key-value' || variant === 'operator-filter' || variant === 'query-filter';
+
 const attrs = [
 	`label="${label}"`,
 	variant !== 'default' ? `variant="${variant}"` : '',
-	variant === 'key-value' ? 'value="Value"' : '',
+	requiresValue ? 'value="Value"' : '',
+	variant === 'operator-filter' ? 'slots={{ operator: <DsSelect options={[]} value="" /> }}' : '',
 	size === 'small' ? 'size="small"' : '',
 	state === 'selected' ? 'selected' : '',
 	state === 'disabled' ? 'disabled' : '',
@@ -45,7 +61,11 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsTag ${attrs} />`,
-	imports: ["import { DsTag } from '@drivenets/design-system';"],
+	imports: [
+		variant === 'operator-filter'
+			? "import { DsSelect, DsTag } from '@drivenets/design-system';"
+			: "import { DsTag } from '@drivenets/design-system';",
+	],
 	id: 'ds-tag',
 	metadata: { nestable: true },
 } satisfies figma.Template;

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

@@ -1,5 +1,7 @@
 @use '../../styles/typography';
 
+$warning-dot-size: 8px;
+
 .tag {
 	--transition-duration: 200ms;
 
@@ -19,6 +21,10 @@
 	transition-timing-function: ease-out;
 	transition-duration: var(--transition-duration);
 
+	&.round {
+		border-radius: 9999px;
+	}
+
 	&.clickable {
 		cursor: pointer;
 
@@ -40,7 +46,8 @@
 			outline-color: var(--border-action-primary);
 		}
 
-		.deleteButton {
+		.deleteButton,
+		.expandButton {
 			outline-color: var(--border-action-primary);
 		}
 	}
@@ -65,13 +72,20 @@
 
 		.label,
 		.key,
-		.value {
+		.value,
+		.queryLabel,
+		.queryValue {
 			color: var(--font-disabled);
 		}
 
-		.variantIcon {
+		.variantIcon,
+		.querySeparator {
 			color: var(--font-disabled);
 		}
+
+		.warningDot {
+			background: var(--icon-disabled);
+		}
 	}
 
 	.deleteButton {
@@ -93,6 +107,22 @@
 		}
 	}
 
+	.expandButton {
+		flex-shrink: 0;
+		display: flex;
+		margin-left: var(--3xs);
+		outline-color: var(--border-action-secondary);
+		user-select: none;
+		transition-property: background, color, outline-color;
+		transition-timing-function: ease-out;
+		transition-duration: var(--transition-duration);
+		color: var(--icon-action);
+
+		&:hover {
+			background: var(--background-action-secondary-hover);
+		}
+	}
+
 	&:hover:not(.disabled) .deleteButton,
 	&:focus-within:not(.disabled) .deleteButton,
 	&.selected:not(.disabled) .deleteButton {
@@ -107,17 +137,20 @@
 	@include typography.ellipsis;
 }
 
-.keyValue {
+.segments {
 	min-width: 0;
 }
 
 .key {
 	flex-shrink: 0;
 	color: var(--font-main);
+}
 
-	&::after {
-		content: ':';
-	}
+// `key-value` renders its colon as generated content rather than text so the tag's text
+// content stays the bare label — `getByText('Category')` keeps working for consumers.
+// Scoped to its own class because `operator-filter` shares `.key` and takes no colon.
+.keyColon::after {
+	content: ':';
 }
 
 .value {
@@ -126,6 +159,37 @@
 	color: var(--font-secondary);
 }
 
+.operatorSlot {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+.queryLabel {
+	flex-shrink: 0;
+	color: var(--font-main);
+}
+
+.querySeparator {
+	flex-shrink: 0;
+	color: var(--icon-tertiary);
+}
+
+.queryValue {
+	@include typography.ellipsis;
+
+	color: var(--font-main);
+}
+
+.warningDot {
+	flex-shrink: 0;
+	width: $warning-dot-size;
+	height: $warning-dot-size;
+	margin-left: var(--3xs);
+	border-radius: 50%;
+	background: var(--icon-warning-light);
+}
+
 .icon {
 	flex-shrink: 0;
 	display: flex;

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

@@ -16,12 +16,15 @@ const DsTag = ({
 	className,
 	style = {},
 	size = 'medium',
+	shape = 'default',
 	selected = false,
 	variant = 'default',
+	warning = false,
 	disabled = false,
 	locale = {},
 	onClick,
 	onDelete,
+	onExpandClick,
 	slots,
 	...rest
 }: DsTagProps) => {
@@ -32,6 +35,7 @@ const DsTag = ({
 			[styles.selected]: selected && !disabled,
 			[styles.include]: variant === 'include',
 			[styles.exclude]: variant === 'exclude',
+			[styles.round]: shape === 'round',
 			[styles.disabled]: disabled,
 		},
 		className,
@@ -65,6 +69,26 @@ const DsTag = ({
 		}
 	};
 
+	const handleExpandClick = (event: MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		onExpandClick?.(event);
+	};
+
+	const handleKeyDownExpand = (event: KeyboardEvent<HTMLElement>) => {
+		event.stopPropagation();
+
+		if (onExpandClick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onExpandClick(event);
+		}
+	};
+
+	// The operator slot owns a fully-wired control, so neither its clicks nor its keystrokes may
+	// reach the tag's own click / delete keyboard shortcuts.
+	const stopPropagation = (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {
+		event.stopPropagation();
+	};
+
 	const handleClick = (event: MouseEvent<HTMLElement>) => {
 		if (onClick) {
 			event.preventDefault();
@@ -82,6 +106,83 @@ const DsTag = ({
 		iconVariant = 'do_not_disturb_on';
 	}
 
+	const warningAriaLabel = locale.warningAriaLabel ?? 'Warning';
+
+	// `role="button"` makes the subtree presentational and the root's own `aria-label` replaces any
+	// name computed from it, so the dot's `role="img"` name is pruned on an interactive tag. Fold it
+	// into the root name instead, and keep the dot named for the non-interactive case.
+	const rootAriaLabel =
+		typeof label === 'string' ? (warning ? `${label}, ${warningAriaLabel}` : label) : undefined;
+
+	const isSmall = size === 'small';
+	const regularVariant = isSmall ? 'body-xs-reg' : 'body-sm-reg';
+	const mediumVariant = isSmall ? 'body-xs-md' : 'body-sm-md';
+	const semiBoldVariant = isSmall ? 'body-xs-semi-bold' : 'body-sm-semi-bold';
+
+	const renderContent = () => {
+		if (variant === 'key-value') {
+			return (
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)" className={styles.segments}>
+					<DsTypography variant={mediumVariant} className={classNames(styles.key, styles.keyColon)}>
+						{label}
+					</DsTypography>
+					<DsTypography variant={regularVariant} className={styles.value}>
+						{value}
+					</DsTypography>
+				</DsStack>
+			);
+		}
+
+		if (variant === 'operator-filter') {
+			const operatorSlot = slots?.operator;
+
+			return (
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)" className={styles.segments}>
+					<DsTypography variant={mediumVariant} className={styles.key}>
+						{label}
+					</DsTypography>
+					{operatorSlot !== undefined &&
+						operatorSlot !== null && (
+							// The wrapper is a pure event boundary with no semantics of its own; the slotted
+							// control keeps its own. `role="presentation"` is what satisfies
+							// jsx-a11y/no-static-element-interactions for a span carrying these handlers.
+							<span
+								role="presentation"
+								className={styles.operatorSlot}
+								onClick={stopPropagation}
+								onKeyDown={stopPropagation}
+							>
+								{operatorSlot}
+							</span>
+						)}
+					<DsTypography variant={regularVariant} className={styles.value}>
+						{value}
+					</DsTypography>
+				</DsStack>
+			);
+		}
+
+		if (variant === 'query-filter') {
+			return (
+				<DsStack direction="row" alignItems="center" gap="var(--4xs)" className={styles.segments}>
+					<DsTypography variant={regularVariant} className={styles.queryLabel}>
+						{label}
+					</DsTypography>
+					<DsIcon icon="keyboard_arrow_right" size="tiny" aria-hidden className={styles.querySeparator} />
+					<DsTypography variant={semiBoldVariant} className={styles.queryValue}>
+						{value}
+					</DsTypography>
+				</DsStack>
+			);
+		}
+
+		return (
+			<DsTypography variant={regularVariant} className={styles.label}>
+				{label}
+			</DsTypography>
+		);
+	};
+
 	return (
 		<div
 			ref={ref as Ref<HTMLDivElement>}
@@ -91,7 +192,7 @@ const DsTag = ({
 			onKeyDown={disabled ? undefined : handleKeyDownTag}
 			role={onClick || onDelete ? 'button' : undefined}
 			tabIndex={disabled || (!onClick && !onDelete) ? undefined : 0}
-			aria-label={typeof label === 'string' ? label : undefined}
+			aria-label={rootAriaLabel}
 			aria-pressed={onClick && selected && !disabled ? 'true' : undefined}
 			aria-disabled={disabled}
 			{...rest}
@@ -104,19 +205,19 @@ const DsTag = ({
 						))}
 				</span>
 			)}
-			{variant === 'key-value' ? (
-				<DsStack direction="row" alignItems="center" gap="var(--3xs)" className={styles.keyValue}>
-					<DsTypography variant={size === 'small' ? 'body-xs-md' : 'body-sm-md'} className={styles.key}>
-						{label}
-					</DsTypography>
-					<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.value}>
-						{value}
-					</DsTypography>
-				</DsStack>
-			) : (
-				<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
-					{label}
-				</DsTypography>
+			{renderContent()}
+			{warning && <span role="img" aria-label={warningAriaLabel} className={styles.warningDot} />}
+			{onExpandClick && !disabled && (
+				<button
+					type="button"
+					className={styles.expandButton}
+					onClick={handleExpandClick}
+					onKeyDown={handleKeyDownExpand}
+					aria-label={locale.expandAriaLabel ?? 'Expand'}
+					tabIndex={0}
+				>
+					<DsIcon icon="keyboard_arrow_down" size="tiny" aria-hidden />
+				</button>
 			)}
 			{onDelete && !disabled && (
 				<button

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

@@ -3,9 +3,19 @@ import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'r
 export const tagSizes = ['medium', 'small'] as const;
 export type TagSize = (typeof tagSizes)[number];
 
-export const tagVariants = ['default', 'include', 'exclude', 'key-value'] as const;
+export const tagVariants = [
+	'default',
+	'include',
+	'exclude',
+	'key-value',
+	'operator-filter',
+	'query-filter',
+] as const;
 export type TagVariant = (typeof tagVariants)[number];
 
+export const tagShapes = ['default', 'round'] as const;
+export type TagShape = (typeof tagShapes)[number];
+
 interface DsTagBaseProps {
 	/**
 	 * Ref to the tag element
@@ -27,6 +37,14 @@ interface DsTagBaseProps {
 		 * aria-label for the delete button (shown when `onDelete` is provided).
 		 */
 		deleteAriaLabel?: string;
+		/**
+		 * Accessible name for the warning dot (shown when `warning` is set).
+		 */
+		warningAriaLabel?: string;
+		/**
+		 * Accessible name for the expand chevron (shown when `onExpandClick` is provided).
+		 */
+		expandAriaLabel?: string;
 	};
 	/**
 	 * Additional styles to apply to the component
@@ -40,16 +58,33 @@ interface DsTagBaseProps {
 	 * Callback function when the delete icon is clicked
 	 */
 	onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Callback function when the expand chevron is clicked. Providing a handler is what renders the
+	 * chevron — the tag keeps no expanded state of its own, so the consumer owns whatever the
+	 * chevron reveals.
+	 */
+	onExpandClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
 	/**
 	 * Size of the tag
 	 * @default 'medium'
 	 */
 	size?: TagSize;
+	/**
+	 * Border radius of the tag: `'default'` (4px) or `'round'` (pill)
+	 * @default 'default'
+	 */
+	shape?: TagShape;
 	/**
 	 * Whether the tag is in a selected/pressed state
 	 * @default false
 	 */
 	selected?: boolean;
+	/**
+	 * Whether to render a trailing warning dot. Copy and any tooltip around it belong to the
+	 * consumer; only the dot's accessible name is configurable, via `locale.warningAriaLabel`.
+	 * @default false
+	 */
+	warning?: boolean;
 	/**
 	 * Whether the tag is disabled
 	 * @default false
@@ -64,6 +99,14 @@ interface DsTagBaseProps {
 		 * Icon to display at the start of the input
 		 */
 		icon?: ReactNode;
+		/**
+		 * Fully-wired operator trigger (for example a `DsSelect`) rendered between `label` and
+		 * `value`. Honoured only by `variant="operator-filter"` and ignored by every other variant.
+		 *
+		 * The tag cannot disable an arbitrary node, so `disabled` does not reach the slotted
+		 * control — pass `disabled` to it yourself.
+		 */
+		operator?: ReactNode;
 	};
 }
 
@@ -79,9 +122,33 @@ interface DsTagStandardProps extends DsTagBaseProps {
 interface DsTagKeyValueProps extends DsTagBaseProps {
 	variant: 'key-value';
 	/**
-	 * Secondary-colored value rendered after the key (`label`). Required for the `key-value` variant.
+	 * Secondary-colored value rendered after the key (`label`) and its `:` separator. The key
+	 * carries the emphasis. Required for the `key-value` variant.
+	 */
+	value: ReactNode;
+}
+
+interface DsTagOperatorFilterProps extends DsTagBaseProps {
+	variant: 'operator-filter';
+	/**
+	 * Value rendered last, after `label` and the `slots.operator` trigger that sits between them.
+	 * Required for the `operator-filter` variant.
+	 */
+	value: ReactNode;
+}
+
+interface DsTagQueryFilterProps extends DsTagBaseProps {
+	variant: 'query-filter';
+	/**
+	 * Emphasized value rendered after `label` and a `keyboard_arrow_right` separator. Emphasis is
+	 * inverted compared to `key-value`: the value is the strong segment and `label` is regular.
+	 * Required for the `query-filter` variant.
 	 */
 	value: ReactNode;
 }
 
-export type DsTagProps = DsTagStandardProps | DsTagKeyValueProps;
+export type DsTagProps =
+	| DsTagStandardProps
+	| DsTagKeyValueProps
+	| DsTagOperatorFilterProps
+	| DsTagQueryFilterProps;

package/src/components/ds-tag/ds-tag.unit.test.ts

@@ -1,11 +1,17 @@
 /* eslint-disable vitest/expect-expect */
 import type { ReactNode } from 'react';
 import { describe, expectTypeOf, it } from 'vitest';
-import type { DsTagProps, TagVariant } from './ds-tag.types';
+import type { DsTagProps, TagShape, TagVariant } from './ds-tag.types';
 
 describe('DsTagProps discriminated union', () => {
-	it('includes key-value in the variant union', () => {
-		expectTypeOf<TagVariant>().toEqualTypeOf<'default' | 'include' | 'exclude' | 'key-value'>();
+	it('includes key-value and the filter variants in the variant union', () => {
+		expectTypeOf<TagVariant>().toEqualTypeOf<
+			'default' | 'include' | 'exclude' | 'key-value' | 'operator-filter' | 'query-filter'
+		>();
+	});
+
+	it('exposes default and round shapes', () => {
+		expectTypeOf<TagShape>().toEqualTypeOf<'default' | 'round'>();
 	});
 
 	it('allows standard variants without a value', () => {
@@ -20,13 +26,26 @@ describe('DsTagProps discriminated union', () => {
 		expectTypeOf<{ label: string; variant: 'key-value' }>().not.toExtend<DsTagProps>();
 	});
 
+	it('requires a value for the operator-filter variant', () => {
+		expectTypeOf<{ label: string; variant: 'operator-filter'; value: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'operator-filter' }>().not.toExtend<DsTagProps>();
+	});
+
+	it('requires a value for the query-filter variant', () => {
+		expectTypeOf<{ label: string; variant: 'query-filter'; value: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'query-filter' }>().not.toExtend<DsTagProps>();
+	});
+
 	it('forbids a value on standard variants', () => {
 		expectTypeOf<{ label: string; value: string }>().not.toExtend<DsTagProps>();
 		expectTypeOf<{ label: string; variant: 'default'; value: string }>().not.toExtend<DsTagProps>();
 		expectTypeOf<{ label: string; variant: 'include'; value: string }>().not.toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'exclude'; value: string }>().not.toExtend<DsTagProps>();
 	});
 
-	it('types the key-value value as ReactNode', () => {
+	it('types every value-bearing variant as ReactNode', () => {
 		expectTypeOf<Extract<DsTagProps, { variant: 'key-value' }>['value']>().toEqualTypeOf<ReactNode>();
+		expectTypeOf<Extract<DsTagProps, { variant: 'operator-filter' }>['value']>().toEqualTypeOf<ReactNode>();
+		expectTypeOf<Extract<DsTagProps, { variant: 'query-filter' }>['value']>().toEqualTypeOf<ReactNode>();
 	});
 });

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

@@ -1,3 +1,3 @@
 export { default as DsTag } from './ds-tag';
-export { tagSizes, tagVariants } from './ds-tag.types';
-export type { TagSize, TagVariant, DsTagProps } from './ds-tag.types';
+export { tagShapes, tagSizes, tagVariants } from './ds-tag.types';
+export type { TagShape, TagSize, TagVariant, DsTagProps } from './ds-tag.types';

package/src/components/ds-text-input/ds-input-field-v02.figma.ts

@@ -24,6 +24,7 @@ const textInfo: FieldInfo = {
 const registry: Record<string, FieldInfo> = {
 	text: textInfo,
 	textArea: { component: 'DsTextarea', fcMember: 'Textarea' },
+	code: { component: 'DsCodeInput', fcMember: 'CodeInput', size: true, large: true, readOnly: true },
 	number: { component: 'DsNumberInput', fcMember: 'NumberInput', size: true, readOnly: true },
 	password: { component: 'DsPasswordInput', fcMember: 'PasswordInput', size: true, readOnly: true },
 	select: {
@@ -75,6 +76,7 @@ const inputType =
 		? part.getEnum('inputType', {
 				text: 'text',
 				'text-area': 'textArea',
+				code: 'code',
 				select: 'select',
 				password: 'password',
 				number: 'number',

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

@@ -144,6 +144,24 @@
 		pointer-events: none;
 	}
 
+	// Overlay the native input over the control so `getByRole('checkbox')` clicks
+	// land on a real interactive surface. Ark applies `visuallyHiddenStyle` inline
+	// (1x1, clipped, off-screen) which Playwright refuses to click; `!important`
+	// is required to beat inline-style specificity.
+	.hiddenInput {
+		position: absolute !important;
+		inset-block-start: 0 !important;
+		inset-inline-start: 0 !important;
+		width: calc(var(--switch-track-width) + var(--thumb-gap) * 2) !important;
+		height: calc(var(--thumb-size) + var(--thumb-gap) * 2) !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		clip: auto !important;
+		overflow: visible !important;
+		opacity: 0 !important;
+		cursor: pointer !important;
+	}
+
 	.iconCheck {
 		left: var(--icon-spacing);
 	}

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

@@ -21,6 +21,7 @@ const DsToggle = ({
 	size = 'default',
 	children,
 	checked,
+	'aria-label': ariaLabel,
 	...rest
 }: DsToggleProps) => {
 	const isSmall = size === 'small';
@@ -58,19 +59,24 @@ const DsToggle = ({
 				<DsIcon icon="close" size={iconSize} className={closeIconClass} />
 			</Switch.Control>
 
-			{label ? (
+			{/* An empty Switch.Label would still be the input's aria-labelledby target and override aria-label. */}
+			{(label || children) && (
 				<Switch.Label>
-					<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
-					{!!labelInfo && (
-						<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
-							{labelInfo}
-						</DsTypography>
+					{label ? (
+						<>
+							<DsTypography variant={isSmall ? 'body-xs-md' : 'body-sm-md'}>{label}</DsTypography>
+							{!!labelInfo && (
+								<DsTypography variant="body-xs-reg" className={styles.labelInfo}>
+									{labelInfo}
+								</DsTypography>
+							)}
+						</>
+					) : (
+						children
 					)}
 				</Switch.Label>
-			) : (
-				children
 			)}
-			<Switch.HiddenInput />
+			<Switch.HiddenInput className={styles.hiddenInput} aria-label={ariaLabel} />
 		</Switch.Root>
 	);
 };

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

@@ -52,6 +52,12 @@ export type DsToggleProps = {
 	 * Whether the toggle is disabled
 	 */
 	disabled?: boolean;
+
+	/**
+	 * Accessible name for a toggle without a visible `label` or `children`.
+	 * Ignored by assistive tech when a visible label is rendered.
+	 */
+	'aria-label'?: string;
 } & (
 	| {
 			/**