@drivenets/design-system 0.17.0 → 0.18.1

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';

package/src/styles/_gradients.scss

@@ -0,0 +1,19 @@
+/*
+ * Hand-authored shared Brand Refresh gradient styles. Source in Figma.
+ * App-/product-specific gradients stay in the consuming application — see Guidelines/Colors.
+ */
+:root {
+	// https://www.figma.com/design/DDe8yyHzVoBDePbLfmJYce/DAP-Brand-Refresh-1.0?node-id=181-13762
+	--blue-radial-grad: radial-gradient(
+		58.25% 72.07% at 94.38% 95.2%,
+		var(--blue-grad-2) 0%,
+		var(--blue-grad-1) 100%
+	);
+
+	// https://www.figma.com/design/DDe8yyHzVoBDePbLfmJYce/DAP-Brand-Refresh-1.0?node-id=4-10764
+	--blue-grad-workspace-header: radial-gradient(
+		24.05% 380.93% at 24.05% 0%,
+		rgb(0 160 250 / 80%) 0%,
+		var(--blue-grad-1) 100%
+	);
+}

package/src/styles/_root.scss

@@ -18,18 +18,18 @@
 :root {
 	/* Mode 1 */
 	/* color */
-	--color-dap-blue-050: #edf7ff;
-	--color-dap-blue-075: #e1efff;
-	--color-dap-blue-100: #d6eaff;
-	--color-dap-blue-200: #b5ddff;
-	--color-dap-blue-300: #83c8ff;
-	--color-dap-blue-400: #48aaff;
-	--color-dap-blue-500: #1e83ff;
-	--color-dap-blue-600: #0661ff;
-	--color-dap-blue-700: #004cff;
-	--color-dap-blue-800: #083bc5;
-	--color-dap-blue-900: #0d379b;
-	--color-dap-blue-950: #0e235d;
+	--color-dap-blue-050: #e3f2ff;
+	--color-dap-blue-075: #d4ecff;
+	--color-dap-blue-100: #c4e4ff;
+	--color-dap-blue-200: #a7d3ff;
+	--color-dap-blue-300: #85c2ff;
+	--color-dap-blue-400: #5eacff;
+	--color-dap-blue-500: #3593ff;
+	--color-dap-blue-600: #1c79ff;
+	--color-dap-blue-700: #0066fa;
+	--color-dap-blue-800: #0057d4;
+	--color-dap-blue-900: #0047ad;
+	--color-dap-blue-950: #00337e;
 	--color-dap-brand-050: #e5e8ed;
 	--color-dap-brand-100: #bfc6d1;
 	--color-dap-brand-200: #99a3b6;
@@ -259,14 +259,14 @@
 	--background-info: var(--color-dap-blue-050);
 	--background-info-strong: var(--color-dap-blue-800);
 	--background-light: var(--color-dap-dark-blue-500);
+	--background-light-active: var(--color-dap-blue-400);
 	--background-light-disabled: #415b9a;
+	--background-light-hover: var(--color-dap-blue-500);
 	--background-light-primary: var(--color-dap-dark-blue-300);
 	--background-light-primary-hover: var(--color-dap-dark-blue-200);
 	--background-light-primary-selected: var(--color-dap-dark-blue-150);
 	--background-light-secondary-selected: var(--color-dap-dark-blue-400);
 	--background-light-subtle: var(--color-dap-blue-600);
-	--background-light-subtle-active: var(--color-dap-blue-400);
-	--background-light-subtle-hover: var(--color-dap-blue-500);
 	--background-neutral: var(--color-dap-gray-600);
 	--background-overlay: #001a4733;
 	--background-page: var(--color-dap-gray-100);
@@ -293,6 +293,8 @@
 	--background-transparent-hover: #ffffff26;
 	--background-warning: var(--color-dap-orange-100);
 	--background-warning-strong: var(--color-dap-orange-600);
+	--blue-grad-1: var(--color-dap-blue-700);
+	--blue-grad-2: #2ab2ff;
 	--border: var(--color-dap-gray-300);
 	--border-action-primary: var(--color-dap-blue-700);
 	--border-action-primary-hover: var(--color-dap-blue-800);
@@ -316,6 +318,14 @@
 	--border-success: var(--color-dap-green-600);
 	--border-tertiary: var(--color-dap-gray-100);
 	--border-warning-strong: var(--color-dap-orange-600);
+	--device-green: #39cea0;
+	--device-green-20: #39cea033;
+	--device-light-blue: #74b8f4;
+	--device-light-blue-20: #74b8f433;
+	--device-orange: #ea8078;
+	--device-orange-20: #ea807833;
+	--device-purple: #9747ff;
+	--device-purple-20: #9747ff33;
 	--error: var(--color-dap-red-050);
 	--font-action: var(--color-dap-blue-700);
 	--font-action-hover: var(--color-dap-blue-800);
@@ -420,6 +430,20 @@
 	--status-bg-success: var(--color-dap-green-075);
 	--status-bg-warning: var(--color-dap-orange-200);
 	--text-on-button: #000000;
+	--dap-icons-0: var(--color-dap-gray-050);
+	--dap-icons-100: var(--color-dap-blue-100);
+	--dap-icons-200: var(--color-dap-blue-200);
+	--dap-icons-300: var(--color-dap-blue-300);
+	--dap-icons-400: var(--color-dap-blue-400);
+	--dap-icons-50: var(--color-dap-blue-050);
+	--dap-icons-500: var(--color-dap-blue-500);
+	--dap-icons-600: var(--color-dap-blue-600);
+	--dap-icons-700: var(--color-dap-blue-700);
+	--dap-icons-75: var(--color-dap-blue-075);
+	--dap-icons-800: var(--color-dap-blue-800);
+	--dap-icons-900: var(--color-dap-blue-900);
+	--dap-icons-950: var(--color-dap-blue-950);
+	--dap-icons-grey: var(--color-dap-gray-600);
 }
 /* Spacing */
 :root {
@@ -473,5 +497,5 @@
 	/* string */
 	--font-family-base: Roboto;
 	--font-family-code: Fira Mono;
-	--font-family-heading: Roboto;
+	--font-family-heading: Poppins;
 }

