@drivenets/design-system 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -107,7 +107,7 @@
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
     "@drivenets/eslint-plugin-internal": "0.0.0",
-    "@drivenets/vite-plugin-design-system": "0.0.10"
+    "@drivenets/vite-plugin-design-system": "0.0.11"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

package/src/components/ds-alert-banner/ds-alert-banner-global.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15271-7357
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerGlobalV1` is the full-width bar pinned to the top of the viewport. It
+// maps to the same `DsAlertBanner` as the inline card but without `inline` (the
+// default `global` layout) and with no title. See `ds-alert-banner.figma.ts` for the
+// inline variant.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'info neutral': 'info-neutral',
+	'info blue': 'info-blue',
+	warning: 'warning',
+	error: 'error',
+	success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'info neutral': 'info',
+	'info blue': 'info',
+	warning: 'warning',
+	error: 'error',
+	success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} variant="${variant}" icon="${icon}"${closableAttr}>
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner-global',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-alert-banner/ds-alert-banner.figma.ts

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14850-7088
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-alert-banner
+// component=DsAlertBanner
+//
+// `DsAlertBannerInlineV1` is the inline (bordered card) banner that sits in normal
+// document flow. It maps to the controlled `DsAlertBanner` with `inline`. The
+// full-width, top-of-viewport `DsAlertBannerGlobalV1` maps to the same component
+// without `inline` — see `ds-alert-banner-global.figma.ts`.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	'Info Neutral': 'info-neutral',
+	'Info Blue': 'info-blue',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'success',
+});
+
+// The status icon is set automatically by `Type` in Figma; mirror that mapping so the
+// snippet passes the matching `DsIcon` name.
+const icon = instance.getEnum('Type', {
+	'Info Neutral': 'info',
+	'Info Blue': 'info',
+	Warning: 'warning',
+	Error: 'error',
+	Success: 'check_circle',
+});
+
+const closable = instance.getBoolean('Show Dismiss Button');
+const showTitle = instance.getBoolean('Show Titles');
+const showActions = instance.getBoolean('Show Actions');
+
+const closableAttr = closable ? ' closable' : '';
+const titleLine = showTitle ? `\n\t<DsAlertBanner.Title>Title</DsAlertBanner.Title>` : '';
+const actionsBlock = showActions
+	? `\n\t<DsAlertBanner.Actions>\n\t\t<DsButtonV3 variant="secondary" size="small">Action</DsButtonV3>\n\t</DsAlertBanner.Actions>`
+	: '';
+
+export default {
+	example: figma.code`<DsAlertBanner open onOpenChange={() => {}} inline variant="${variant}" icon="${icon}"${closableAttr}>${titleLine}
+	<DsAlertBanner.Body>Description</DsAlertBanner.Body>${actionsBlock}
+</DsAlertBanner>`,
+	imports: [
+		"import { DsAlertBanner } from '@drivenets/design-system';",
+		"import { DsButtonV3 } from '@drivenets/design-system';",
+	],
+	id: 'ds-alert-banner',
+	metadata: { nestable: false },
+} satisfies figma.Template;

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

@@ -1,7 +1,6 @@
 @use '../../styles/shared/dropdown';
 @use '../../styles/shared/input';
 
-$autocomplete-input-height: 36px;
 $autocomplete-max-visible-items: 4;
 $autocomplete-item-height: 38px;
 $autocomplete-dropdown-max-height: calc($autocomplete-max-visible-items * $autocomplete-item-height);
@@ -29,9 +28,21 @@ $autocomplete-opacity-visible: 1;
 	display: flex;
 	align-items: center;
 	gap: var(--3xs);
-	height: $autocomplete-input-height;
-	min-height: $autocomplete-input-height;
-	max-height: $autocomplete-input-height;
+	height: input.$input-text-height-default;
+	min-height: input.$input-text-height-default;
+	max-height: input.$input-text-height-default;
+
+	&.small {
+		height: input.$input-text-height-small;
+		min-height: input.$input-text-height-small;
+		max-height: input.$input-text-height-small;
+	}
+
+	&.large {
+		height: input.$input-text-height-large;
+		min-height: input.$input-text-height-large;
+		max-height: input.$input-text-height-large;
+	}
 
 	&[data-focus] {
 		border-color: var(--form-control-border-color, var(--border-action-primary)) !important;

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

@@ -12,6 +12,7 @@ export const DsAutocomplete = ({
 	id,
 	options = [],
 	loading = false,
+	size = 'default',
 	style,
 	className,
 	placeholder = 'Start typing to search...',
@@ -74,7 +75,13 @@ export const DsAutocomplete = ({
 			onOpenChange={handleOpenChange}
 			closeOnSelect
 		>
-			<Combobox.Control className={styles.control}>
+			<Combobox.Control
+				className={classNames(
+					styles.control,
+					size === 'small' && styles.small,
+					size === 'large' && styles.large,
+				)}
+			>
 				{startAdornment && <span className={styles.startAdornment}>{startAdornment}</span>}
 
 				<Combobox.Input className={styles.input} placeholder={placeholder} />
@@ -92,13 +99,13 @@ export const DsAutocomplete = ({
 										combobox.setInputValue('');
 									}}
 								>
-									<DsIcon icon="close" size="medium" />
+									<DsIcon icon="close" size={size === 'small' ? 'small' : 'medium'} />
 								</button>
 							)}
 
 							{showTrigger && (
 								<Combobox.Trigger className={styles.trigger} aria-label="Toggle dropdown">
-									<DsIcon icon="keyboard_arrow_down" size="medium" />
+									<DsIcon icon="keyboard_arrow_down" size={size === 'small' ? 'small' : 'medium'} />
 								</Combobox.Trigger>
 							)}
 						</div>

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

@@ -1,6 +1,9 @@
 import type React from 'react';
 import type { IconName } from '../ds-icon';
 
+export const autocompleteSizes = ['small', 'default', 'large'] as const;
+export type AutocompleteSize = (typeof autocompleteSizes)[number];
+
 export interface DsAutocompleteOption {
 	/**
 	 * Label to display in the autocomplete dropdown
@@ -31,6 +34,11 @@ export interface DsAutocompleteProps {
 	 * When true, a loading message is shown in the dropdown.
 	 */
 	loading?: boolean;
+	/**
+	 * The size of the autocomplete control
+	 * @default 'default'
+	 */
+	size?: AutocompleteSize;
 
 	/**
 	 * Additional styles to apply to the component

package/src/components/ds-button-v3/ds-button-v3.figma.ts

@@ -7,6 +7,7 @@ const instance = figma.selectedInstance;
 
 const variant = instance.getEnum('buttonType', {
 	primary: 'primary',
+	'primary-subtle': 'primary-subtle',
 	secondary: 'secondary',
 	tertiary: 'tertiary',
 });
@@ -86,13 +87,14 @@ const labelNode = instance.findText('Button', { traverseInstances: true });
 const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Button';
 
 const iconProp = icon ? figma.code` icon="${icon}"` : '';
+const disabledProp = disabled ? ' disabled' : '';
 
 export default {
 	example: iconOnly
-		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}${iconProp} aria-label="${label}" />`
+		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${iconProp} aria-label="${label}" />`
 		: showIcon && icon
-			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''} icon="${icon}">${label}</DsButtonV3>`
-			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}" ${disabled ? 'disabled' : ''}>${label}</DsButtonV3>`,
+			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp} icon="${icon}">${label}</DsButtonV3>`
+			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}>${label}</DsButtonV3>`,
 	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
 	id: 'ds-button-v3',
 	metadata: { nestable: true },

