@drivenets/design-system 0.17.0 → 0.18.0

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

@@ -0,0 +1,119 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import { DsSkeletonText } from '../../ds-skeleton';
+import { DsTableHeaderSelectableCell } from '../components/ds-table-header-selectable-cell';
+import { DsTableRowExpandableCell } from '../components/ds-table-row-expandable-cell';
+import { DsTableRowSelectableCell } from '../components/ds-table-row-selectable-cell';
+import {
+	EXPANDER_COLUMN_ID,
+	EXPANDER_COLUMN_WIDTH,
+	REORDER_COLUMN_ID,
+	REORDER_COLUMN_WIDTH,
+	SELECT_COLUMN_ID,
+	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
+} from './constants';
+
+export type GetAugmentedColumnsOptions = {
+	selectable: boolean;
+	expandable: boolean;
+	reorderable: boolean;
+	virtualized: boolean;
+	showSelectAllCheckbox: boolean;
+};
+
+const EXPLICIT_SIZE_META = { hasExplicitSize: true } as const;
+
+/**
+ * Clones leaf defs that authored `size` so `meta.hasExplicitSize` survives
+ * TanStack’s default-size merge. Group defs are cloned only to recurse;
+ * unsized leaves are returned as-is.
+ */
+const stampExplicitSize = <TData, TValue>(columns: ColumnDef<TData, TValue>[]): ColumnDef<TData, TValue>[] =>
+	columns.map((column) => {
+		if ('columns' in column && column.columns) {
+			return { ...column, columns: stampExplicitSize(column.columns) };
+		}
+
+		if (column.size === undefined) {
+			return column;
+		}
+
+		return { ...column, meta: { ...column.meta, ...EXPLICIT_SIZE_META } };
+	});
+
+/**
+ * Prepends the builtin select / expander / reorder columns when those features
+ * are on. Reorder is omitted for virtualized tables. Unshift order yields
+ * visual order: reorder, expander, select, then consumer columns.
+ */
+export const getAugmentedColumns = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+	{ selectable, expandable, reorderable, virtualized, showSelectAllCheckbox }: GetAugmentedColumnsOptions,
+): ColumnDef<TData, TValue>[] => {
+	const augmentedColumns: ColumnDef<TData, TValue>[] = stampExplicitSize(columns);
+
+	if (selectable) {
+		augmentedColumns.unshift({
+			id: SELECT_COLUMN_ID,
+			size: SELECT_COLUMN_WIDTH,
+			// Pin min/max to the fixed width: `enableResizing: false` blocks the
+			// handle but not the table-wide resize `minSize`, which would otherwise
+			// stretch this column.
+			minSize: SELECT_COLUMN_WIDTH,
+			maxSize: SELECT_COLUMN_WIDTH,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: ({ table }) => (showSelectAllCheckbox ? <DsTableHeaderSelectableCell table={table} /> : null),
+			cell: ({ row }) => <DsTableRowSelectableCell row={row} />,
+		});
+	}
+
+	if (expandable) {
+		augmentedColumns.unshift({
+			id: EXPANDER_COLUMN_ID,
+			size: EXPANDER_COLUMN_WIDTH,
+			minSize: EXPANDER_COLUMN_WIDTH,
+			maxSize: EXPANDER_COLUMN_WIDTH,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: () => null,
+			cell: ({ row }) => (row.getCanExpand() ? <DsTableRowExpandableCell row={row} /> : null),
+		});
+	}
+
+	if (reorderable && !virtualized) {
+		// Cell is rendered inline by DsTableRow when it encounters REORDER_COLUMN_ID,
+		// since the drag handle needs row-level useSortable state.
+		augmentedColumns.unshift({
+			id: REORDER_COLUMN_ID,
+			size: REORDER_COLUMN_WIDTH,
+			minSize: REORDER_COLUMN_WIDTH,
+			maxSize: REORDER_COLUMN_WIDTH,
+			enableSorting: false,
+			enableResizing: false,
+			meta: EXPLICIT_SIZE_META,
+			header: 'Order',
+			cell: () => null,
+		});
+	}
+
+	return augmentedColumns;
+};
+
+/**
+ * Replaces each leaf `cell` with `loadingCell` (or a default text skeleton).
+ * Group columns are cloned with the same transform applied to their children.
+ */
+export const toSkeletonColumns = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+): ColumnDef<TData, TValue>[] =>
+	columns.map((column) =>
+		'columns' in column && column.columns
+			? { ...column, columns: toSkeletonColumns(column.columns) }
+			: { ...column, cell: column.loadingCell ?? (() => <DsSkeletonText width="60%" />) },
+	);
+
+export const createSkeletonRows = <TData extends { id: string }>(): TData[] =>
+	Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({ id: `ds-table-skeleton-${String(i)}` }) as TData);

