@drivenets/design-system 0.13.0 → 0.15.0

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

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34877-158343
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Body
+//
+// `DAP_modal-content_v02` maps to `DsModal.Body`. Its freeform `Modal content slot`
+// becomes the body children.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const content = instance.getSlot('Modal content slot');
+
+export default {
+	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-content',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32014-16402
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Footer
+//
+// `DAP_modal-footer_v02` maps to `DsModal.Footer` > `DsModal.Actions`. The
+// `right side buttons` slot resolves its `DAP_Button_v03` instances via the
+// existing `ds-button-v3` Code Connect.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const rightButtons = instance.getSlot('right side buttons');
+
+export default {
+	example: figma.code`<DsModal.Footer><DsModal.Actions>${rightButtons}</DsModal.Actions></DsModal.Footer>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-footer',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32030-12809
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal.Header
+//
+// `DAP_modal-header_v02` maps to the composed `DsModal.Header` (title + close
+// trigger). The `Type=drill-down` variant (back breadcrumb) and the optional
+// booleans (status badge, description, tags, etc.) have no code-component prop and
+// are omitted.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const titleNode = instance.findText('Left side', { traverseInstances: true });
+const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Modal title';
+
+export default {
+	example: figma.code`<DsModal.Header><DsModal.Title>${title}</DsModal.Title><DsModal.CloseTrigger /></DsModal.Header>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal-header',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34877-158966
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-modal
+// component=DsModal
+//
+// `DAP_modal_v02` is the full modal. It composes the header, content, and footer
+// parts, each of which has its own Code Connect template; resolve them dynamically
+// so swapped variants stay in sync. The `Type` variant (confirmation/form) has no
+// `DsModal` prop equivalent — both render the same composition.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const header = instance.findInstance('DAP_modal-header_v02', { traverseInstances: true });
+let headerCode: figma.ResultSection[] | undefined;
+if (header.type === 'INSTANCE') {
+	headerCode = header.executeTemplate().example;
+}
+
+const content = instance.findInstance('DAP_modal-content_v02', { traverseInstances: true });
+let contentCode: figma.ResultSection[] | undefined;
+if (content.type === 'INSTANCE') {
+	contentCode = content.executeTemplate().example;
+}
+
+const footer = instance.findInstance('DAP_modal-footer_v02', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
+	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	id: 'ds-modal',
+	metadata: { nestable: false },
+};

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

@@ -1,23 +1,65 @@
-@use '../../styles/typography';
+.panel {
+	z-index: 1000;
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	border-radius: var(--3xs);
+	// Figma "Elevation 1" — only the alpha is tokenized; offset/blur stay component-scoped.
+	box-shadow: 0 5px 15px 0 var(--shadow-moderate);
+	outline: 0;
+	transform-origin: var(--transform-origin);
+
+	// `display: flex` above outranks the UA `[hidden]` rule, so the closed panel
+	// would stay on screen. Re-assert `display: none` for Ark's hidden state.
+	&[hidden] {
+		display: none;
+	}
+
+	&[data-state='open'] {
+		animation: ds-popover-in 0.2s ease;
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm) var(--lg);
+	border-bottom: 1px solid var(--border);
+}
+
+.headerIcon {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.title {
+	// Typography (heading3) + color come from the DsTypography it composes onto.
+	margin: 0;
+}
 
 .content {
-	width: max-content;
-	// approx. 2 columns (64 * 2)
-	min-width: 128px;
-	// approx. 6 columns (64 * 6)
-	max-width: 384px;
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
-	box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);
-	border-radius: 2px;
-	background: var(--color-dap-gray-050);
-	padding: 12px;
+	gap: var(--xs);
+	padding: var(--standard) var(--lg);
 }
 
-.arrow {
-	fill: var(--color-dap-gray-050);
-	filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.1));
-	width: 18px;
-	height: 10px;
+.footer {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm) var(--lg);
+}
+
+@keyframes ds-popover-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }

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

@@ -1,33 +1,157 @@
-import type React from 'react';
-import * as Popover from '@radix-ui/react-popover';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
+import { DsStack } from '../ds-stack';
+import { DsTypography } from '../ds-typography';
 import styles from './ds-popover.module.scss';
-import type { DsPopoverProps } from './ds-popover.types';
+import type {
+	DsPopoverAlign,
+	DsPopoverContentItemProps,
+	DsPopoverContentProps,
+	DsPopoverFooterProps,
+	DsPopoverHeaderProps,
+	DsPopoverPanelProps,
+	DsPopoverProps,
+	DsPopoverRootProps,
+	DsPopoverSide,
+	DsPopoverTriggerProps,
+} from './ds-popover.types';
 
