@drivenets/design-system 0.18.1 → 0.20.0

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

@@ -28,6 +28,9 @@ const state = instance.getEnum('state', {
 const checkedAttr =
 	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
 
+// `size` is not mapped: it lives on `Structure_CheckboxV1`, while the published
+// `DsCheckboxV3` set still exposes only `checked x state x color`. The snippet
+// therefore emits the `medium` default until design bubbles the variant up.
 const attrs = [
 	'label="Label"',
 	color === 'warning' ? 'variant="warning"' : '',

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

@@ -3,7 +3,10 @@
 
 $checkbox-size: 16px;
 $checkbox-border-radius: 2px;
+$checkbox-border-width: 1.5px;
 $checkbox-focus-ring-width: 2px;
+$row-padding-medium: var(--4xs);
+$row-padding-large: var(--xs);
 $transition-duration: 0.2s;
 
 .root {
@@ -11,7 +14,7 @@ $transition-duration: 0.2s;
 	display: inline-flex;
 	align-items: flex-start;
 	gap: var(--3xs);
-	padding: var(--4xs);
+	padding: $row-padding-medium;
 	border-radius: $checkbox-border-radius;
 	cursor: pointer;
 	transition: background-color $transition-duration ease-in-out;
@@ -34,7 +37,7 @@ $transition-duration: 0.2s;
 		flex-shrink: 0;
 		width: $checkbox-size;
 		height: $checkbox-size;
-		border: 1px solid var(--secondary-400);
+		border: $checkbox-border-width solid var(--border-contrast);
 		border-radius: $checkbox-border-radius;
 		background-color: transparent;
 		transition:
@@ -60,7 +63,7 @@ $transition-duration: 0.2s;
 	}
 
 	.label {
-		@include typography.body-sm-reg;
+		@include typography.body-sm-md;
 		line-height: normal;
 		color: var(--font-main);
 	}
@@ -103,24 +106,35 @@ $transition-duration: 0.2s;
 			}
 		}
 	}
-}
 
-// 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: var(--4xs) !important;
-	inset-inline-start: var(--4xs) !important;
-	width: $checkbox-size !important;
-	height: $checkbox-size !important;
-	margin: 0 !important;
-	padding: 0 !important;
-	clip: auto !important;
-	overflow: visible !important;
-	opacity: 0 !important;
-	cursor: inherit !important;
+	// 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. The control is the row's first child, so the offset is the
+	// root's own padding — which is size-dependent.
+	.hiddenInput {
+		position: absolute !important;
+		inset-block-start: $row-padding-medium !important;
+		inset-inline-start: $row-padding-medium !important;
+		width: $checkbox-size !important;
+		height: $checkbox-size !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		clip: auto !important;
+		overflow: visible !important;
+		opacity: 0 !important;
+		cursor: inherit !important;
+	}
+
+	&[data-size='large'] {
+		padding: $row-padding-large;
+
+		.hiddenInput {
+			inset-block-start: $row-padding-large !important;
+			inset-inline-start: $row-padding-large !important;
+		}
+	}
 }
 
 .warning {
@@ -142,3 +156,71 @@ $transition-duration: 0.2s;
 		}
 	}
 }
