@drivenets/design-system 0.15.0 → 0.17.0

package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=35301-70996
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-dropdown-menu
+// component=DsDropdownMenu
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const items = instance.getSlot('.partsDropdownList');
+
+const footer = instance.findInstance('DAP_dropdown-footer_v01', { traverseInstances: true });
+let footerCode: figma.ResultSection[] | undefined;
+if (footer.type === 'INSTANCE') {
+	footerCode = footer.executeTemplate().example;
+}
+
+export default {
+	example: figma.code`<DsDropdownMenu.Root>
+	<DsDropdownMenu.Trigger>{/* trigger element */}</DsDropdownMenu.Trigger>
+	<DsDropdownMenu.Content>${items}${footerCode}</DsDropdownMenu.Content>
+</DsDropdownMenu.Root>`,
+	imports: ["import { DsDropdownMenu } from '@drivenets/design-system';"],
+	id: 'ds-dropdown-menu',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-expandable-text-input/ds-expandable-text-input.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=17353-7836
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-expandable-text-input
+// component=DsExpandableTextInput
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('Type', {
+	Persistent: 'persistent',
+	Expandable: 'expandable',
+});
+
+const isExpandable = type !== 'persistent';
+
+const component = isExpandable ? 'DsExpandableTextInput' : 'DsAutocomplete';
+
+export default {
+	example: isExpandable
+		? figma.code`<DsExpandableTextInput icon="search" />`
+		: figma.code`<DsAutocomplete options={[]} showTrigger={false} />`,
+	imports: [`import { ${component} } from '@drivenets/design-system';`],
+	id: 'ds-expandable-text-input',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx

@@ -112,3 +112,4 @@ export function DsExpandableTextInput({
 function InputExpander({ children }: { children: ReactNode }) {
 	return <div className={styles.inputExpander}>{children}</div>;
 }
+DsExpandableTextInput.displayName = 'DsExpandableTextInput';

package/src/components/ds-file-upload/components/file-upload-item/index.ts

@@ -1,2 +1 @@
 export { FileUploadItem } from './file-upload-item';
-export type { FileUploadItemProps } from './file-upload-item.types';

package/src/components/ds-file-upload/ds-file-upload.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15128-184303
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-file-upload
+// component=DsFileUpload
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Error: 'error',
+	Disabled: 'disabled',
+	Focus: 'focus',
+	'Drop Hover': 'dropHover',
+});
+
+const attrs = [
+	'adapter={adapter}',
+	state === 'disabled' ? 'disabled' : '',
+	state === 'error' ? 'errorText="Upload failed"' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsFileUpload ${attrs} />`,
+	imports: ["import { DsFileUpload } from '@drivenets/design-system';"],
+	id: 'ds-file-upload',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-file-upload/ds-file-upload.tsx

@@ -43,4 +43,6 @@ const DsFileUpload: React.FC<DsFileUploadProps> = ({
 	return <FileUpload {...fileUploadProps} {...props} />;
 };
 
+DsFileUpload.displayName = 'DsFileUpload';
+
 export default DsFileUpload;

package/src/components/ds-filter-status-icon/ds-filter-status-icon.figma.ts

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=27983-34074
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-filter-status-icon
+// component=DsFilterStatusIcon
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const status = instance.getEnum('type', {
+	running: 'running',
+	warning: 'warning',
+	failed: 'failed',
+	paused: 'paused',
+});
+const active = instance.getEnum('state', { active: true, 'non-active': false });
+const activeProp = active ? '' : ' active={false}';
+
+export default {
+	example: figma.code`<DsFilterStatusIcon status="${status}"${activeProp} />`,
+	imports: ["import { DsFilterStatusIcon } from '@drivenets/design-system';"],
+	id: 'ds-filter-status-icon',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-filter-status-icon/ds-filter-status-icon.tsx

@@ -33,3 +33,4 @@ export const DsFilterStatusIcon = ({
 		/>
 	);
 };
+DsFilterStatusIcon.displayName = 'DsFilterStatusIcon';

package/src/components/ds-form-control/ds-form-control.figma.ts

@@ -70,7 +70,7 @@ const formControlAttrs = [labelAttr, requiredAttr, hideLabelAttr, statusAttr, me
 
 export default {
 	example: figma.code`<DsFormControl ${formControlAttrs}>${description}${child}</DsFormControl>`,
-	imports: ["import { DsFormControl } from '@drivenets/design-system'"],
+	imports: ["import { DsFormControl } from '@drivenets/design-system';"],
 	id: 'ds-form-control',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-form-control/ds-form-control.tsx

@@ -41,7 +41,7 @@ const DsFormControlDescription: React.FC<DsFormControlDescriptionProps> = ({ chi
 	return <div className={classNames(styles.description, className)}>{children}</div>;
 };
 
-const DsFormControl = ({
+const DsFormControlRoot = ({
 	id,
 	status,
 	label,
@@ -96,15 +96,20 @@ const DsFormControl = ({
 	);
 };
 
-DsFormControl.TextInput = controlify(DsTextInput);
-DsFormControl.NumberInput = controlify(DsNumberInput);
-DsFormControl.PasswordInput = controlify(DsPasswordInput);
-/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
-DsFormControl.DateInput = controlify(DsDateInput);
-DsFormControl.DatePicker = controlify(DsDatePicker);
-DsFormControl.TimePicker = controlify(DsTimePicker);
-DsFormControl.Textarea = controlify(DsTextarea);
-DsFormControl.Select = controlify(DsSelect);
-DsFormControl.Description = DsFormControlDescription;
+DsFormControlDescription.displayName = 'DsFormControl.Description';
+
+const DsFormControl = Object.assign(DsFormControlRoot, {
+	displayName: 'DsFormControl',
+	TextInput: controlify(DsTextInput),
+	NumberInput: controlify(DsNumberInput),
+	PasswordInput: controlify(DsPasswordInput),
+	/** @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead. */
+	DateInput: controlify(DsDateInput),
+	DatePicker: controlify(DsDatePicker),
+	TimePicker: controlify(DsTimePicker),
+	Textarea: controlify(DsTextarea),
+	Select: controlify(DsSelect),
+	Description: DsFormControlDescription,
+});
 
 export default DsFormControl;

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

@@ -8,3 +8,6 @@ export const DsGridItem = withResponsiveProps(DsGridItemBase, ['colSpan', 'rowSp
 
 export type DsGridProps = ComponentProps<typeof DsGrid>;
 export type DsGridItemProps = ComponentProps<typeof DsGridItem>;
+
+DsGrid.displayName = 'DsGrid';
+DsGridItem.displayName = 'DsGridItem';

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

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

package/src/components/ds-icon/figma/ds-icon-material.figma.batch.ts

@@ -4,7 +4,7 @@ const batch = figma.batch as { icon: string; filled: boolean; id: string };
 
 export default {
 	example: figma.code`<DsIcon icon="${batch.icon}"${batch.filled ? ' filled' : ''} />`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon: batch.icon } },
 };

package/src/components/ds-icon/figma/ds-icon-special.figma.batch.ts

@@ -12,7 +12,7 @@ export default {
 	example: icon
 		? figma.code`<DsIcon icon="${icon}" />`
 		: figma.code`{/* This icon is not available in @drivenets/design-system */}`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon } },
 };

package/src/components/ds-key-value-pair/ds-key-value-pair.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=28373-92227
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-key-value-pair
+// component=DsKeyValuePair
+//
+// `Direction` maps to `orientation`. `keyLabel` and `value` are content, not derivable
+// from Figma, so they are emitted as placeholders for the developer to fill in (see
+// `ds-user-card.figma.ts`). Read-only vs editable is consumer edit-mode state rather than
+// a Figma variant, so `readOnly`/`editInput` are left at their defaults.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('Direction', {
+		vertical: 'vertical',
+		horizontal: 'horizontal',
+	}) ?? 'vertical';
+
+export default {
+	example: figma.code`<DsKeyValuePair keyLabel="Label" value="Value" orientation="${orientation}" />`,
+	imports: ["import { DsKeyValuePair } from '@drivenets/design-system';"],
+	id: 'ds-key-value-pair',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-key-value-pair/ds-key-value-pair.tsx

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

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 },
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ import { DsTypography } from '../ds-typography';
  * Supports custom header, footer, and body content with grid-based sizing.
  * Use columns prop to control modal width (1-12 grid columns).
  */
-const DsModal = ({
+const DsModalRoot = ({
 	open,
 	columns = 6,
 	dividers = false,
@@ -138,11 +138,21 @@ const Actions = ({
 	</div>
 );
 
-DsModal.Header = Header;
-DsModal.Title = Title;
-DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body;
-DsModal.Footer = Footer;
-DsModal.Actions = Actions;
+Header.displayName = 'DsModal.Header';
+Title.displayName = 'DsModal.Title';
+CloseTrigger.displayName = 'DsModal.CloseTrigger';
+Body.displayName = 'DsModal.Body';
+Footer.displayName = 'DsModal.Footer';
+Actions.displayName = 'DsModal.Actions';
+
+const DsModal = Object.assign(DsModalRoot, {
+	displayName: 'DsModal',
+	Header,
+	Title,
+	CloseTrigger,
+	Body,
+	Footer,
+	Actions,
+});
 
 export default DsModal;

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

@@ -12,7 +12,7 @@ const content = instance.getSlot('Modal content slot');
 
 export default {
 	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ 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'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -15,7 +15,7 @@ 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'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -30,7 +30,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -35,6 +35,7 @@ const DsNumberInput: FC<DsNumberInputProps> = ({
 	return (
 		<NumberInput.Root
 			id={id}
+			ids={{ input: id }}
 			min={min}
 			max={max}
 			step={step}
@@ -71,4 +72,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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;

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 },
+} satisfies figma.Template;