@drivenets/design-system 0.15.0 → 0.16.0

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

@@ -0,0 +1,63 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39324-248
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-typography
+// component=DsTypography
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('font-style', {
+	heading1: 'heading1',
+	heading2: 'heading2',
+	heading3: 'heading3',
+	heading4: 'heading4',
+	'body-md-reg': 'body-md-reg',
+	'body-md-md': 'body-md-md',
+	'body-md-semi-bold': 'body-md-semi-bold',
+	'body-md-bold': 'body-md-bold',
+	'body-md-link': 'body-md-link',
+	'body-sm-reg': 'body-sm-reg',
+	'body-sm-md': 'body-sm-md',
+	'body-sm-semi-bold': 'body-sm-semi-bold',
+	'body-sm-bold': 'body-sm-bold',
+	'body-sm-link': 'body-sm-link',
+	'body-xs-reg': 'body-xs-reg',
+	'body-xs-md': 'body-xs-md',
+	'body-xs-semi-bold': 'body-xs-semi-bold',
+	'body-xs-bold': 'body-xs-bold',
+	'body-xs-link': 'body-xs-link',
+	'code-sm-reg': 'code-sm-reg',
+	'code-sm-semi-bold': 'code-sm-semi-bold',
+	'code-xs-reg': 'code-xs-reg',
+	'code-xs-semi-bold': 'code-xs-semi-bold',
+});
+
+const color = instance.getEnum('color', {
+	main: 'main',
+	secondary: 'secondary',
+	action: 'action',
+	'action-hover': 'action-hover',
+	'action-secondary': 'action-secondary',
+	'action-secondary-hover': 'action-secondary-hover',
+	disabled: 'disabled',
+	'light-disabled': 'light-disabled',
+	'on-action': 'on-action',
+	'on-disabled': 'on-disabled',
+	placeholder: 'placeholder',
+	highlight: 'highlight',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+	code: 'code',
+});
+
+const textNode = instance.children.find((child): child is figma.TextHandle => child.type === 'TEXT');
+const text = textNode?.textContent ?? 'Text';
+
+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'"],
+	id: 'ds-typography',
+	metadata: { nestable: true },
+};

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

@@ -1,5 +1,21 @@
 @use '../../styles/typography';
 
+.truncateSingle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.truncateMultiline {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--ds-typography-line-clamp);
+	line-clamp: var(--ds-typography-line-clamp);
+	overflow: hidden;
+}
+
 .heading1 {
 	@include typography.heading1;
 }

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

@@ -1,6 +1,10 @@
+import { type CSSProperties, useRef } from 'react';
 import classNames from 'classnames';
 import type { DsTypographyProps } from './ds-typography.types';
 import { typographyColors, typographyVariantConfig } from './ds-typography.config';
+import { useTruncation } from './hooks/use-truncation';
+import { mergeRefs } from '../../utils/merge-refs';
+import { DsTooltip } from '../ds-tooltip';
 import styles from './ds-typography.module.scss';
 
 const semanticColorSet = new Set<string>(typographyColors);
@@ -8,6 +12,9 @@ const semanticColorSet = new Set<string>(typographyColors);
 const resolveColor = (color: string): string =>
 	semanticColorSet.has(color) ? `var(--font-${color})` : color;
 
+const resolveLineClamp = (truncate: boolean | number): number =>
+	typeof truncate === 'number' ? Math.max(1, Math.floor(truncate)) : 1;
+
 /*
  * Design system Typography component that provides consistent text styling
  */