package/src/styles/_typography.scss

@@ -164,6 +164,7 @@
 
 @mixin heading($font-weight: var(--heading-font-size-3xl), $line-height: var(--heading-line-height-3xl)) {
 	@include font-base;
+	font-family: var(--font-family-heading);
 	font-size: $font-weight;
 	font-weight: var(--font-weight-semi-bold);
 	line-height: $line-height;

package/src/styles/shared/_input.scss

@@ -3,6 +3,7 @@
 // Variables
 $input-text-height-small: 28px;
 $input-text-height-default: 36px;
+$input-text-height-large: 40px;
 $textarea-height-default: 120px;
 
 // Mixins
@@ -171,6 +172,11 @@ $textarea-height-default: 120px;
 		height: $input-text-height-default;
 	}
 
+	&.large {
+		height: $input-text-height-large;
+		max-height: $input-text-height-large;
+	}
+
 	&:has(input[type='number']) {
 		.input {
 			text-align: center;
@@ -240,6 +246,10 @@ $textarea-height-default: 120px;
 		height: $input-text-height-small;
 	}
 
+	&.large {
+		height: $input-text-height-large;
+	}
+
 	.clearIcon {
 		grid-column: 2;
 		grid-row: 1;

package/src/styles/styles.scss

@@ -5,6 +5,7 @@
 @use './utilities';
 @use './scrollbars';
 @use './root';
+@use './gradients';
 
 @use './shared/dropdown';
 @use './shared/input';

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

@@ -1,112 +0,0 @@
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
-import type { Cell } from '@tanstack/react-table';
-import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
-
-export interface EditingState<TData, TValue> {
-	cell: Cell<TData, TValue>;
-	draftValue: TValue;
-	error: string | null;
-}
-
-export interface DsTableContextType<TData, TValue> extends Partial<DsDataTableProps<TData, TValue>> {
-	/**
-	 * Whether the table is virtualized
-	 * @default false
-	 */
-	virtualized?: boolean;
-	/**
-	 * Row size variant
-	 * @default 'medium'
-	 */
-	rowSize: DsTableRowSize;
-	/**
-	 * ID of the currently active row
-	 */
-	activeRowId?: string | null;
-	/**
-	 * Toggles the collapsed state of a column group by its id.
-	 */
-	onToggleColumnGroup?: (groupId: string) => void;
-	/** The cell currently in edit mode, if any. */
-	editing: EditingState<TData, TValue> | null;
-	beginEdit: (cell: Cell<TData, TValue>) => void;
-	setDraft: (value: TValue) => void;
-	commit: (overrideValue?: TValue) => void;
-	cancel: () => void;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const DsTableContext = createContext<DsTableContextType<any, any> | null>(null);
-
-export const useDsTableContext = <TData, TValue>(): DsTableContextType<TData, TValue> => {
-	const context = useContext(DsTableContext);
-	if (!context) {
-		throw new Error('useDsTableContext must be used within DsTable');
-	}
-	return context as DsTableContextType<TData, TValue>;
-};
-
-/**
- * Hoisted editing state for single-cell-at-a-time inline editing.
- * Lives on {@link DsTableContext} so cell renderers and editors share one provider.
- */
-export const useEditingState = <TData, TValue>(
-	onCellEdit?: (row: TData, columnId: string, value: TValue) => void,
-	onCellValidate?: (row: TData, columnId: string, value: TValue) => string | null,
-) => {
-	const [editing, setEditing] = useState<EditingState<TData, TValue> | null>(null);
-
-	const onCellEditRef = useRef(onCellEdit);
-	onCellEditRef.current = onCellEdit;
-
-	const onCellValidateRef = useRef(onCellValidate);
-	onCellValidateRef.current = onCellValidate;
-
-	const editingRef = useRef(editing);
-	editingRef.current = editing;
-
-	const beginEdit = useCallback((cell: Cell<TData, TValue>) => {
-		const current = editingRef.current;
-		if (current) {
-			const isSameCell = current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id;
-			if (isSameCell) {
-				return;
-			}
-		}
-		setEditing({
-			cell,
-			draftValue: cell.getValue(),
-			error: null,
-		});
-	}, []);
-
-	const setDraft = useCallback((value: TValue) => {
-		const current = editingRef.current;
-		if (!current) {
-			return;
-		}
-		setEditing({ ...current, draftValue: value, error: null });
-	}, []);
-
-	const commit = useCallback((overrideValue?: TValue) => {
-		const current = editingRef.current;
-		if (!current) {
-			return;
-		}
-		const valueToCommit = overrideValue !== undefined ? overrideValue : current.draftValue;
-		const error =
-			onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
-		if (error !== null) {
-			setEditing({ ...current, draftValue: valueToCommit, error });
-			return;
-		}
-		onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
-		setEditing(null);
-	}, []);
-
-	const cancel = useCallback(() => {
-		setEditing(null);
-	}, []);
-
-	return { editing, beginEdit, setDraft, commit, cancel };
-};