@drivenets/design-system 0.14.0 → 0.16.0

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

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14836-15179
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-loader
+// component=DsLoader
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsLoader />`,
+	imports: ["import { DsLoader } from '@drivenets/design-system'"],
+	id: 'ds-loader',
+	metadata: { nestable: true },
+};

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

@@ -15,4 +15,6 @@ const DsLoader = ({ variant = 'spinner', className, ...props }: DsLoaderProps) =
 	);
 };
 
+DsLoader.displayName = 'DsLoader';
+
 export default DsLoader;

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

@@ -138,6 +138,13 @@ const Actions = ({
 	</div>
 );
 
+Header.displayName = 'DsModal.Header';
+Title.displayName = 'DsModal.Title';
+CloseTrigger.displayName = 'DsModal.CloseTrigger';
+Body.displayName = 'DsModal.Body';
+Footer.displayName = 'DsModal.Footer';
+Actions.displayName = 'DsModal.Actions';
+
 DsModal.Header = Header;
 DsModal.Title = Title;
 DsModal.CloseTrigger = CloseTrigger;
@@ -145,4 +152,6 @@ DsModal.Body = Body;
 DsModal.Footer = Footer;
 DsModal.Actions = Actions;
 
+DsModal.displayName = 'DsModal';
+
 export default DsModal;

package/src/components/ds-number-input/ds-number-input.tsx

@@ -71,4 +71,6 @@ const DsNumberInput: FC<DsNumberInputProps> = ({
 	);
 };
 
+DsNumberInput.displayName = 'DsNumberInput';
+
 export default DsNumberInput;

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

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15978-26200
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-panel
+// component=DsPanel
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const open = instance.getEnum('type', { expanded: true, collapsed: false });
+const openAttr = open ? 'open' : 'open={false}';
+
+export default {
+	example: figma.code`<DsPanel ${openAttr}>{/* panel content */}</DsPanel>`,
+	imports: ["import { DsPanel } from '@drivenets/design-system'"],
+	id: 'ds-panel',
+	metadata: { nestable: false },
+};

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

@@ -3,3 +3,5 @@ import { DsPanelBase } from './ds-panel';
 
 export const DsPanel = withResponsiveProps(DsPanelBase, ['width']);
 export type { DsPanelProps, DsPanelVariant, DsPanelCollapseButtonProps } from './ds-panel.types';
+
+DsPanel.displayName = 'DsPanel';

package/src/components/ds-password-input/ds-password-input.tsx

@@ -64,4 +64,6 @@ const DsPasswordInput: FC<DsPasswordInputProps> = ({
 	);
 };
 
+DsPasswordInput.displayName = 'DsPasswordInput';
+
 export default DsPasswordInput;

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

@@ -146,6 +146,15 @@ const DsPopoverLegacy = ({
 	</DsPopoverRoot>
 );
 
+DsPopoverLegacy.displayName = 'DsPopover';
+DsPopoverRoot.displayName = 'DsPopover.Root';
+DsPopoverTrigger.displayName = 'DsPopover.Trigger';
+DsPopoverPanel.displayName = 'DsPopover.Panel';
+DsPopoverHeader.displayName = 'DsPopover.Header';
+DsPopoverContent.displayName = 'DsPopover.Content';
+DsPopoverContentItem.displayName = 'DsPopover.ContentItem';
+DsPopoverFooter.displayName = 'DsPopover.Footer';
+
 export const DsPopover = Object.assign(DsPopoverLegacy, {
 	Root: DsPopoverRoot,
 	Trigger: DsPopoverTrigger,

package/src/components/ds-popover/figma/ds-popover-content-item.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84870
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.ContentItem
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const headlineNode = instance.findText('Content-item-headline', { traverseInstances: true });
+const headlineAttr = headlineNode.type === 'TEXT' ? ` headline="${headlineNode.textContent}"` : '';
+
+const body = instance.getSlot('Slot');
+
+export default {
+	example: figma.code`<DsPopover.ContentItem${headlineAttr}>${body}</DsPopover.ContentItem>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-content-item',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-content.figma.ts

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84883
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Content
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const items = instance.getSlot('Slot');
+
+export default {
+	example: figma.code`<DsPopover.Content>${items}</DsPopover.Content>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-content',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-footer.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84845
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Footer
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const button = instance.findInstance('DAP_Button_v03', { traverseInstances: true });
+let buttonCode: figma.ResultSection[] | undefined;
+if (button.type === 'INSTANCE') {
+	buttonCode = button.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsPopover.Footer>${buttonCode}</DsPopover.Footer>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-footer',
+	metadata: { nestable: true },
+};

package/src/components/ds-popover/figma/ds-popover-header.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-11066
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover.Header
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('Title', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Popover title';
+
+export default {
+	example: figma.code`<DsPopover.Header>${title}</DsPopover.Header>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover-header',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=37891-84942
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-popover
+// component=DsPopover
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_popover-header_v01', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_popover-content_v01', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+const footer = instance.findInstance('DAP_popover-footer_v01', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsPopover.Root>
+	<DsPopover.Trigger>{/* trigger element */}</DsPopover.Trigger>
+	<DsPopover.Panel>${headerCode}${contentCode}${footerCode}</DsPopover.Panel>
+</DsPopover.Root>`,
+	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	id: 'ds-popover',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-arc/ds-progress-arc.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-8747
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-arc
+// component=DsProgressArc
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	small: 'small',
+	medium: 'medium',
+});
+const variant = instance.getEnum('State', {
+	fill: 'default',
+	success: 'success',
+	error: 'error',
+});
+
+export default {
+	example: figma.code`<DsProgressArc variant="${variant}" size="${size}" value={0} />`,
+	imports: ["import { DsProgressArc } from '@drivenets/design-system'"],
+	id: 'ds-progress-arc',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-arc/ds-progress-arc.tsx

@@ -108,4 +108,6 @@ const DsProgressArc = ({
 	);
 };
 
+DsProgressArc.displayName = 'DsProgressArc';
+
 export default DsProgressArc;

package/src/components/ds-progress-donut/ds-progress-donut.figma.ts

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-8570
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-donut
+// component=DsProgressDonut
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	small: 'small',
+	medium: 'medium',
+});
+const variant = instance.getEnum('Status', {
+	'fill 10%': 'default',
+	'fill 20%': 'default',
+	'fill 30%': 'default',
+	'fill 40%': 'default',
+	'fill 50%': 'default',
+	'fill 60%': 'default',
+	'fill 70%': 'default',
+	'fill 80%': 'default',
+	'fill 90%': 'default',
+	Success: 'success',
+	success: 'success',
+	error: 'error',
+	failed: 'error',
+});
+const value = instance.getEnum('Status', {
+	'fill 10%': 10,
+	'fill 20%': 20,
+	'fill 30%': 30,
+	'fill 40%': 40,
+	'fill 50%': 50,
+	'fill 60%': 60,
+	'fill 70%': 70,
+	'fill 80%': 80,
+	'fill 90%': 90,
+});
+const valueProp = typeof value === 'number' ? ` value={${String(value)}}` : '';
+
+export default {
+	example: figma.code`<DsProgressDonut variant="${variant}" size="${size}"${valueProp} />`,
+	imports: ["import { DsProgressDonut } from '@drivenets/design-system'"],
+	id: 'ds-progress-donut',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-donut/ds-progress-donut.tsx

@@ -80,4 +80,6 @@ const DsProgressDonut = ({
 	);
 };
 
+DsProgressDonut.displayName = 'DsProgressDonut';
+
 export default DsProgressDonut;

package/src/components/ds-progress-linear/ds-progress-linear.figma.ts

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15179-12155
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-linear
+// component=DsProgressLinear
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	Small: 'small',
+	Medium: 'medium',
+	Large: 'large',
+});
+const variant = instance.getEnum('Type', {
+	initial: 'initial',
+	progress: 'progress',
+	interrupted: 'interrupted',
+	success: 'success',
+	error: 'error',
+});
+
+export default {
+	example: figma.code`<DsProgressLinear variant="${variant}" size="${size}" value={0} />`,
+	imports: ["import { DsProgressLinear } from '@drivenets/design-system'"],
+	id: 'ds-progress-linear',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-linear/ds-progress-linear.tsx

@@ -104,4 +104,6 @@ const DsProgressLinear = ({
 	);
 };
 
+DsProgressLinear.displayName = 'DsProgressLinear';
+
 export default DsProgressLinear;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36987-43620
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-progress-task-bar
+// component=DsProgressTaskBar
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Boolean property names are case-sensitive: `Running` / `Failed` are capitalized.
+const zero = instance.getBoolean('zero');
+const completed = instance.getBoolean('completed');
+const running = instance.getBoolean('Running');
+const failed = instance.getBoolean('Failed');
+
+// Booleans only toggle a status on/off, so emit a representative count per status.
+const attrs = [
+	completed ? 'completed={300}' : '',
+	running ? 'running={100}' : '',
+	failed ? 'failed={100}' : '',
+	'total={1000}',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: zero ? figma.code`<DsProgressTaskBar total={999} />` : figma.code`<DsProgressTaskBar ${attrs} />`,
+	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system'"],
+	id: 'ds-progress-task-bar',
+	metadata: { nestable: false },
+};

package/src/components/ds-progress-task-bar/ds-progress-task-bar.module.scss

@@ -0,0 +1,39 @@
+$bar-height: 8px;
+$segment-min-width: 4px;
+
+.statusIcon {
+	display: inline-flex;
+}
+
+.total {
+	flex-shrink: 0;
+}
+
+.bar {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: $bar-height;
+	overflow: hidden;
+	background-color: var(--background-action-secondary-hover);
+	border-radius: var(--3xs);
+}
+
+.segment {
+	flex: none;
+	min-width: $segment-min-width;
+	height: 100%;
+	transition: width 0.2s ease;
+}
+
+.segmentCompleted {
+	background-color: var(--background-success-medium);
+}
+
+.segmentRunning {
+	background-color: var(--background-light-primary);
+}
+
+.segmentFailed {
+	background-color: var(--background-error);
+}

package/src/components/ds-progress-task-bar/ds-progress-task-bar.tsx

@@ -0,0 +1,124 @@
+import classNames from 'classnames';
+
+import { DsIcon, type IconColor, type IconName } from '../ds-icon';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography, type TypographyColor } from '../ds-typography';
+
+import styles from './ds-progress-task-bar.module.scss';
+import {
+	type DsProgressTaskBarLocale,
+	type DsProgressTaskBarProps,
+	type TaskBarStatus,
+	taskBarStatuses,
+} from './ds-progress-task-bar.types';
+import { formatCount } from './utils';
+
+const statusIcon: Record<TaskBarStatus, IconName> = Object.freeze({
+	completed: 'check_circle',
+	running: 'play_circle',
+	failed: 'cancel',
+});
+
+const statusIconColor: Record<TaskBarStatus, IconColor> = Object.freeze({
+	completed: 'success',
+	running: 'action',
+	failed: 'error',
+});
+
+const statusTextColor: Record<TaskBarStatus, TypographyColor> = Object.freeze({
+	completed: 'success',
+	running: 'action',
+	failed: 'error',
+});
+
+const statusSegmentClass: Record<TaskBarStatus, string> = Object.freeze({
+	completed: styles.segmentCompleted,
+	running: styles.segmentRunning,
+	failed: styles.segmentFailed,
+});
+
+const defaultLocale: Required<DsProgressTaskBarLocale> = Object.freeze({
+	completed: 'Completed',
+	running: 'Running',
+	failed: 'Failed',
+	total: (total: string) => `of ${total}`,
+});
+
+const DsProgressTaskBar = ({
+	completed = 0,
+	running = 0,
+	failed = 0,
+	total,
+	locale,
+	className,
+	style,
+	ref,
+}: DsProgressTaskBarProps) => {
+	const counts: Record<TaskBarStatus, number> = {
+		completed: Math.max(0, completed),
+		running: Math.max(0, running),
+		failed: Math.max(0, failed),
+	};
+
+	const sum = counts.completed + counts.running + counts.failed;
+	const denominator = Math.max(total ?? sum, sum);
+
+	const mergedLocale = { ...defaultLocale, ...locale };
+	const activeStatuses = taskBarStatuses.filter((status) => counts[status] > 0);
+
+	const segmentWidth = (status: TaskBarStatus) =>
+		denominator > 0 ? `${String((counts[status] / denominator) * 100)}%` : '0%';
+
+	return (
+		<DsStack ref={ref} direction="column" gap="var(--xs)" width="100%" className={className} style={style}>
+			<DsStack direction="row" alignItems="center" justifyContent="space-between">
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)">
+					{activeStatuses.length === 0 ? (
+						<DsTypography variant="body-xs-reg" color="secondary">
+							0
+						</DsTypography>
+					) : (
+						activeStatuses.map((status) => (
+							<DsStack key={status} direction="row" alignItems="center" gap="var(--4xs)">
+								<DsTooltip content={mergedLocale[status]}>
+									<span className={styles.statusIcon}>
+										<DsIcon icon={statusIcon[status]} size="tiny" color={statusIconColor[status]} filled />
+									</span>
+								</DsTooltip>
+								<DsTypography variant="body-xs-reg" color={statusTextColor[status]}>
+									{formatCount(counts[status])}
+								</DsTypography>
+							</DsStack>
+						))
+					)}
+				</DsStack>
+
+				<DsTypography variant="body-xs-reg" color="secondary" className={styles.total}>
+					{mergedLocale.total(formatCount(denominator))}
+				</DsTypography>
+			</DsStack>
+
+			<div
+				className={styles.bar}
+				role="progressbar"
+				aria-valuemin={0}
+				aria-valuemax={denominator}
+				aria-valuenow={sum}
+			>
+				{activeStatuses.map((status) => (
+					<DsTooltip key={status} content={mergedLocale[status]}>
+						<span
+							className={classNames(styles.segment, statusSegmentClass[status])}
+							style={{ width: segmentWidth(status) }}
+						/>
+					</DsTooltip>
+				))}
+			</div>
+		</DsStack>
+	);
+};
+
+DsProgressTaskBar.displayName = 'DsProgressTaskBar';
+
+export default DsProgressTaskBar;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.types.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties, Ref } from 'react';
+
+export const taskBarStatuses = ['completed', 'running', 'failed'] as const;
+export type TaskBarStatus = (typeof taskBarStatuses)[number];
+
+export interface DsProgressTaskBarLocale {
+	/** @default 'Completed' */
+	completed?: string;
+	/** @default 'Running' */
+	running?: string;
+	/** @default 'Failed' */
+	failed?: string;
+	/**
+	 * Builds the trailing total label from the already-formatted total value.
+	 * @default (total) => `of ${total}`
+	 */
+	total?: (total: string) => string;
+}
+
+export interface DsProgressTaskBarProps {
+	/**
+	 * Number of completed tasks.
+	 * @default 0
+	 */
+	completed?: number;
+
+	/**
+	 * Number of running tasks.
+	 * @default 0
+	 */
+	running?: number;
+
+	/**
+	 * Number of failed tasks.
+	 * @default 0
+	 */
+	failed?: number;
+
+	/**
+	 * Total task count used as the denominator for segment widths and shown as
+	 * the trailing "of {total}" label. Defaults to the sum of the status counts
+	 * (fully filled bar).
+	 */
+	total?: number;
+
+	/**
+	 * Localized strings (status tooltips and total label).
+	 */
+	locale?: DsProgressTaskBarLocale;
+
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+
+	/**
+	 * Ref to the root element
+	 */
+	ref?: Ref<HTMLDivElement>;
+}

package/src/components/ds-progress-task-bar/index.ts

@@ -0,0 +1,2 @@
+export { default as DsProgressTaskBar } from './ds-progress-task-bar';
+export * from './ds-progress-task-bar.types';

package/src/components/ds-progress-task-bar/utils.ts

@@ -0,0 +1,51 @@
+interface CountUnit {
+	value: number;
+	suffix: string;
+}
+
+const COUNT_UNITS: readonly CountUnit[] = [
+	{ value: 1_000_000_000, suffix: 'B' },
+	{ value: 1_000_000, suffix: 'M' },
+	{ value: 1_000, suffix: 'K' },
+];
+
+// Counts below this are shown verbatim; at or above it they are abbreviated.
+const ABBREVIATION_FLOOR = 1_000;
+
+// Below this multiple of a unit, show one decimal place (e.g. 1.1K); at or
+// above it, show a whole number (e.g. 87K).
+const DECIMAL_THRESHOLD = 10;
+
+const stripTrailingZero = (value: number): string => (value % 1 === 0 ? String(value) : value.toFixed(1));
+
+/**
+ * Format a task count for the legend, following the design's abbreviation rules:
+ * - `< 1000` → exact number (e.g. `999`)
+ * - single-digit unit → one decimal (e.g. `1.1K`, `1.2M`)
+ * - multi-digit unit → whole number, truncated so `999,999 → 999K`
+ */
+export const formatCount = (count: number): string => {
+	if (!Number.isFinite(count)) {
+		return '0';
+	}
+
+	const rounded = Math.max(0, Math.round(count));
+
+	if (rounded < ABBREVIATION_FLOOR) {
+		return String(rounded);
+	}
+
+	const unit = COUNT_UNITS.find(({ value }) => rounded >= value);
+
+	if (unit === undefined) {
+		return String(rounded);
+	}
+
+	const scaled = rounded / unit.value;
+
+	if (scaled < DECIMAL_THRESHOLD) {
+		return `${stripTrailingZero(Math.round(scaled * 10) / 10)}${unit.suffix}`;
+	}
+
+	return `${String(Math.floor(scaled))}${unit.suffix}`;
+};

package/src/components/ds-radio-group/ds-radio-group.tsx

@@ -122,3 +122,6 @@ export const DsRadioGroup = {
 	Root,
 	Item,
 };
+DsRadioGroup.Root.displayName = 'DsRadioGroup.Root';
+DsRadioGroup.Item.displayName = 'DsRadioGroup.Item';
+DsRadioGroupLegacy.displayName = 'DsRadioGroupLegacy';