@@ -18,25 +25,75 @@ const DsTypography = ({
 	className,
 	style,
 	color,
+	truncate = false,
+	tooltip = false,
+	tooltipContent,
 	children,
 	...props
 }: DsTypographyProps) => {
 	const Component = typographyVariantConfig[variant].component;
 
-	return (
+	const internalRef = useRef<HTMLElement>(null);
+
+	const truncationEnabled = truncate !== false;
+	const lineClamp = resolveLineClamp(truncate);
+	const isMultiline = truncationEnabled && lineClamp > 1;
+
+	const tooltipEnabled = truncationEnabled && tooltip;
+	const { isTruncated, getAnchorRect } = useTruncation(internalRef, tooltipEnabled, [children, truncate]);
+
+	let resolvedStyle: CSSProperties | undefined;
+
+	if (color || isMultiline || style) {
+		resolvedStyle = {};
+
+		if (color) {
+			resolvedStyle.color = resolveColor(color);
+		}
+
+		if (isMultiline) {
+			Object.assign(resolvedStyle, { '--ds-typography-line-clamp': lineClamp });
+		}
+
+		if (style) {
+			Object.assign(resolvedStyle, style);
+		}
+	}
+
+	const truncateClass = truncationEnabled
+		? isMultiline
+			? styles.truncateMultiline
+			: styles.truncateSingle
+		: undefined;
+
+	const element = (
 		<Component
-			// very dynamic ref in here
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-expect-error
-			ref={ref}
+			ref={mergeRefs(ref, internalRef)}
 			asChild={asChild}
-			className={classNames(styles[variant], className)}
-			style={color ? { color: resolveColor(color), ...style } : style}
+			className={classNames(styles[variant], truncateClass, className)}
+			style={resolvedStyle}
 			{...props}
 		>
 			{children}
 		</Component>
 	);
+
+	if (!tooltipEnabled) {
+		return element;
+	}
+
+	return (
+		<DsTooltip
+			content={tooltipContent ?? children}
+			placement="top"
+			disabled={!isTruncated}
+			getAnchorRect={getAnchorRect}
+		>
+			{element}
+		</DsTooltip>
+	);
 };
 
+DsTypography.displayName = 'DsTypography';
+
 export default DsTypography;

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

@@ -31,6 +31,19 @@ export interface DsTypographyProps {
 	 * When true, composes typography styles onto the child element without extra DOM nodes
 	 */
 	asChild?: boolean;
+	/**
+	 * Truncates overflowing text with an ellipsis. A number clamps to that many lines
+	 * (`true` is a single line). Needs a width-constrained layout context.
+	 */
+	truncate?: boolean | number;
+	/**
+	 * Reveals the full text in a tooltip on hover/focus, but only while it overflows.
+	 */
+	tooltip?: boolean;
+	/**
+	 * Tooltip content override; defaults to `children`.
+	 */
+	tooltipContent?: React.ReactNode;
 	/**
 	 * The content of the component
 	 */

package/src/components/ds-typography/hooks/use-truncation.ts

@@ -0,0 +1,151 @@
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
+import type { TooltipAnchorRect } from '../../ds-tooltip';
+
+const OVERFLOW_TOLERANCE_PX = 1;
+const FALLBACK_LINE_HEIGHT_RATIO = 1.2;
+const DEFAULT_FONT_SIZE_PX = 16;
+const ELLIPSIS = '\u2026';
+
+interface Truncation {
+	isTruncated: boolean;
+	getAnchorRect: () => TooltipAnchorRect | null;
+}
+
+const ellipsisWidthCache = new Map<string, number>();
+let ellipsisMeasureSpan: HTMLSpanElement | null = null;
+
+const measureEllipsisWidth = (computed: CSSStyleDeclaration): number => {
+	const cacheKey = `${computed.fontStyle}|${computed.fontWeight}|${computed.fontSize}|${computed.fontFamily}|${computed.letterSpacing}`;
+	const cached = ellipsisWidthCache.get(cacheKey);
+
+	if (cached !== undefined) {
+		return cached;
+	}
+
+	ellipsisMeasureSpan ??= document.createElement('span');
+	const span = ellipsisMeasureSpan;
+
+	span.textContent = ELLIPSIS;
+	span.style.position = 'absolute';
+	span.style.visibility = 'hidden';
+	span.style.whiteSpace = 'pre';
+	span.style.fontStyle = computed.fontStyle;
+	span.style.fontWeight = computed.fontWeight;
+	span.style.fontSize = computed.fontSize;
+	span.style.fontFamily = computed.fontFamily;
+	span.style.letterSpacing = computed.letterSpacing;
+
+	document.body.appendChild(span);
+	const width = span.getBoundingClientRect().width;
+	span.remove();
+
+	ellipsisWidthCache.set(cacheKey, width);
+	return width;
+};
+
+let measureRange: Range | null = null;
+
+const measureFittingPrefixRight = (textNode: Text, maxRight: number): number => {
+	measureRange ??= document.createRange();
+	const range = measureRange;
+
+	let low = 0;
+	let high = textNode.length;
+	let fittingLength = 0;
+
+	while (low <= high) {
+		const mid = (low + high) >>> 1;
+		range.setStart(textNode, 0);
+		range.setEnd(textNode, mid);
+
+		if (range.getBoundingClientRect().right <= maxRight) {
+			fittingLength = mid;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+
+	range.setStart(textNode, 0);
+	range.setEnd(textNode, fittingLength);
+	return range.getBoundingClientRect().right;
+};
+
+const getFirstTextNode = (element: HTMLElement): Text | null =>
+	element.firstChild instanceof Text ? element.firstChild : null;
+
+export const useTruncation = (
+	ref: RefObject<HTMLElement | null>,
+	enabled: boolean,
+	deps: readonly unknown[] = [],
+): Truncation => {
+	const [isTruncated, setIsTruncated] = useState(false);
+
+	useLayoutEffect(() => {
+		const element = ref.current;
+
+		if (!enabled || !element) {
+			setIsTruncated(false);
+			return;
+		}
+
+		const measure = () => {
+			const overflowsHorizontally = element.scrollWidth - element.clientWidth > OVERFLOW_TOLERANCE_PX;
+			const overflowsVertically = element.scrollHeight - element.clientHeight > OVERFLOW_TOLERANCE_PX;
+
+			setIsTruncated(overflowsHorizontally || overflowsVertically);
+		};
+
+		const rafId = requestAnimationFrame(measure);
+
+		const resizeObserver = new ResizeObserver(() => requestAnimationFrame(measure));
+		resizeObserver.observe(element);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			resizeObserver.disconnect();
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ref, enabled, ...deps]);
+
+	const getAnchorRect = useCallback((): TooltipAnchorRect | null => {
+		const element = ref.current;
+
+		if (!element) {
+			return null;
+		}
+
+		const rect = element.getBoundingClientRect();
+		const computed = getComputedStyle(element);
+
+		const paddingRight = parseFloat(computed.paddingRight) || 0;
+		const borderRight = parseFloat(computed.borderRightWidth) || 0;
+		const paddingBottom = parseFloat(computed.paddingBottom) || 0;
+		const borderBottom = parseFloat(computed.borderBottomWidth) || 0;
+
+		const fontSize = parseFloat(computed.fontSize) || DEFAULT_FONT_SIZE_PX;
+		const lineHeight = parseFloat(computed.lineHeight) || fontSize * FALLBACK_LINE_HEIGHT_RATIO;
+
+		const contentRight = rect.right - paddingRight - borderRight;
+		const ellipsisWidth = measureEllipsisWidth(computed);
+
+		const textNode = getFirstTextNode(element);
+		const isSingleLine = computed.whiteSpace === 'nowrap';
+
+		const ellipsisCenterX =
+			isSingleLine && textNode
+				? measureFittingPrefixRight(textNode, contentRight - ellipsisWidth) + ellipsisWidth / 2
+				: contentRight - ellipsisWidth / 2;
+
+		const lastLineBottom = rect.bottom - paddingBottom - borderBottom;
+
+		return {
+			x: ellipsisCenterX,
+			y: lastLineBottom - lineHeight,
+			width: 0,
+			height: lineHeight,
+		};
+	}, [ref]);
+
+	return { isTruncated, getAnchorRect };
+};

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

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=38540-44159
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-user-card
+// component=DsUserCard
+//
+// `DAP_user-menu-header_v01` (#38540:44159) is a plain composed instance with no
+// variant props, so it maps directly to `DsUserCard`. `name` and `subtitle` are text
+// content and `src` is a photo URL — none are derivable from Figma — so they are
+// emitted as placeholders for the developer to fill in (see `ds-select.figma.ts`).
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsUserCard name="Full Name" subtitle="subtitle" />`,
+	imports: ["import { DsUserCard } from '@drivenets/design-system'"],
+	id: 'ds-user-card',
+	metadata: { nestable: true },
+};

package/src/components/ds-user-card/ds-user-card.module.scss

@@ -0,0 +1,25 @@
+.userCard {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	padding: var(--sm);
+	border-bottom: 1px solid var(--border-secondary);
+}
+
+.text {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	gap: var(--3xs);
+	padding-top: var(--4xs);
+	min-width: 0;
+}
+
+.name,
+.subtitle {
+	display: block;
+	max-width: 100%;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

package/src/components/ds-user-card/ds-user-card.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import classNames from 'classnames';
+import styles from './ds-user-card.module.scss';
+import type { DsUserCardProps } from './ds-user-card.types';
+import { DsAvatar } from '../ds-avatar';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * @summary Compact identity header pairing an avatar with a name and optional subtitle.
+ *
+ * Presentational card used as the header of a user menu. Renders a medium
+ * `DsAvatar` (initials fallback derived from `name`) beside a two-line text
+ * block; both lines truncate with an ellipsis when they overflow.
+ */
+export const DsUserCard: FC<DsUserCardProps> = ({ name, subtitle, src, className, style }) => {
+	return (
+		<div className={classNames(styles.userCard, className)} style={style}>
+			<DsAvatar name={name} src={src} size="md" />
+			<div className={styles.text}>
+				<DsTypography variant="heading4" color="main" className={styles.name}>
+					{name}
+				</DsTypography>
+				{subtitle && (
+					<DsTypography variant="body-xs-reg" color="secondary" className={styles.subtitle}>
+						{subtitle}
+					</DsTypography>
+				)}
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react';
+
+export interface DsUserCardProps {
+	/**
+	 * Full name shown as the title. Also drives the avatar initials fallback,
+	 * image alt text, and hover tooltip.
+	 */
+	name: string;
+	/**
+	 * Secondary line rendered under the name, such as an email address or role.
+	 */
+	subtitle?: string;
+	/**
+	 * Avatar image URL. Falls back to initials derived from `name` when omitted
+	 * or when the image fails to load.
+	 */
+	src?: string;
+	/**
+	 * Custom class name applied to the root element.
+	 */
+	className?: string;
+	/**
+	 * Custom inline styles applied to the root element.
+	 */
+	style?: CSSProperties;
+}

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

@@ -0,0 +1,2 @@
+export * from './ds-user-card';
+export * from './ds-user-card.types';

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

@@ -73,8 +73,14 @@ const DsVerticalTabsContent = ({ value, className, children }: DsVerticalTabsCon
 	);
 };
 
+DsVerticalTabsList.displayName = 'DsVerticalTabs.List';
+DsVerticalTabsTab.displayName = 'DsVerticalTabs.Tab';
+DsVerticalTabsContent.displayName = 'DsVerticalTabs.Content';
+
 DsVerticalTabs.List = DsVerticalTabsList;
 DsVerticalTabs.Tab = DsVerticalTabsTab;
 DsVerticalTabs.Content = DsVerticalTabsContent;
 
+DsVerticalTabs.displayName = 'DsVerticalTabs';
+
 export default DsVerticalTabs;

package/src/components/ds-workspace-layout/ds-workspace-layout.tsx

@@ -124,6 +124,14 @@ const LeftPanel = ({ className, ...rest }: DsWorkspaceLayoutLeftPanelProps) => {
 	return <aside {...rest} className={classNames(styles.leftPanel, className)} />;
 };
 
+Header.displayName = 'DsWorkspaceLayout.Header';
+SubHeader.displayName = 'DsWorkspaceLayout.SubHeader';
+Content.displayName = 'DsWorkspaceLayout.Content';
+Footer.displayName = 'DsWorkspaceLayout.Footer';
+Body.displayName = 'DsWorkspaceLayout.Body';
+SideMenu.displayName = 'DsWorkspaceLayout.SideMenu';
+LeftPanel.displayName = 'DsWorkspaceLayout.LeftPanel';
+
 DsWorkspaceLayout.Header = Header;
 DsWorkspaceLayout.SubHeader = SubHeader;
 DsWorkspaceLayout.Content = Content;
@@ -132,4 +140,6 @@ DsWorkspaceLayout.Body = Body;
 DsWorkspaceLayout.SideMenu = SideMenu;
 DsWorkspaceLayout.LeftPanel = LeftPanel;
 
+DsWorkspaceLayout.displayName = 'DsWorkspaceLayout';
+
 export default DsWorkspaceLayout;

package/src/index.ts

@@ -43,6 +43,7 @@ export * from './components/ds-progress-task-bar';
 export * from './components/ds-radio-group';
 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-smart-tabs';
 export * from './components/ds-spinner';
@@ -64,6 +65,7 @@ export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
+export * from './components/ds-user-card';
 export * from './components/ds-vertical-tabs';
 export * from './components/ds-workspace-layout';
 export * from './utils/responsive';