@drivenets/design-system 0.16.0 → 0.18.0

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

@@ -27,7 +27,7 @@ $transition-duration: 0.2s;
 		background: var(--background-action-hover-weak);
 	}
 
-	&[data-focus] {
+	&:focus-visible {
 		position: relative;
 		outline: none;
 		background: var(--background-action-hover-weak);
@@ -56,7 +56,7 @@ $transition-duration: 0.2s;
 	}
 
 	&:hover .itemAction,
-	&[data-focus-visible] .itemAction {
+	&:focus-within .itemAction {
 		opacity: 1;
 	}
 }

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

@@ -38,6 +38,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 	checkedValue,
 	defaultCheckedValue,
 	onCheckedChange,
+	focusedValue,
+	defaultFocusedValue,
+	onFocusChange,
 	typeahead = true,
 	lazyMount = true,
 	unmountOnExit,
@@ -56,6 +59,9 @@ const DsTreeRoot = <T extends DsTreeNode = DsTreeNode>({
 		checkedValue={checkedValue}
 		defaultCheckedValue={defaultCheckedValue}
 		onCheckedChange={onCheckedChange}
+		focusedValue={focusedValue}
+		defaultFocusedValue={defaultFocusedValue}
+		onFocusChange={onFocusChange}
 		typeahead={typeahead}
 		lazyMount={lazyMount}
 		unmountOnExit={unmountOnExit}

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

@@ -115,6 +115,22 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 	 */
 	onCheckedChange?: ArkTreeView.RootProps<T>['onCheckedChange'];
 
+	/**
+	 * Id of the node with keyboard focus (controlled). Use with `onFocusChange`.
+	 * When `null`, Ark treats the first node as focused for roving-tabindex purposes.
+	 */
+	focusedValue?: string | null;
+	/**
+	 * Id of the node focused initially when uncontrolled. When `null` (the Ark
+	 * default), the first node receives focus for roving-tabindex purposes.
+	 */
+	defaultFocusedValue?: string | null;
+	/**
+	 * Called when the focused node changes. Receives the Ark focus-change details
+	 * including the new `focusedValue` (or `null` when nothing is focused).
+	 */
+	onFocusChange?: ArkTreeView.RootProps<T>['onFocusChange'];
+
 	/**
 	 * Whether to enable typeahead navigation — typing characters focuses matching nodes.
 	 */

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

@@ -57,7 +57,7 @@ const colorProp = color === 'main' ? '' : figma.code` color="${color}"`;
 
 export default {
 	example: figma.code`<DsTypography variant="${variant}"${colorProp}>${text}</DsTypography>`,
-	imports: ["import { DsTypography } from '@drivenets/design-system'"],
+	imports: ["import { DsTypography } from '@drivenets/design-system';"],
 	id: 'ds-typography',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -10,7 +10,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsUserCard name="Full Name" subtitle="subtitle" />`,
-	imports: ["import { DsUserCard } from '@drivenets/design-system'"],
+	imports: ["import { DsUserCard } from '@drivenets/design-system';"],
 	id: 'ds-user-card',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -26,7 +26,13 @@ import styles from './ds-vertical-tabs.module.scss';
  * </DsVerticalTabs>
  * ```
  */
-const DsVerticalTabs = ({ value, onValueChange, className, style, children }: DsVerticalTabsRootProps) => {
+const DsVerticalTabsRoot = ({
+	value,
+	onValueChange,
+	className,
+	style,
+	children,
+}: DsVerticalTabsRootProps) => {
 	const handleValueChange = (details: { value: string | null }) => {
 		onValueChange?.(details.value);
 	};
@@ -77,10 +83,11 @@ DsVerticalTabsList.displayName = 'DsVerticalTabs.List';
 DsVerticalTabsTab.displayName = 'DsVerticalTabs.Tab';
 DsVerticalTabsContent.displayName = 'DsVerticalTabs.Content';
 
-DsVerticalTabs.List = DsVerticalTabsList;
-DsVerticalTabs.Tab = DsVerticalTabsTab;
-DsVerticalTabs.Content = DsVerticalTabsContent;
-
-DsVerticalTabs.displayName = 'DsVerticalTabs';
+const DsVerticalTabs = Object.assign(DsVerticalTabsRoot, {
+	displayName: 'DsVerticalTabs',
+	List: DsVerticalTabsList,
+	Tab: DsVerticalTabsTab,
+	Content: DsVerticalTabsContent,
+});
 
 export default DsVerticalTabs;

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/components/ds-workspace-layout/ds-workspace-layout.tsx

@@ -19,7 +19,7 @@ const DEFAULT_LOCALE = Object.freeze({
 	unpinButtonLabel: 'Unpin side menu',
 });
 
-const DsWorkspaceLayout = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
+const DsWorkspaceLayoutRoot = ({ className, fillParent = false, ...rest }: DsWorkspaceLayoutProps) => {
 	const [hasLeftSidePanel, setHasLeftSidePanel] = useState(false);
 
 	const registerLeftSidePanel = useCallback(() => setHasLeftSidePanel(true), []);
@@ -132,14 +132,15 @@ Body.displayName = 'DsWorkspaceLayout.Body';
 SideMenu.displayName = 'DsWorkspaceLayout.SideMenu';
 LeftPanel.displayName = 'DsWorkspaceLayout.LeftPanel';
 
-DsWorkspaceLayout.Header = Header;
-DsWorkspaceLayout.SubHeader = SubHeader;
-DsWorkspaceLayout.Content = Content;
-DsWorkspaceLayout.Footer = Footer;
-DsWorkspaceLayout.Body = Body;
-DsWorkspaceLayout.SideMenu = SideMenu;
-DsWorkspaceLayout.LeftPanel = LeftPanel;
-
-DsWorkspaceLayout.displayName = 'DsWorkspaceLayout';
+const DsWorkspaceLayout = Object.assign(DsWorkspaceLayoutRoot, {
+	displayName: 'DsWorkspaceLayout',
+	Header,
+	SubHeader,
+	Content,
+	Footer,
+	Body,
+	SideMenu,
+	LeftPanel,
+});
 
 export default DsWorkspaceLayout;

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