package/src/components/ds-table/utils/table-columns.unit.test.ts

@@ -0,0 +1,199 @@
+import { describe, expect, it } from 'vitest';
+import type { ColumnDef } from '@tanstack/react-table';
+import { createSkeletonRows, getAugmentedColumns, toSkeletonColumns } from './table-columns';
+import {
+	EXPANDER_COLUMN_ID,
+	EXPANDER_COLUMN_WIDTH,
+	REORDER_COLUMN_ID,
+	REORDER_COLUMN_WIDTH,
+	SELECT_COLUMN_ID,
+	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
+} from './constants';
+
+type Row = { id: string; name?: string };
+
+const nameColumn: ColumnDef<Row> = { id: 'name', accessorKey: 'name' };
+
+const noFeatures = {
+	selectable: false,
+	expandable: false,
+	reorderable: false,
+	virtualized: false,
+	showSelectAllCheckbox: true,
+} as const;
+
+const columnIds = (columns: ColumnDef<Row>[]) => columns.map((column) => column.id);
+
+describe('getAugmentedColumns', () => {
+	it('returns consumer columns unchanged when no features are on', () => {
+		expect(columnIds(getAugmentedColumns([nameColumn], noFeatures))).toEqual(['name']);
+	});
+
+	it('prepends builtins in visual order: reorder, expander, select, then consumer columns', () => {
+		expect(
+			columnIds(
+				getAugmentedColumns([nameColumn], {
+					...noFeatures,
+					selectable: true,
+					expandable: true,
+					reorderable: true,
+				}),
+			),
+		).toEqual([REORDER_COLUMN_ID, EXPANDER_COLUMN_ID, SELECT_COLUMN_ID, 'name']);
+	});
+
+	it('omits select and expander when those flags are falsy', () => {
+		expect(columnIds(getAugmentedColumns([nameColumn], { ...noFeatures, reorderable: true }))).toEqual([
+			REORDER_COLUMN_ID,
+			'name',
+		]);
+	});
+
+	it('omits reorder when the table is virtualized', () => {
+		expect(
+			columnIds(
+				getAugmentedColumns([nameColumn], {
+					...noFeatures,
+					selectable: true,
+					expandable: true,
+					reorderable: true,
+					virtualized: true,
+				}),
+			),
+		).toEqual([EXPANDER_COLUMN_ID, SELECT_COLUMN_ID, 'name']);
+	});
+
+	it('disables sorting and resizing on builtin columns', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+		});
+
+		for (const column of columns.slice(0, 3)) {
+			expect(column.enableSorting).toBe(false);
+			expect(column.enableResizing).toBe(false);
+		}
+	});
+
+	it('pins builtin column min/max to their fixed width so the resize minimum cannot stretch them', () => {
+		const columns = getAugmentedColumns([nameColumn], {
+			...noFeatures,
+			selectable: true,
+			expandable: true,
+			reorderable: true,
+		});
+
+		const boundsById = new Map(columns.map((column) => [column.id, column]));
+
+		for (const [id, width] of [
+			[SELECT_COLUMN_ID, SELECT_COLUMN_WIDTH],
+			[EXPANDER_COLUMN_ID, EXPANDER_COLUMN_WIDTH],
+			[REORDER_COLUMN_ID, REORDER_COLUMN_WIDTH],
+		] as const) {
+			const column = boundsById.get(id);
+			expect(column?.size).toBe(width);
+			expect(column?.minSize).toBe(width);
+			expect(column?.maxSize).toBe(width);
+		}
+	});
+
+	it('stamps hasExplicitSize on authored leaves and builtins, not on unsized leaves', () => {
+		const columns = getAugmentedColumns(
+			[
+				{ id: 'name', accessorKey: 'name', size: 150 },
+				{ id: 'age', accessorKey: 'age' },
+			],
+			{
+				...noFeatures,
+				selectable: true,
+				expandable: true,
+				reorderable: true,
+			},
+		);
+		const byId = new Map(columns.map((column) => [column.id, column]));
+
+		expect(byId.get('name')?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get('age')?.meta?.hasExplicitSize).toBeUndefined();
+		expect(byId.get(SELECT_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get(EXPANDER_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+		expect(byId.get(REORDER_COLUMN_ID)?.meta?.hasExplicitSize).toBe(true);
+	});
+
+	it('stamps hasExplicitSize on nested authored leaves and preserves group meta', () => {
+		const columns = getAugmentedColumns(
+			[
+				{
+					id: 'identity',
+					header: 'Identity',
+					meta: { group: { collapsible: true } },
+					columns: [{ id: 'firstName', size: 150 }, { id: 'lastName' }],
+				},
+			],
+			noFeatures,
+		);
+		const group = columns[0];
+		const nested = group && 'columns' in group ? group.columns : undefined;
+
+		expect(group?.meta?.group).toEqual({ collapsible: true });
+		expect(nested?.[0]?.meta?.hasExplicitSize).toBe(true);
+		expect(nested?.[1]?.meta?.hasExplicitSize).toBeUndefined();
+	});
+
+	it('does not mutate the caller’s column defs', () => {
+		const leaf: ColumnDef<Row> = { id: 'name', accessorKey: 'name', size: 150 };
+
+		getAugmentedColumns([leaf], noFeatures);
+
+		expect(leaf.meta).toBeUndefined();
+	});
+});
+
+describe('toSkeletonColumns', () => {
+	it('replaces a leaf cell with loadingCell when provided', () => {
+		const loadingCell = () => 'loading';
+		const result = toSkeletonColumns<Row, unknown>([{ id: 'name', cell: () => 'name', loadingCell }])[0];
+
+		expect(result?.cell).toBe(loadingCell);
+	});
+
+	it('replaces a leaf cell with a default skeleton when loadingCell is omitted', () => {
+		const originalCell = () => 'name';
+		const result = toSkeletonColumns<Row, unknown>([{ id: 'name', cell: originalCell }])[0];
+
+		expect(result?.cell).not.toBe(originalCell);
+		expect(result?.cell).toBeTypeOf('function');
+	});
+
+	it('recurses into group columns', () => {
+		const loadingCell = () => 'loading';
+		const leafCell = () => 'leaf';
+		const group = toSkeletonColumns<Row, unknown>([
+			{
+				id: 'group',
+				columns: [
+					{ id: 'a', cell: leafCell },
+					{ id: 'b', cell: leafCell, loadingCell },
+				],
+			},
+		])[0];
+
+		const nested = group && 'columns' in group ? group.columns : undefined;
+
+		expect(nested?.[0]?.cell).not.toBe(leafCell);
+		expect(nested?.[1]?.cell).toBe(loadingCell);
+	});
+});
+
+describe('createSkeletonRows', () => {
+	it('returns placeholder rows with stable skeleton ids', () => {
+		const rows = createSkeletonRows<Row>();
+
+		expect(rows).toHaveLength(SKELETON_ROW_COUNT);
+		expect(rows.map((row) => row.id)).toEqual(
+			Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => `ds-table-skeleton-${String(i)}`),
+		);
+	});
+});

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

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36566-107407
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tag
+// component=DsTag
+//
+// Figma "Type" maps to code `variant`, "Size" to `size`, "State" to the `selected`/`disabled`
+// booleans (hover/focus are interaction states with no code prop). Figma's `Type=include-exclude`
+// is a single variant backed by an internal, non-exposed include/exclude sub-toggle, so it can
+// only be surfaced as one code value — it maps to `variant="include"`; switch to `variant="exclude"`
+// for the exclude case. `label` is content, pulled from the tag text when present, otherwise a
+// placeholder; `value` (required only for `key-value`) is emitted as a placeholder.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant =
+	instance.getEnum('Type', {
+		default: 'default',
+		'include-exclude': 'include',
+		'key-value': 'key-value',
+	}) ?? 'default';
+
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' }) ?? 'medium';
+
+const state = instance.getEnum('State', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	selected: 'selected',
+	disabled: 'disabled',
+});
+
+const labelNode = instance.findText('Tag-name', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Label';
+
+const attrs = [
+	`label="${label}"`,
+	variant !== 'default' ? `variant="${variant}"` : '',
+	variant === 'key-value' ? 'value="Value"' : '',
+	size === 'small' ? 'size="small"' : '',
+	state === 'selected' ? 'selected' : '',
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTag ${attrs} />`,
+	imports: ["import { DsTag } from '@drivenets/design-system';"],
+	id: 'ds-tag',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-tag-filter/ds-tag-filter.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=40298-1117
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tag-filter
+// component=DsTagFilter
+//
+// Figma's `Type` variant (less/all) maps to the component's internal `expanded` state (driven by
+// useTagOverflowCalculation, surfaced only via `onExpand`) — there is no settable code prop, so it
+// is intentionally not represented. `items` is content, not derivable from Figma, so a placeholder
+// array is emitted for the developer to fill in.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTagFilter items={[{ id: '1', label: 'Status: Active' }, { id: '2', label: 'Version: 1.0.0' }]} />`,
+	imports: ["import { DsTagFilter } from '@drivenets/design-system';"],
+	id: 'ds-tag-filter',
+	metadata: { nestable: true },
+} satisfies figma.Template;

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

@@ -7,27 +7,49 @@ interface FieldInfo {
 	component: string;
 	fcMember?: string;
 	size?: boolean;
+	large?: boolean;
 	readOnly?: boolean;
 	invalid?: boolean;
 	data?: string;
 }
 
-const textInfo: FieldInfo = { component: 'DsTextInput', fcMember: 'TextInput', size: true, readOnly: true };
+const textInfo: FieldInfo = {
+	component: 'DsTextInput',
+	fcMember: 'TextInput',
+	size: true,
+	large: 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=""' },
+	select: {
+		component: 'DsSelect',
+		fcMember: 'Select',
+		size: true,
+		large: true,
+		invalid: true,
+		data: 'options={[]} value=""',
+	},
 	date: { component: 'DsDateInput', fcMember: 'DateInput' },
 	time: { component: 'DsTimePicker', fcMember: 'TimePicker' },
 	autocompleteSearch: {
 		component: 'DsAutocomplete',
+		size: true,
+		large: true,
 		invalid: true,
 		data: 'options={[]} showTrigger={false}',
 	},
-	autocompleteCombobox: { component: 'DsAutocomplete', invalid: true, data: 'options={[]}' },
+	autocompleteCombobox: {
+		component: 'DsAutocomplete',
+		size: true,
+		large: true,
+		invalid: true,
+		data: 'options={[]}',
+	},
 };
 
 const instance = figma.selectedInstance;
@@ -69,8 +91,11 @@ const disabled = state === 'disabled';
 const readOnly = state === 'readOnly';
 const error = state === 'error';
 
+const sizeAttr =
+	info.size && size === 'small' ? 'size="small"' : info.large && size === 'large' ? 'size="large"' : '';
+
 const attrs = [
-	info.size && size === 'small' ? 'size="small"' : '',
+	sizeAttr,
 	info.data ?? '',
 	disabled ? 'disabled' : '',
 	info.readOnly && readOnly ? 'readOnly' : '',

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

@@ -22,7 +22,7 @@ const type = instance.getEnum('Type', {
 const size = instance.getEnum('Size', {
 	Small: 'small',
 	Default: 'default',
-	Large: 'default',
+	Large: 'large',
 });
 
 const state = instance.getEnum('State', {
@@ -36,7 +36,8 @@ const state = instance.getEnum('State', {
 const disabled = state === 'disabled';
 const readOnly = type === 'readOnly' || state === 'readOnly';
 
-const sizeAttr = size === 'small' ? 'size="small"' : '';
+const isTextType = type !== 'number' && type !== 'password';
+const sizeAttr = size === 'small' ? 'size="small"' : size === 'large' && isTextType ? 'size="large"' : '';
 
 const componentName =
 	type === 'number' ? 'DsNumberInput' : type === 'password' ? 'DsPasswordInput' : 'DsTextInput';

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

@@ -35,6 +35,7 @@ const DsTextInput: FC<DsTextInputProps> = ({
 		{
 			[styles.small]: size === 'small',
 			[styles.default]: size === 'default',
+			[styles.large]: size === 'large',
 		},
 		className,
 	);

package/src/components/ds-text-input/ds-text-input.types.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import type React from 'react';
 
-export const textInputSizes = ['small', 'default'] as const;
+export const textInputSizes = ['small', 'default', 'large'] as const;
 export type TextInputSize = (typeof textInputSizes)[number];
 
 export interface DsTextInputProps {

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

@@ -0,0 +1,54 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34873-157787
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tree
+// component=DsTree
+//
+// `DsTreeV2` is the collection-driven tree. Figma models the branch/item sub-parts
+// (branch-control, branch-text, item-text, indicators, indent guide) as separate
+// components and exposes `side nav` / `map` / `workflows` preview presets via
+// `Property 1`, but code never hand-assembles those parts: it composes `DsTree.Root`
+// with a `createDsTreeCollection` data source and one recursive `DsTree.NodeProvider`
+// renderer. The snippet is the canonical usage referenced by the Storybook docs.
+import figma from 'figma';
+
+export default {
+	example: figma.code`const collection = createDsTreeCollection([
+	{
+		id: 'network',
+		name: 'Network',
+		children: [
+			{ id: 'routers', name: 'Routers', children: [{ id: 'router-1', name: 'Router Alpha' }] },
+			{ id: 'firewall-1', name: 'Firewall Primary' },
+		],
+	},
+	{ id: 'monitoring', name: 'Monitoring', children: [{ id: 'alerts', name: 'Alerts' }] },
+]);
+
+<DsTree.Root collection={collection} defaultExpandedValue={['network']}>
+	<DsTree.Tree>
+		{collection.rootNode.children?.map((node, index) => (
+			<DsTree.NodeProvider key={node.id} node={node} indexPath={[index]}>
+				{node.children ? (
+					<DsTree.Branch>
+						<DsTree.BranchControl>
+							<DsTree.BranchIndicator />
+							<DsTree.BranchText>{node.name}</DsTree.BranchText>
+						</DsTree.BranchControl>
+						<DsTree.BranchContent>
+							<DsTree.BranchIndentGuide />
+							{/* recurse over node.children with another DsTree.NodeProvider */}
+						</DsTree.BranchContent>
+					</DsTree.Branch>
+				) : (
+					<DsTree.Item>
+						<DsTree.ItemIndicator />
+						<DsTree.ItemText>{node.name}</DsTree.ItemText>
+					</DsTree.Item>
+				)}
+			</DsTree.NodeProvider>
+		))}
+	</DsTree.Tree>
+</DsTree.Root>`,
+	imports: ["import { DsTree, createDsTreeCollection } from '@drivenets/design-system';"],
+	id: 'ds-tree',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-workspace-layout/ds-workspace-layout.figma.ts

@@ -0,0 +1,99 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=32960-46399
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-workspace-layout
+// component=DsWorkspaceLayout.Header
+//
+// Maps Part_workspace-header_v02 / DAP_workspace-header_v02. Figma `Type` selects the
+// example Header composition; Figma `Status` is ignored (badge always shown).
+// Layout divs are structural only — consumers supply their own header chrome CSS.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type =
+	instance.getEnum('Type', {
+		draft: 'draft',
+		pending: 'pending',
+		running: 'running',
+	}) ?? 'draft';
+
+const draftHeader = figma.code`<DsWorkspaceLayout.Header>
+	{/* left / center / right — style with consumer CSS (flex row) */}
+	<div>
+		<DsButtonV3 variant="secondary" color="light" size="small" icon="close">
+			Close
+		</DsButtonV3>
+	</div>
+	<div>
+		<DsTypography variant="body-sm-reg">Untitled Project -23-May-2024 04:47 PM</DsTypography>
+		<DsIcon icon="info" size="tiny" />
+		<DsStatusBadgeV2 phase="temporary" label="Draft" size="small" />
+	</div>
+	<div>
+		<DsButtonV3 variant="secondary" color="light" size="small">
+			Discard
+		</DsButtonV3>
+		<DsButtonV3 variant="primary" color="light" size="small">
+			Save project
+		</DsButtonV3>
+		<DsButtonV3 variant="tertiary" color="light" size="small" icon="more_vert" aria-label="More actions" />
+	</div>
+</DsWorkspaceLayout.Header>`;
+
+const pendingHeader = figma.code`<DsWorkspaceLayout.Header>
+	{/* left / center / right — style with consumer CSS (flex row) */}
+	<div>
+		<DsButtonV3 variant="secondary" color="light" size="small" icon="close">
+			Close
+		</DsButtonV3>
+	</div>
+	<div>
+		<DsTypography variant="body-sm-reg">Untitled Project -23-May-2024 04:47 PM</DsTypography>
+		<DsIcon icon="info" size="tiny" />
+		<DsStatusBadgeV2 phase="pending" label="Pending" size="small" />
+	</div>
+	<div>
+		<DsButtonV3 variant="secondary" color="light" size="small">
+			Discard
+		</DsButtonV3>
+		<DsButtonV3 variant="primary" color="light" size="small">
+			Save project
+		</DsButtonV3>
+		<DsButtonV3 variant="tertiary" color="light" size="small" icon="more_vert" aria-label="More actions" />
+	</div>
+</DsWorkspaceLayout.Header>`;
+
+const runningHeader = figma.code`<DsWorkspaceLayout.Header>
+	{/* left / center / right — style with consumer CSS (flex row) */}
+	<div>
+		<DsButtonV3 variant="secondary" color="light" size="small" icon="close">
+			Close
+		</DsButtonV3>
+		<DsButtonV3 variant="secondary" color="light" size="small" icon="keyboard_double_arrow_left">
+			Previous
+		</DsButtonV3>
+		<DsButtonV3 variant="secondary" color="light" size="small">
+			Next
+		</DsButtonV3>
+	</div>
+	<div>
+		<DsTypography variant="body-sm-reg">Untitled Project -23-May-2024 04:47 PM</DsTypography>
+		<DsIcon icon="info" size="tiny" />
+		<DsStatusBadgeV2 phase="execution" label="Running" size="small" />
+	</div>
+	<div>
+		<DsIcon icon="history_2" size="small" />
+		<DsTypography variant="body-sm-reg">Last update: 2d ago</DsTypography>
+		<DsButtonV3 variant="tertiary" color="light" size="small" icon="more_vert" aria-label="More actions" />
+	</div>
+</DsWorkspaceLayout.Header>`;
+
+const example = type === 'pending' ? pendingHeader : type === 'running' ? runningHeader : draftHeader;
+
+export default {
+	example,
+	imports: [
+		"import { DsWorkspaceLayout, DsButtonV3, DsTypography, DsIcon, DsStatusBadgeV2 } from '@drivenets/design-system';",
+	],
+	id: 'ds-workspace-layout-header',
+	metadata: { nestable: true },
+} satisfies figma.Template;

package/src/components/ds-workspace-layout/ds-workspace-layout.module.scss

@@ -1,12 +1,5 @@
 .root {
 	--ds-workspace-layout-header-height: 54px;
-	--ds-workspace-layout-header-gradient: radial-gradient(
-		ellipse at left bottom,
-		rgba(1, 75, 253, 1) 0%,
-		rgba(10, 60, 194, 1) 78%,
-		rgba(16, 51, 160, 1) 89%,
-		rgba(21, 42, 126, 1) 100%
-	);
 	--ds-workspace-layout-side-menu-collapsed-width: 60px;
 	--ds-workspace-layout-side-menu-expanded-width: 256px;
 	--ds-workspace-layout-side-menu-padding-top: 28px;
@@ -33,7 +26,7 @@
 	flex-shrink: 0;
 	height: var(--ds-workspace-layout-header-height);
 	padding: 0 var(--sm) 0 var(--lg);
-	background: var(--ds-workspace-layout-header-gradient);
+	background: var(--blue-grad-workspace-header);
 	color: var(--font-on-action);
 	overflow: clip;
 }

package/src/index.ts

@@ -45,6 +45,7 @@ export * from './components/ds-segment-group';
 export * from './components/ds-select';
 export * from './components/ds-site-node';
 export * from './components/ds-skeleton';
+export * from './components/ds-slider';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
 export * from './components/ds-split-button';