-const DsPopover: React.FC<DsPopoverProps> = ({
-	trigger,
+const DEFAULT_PANEL_WIDTH = 400;
+
+export const toPlacement = (side: DsPopoverSide, align: DsPopoverAlign) =>
+	align === 'center' ? side : (`${side}-${align}` as const);
+
+const DsPopoverRoot = ({
+	open,
+	defaultOpen,
+	side = 'bottom',
+	align = 'center',
+	gutter = 8,
+	modal = false,
 	children,
+	onOpenChange,
+}: DsPopoverRootProps) => (
+	<Popover.Root
+		open={open}
+		defaultOpen={defaultOpen}
+		modal={modal}
+		positioning={{ placement: toPlacement(side, align), gutter }}
+		onOpenChange={(details) => onOpenChange?.(details.open)}
+	>
+		{children}
+	</Popover.Root>
+);
+
+const DsPopoverTrigger = ({ children, className }: DsPopoverTriggerProps) => (
+	<Popover.Trigger asChild className={className}>
+		{children}
+	</Popover.Trigger>
+);
+
+const DsPopoverPanel = ({
+	width = DEFAULT_PANEL_WIDTH,
 	className,
-	align = 'center',
-	side = 'top',
-}) => {
+	style,
+	children,
+	ref,
+	'aria-label': ariaLabel,
+}: DsPopoverPanelProps) => (
+	<Portal>
+		<Popover.Positioner>
+			<Popover.Content
+				ref={ref}
+				aria-label={ariaLabel}
+				className={classNames(styles.panel, className)}
+				style={{ ...style, width }}
+			>
+				{children}
+			</Popover.Content>
+		</Popover.Positioner>
+	</Portal>
+);
+
+const DsPopoverHeader = ({ icon, className, style, children }: DsPopoverHeaderProps) => (
+	<div className={classNames(styles.header, className)} style={style}>
+		{icon && <span className={styles.headerIcon}>{icon}</span>}
+		<Popover.Title className={styles.title} asChild>
+			<DsTypography variant="heading3" color="main">
+				{children}
+			</DsTypography>
+		</Popover.Title>
+	</div>
+);
+
+const DsPopoverContent = ({ className, style, children }: DsPopoverContentProps) => (
+	<div className={classNames(styles.content, className)} style={style}>
+		{children}
+	</div>
+);
+
+const DsPopoverContentItem = ({
+	status,
+	headline,
+	className,
+	style,
+	children,
+}: DsPopoverContentItemProps) => {
+	const hasHeader = Boolean(status) || Boolean(headline);
+
 	return (
-		<Popover.Root>
-			<Popover.Trigger asChild>{trigger}</Popover.Trigger>
-			<Popover.Portal>
-				<Popover.Content
-					side={side}
-					align={align}
-					sideOffset={8}
-					collisionPadding={16}
-					className={classNames(styles.content, className)}
-				>
-					{children}
-					<Popover.Arrow className={styles.arrow} />
-				</Popover.Content>
-			</Popover.Portal>
-		</Popover.Root>
+		<DsStack direction="column" gap="var(--xs)" className={className} style={style}>
+			{hasHeader && (
+				<DsStack direction="row" alignItems="center" gap="var(--xs)">
+					{status}
+					{headline && (
+						<DsTypography variant="body-sm-semi-bold" color="main">
+							{headline}
+						</DsTypography>
+					)}
+				</DsStack>
+			)}
+			{children && (
+				<DsTypography variant="body-sm-reg" color="main" asChild>
+					<DsStack direction="row" alignItems="center" gap="var(--xs)">
+						{children}
+					</DsStack>
+				</DsTypography>
+			)}
+		</DsStack>
 	);
 };
 
-export default DsPopover;
+const DsPopoverFooter = ({ className, style, children }: DsPopoverFooterProps) => (
+	<div className={classNames(styles.footer, className)} style={style}>
+		{children}
+	</div>
+);
+
+/**
+ * Legacy single-element form. Keeps the old call signature and `side` default
+ * ('top') compiling and opening, but now renders the new fixed-width panel —
+ * styling differs from the old Radix popover and the Radix `Popover.Close`
+ * context is no longer wired.
+ * @deprecated Migrate to the compound API (`DsPopover.Root` / `.Trigger` / `.Panel`).
+ */
+const DsPopoverLegacy = ({
+	trigger,
+	children,
+	className,
+	side = 'top',
+	align = 'center',
+}: DsPopoverProps) => (
+	<DsPopoverRoot side={side} align={align}>
+		<DsPopoverTrigger>{trigger}</DsPopoverTrigger>
+		<DsPopoverPanel className={className}>{children}</DsPopoverPanel>
+	</DsPopoverRoot>
+);
+
+export const DsPopover = Object.assign(DsPopoverLegacy, {
+	Root: DsPopoverRoot,
+	Trigger: DsPopoverTrigger,
+	Panel: DsPopoverPanel,
+	Header: DsPopoverHeader,
+	Content: DsPopoverContent,
+	ContentItem: DsPopoverContentItem,
+	Footer: DsPopoverFooter,
+});

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

@@ -1,24 +1,107 @@
-import type React from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
 
-export interface DsPopoverProps {
+export const popoverSides = ['top', 'right', 'bottom', 'left'] as const;
+export type DsPopoverSide = (typeof popoverSides)[number];
+
+export const popoverAligns = ['start', 'center', 'end'] as const;
+export type DsPopoverAlign = (typeof popoverAligns)[number];
+
+export interface DsPopoverRootProps {
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state when uncontrolled. */
+	defaultOpen?: boolean;
 	/**
-	 * The element that triggers the popover
+	 * Preferred side of the trigger to render the panel against.
+	 * @default 'bottom'
 	 */
-	trigger: React.ReactNode;
+	side?: DsPopoverSide;
 	/**
-	 * The content to be rendered inside the popover
+	 * Alignment of the panel along the trigger edge.
+	 * @default 'center'
 	 */
-	children: React.ReactNode;
+	align?: DsPopoverAlign;
 	/**
-	 * Additional CSS class names
+	 * Gap in pixels between the trigger and the panel.
+	 * @default 8
 	 */
-	className?: string;
+	gutter?: number;
 	/**
-	 * The alignment of the popover content
+	 * Trap focus and block interaction with elements outside the panel.
+	 * @default false
 	 */
-	align?: 'start' | 'center' | 'end';
+	modal?: boolean;
+	children: ReactNode;
+	/** Fires when the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+}
+
+export interface DsPopoverTriggerProps {
+	/** Single focusable element that toggles the popover. */
+	children: ReactNode;
+	className?: string;
+}
+
+export interface DsPopoverPanelProps {
 	/**
-	 * The position of the popover relative to the trigger element
+	 * Panel width in pixels.
+	 * @default 400
 	 */
-	side?: 'top' | 'right' | 'bottom' | 'left';
+	width?: number;
+	className?: string;
+	style?: CSSProperties;
+	children: ReactNode;
+	ref?: Ref<HTMLDivElement>;
+	'aria-label'?: string;
+}
+
+export interface DsPopoverHeaderProps {
+	/** Leading visual (e.g. a colored task-type icon) rendered before the title. */
+	icon?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+	/** Title content, exposed as the popover's accessible name. */
+	children: ReactNode;
+}
+
+export interface DsPopoverContentProps {
+	className?: string;
+	style?: CSSProperties;
+	/** Ordered `DsPopover.ContentItem` children. Compose `DsDivider` between them for visual separation. */
+	children: ReactNode;
+}
+
+export interface DsPopoverContentItemProps {
+	/** Status badge shown in the item's header row. */
+	status?: ReactNode;
+	/** Bold headline text shown in the item's header row. */
+	headline?: ReactNode;
+	className?: string;
+	style?: CSSProperties;
+	/** Item body — text, avatar rows, icons, images, etc. */
+	children?: ReactNode;
+}
+
+export interface DsPopoverFooterProps {
+	className?: string;
+	style?: CSSProperties;
+	/** Footer actions, typically a single secondary CTA button. */
+	children: ReactNode;
+}
+
+/**
+ * Props for the legacy single-element call form (`<DsPopover trigger=… />`).
+ * @deprecated Use the compound API: `DsPopover.Root` + `DsPopover.Trigger` + `DsPopover.Panel`.
+ */
+export interface DsPopoverProps {
+	/** Element that toggles the popover. */
+	trigger: ReactNode;
+	/** Panel content. */
+	children: ReactNode;
+	/** Forwarded to the panel. */
+	className?: string;
+	/** @default 'center' */
+	align?: DsPopoverAlign;
+	/** @default 'top' */
+	side?: DsPopoverSide;
 }

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

@@ -1,2 +1,2 @@
-export { default as DsPopover } from './ds-popover';
+export { DsPopover } from './ds-popover';
 export * from './ds-popover.types';

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,122 @@
+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>
+	);
+};
+
+export default DsProgressTaskBar;