@drivenets/design-system 0.14.0 → 0.16.0

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx

@@ -1,5 +1,7 @@
 import type { MouseEvent } from 'react';
 import { DsButtonV3 } from '../../../../ds-button-v3';
+import { DsIcon } from '../../../../ds-icon';
+import { DsTooltip } from '../../../../ds-tooltip';
 import styles from './ds-table-editable-cell.module.scss';
 import type { DsTableEditableCellProps } from './ds-table-editable-cell.types';
 import { useDsTableContext } from '../../../context/ds-table-context';
@@ -16,6 +18,23 @@ export const DsTableEditableCell = <TData, TValue>({
 		beginEdit(cell);
 	};
 
+	const editDisabled = cell.column.columnDef.editDisabled?.(cell.getContext());
+	const locked = editDisabled === true || typeof editDisabled === 'object';
+	const reason = typeof editDisabled === 'object' ? editDisabled.reason : undefined;
+
+	if (locked) {
+		return (
+			<div className={styles.root} data-locked="">
+				{children}
+				<DsTooltip content={reason}>
+					<span className={styles.lockIcon} aria-label="Editing disabled" role="img">
+						<DsIcon icon="lock" size="small" color="secondary" />
+					</span>
+				</DsTooltip>
+			</div>
+		);
+	}
+
 	return (
 		<div
 			className={styles.root}
@@ -37,3 +56,4 @@ export const DsTableEditableCell = <TData, TValue>({
 		</div>
 	);
 };
+DsTableEditableCell.displayName = 'DsTableEditableCell';

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx

@@ -74,3 +74,4 @@ export const DsTableEditingCell = <TData, TValue>({ cell }: DsTableEditingCellPr
 		</div>
 	);
 };
+DsTableEditingCell.displayName = 'DsTableEditingCell';

package/src/components/ds-table/ds-table-column.types.ts

@@ -1,6 +1,15 @@
 import type { ReactNode } from 'react';
 import type { CellContext, RowData } from '@tanstack/react-table';
 
+/**
+ * Result of a column's `editDisabled` resolver for a single cell.
+ *
+ * - `false` (or `undefined`) keeps the cell editable.
+ * - `true` locks the cell with no tooltip.
+ * - `{ reason }` locks the cell and shows `reason` in a tooltip on hover.
+ */
+export type DsTableEditDisabledResult = boolean | { reason?: ReactNode };
+
 declare module '@tanstack/react-table' {
 	interface ColumnDefBase<TData extends RowData, TValue> {
 		/**
@@ -8,5 +17,20 @@ declare module '@tanstack/react-table' {
 		 * When omitted, the column is not editable.
 		 */
 		editCell?: (context: CellContext<TData, TValue>) => ReactNode;
+
+		/**
+		 * Locks individual cells of an otherwise editable column (one that defines
+		 * `editCell`). When this returns a truthy value for a cell, that cell shows a
+		 * lock icon instead of the edit affordance and cannot enter edit mode. Return
+		 * `{ reason }` to surface an optional tooltip explaining why. Has no effect on
+		 * columns without `editCell`.
+		 */
+		editDisabled?: (context: CellContext<TData, TValue>) => DsTableEditDisabledResult;
+
+		/**
+		 * Renders this column's cell content while the table is `loading`.
+		 * When omitted, a default text skeleton is rendered.
+		 */
+		loadingCell?: (context: CellContext<TData, TValue>) => ReactNode;
 	}
 }

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

@@ -26,6 +26,7 @@ import { useDragAndDrop } from './hooks/use-drag-and-drop';
 import { type DsTableContextType, DsTableContext, useEditingState } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
 import { useColumnGroups } from './grouping';
+import { DsSkeletonText } from '../ds-skeleton';
 import {
 	EMPTY_TABLE_STATE_TEXT,
 	EXPANDER_COLUMN_ID,
@@ -34,6 +35,7 @@ import {
 	REORDER_COLUMN_WIDTH,
 	SELECT_COLUMN_ID,
 	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
 } from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
@@ -59,6 +61,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	bordered = true,
 	fullWidth = true,
 	rowSize = 'medium',
+	loading = false,
 	expandable = false,
 	renderExpandedRow,
 	selectable = false,
@@ -201,9 +204,29 @@ const DsTable = <TData extends { id: string }, TValue>({
 		return augmentedColumns;
 	}, [columnsProp, hasExpanderColumn, hasReorderColumn, hasSelectColumn, showSelectAllCheckbox]);
 
+	const skeletonColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {
+		const toSkeleton = (cols: ColumnDef<TData, TValue>[]): ColumnDef<TData, TValue>[] =>
+			cols.map((column) =>
+				'columns' in column && column.columns
+					? { ...column, columns: toSkeleton(column.columns) }
+					: { ...column, cell: column.loadingCell ?? (() => <DsSkeletonText width="60%" />) },
+			);
+
+		return toSkeleton(columns);
+	}, [columns]);
+
+	const skeletonData = useMemo<TData[]>(
+		() =>
+			Array.from(
+				{ length: SKELETON_ROW_COUNT },
+				(_, i) => ({ id: `ds-table-skeleton-${String(i)}` }) as TData,
+			),
+		[],
+	);
+
 	const table = useReactTable({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: getSortedRowModel(),
@@ -295,8 +318,9 @@ const DsTable = <TData extends { id: string }, TValue>({
 		selectable,
 		reorderable,
 		showSelectAllCheckbox,
-		onRowClick,
-		onRowDoubleClick,
+		loading,
+		onRowClick: loading ? undefined : onRowClick,
+		onRowDoubleClick: loading ? undefined : onRowDoubleClick,
 		primaryRowActions,
 		secondaryRowActions,
 		renderExpandedRow,
@@ -362,4 +386,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 	);
 };
 
+DsTable.displayName = 'DsTable';
+
 export default DsTable;

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

@@ -314,6 +314,13 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	rowSize?: DsTableRowSize;
 
+	/**
+	 * When `true`, renders placeholder skeleton rows instead of the data. Column
+	 * headers stay intact and row interactions are disabled while loading.
+	 * @default false
+	 */
+	loading?: boolean;
+
 	/**
 	 * Whether the table is expandable or if an individual row should be expandable
 	 */

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

@@ -5,10 +5,14 @@ export type { ScrollParams } from './components/ds-table-body-virtualized';
 
 export * from './filters';
 export type { DsColumnGroupMeta } from './grouping';
+export type { DsTableEditDisabledResult } from './ds-table-column.types';
 
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';
 
+export { createColumnHelper } from '@tanstack/react-table';
+export type { ColumnDef } from '@tanstack/react-table';
+
 export { useCellEditor } from './hooks/use-cell-editor';
 export type {
 	UseCellEditorOptions,

package/src/components/ds-table/utils/constants.ts

@@ -33,3 +33,8 @@ export const REORDER_COLUMN_ID = 'reorder';
  * Width (in px) of the reorder column.
  */
 export const REORDER_COLUMN_WIDTH = 60;
+
+/**
+ * Number of placeholder skeleton rows rendered while the table is `loading`.
+ */
+export const SKELETON_ROW_COUNT = 5;

package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx

@@ -10,3 +10,5 @@ export const DsTabsContent = ({ value, className, style, children }: DsTabsConte
 		</Tabs.Content>
 	);
 };
+
+DsTabsContent.displayName = 'DsTabs.Content';

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx

@@ -12,3 +12,5 @@ export const DsTabsList = ({ className, style, children }: DsTabsListProps) => {
 		</Tabs.List>
 	);
 };
+
+DsTabsList.displayName = 'DsTabs.List';

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx

@@ -127,3 +127,5 @@ export const DsTabsTab = ({
 		</>
 	);
 };
+
+DsTabsTab.displayName = 'DsTabs.Tab';

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

@@ -38,6 +38,8 @@ const DsTabsRoot = ({
 	);
 };
 
+DsTabsRoot.displayName = 'DsTabs.Root';
+
 export const DsTabs = {
 	Root: DsTabsRoot,
 	List: DsTabsList,

package/src/components/ds-tabs/figma/ds-tabs-tab-vertical.figma.ts

@@ -0,0 +1,78 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-6024
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs.Tab
+//
+// `DAP_Tab item - vertical_v01` maps to `DsTabs.Tab`, resolved inside the vertical
+// `tabs slot` (nestable). Same code component as the horizontal tab item; the two
+// differ in Figma only by casing (`Show Leading Icon`) and by the vertical set
+// having no `Menu Actions` property.
+//
+// Variant divergence — `State`, `Selected` and `Size` have no `DsTabs.Tab` prop
+// (see `ds-tabs-tab.figma.ts` for the rationale).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const label = instance.getString('Tab Name');
+const showIcon = instance.getBoolean('Show Leading Icon');
+const showBadge = instance.getBoolean('Show Badge');
+
+// `value` is required by `DsTabsTabProps` but is data, not derivable from Figma.
+const value = label
+	? label
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	: 'tab';
+
+// Leading icon → `DsTabs.Tab.icon` name, read from the connected ds-icon instance.
+const resolveIcon = (): string | undefined => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	if (!node) {
+		return undefined;
+	}
+
+	const id = node.codeConnectId();
+	if (id?.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id?.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+
+	return node.name
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+const icon = showIcon ? resolveIcon() : undefined;
+
+// Badge count is freeform nested text, read from the badge instance when shown.
+const resolveBadge = (): string | undefined => {
+	const badge = instance.findInstance('DAP_Tab badge_v01', { traverseInstances: true });
+	if (badge.type !== 'INSTANCE') {
+		return undefined;
+	}
+	return badge.children.find((c): c is figma.TextHandle => c.type === 'TEXT')?.textContent;
+};
+
+const badge = showBadge ? resolveBadge() : undefined;
+const badgeAttr = badge ? (/^\d+$/.test(badge) ? `badge={${badge}}` : `badge="${badge}"`) : '';
+
+const attrs = [`value="${value}"`, `label="${label}"`, icon ? `icon="${icon}"` : '', badgeAttr]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTabs.Tab ${attrs} />`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-tab-vertical',
+	metadata: { nestable: true },
+};

package/src/components/ds-tabs/figma/ds-tabs-tab.figma.ts

@@ -0,0 +1,89 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14829-217
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs.Tab
+//
+// `DAP_Tab item - horizontal_v01` maps to `DsTabs.Tab`. It resolves inside the
+// horizontal `tabs slot` (nestable).
+//
+// Variant divergence — these Figma axes intentionally have no `DsTabs.Tab` prop:
+//   • `State` (Default/Hover/Pressed) — visual only, driven by CSS.
+//   • `Selected` (Yes/No) — selection is owned by `DsTabs.Root` (`value`), not the tab.
+//   • `Size` (Base) — size lives on `DsTabs.Root` (`size`), not the tab.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const label = instance.getString('Tab Name');
+const showIcon = instance.getBoolean('Show leading icon');
+const showBadge = instance.getBoolean('Show Badge');
+const hasMenu = instance.getBoolean('Menu Actions');
+
+// `value` is required by `DsTabsTabProps` but is data, not derivable from Figma.
+// Slugify the label as a sensible default for the developer to confirm/replace.
+const value = label
+	? label
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	: 'tab';
+
+// The leading icon maps to `DsTabs.Tab.icon` (an icon-name string). It is a
+// connected ds-icon instance: read its Code Connect id (`ds-icon-o-`/`-s-`) and
+// fall back to the layer name when it is unavailable.
+const resolveIcon = (): string | undefined => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	if (!node) {
+		return undefined;
+	}
+
+	const id = node.codeConnectId();
+	if (id?.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id?.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+
+	return node.name
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+const icon = showIcon ? resolveIcon() : undefined;
+
+// The badge count is freeform nested text (`DAP_Tab badge_v01`), not a component
+// property, so read it from the badge instance when shown.
+const resolveBadge = (): string | undefined => {
+	const badge = instance.findInstance('DAP_Tab badge_v01', { traverseInstances: true });
+	if (badge.type !== 'INSTANCE') {
+		return undefined;
+	}
+	return badge.children.find((c): c is figma.TextHandle => c.type === 'TEXT')?.textContent;
+};
+
+const badge = showBadge ? resolveBadge() : undefined;
+const badgeAttr = badge ? (/^\d+$/.test(badge) ? `badge={${badge}}` : `badge="${badge}"`) : '';
+
+const attrs = [
+	`value="${value}"`,
+	`label="${label}"`,
+	icon ? `icon="${icon}"` : '',
+	badgeAttr,
+	hasMenu ? 'menuActionItems={[]} onMenuActionSelect={() => {}}' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTabs.Tab ${attrs} />`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-tab',
+	metadata: { nestable: true },
+};

package/src/components/ds-tabs/figma/ds-tabs-vertical.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-11560
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs
+//
+// `DAP_Tabs group-vertical_v01` is the vertical tab bar. Horizontal and vertical
+// are separate Figma component sets but a single code component switched by the
+// `orientation` prop, so this template mirrors `ds-tabs.figma.ts` with
+// `orientation="vertical"`. The `tabs slot` resolves each vertical tab item via
+// its own template (`DsTabs.Tab`); `DsTabs.Content` panels are authored in code.
+import figma from 'figma';
+
+// The vertical set labels its size `Base` (= default `medium`); also accept the
+// horizontal naming so a future shared variant keeps mapping to the `size` prop.
+const size = figma.selectedInstance.getEnum('Size', {
+	Base: 'medium',
+	medium: 'medium',
+	small: 'small',
+});
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+const tabs = figma.selectedInstance.getSlot('tabs slot');
+
+export default {
+	example: figma.code`<DsTabs.Root orientation="vertical"${sizeAttr}>
+	<DsTabs.List>${tabs}</DsTabs.List>
+	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
+</DsTabs.Root>`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-vertical',
+	metadata: { nestable: false },
+};

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

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-11053
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs
+//
+// `DAP_Tabs group-horizontal_v01` is the horizontal tab bar. It maps to the
+// composed `DsTabs.Root` + `DsTabs.List`. The `tabs slot` resolves each tab item
+// via its own Code Connect template (`DsTabs.Tab`), so added/removed tabs stay in
+// sync. Figma only models the tab bar — the `DsTabs.Content` panels have no Figma
+// equivalent and are authored in code, so the snippet emits a hint instead.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Figma's group `Size` is the code `size` prop; `medium` is the default so only
+// `small` is emitted.
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' });
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+const tabs = instance.getSlot('tabs slot');
+
+export default {
+	example: figma.code`<DsTabs.Root orientation="horizontal"${sizeAttr}>
+	<DsTabs.List>${tabs}</DsTabs.List>
+	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
+</DsTabs.Root>`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs',
+	metadata: { nestable: false },
+};

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

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

package/src/components/ds-tag-filter/ds-tag-filter.tsx

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

package/src/components/ds-text-input/ds-input-field-v02.figma.ts

@@ -0,0 +1,87 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39475-58722
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-text-input
+// component=DsTextInput
+import figma from 'figma';
+
+interface FieldInfo {
+	component: string;
+	fcMember?: string;
+	size?: boolean;
+	readOnly?: boolean;
+	invalid?: boolean;
+	data?: string;
+}
+
+const textInfo: FieldInfo = { component: 'DsTextInput', fcMember: 'TextInput', size: true, readOnly: true };
+
+const registry: Record<string, FieldInfo> = {
+	text: textInfo,
+	textArea: { component: 'DsTextarea', fcMember: 'Textarea' },
+	number: { component: 'DsNumberInput', fcMember: 'NumberInput', size: true, readOnly: true },
+	password: { component: 'DsPasswordInput', fcMember: 'PasswordInput', size: true, readOnly: true },
+	select: { component: 'DsSelect', fcMember: 'Select', invalid: true, data: 'options={[]} value=""' },
+	date: { component: 'DsDateInput', fcMember: 'DateInput' },
+	time: { component: 'DsTimePicker', fcMember: 'TimePicker' },
+	autocompleteSearch: {
+		component: 'DsAutocomplete',
+		invalid: true,
+		data: 'options={[]} showTrigger={false}',
+	},
+	autocompleteCombobox: { component: 'DsAutocomplete', invalid: true, data: 'options={[]}' },
+};
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('size', {
+	small: 'small',
+	medium: 'medium',
+	large: 'large',
+});
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+	'read-only': 'readOnly',
+	error: 'error',
+});
+
+const part = instance.findInstance('DAP-part_InputType_v01', { traverseInstances: true });
+const inputType =
+	(part.type === 'INSTANCE'
+		? part.getEnum('inputType', {
+				text: 'text',
+				'text-area': 'textArea',
+				select: 'select',
+				password: 'password',
+				number: 'number',
+				date: 'date',
+				time: 'time',
+				'autocomplete-search': 'autocompleteSearch',
+				'autocomplete-combobox': 'autocompleteCombobox',
+			})
+		: 'text') ?? 'text';
+
+const info = registry[inputType] ?? textInfo;
+
+const disabled = state === 'disabled';
+const readOnly = state === 'readOnly';
+const error = state === 'error';
+
+const attrs = [
+	info.size && size === 'small' ? 'size="small"' : '',
+	info.data ?? '',
+	disabled ? 'disabled' : '',
+	info.readOnly && readOnly ? 'readOnly' : '',
+	info.invalid && error ? 'invalid' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<${info.component} ${attrs} />`,
+	imports: [`import { ${info.component} } from '@drivenets/design-system'`],
+	id: 'ds-input-field-v02',
+	metadata: { nestable: true, props: { fcMember: info.fcMember, fcProps: attrs } },
+};

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

@@ -76,4 +76,6 @@ const DsTextInput: FC<DsTextInputProps> = ({
 	);
 };
 
+DsTextInput.displayName = 'DsTextInput';
+
 export default DsTextInput;

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

@@ -46,4 +46,6 @@ const DsTextarea: React.FC<DsTextareaProps> = ({
 	);
 };
 
+DsTextarea.displayName = 'DsTextarea';
+
 export default DsTextarea;

package/src/components/ds-time-picker/ds-time-picker.tsx

@@ -182,4 +182,6 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 	);
 };
 
+DsTimePicker.displayName = 'DsTimePicker';
+
 export default DsTimePicker;

package/src/components/ds-toast/ds-toast-context.tsx

@@ -77,3 +77,4 @@ export const useToaster = (): DsToastContextType => {
 	}
 	return context;
 };
+DsToastProvider.displayName = 'DsToastProvider';

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15100-3016
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toast
+// component=DsToast
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	info: 'info',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+});
+
+const extended = instance.getEnum('Extended', { True: true, False: false });
+const cta = instance.getEnum('CTA', { True: true, False: false });
+
+const titleLine = extended ? `\n\ttitle: 'Title',` : '';
+const actionsLine = cta ? `\n\tactions: <DsButtonV3 variant="secondary">Action</DsButtonV3>,` : '';
+
+export default {
+	example: figma.code`const { createToast } = useToaster();
+
+createToast({
+	variant: '${variant}',${titleLine}
+	description: 'Description',${actionsLine}
+});`,
+	imports: [
+		"import { useToaster } from '@drivenets/design-system'",
+		"import { DsButtonV3 } from '@drivenets/design-system'",
+	],
+	id: 'ds-toast',
+	metadata: { nestable: false },
+};

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

@@ -51,4 +51,7 @@ const DsToastGroup: React.FC<{ toaster: CreateToasterReturn }> = ({ toaster }) =
 	return <Toaster toaster={toaster}>{(toast: DsToastProps) => <DsToast {...toast} />}</Toaster>;
 };
 
+DsToast.displayName = 'DsToast';
+DsToastGroup.displayName = 'DsToastGroup';
+
 export { DsToast, DsToastGroup };