package/src/components/ds-button-v3/ds-button-v3.module.scss

@@ -3,7 +3,8 @@
 $height-large: 40px;
 $height-medium: 36px;
 $height-small: 28px;
-$border-radius: 4px;
+$border-radius: var(--3xs);
+$border-radius-high-emphasis: var(--sm);
 $focus-ring-width: 2px;
 
 @mixin focus-ring($outer-color) {
@@ -34,6 +35,10 @@ $focus-ring-width: 2px;
 		cursor: not-allowed;
 	}
 
+	&[data-high-emphasis] {
+		border-radius: $border-radius-high-emphasis;
+	}
+
 	&[data-loading] {
 		cursor: default;
 		pointer-events: none;
@@ -126,6 +131,37 @@ $focus-ring-width: 2px;
 	}
 }
 
+.root[data-color='default'][data-variant='primary-subtle'] {
+	background-color: var(--background-primary-subtle);
+	color: var(--font-action);
+	border-color: var(--border-action-primary);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-primary-subtle-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-primary-subtle-active);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-action-primary));
+
+		background-color: var(--background-primary-subtle-hover);
+		border-color: var(--border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-primary-subtle-active);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-primary-subtle-disabled);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
+	}
+}
+
 .root[data-color='default'][data-variant='secondary'] {
 	background-color: var(--background-action-secondary);
 	color: var(--font-main);
@@ -228,19 +264,50 @@ $focus-ring-width: 2px;
 	}
 }
 
