@drivenets/design-system 0.19.0 → 0.20.0

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.tsx

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

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

@@ -0,0 +1,69 @@
+.pill {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--4xs);
+	height: var(--lg);
+	padding: var(--4xs) var(--xs);
+	border: 1px solid var(--border);
+	border-radius: 9999px;
+	background: var(--background);
+	color: var(--font-main);
+	cursor: pointer;
+	transition-property: background, border-color, box-shadow, color;
+	transition-timing-function: ease-out;
+	transition-duration: 0.2s;
+
+	&:hover {
+		background: var(--background-action-hover-weak);
+		border-color: var(--border-field-hover);
+	}
+
+	&:focus-visible {
+		outline: none;
+		border-color: var(--border-field-hover);
+		background: var(--background-action-hover-weak);
+		box-shadow: inset 0 0 0 1px var(--border-field-hover);
+	}
+
+	&.active {
+		border-color: var(--border-action-primary);
+		background: var(--background-secondary-hover);
+
+		&:hover,
+		&:focus-visible {
+			border-color: var(--border-action-primary-hover);
+			background: var(--background-action-secondary-hover);
+		}
+
+		&:focus-visible {
+			box-shadow: inset 0 0 0 1px var(--border-action-primary-hover);
+		}
+
+		&:disabled {
+			border-color: var(--border-disabled);
+			background: var(--background-secondary);
+		}
+	}
+
+	&:disabled {
+		border-color: var(--border-disabled);
+		background: var(--background-action-hover-weak);
+		color: var(--font-disabled);
+		box-shadow: none;
+		cursor: not-allowed;
+
+		.value {
+			color: var(--font-disabled);
+		}
+	}
+}
+
+.label,
+.value {
+	flex-shrink: 0;
+}
+
+.value {
+	color: var(--font-secondary);
+}

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

@@ -0,0 +1,55 @@
+import type { MouseEvent } from 'react';
+import classNames from 'classnames';
+import styles from './ds-toggle-filter-data.module.scss';
+import type { DsToggleFilterDataProps } from './ds-toggle-filter-data.types';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * @summary Data pill that toggles on and off, pairing a label with its value, for filter rows
+ * above a table or list.
+ *
+ * Internal to the filters component and not exported from the package.
+ *
+ * A real `<button type="button">`, so `aria-pressed`, Enter/Space activation, the disabled state
+ * and the focus ring are all native. Selection is controlled: the pill reports the next `active`
+ * value through `onActiveChange` and never toggles itself.
+ */
+const DsToggleFilterData = ({
+	ref,
+	label,
+	value,
+	active,
+	disabled = false,
+	className,
+	style,
+	onActiveChange,
+	onClick,
+}: DsToggleFilterDataProps) => {
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		onClick?.(event);
+		onActiveChange?.(!active);
+	};
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(styles.pill, { [styles.active]: active }, className)}
+			style={style}
+			disabled={disabled}
+			aria-pressed={active}
+			onClick={handleClick}
+		>
+			<DsTypography variant="body-xs-md" className={styles.label}>
+				{label}
+			</DsTypography>
+			<DsTypography variant="body-xs-reg" className={styles.value}>
+				{value}
+			</DsTypography>
+		</button>
+	);
+};
+
+DsToggleFilterData.displayName = 'DsToggleFilterData';
+
+export default DsToggleFilterData;