+
+// Only rendered when `actions` is set, so the plain checkbox keeps its
+// original single-element layout.
+//
+// The row reads as one unit, so the hover surface lives here rather than on
+// `.root`. `.root` is the `<label>`, which ends with the label text — painting
+// there leaves `actions` as a cold gap outside the highlight.
+.wrapper {
+	display: inline-flex;
+	align-items: flex-start;
+	gap: var(--3xs);
+	border-radius: $checkbox-border-radius;
+	transition: background-color $transition-duration ease-in-out;
+
+	// Balances the root's inline padding on the far side of `actions`, so the
+	// highlight is not inset at one end and tight against the pin at the other.
+	padding-inline-end: $row-padding-medium;
+
+	&[data-size='large'] {
+		padding-inline-end: $row-padding-large;
+	}
+
+	&:not([data-disabled]):hover,
+	&:not([data-disabled]):has(.root[data-focus-visible]) {
+		background-color: var(--background-secondary-hover);
+	}
+
+	&[data-variant='warning']:not([data-disabled]):hover,
+	&[data-variant='warning']:not([data-disabled]):has(.root[data-focus-visible]) {
+		background-color: var(--background-warning);
+	}
+
+	&:has(.root[data-focus-visible]) {
+		outline: $checkbox-focus-ring-width solid var(--background-primary-hover);
+		outline-offset: 0;
+	}
+
+	// The wrapper paints the row, so the label half must not paint a second,
+	// narrower highlight or ring inside it.
+	.root {
+		&:hover,
+		&[data-hover],
+		&[data-focus-visible] {
+			background-color: transparent;
+			outline: none;
+		}
+	}
+}
+
+// Matches the height of the root's first row — the control plus the root's
+// block padding — so the slot centres against the control at either size,
+// with or without `labelInfo`.
+//
+// `margin-inline-start: auto` pins the slot to the end of the row whenever the
+// row is wider than its content — a stretched list row, as inside a
+// `DsCheckboxGroup` — matching Figma, where the pin sits at the row's trailing
+// edge rather than hugging the label. It is inert when the row is content-width.
+.actions {
+	display: inline-flex;
+	align-items: center;
+	flex-shrink: 0;
+	margin-inline-start: auto;
+	min-block-size: calc(#{$checkbox-size} + #{$row-padding-medium} * 2);
+
+	&[data-size='large'] {
+		min-block-size: calc(#{$checkbox-size} + #{$row-padding-large} * 2);
+	}
+}

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

@@ -15,19 +15,28 @@ import { DsIcon } from '../ds-icon';
  */
 const DsCheckbox = ({
 	variant = 'default',
+	size = 'medium',
 	label,
 	labelInfo,
+	actions,
 	className,
+	style,
 	onCheckedChange,
 	value,
 	...props
 }: DsCheckboxProps) => {
-	return (
+	// `className` and `style` belong to whichever element is outermost, so they
+	// move to the wrapper when `actions` adds one.
+	const hasActions = Boolean(actions);
+
+	const checkbox = (
 		<Checkbox.Root
-			className={classNames(styles.root, variant === 'warning' && styles.warning, className)}
+			className={classNames(styles.root, variant === 'warning' && styles.warning, !hasActions && className)}
+			style={hasActions ? undefined : style}
 			onCheckedChange={(details) => onCheckedChange?.(details.checked)}
 			{...props}
 			value={value === undefined ? undefined : String(value)}
+			data-size={size}
 		>
 			<Checkbox.Control className={styles.control}>
 				<Checkbox.Indicator className={styles.indicator}>
@@ -46,6 +55,25 @@ const DsCheckbox = ({
 			)}
 		</Checkbox.Root>
 	);
+
+	if (!hasActions) {
+		return checkbox;
+	}
+
+	return (
+		<div
+			className={classNames(styles.wrapper, className)}
+			style={style}
+			data-size={size}
+			data-variant={variant}
+			data-disabled={props.disabled ? '' : undefined}
+		>
+			{checkbox}
+			<div className={styles.actions} data-size={size}>
+				{actions}
+			</div>
+		</div>
+	);
 };
 
 DsCheckbox.displayName = 'DsCheckbox';

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

@@ -4,6 +4,9 @@ import { type Checkbox } from '@ark-ui/react/checkbox';
 export const checkboxVariants = ['default', 'warning'] as const;
 export type CheckboxVariant = (typeof checkboxVariants)[number];
 
+export const checkboxSizes = ['medium', 'large'] as const;
+export type CheckboxSize = (typeof checkboxSizes)[number];
+
 export interface DsCheckboxProps extends Omit<
 	ComponentPropsWithoutRef<typeof Checkbox.Root>,
 	'onCheckedChange' | 'value'
@@ -16,6 +19,7 @@ export interface DsCheckboxProps extends Omit<
 	 * Visual variant of the checkbox
 	 */
 	variant?: CheckboxVariant;
+	size?: CheckboxSize;
 	/**
 	 * Label for the checkbox
 	 */
@@ -24,6 +28,12 @@ export interface DsCheckboxProps extends Omit<
 	 * Additional label info for the checkbox
 	 */
 	labelInfo?: ReactNode;
+	/**
+	 * Trailing slot for interactive content, such as a pin or overflow menu.
+	 * Rendered as a sibling of the checkbox rather than inside it: the checkbox
+	 * root is a `<label>`,
+	 */
+	actions?: ReactNode;
 	/**
 	 * Disables the checkbox, preventing user interaction
 	 */

package/src/components/ds-code-input/collapsed-code-field/collapsed-code-field.module.scss

@@ -0,0 +1,169 @@
+@use '../../../styles/typography' as typography;
+@use '../../../styles/shared/input' as input;
+
+.container {
+	@include input.inputContainer;
+	gap: var(--xs);
+
+	&[data-invalid] {
+		--form-control-border-color: var(--background-error);
+	}
+
+	&.small {
+		height: input.$input-text-height-small;
+		padding-block: var(--none);
+
+		.input,
+		.echo,
+		.input::placeholder {
+			line-height: calc(#{input.$input-text-height-small} - 2px);
+		}
+	}
+
+	&:hover:not([data-disabled]) {
+		border-color: var(--form-control-border-color, var(--background-action-hover));
+	}
+
+	&:focus-within {
+		border-color: var(--form-control-border-color, var(--border-action-primary));
+	}
+}
+
+.field {
+	position: relative;
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+	cursor: text;
+}
+
+.editorSlot {
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+}
+
+.editorSlotHidden {
+	position: absolute;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+}
+
+.editorHost {
+	display: flex;
+	flex: 1;
+	align-self: stretch;
+	min-width: 0;
+	height: 100%;
+}
+
+.echo {
+	@include typography.code-sm-reg;
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: baseline;
+	overflow: hidden;
+	color: var(--font-main);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+.placeholder {
+	color: var(--font-placeholder);
+}
+
+.input {
+	@include input.input;
+	@include typography.code-sm-reg;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	appearance: none;
+	transition: none;
+	white-space: pre;
+	overflow: hidden;
+	resize: none;
+
+	&:focus,
+	&:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	&::placeholder {
+		@include typography.code-sm-reg;
+		color: var(--font-placeholder);
+	}
+
+	&:disabled {
+		color: var(--font-disabled);
+	}
+}
+
+.container[data-disabled] .echo {
+	color: var(--font-disabled);
+}
+
+.fadeStart,
+.fadeEnd {
+	position: absolute;
+	inset-block: 0;
+	width: var(--xl);
+	pointer-events: none;
+}
+
+.fadeStart {
+	inset-inline-start: 0;
+	background: linear-gradient(to right, var(--background), transparent);
+}
+
+.fadeEnd {
+	inset-inline-end: 0;
+	background: linear-gradient(to left, var(--background), transparent);
+}
+
+.ellipsis {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: 0;
+	display: flex;
+	align-items: center;
+	pointer-events: none;
+	color: var(--font-main);
+	background: var(--background);
+
+	&::after {
+		content: '…';
+		@include typography.code-sm-reg;
+	}
+}
+
+.indicator,
+.indicatorButton {
+	@include typography.code-xs-reg;
+	flex: none;
+	color: var(--font-secondary);
+	white-space: nowrap;
+}
+
+.indicatorButton {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--font-main);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--border-action-primary);
+		outline-offset: 2px;
+	}
+}

package/src/components/ds-code-input/collapsed-code-field/collapsed-code-field.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode, type Ref } from 'react';
+import classNames from 'classnames';
+import type { CodeInputSize } from '../ds-code-input.types';
+import type { CollapsedIndicator } from '../use-collapsed-viewport';
+import { DsStack } from '../../ds-stack';
+import styles from './collapsed-code-field.module.scss';
+
+export interface CollapsedCodeFieldProps {
+	size: CodeInputSize;
+	placeholder?: string;
+	disabled: boolean;
+	invalid: boolean;
+	showEcho: boolean;
+	echoText: string;
+	fadeStart: boolean;
+	fadeEnd: boolean;
+	showEllipsis: boolean;
+	indicator: CollapsedIndicator | null;
+	additionalLinesLabel: (count: number) => string;
+	additionalLines: (count: number) => string;
+	linePosition: (current: number, total: number) => string;
+	selectionStatus: (selected: number, total: number) => string;
+	editorSlotRef: Ref<HTMLDivElement>;
+	adornment: ReactNode;
+	className?: string;
+	onExpand: () => void;
+}
+
+const CollapsedCodeField = ({
+	size,
+	placeholder,
+	disabled,
+	invalid,
+	showEcho,
+	echoText,
+	fadeStart,
+	fadeEnd,
+	showEllipsis,
+	indicator,
+	additionalLinesLabel,
+	additionalLines,
+	linePosition,
+	selectionStatus,
+	editorSlotRef,
+	adornment,
+	className,
+	onExpand,
+}: CollapsedCodeFieldProps) => (
+	<div
+		className={classNames(styles.container, styles[size], className)}
+		data-disabled={disabled || undefined}
+		data-invalid={invalid || undefined}
+	>
+		<div className={styles.field}>
+			{/* While expanded, paint a fake line so the overlay can take the real
+			    textarea without the compact row going empty. */}
+			{showEcho && (
+				<div className={classNames(styles.echo, !echoText && styles.placeholder)}>
+					{echoText || placeholder}
+				</div>
+			)}
+			<div
+				ref={editorSlotRef}
+				className={classNames(styles.editorSlot, showEcho && styles.editorSlotHidden)}
+			/>
+			{fadeStart && <div className={styles.fadeStart} aria-hidden />}
+			{fadeEnd && <div className={styles.fadeEnd} aria-hidden />}
+			{showEllipsis && !showEcho && <div className={styles.ellipsis} aria-hidden />}
+		</div>
+		<DsStack direction="row" alignItems="center" flex="none" gap="var(--xs)">
+			{indicator?.kind === 'plusN' && (
+				<button
+					type="button"
+					className={styles.indicatorButton}
+					aria-label={additionalLinesLabel(indicator.count)}
+					onClick={onExpand}
+				>
+					{additionalLines(indicator.count)}
+				</button>
+			)}
+			{indicator?.kind === 'line' && (
+				<span className={styles.indicator}>{linePosition(indicator.current, indicator.total)}</span>
+			)}
+			{indicator?.kind === 'selection' && (
+				<span className={styles.indicator}>{selectionStatus(indicator.selected, indicator.total)}</span>
+			)}
+			{adornment}
+		</DsStack>
+	</div>
+);
+
+export default CollapsedCodeField;

package/src/components/ds-code-input/collapsed-code-field/index.ts

@@ -0,0 +1 @@
+export { default as CollapsedCodeField } from './collapsed-code-field';

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

@@ -0,0 +1,110 @@
+@use '../../../styles/typography' as typography;
+
+$code-surface-max-height: 220px;
+
+// One line of code plus the surface padding, so an empty panel keeps its shape.
+$code-surface-min-height: calc(var(--body-line-height-small) + 2 * var(--standard));
+
+@mixin code-surface-layer {
+	@include typography.code-sm-reg;
+	box-sizing: border-box;
+	margin: 0;
+	padding: var(--standard);
+	border: 0;
+	text-align: left;
+	direction: ltr;
+	tab-size: 2;
+	white-space: pre-wrap;
+	overflow-wrap: break-word;
+	word-break: normal;
+}
+
+.body {
+	display: flex;
+	flex-direction: column;
+}
+
+.searchRow {
+	display: block;
+	order: -1;
+	padding: var(--standard);
+	border-bottom: 1px solid var(--border);
+}
+
+// Scrolling both layers as one element is what keeps the marks glued to the glyphs —
+// neither layer scrolls on its own, so there is nothing to keep in sync.
+.codeScroll {
+	max-height: $code-surface-max-height;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.codeStack {
+	position: relative;
+	min-height: $code-surface-min-height;
+
+	--ds-code-input-match-background: var(--background-warning);
+}
+
+.backdrop {
+	@include code-surface-layer;
+	position: relative;
+	pointer-events: none;
+	user-select: none;
+	color: transparent;
+}
+
+.mark {
+	color: inherit;
+	background: var(--ds-code-input-match-background);
+	border-radius: 2px;
+}
+
+.editorSlot {
+	position: absolute;
+	inset: 0;
+}
+
+.editorHost {
+	position: absolute;
+	inset: 0;
+}
+
+.codeArea {
+	@include code-surface-layer;
+	position: absolute;
+	inset: 0;
+	display: block;
+	width: 100%;
+	overflow: hidden;
+	background: transparent;
+	color: var(--font-main);
+	caret-color: var(--font-main);
+
+	// A user-resized textarea would drift away from the backdrop that sizes it.
+	resize: none;
+	outline: none;
+
+	&::selection {
+		background: var(--form-control-selection-color, var(--background-secondary-hover));
+	}
+
+	&:read-only,
+	&:disabled {
+		color: var(--font-main);
+		opacity: 1;
+		cursor: default;
+	}
+}
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	clip-path: inset(50%);
+}

package/src/components/ds-code-input/ds-code-input-panel/ds-code-input-panel.tsx

@@ -0,0 +1,61 @@
+import { type Ref, Fragment, useEffect, useState } from 'react';
+import { useHighlight } from '@ark-ui/react/highlight';
+import { DsIcon } from '../../ds-icon';
+import { DsTextInput } from '../../ds-text-input';
+import styles from './ds-code-input-panel.module.scss';
+
+export interface DsCodeInputPanelProps {
+	value: string;
+	isOpen: boolean;
+	searchPlaceholder: string;
+	editorSlotRef: Ref<HTMLDivElement>;
+}
+
+const DsCodeInputPanel = ({ value, isOpen, searchPlaceholder, editorSlotRef }: DsCodeInputPanelProps) => {
+	const [query, setQuery] = useState('');
+
+	useEffect(() => {
+		if (!isOpen) {
+			setQuery('');
+		}
+	}, [isOpen]);
+
+	const chunks = useHighlight({ text: value, query, ignoreCase: true, matchAll: true });
+
+	return (
+		<div className={styles.body}>
+			<div className={styles.codeScroll}>
+				<div className={styles.codeStack}>
+					{isOpen && (
+						<div className={styles.backdrop} aria-hidden="true">
+							{chunks.map((chunk, index) =>
+								chunk.match ? (
+									<mark key={index} className={styles.mark}>
+										{chunk.text}
+									</mark>
+								) : (
+									<Fragment key={index}>{chunk.text}</Fragment>
+								),
+							)}
+							{'\n'}
+						</div>
+					)}
+					<div ref={editorSlotRef} className={styles.editorSlot} />
+				</div>
+			</div>
+			{isOpen && (
+				<label className={styles.searchRow}>
+					<span className={styles.visuallyHidden}>{searchPlaceholder}</span>
+					<DsTextInput
+						value={query}
+						placeholder={searchPlaceholder}
+						onValueChange={setQuery}
+						slots={{ startAdornment: <DsIcon icon="search" size="tiny" aria-hidden /> }}
+					/>
+				</label>
+			)}
+		</div>
+	);
+};
+
+export default DsCodeInputPanel;

package/src/components/ds-code-input/ds-code-input-panel/index.ts

@@ -0,0 +1 @@
+export { default as DsCodeInputPanel } from './ds-code-input-panel';