+.root[data-color='error'][data-variant='primary-subtle'] {
+	background-color: var(--background-error-subtle);
+	color: var(--font-error);
+	border-color: var(--border-error);
+
+	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
+		background-color: var(--background-error-subtle-hover);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-error-subtle-active);
+	}
+
+	&:focus-visible {
+		@include focus-ring(var(--border-error));
+
+		background-color: var(--background-error-subtle-hover);
+		border-color: var(--border-inverse);
+	}
+
+	&[data-selected='true'] {
+		background-color: var(--background-error-subtle-active);
+	}
+
+	&:disabled:not([data-loading]) {
+		background-color: var(--background-error-subtle-disabled);
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
+	}
+}
+
 .root[data-color='error'][data-variant='secondary'] {
 	background-color: var(--background-action-secondary);
 	color: var(--font-error);
-	border-color: var(--border-error);
+	border-color: var(--border-error-weak);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
 		background-color: var(--background-error-secondary-hover);
-		border-color: var(--border-error-hover);
+		border-color: var(--border-error-medium);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-error-secondary-selected);
-		border-color: var(--border-error-hover);
+		background-color: var(--background-error-secondary-active);
+		border-color: var(--border-error-medium);
 	}
 
 	&:focus-visible {
@@ -251,8 +318,8 @@ $focus-ring-width: 2px;
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-error-secondary-selected);
-		border-color: var(--border-error-hover);
+		background-color: var(--background-error-secondary-active);
+		border-color: var(--border-error-medium);
 	}
 
 	&:disabled:not([data-loading]) {
@@ -293,32 +360,32 @@ $focus-ring-width: 2px;
 }
 
 .root[data-color='light'][data-variant='primary'] {
-	background-color: var(--background-light-primary);
+	background-color: var(--background-light-subtle);
 	color: var(--font-on-action);
-	border-color: transparent;
+	border-color: var(--border-inverse);
 
 	&:hover:not(:disabled):not(:active):not([data-selected='true']) {
-		background-color: var(--background-light-primary-hover);
+		background-color: var(--background-light-hover);
 	}
 
 	&:active:not(:disabled) {
-		background-color: var(--background-light-primary-selected);
+		background-color: var(--background-light-active);
 	}
 
 	&:focus-visible {
-		@include focus-ring(var(--outline-inverse));
+		@include focus-ring(var(--border-action-primary));
 
-		background-color: var(--background-light-primary-hover);
-		border-color: var(--border-action-secondary);
+		background-color: var(--background-light-hover);
 	}
 
 	&[data-selected='true'] {
-		background-color: var(--background-light-primary-selected);
+		background-color: var(--background-light-active);
 	}
 
 	&:disabled:not([data-loading]) {
-		background-color: var(--background-light-disabled);
-		color: var(--font-light-disabled);
+		background-color: transparent;
+		color: var(--font-disabled);
+		border-color: var(--border-disabled);
 	}
 }
 

package/src/components/ds-button-v3/ds-button-v3.tsx

@@ -29,6 +29,7 @@ const DsButtonV3 = ({
 	variant = 'primary',
 	size = 'medium',
 	selected = false,
+	highEmphasis = false,
 	type = 'button',
 	...rest
 }: DsButtonV3BaseProps) => {
@@ -48,6 +49,7 @@ const DsButtonV3 = ({
 			data-variant={variant}
 			data-size={size}
 			data-selected={selected ? 'true' : undefined}
+			data-high-emphasis={highEmphasis ? 'true' : undefined}
 			data-icon-only={isIconOnly || undefined}
 			data-loading={loading && !disabled ? '' : undefined}
 			{...rest}

package/src/components/ds-button-v3/ds-button-v3.types.ts

@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes, Ref } from 'react';
 import type { IconType } from '../ds-icon';
 import type { ResponsiveValue } from '../../utils/responsive';
 
-export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
+export const buttonV3Variants = ['primary', 'primary-subtle', 'secondary', 'tertiary'] as const;
 export type ButtonV3Variant = (typeof buttonV3Variants)[number];
 
 export const buttonV3Colors = ['default', 'error', 'light'] as const;
@@ -24,7 +24,8 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 
 	/**
 	 * Visual variant of the button:
-	 * - `primary` — filled, highest-emphasis action
+	 * - `primary` — highest-emphasis action; filled for `default`/`error`, subtle outline for `color="light"`
+	 * - `primary-subtle` — subtle-filled, colored border and text (emphasis outline); `default`/`error` only
 	 * - `secondary` — outlined, medium-emphasis action
 	 * - `tertiary` — borderless, low-emphasis action (text-like)
 	 * @default 'primary'
@@ -44,6 +45,14 @@ export interface DsButtonV3BaseProps extends ButtonHTMLAttributes<HTMLButtonElem
 	 */
 	selected?: boolean;
 
+	/**
+	 * Raises the corner radius for high-emphasis surfaces such as
+	 * Sign in, Landing, and NetGen. Purely a rounding change — does not affect
+	 * color or priority.
+	 * @default false
+	 */
+	highEmphasis?: boolean;
+
 	/**
 	 * Leading icon. When set without children, renders as icon-only (square) layout.
 	 */

package/src/components/ds-button-v3/ds-button-v4.figma.ts

@@ -0,0 +1,121 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39666-40247
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-button-v3
+// component=DsButtonV3
+import figma from 'figma';
+
+// Figma ships several button generations; the `DsButtonV4` component set maps onto the
+// same code component as `DsButtonV3` (see ds-button-v3.figma.ts for the older set).
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('variant', {
+	primary: 'primary',
+	'primary-subtle': 'primary-subtle',
+	secondary: 'secondary',
+	tertiary: 'tertiary',
+});
+const color = instance.getEnum('color', {
+	default: 'default',
+	error: 'error',
+	light: 'light',
+});
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	active: 'active',
+	disabled: 'disabled',
+	isLoading: 'isLoading',
+});
+
+const disabled = state === 'disabled';
+const loading = state === 'isLoading';
+
+const structure = instance.findInstance('Part_ButtonStructureV2', { traverseInstances: true });
+
+const size =
+	structure.type === 'INSTANCE'
+		? (structure.getEnum('size', {
+				large: 'large',
+				medium: 'medium',
+				small: 'small',
+				tiny: 'tiny',
+			}) ?? 'medium')
+		: 'medium';
+
+const iconOnly =
+	structure.type === 'INSTANCE' ? structure.getEnum('icon-only', { True: true, False: false }) : false;
+
+const highEmphasis =
+	structure.type === 'INSTANCE' ? structure.getEnum('high-emphasis', { true: true, false: false }) : false;
+
+const showIcon = structure.type === 'INSTANCE' ? structure.getBoolean('isIconBefore') : false;
+
+// `DsButtonV3.icon` is an icon-name string. Swapped icons keep the placeholder layer
+// name (e.g. `DAP_GM_O_check_circle`), so resolve via Code Connect ID or metadata.
+const toIconName = (name: string): string =>
+	name
+		.replace(/^DAP_DAP_/, 'DAP_')
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_outline_icon\//, '')
+		.replace(/^DAP_/, '')
+		.replace(/^\/+/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+
+const iconNameFromCodeConnectId = (id: string | null): string | undefined => {
+	if (!id) {
+		return undefined;
+	}
+	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 undefined;
+};
+
+const resolveIcon = (iconInstance: figma.InstanceHandle): string | undefined => {
+	const fromCcId = iconNameFromCodeConnectId(iconInstance.codeConnectId());
+	if (fromCcId) {
+		return fromCcId;
+	}
+
+	const iconFromMetadata = iconInstance.executeTemplate().metadata?.props?.icon;
+	if (typeof iconFromMetadata === 'string') {
+		return iconFromMetadata;
+	}
+
+	return toIconName(iconInstance.name);
+};
+
+const leadingIcon = structure.type === 'INSTANCE' ? structure.getInstanceSwap('iconBefore') : undefined;
+const iconFromSwap = leadingIcon?.type === 'INSTANCE' ? resolveIcon(leadingIcon) : undefined;
+const iconFromChild =
+	structure.type === 'INSTANCE'
+		? structure
+				.findConnectedInstances((node) => node.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+					traverseInstances: true,
+				})
+				.find((node): node is figma.InstanceHandle => node.type === 'INSTANCE')
+		: undefined;
+const icon = iconFromSwap ?? (iconFromChild ? resolveIcon(iconFromChild) : undefined);
+
+const labelNode = instance.findText('Button', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Button';
+
+const iconProp = icon ? figma.code` icon="${icon}"` : '';
+const disabledProp = disabled ? ' disabled' : '';
+const loadingProp = loading ? ' loading' : '';
+const highEmphasisProp = highEmphasis ? ' highEmphasis' : '';
+
+export default {
+	example: iconOnly
+		? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}${iconProp} aria-label="${label}" />`
+		: showIcon && icon
+			? figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp} icon="${icon}">${label}</DsButtonV3>`
+			: figma.code`<DsButtonV3 variant="${variant}" color="${color}" size="${size}"${disabledProp}${loadingProp}${highEmphasisProp}>${label}</DsButtonV3>`,
+	imports: ["import { DsButtonV3 } from '@drivenets/design-system';"],
+	id: 'ds-button-v4',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-comment-bubble/ds-comment-bubble.figma.ts

@@ -0,0 +1,52 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=18638-7430
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-bubble
+// component=DsCommentBubble
+//
+// `DsCommentBubbleV1` is the floating comment bubble. Its Figma `type` axis
+// (`initial` / `start typing` vs `open`) selects between the empty compose state and
+// a thread; in code this is driven by whether the `comment` prop is present, so the
+// snippet emits `comment` / `currentUser` identifier placeholders for the developer to
+// wire to state. The `action required` axis maps to `hideActionRequired` (the
+// `no checkbox` variant hides the control); `State` is visual only and has no prop.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const bubbleType =
+	instance.getEnum('type', {
+		initial: 'compose',
+		'start typing': 'compose',
+		open: 'thread',
+	}) ?? 'compose';
+
+const hideActionRequired =
+	instance.getEnum('action required', {
+		'no checkbox': true,
+		false: false,
+		true: false,
+	}) ?? false;
+
+const hideActionRequiredAttr = hideActionRequired ? '\n\thideActionRequired' : '';
+
+export default {
+	example:
+		bubbleType === 'thread'
+			? figma.code`<DsCommentBubble
+	comment={comment}
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`
+			: figma.code`<DsCommentBubble
+	currentUser={currentUser}
+	value={value}
+	onValueChange={setValue}
+	onSend={handleSend}
+	onClose={handleClose}${hideActionRequiredAttr}
+/>`,
+	imports: ["import { DsCommentBubble } from '@drivenets/design-system';"],
+	id: 'ds-comment-bubble',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-comment-card/ds-comment-card.figma.ts

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=18166-58292
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-comment-card
+// component=DsCommentCard
+//
+// `DsCommentCardV1` composes the inner `Structure_CommentCardV1`. Its `overflow` axis
+// maps directly to the `overflow` prop. The `type` axis is interaction state
+// (default/hover are visual and CSS-driven — only `disabled` maps to a prop),
+// mirroring `ds-card.figma.ts`. The `action required` axis is encoded in the `comment`
+// data (`isActionRequired`), not a prop. `comment` is a data object that is not
+// derivable from Figma, so it is emitted as an identifier placeholder for the
+// developer to wire (see `ds-smart-tabs.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state =
+	instance.getEnum('type', {
+		default: 'default',
+		hover: 'default',
+		disabled: 'disabled',
+	}) ?? 'default';
+
+const overflow =
+	instance.getEnum('overflow', {
+		hidden: 'hidden',
+		displayed: 'displayed',
+	}) ?? 'hidden';
+
+const disabledAttr = state === 'disabled' ? ' disabled' : '';
+
+export default {
+	example: figma.code`<DsCommentCard comment={comment} overflow="${overflow}"${disabledAttr} />`,
+	imports: ["import { DsCommentCard } from '@drivenets/design-system';"],
+	id: 'ds-comment-card',
+	metadata: { nestable: true },
+} satisfies figma.Template;