@drivenets/design-system 0.18.1 → 0.19.0

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.tsx

@@ -0,0 +1,161 @@
+import classNames from 'classnames';
+import styles from './ds-top-bar-navigation.module.scss';
+import { DsAvatar } from '../ds-avatar';
+import { DsButtonV3 } from '../ds-button-v3';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { DsIcon } from '../ds-icon';
+import {
+	notificationCountCap,
+	type DsTopBarNavigationActionsProps,
+	type DsTopBarNavigationBreadcrumbProps,
+	type DsTopBarNavigationCenterProps,
+	type DsTopBarNavigationLogoProps,
+	type DsTopBarNavigationNotificationsProps,
+	type DsTopBarNavigationProps,
+	type DsTopBarNavigationUserMenuProps,
+} from './ds-top-bar-navigation.types';
+
+const DEFAULT_LOCALE = Object.freeze({
+	appsButtonLabel: 'Apps',
+	notificationsButtonLabel: 'Notifications',
+	notificationsButtonLabelWithCount: (count: number) => `Notifications, ${String(count)} unread`,
+	userMenuButtonLabel: (name: string) => `Account menu for ${name}`,
+});
+
+const DEFAULT_USER_MENU_POSITIONING = Object.freeze({ placement: 'bottom-end' } as const);
+
+const DsTopBarNavigationRoot = ({ className, ...rest }: DsTopBarNavigationProps) => (
+	<div {...rest} className={classNames(styles.root, className)} />
+);
+
+const Logo = ({
+	className,
+	logo,
+	wordmark,
+	href,
+	locale,
+	onLogoClick,
+	onAppsClick,
+	appsMenu,
+	...rest
+}: DsTopBarNavigationLogoProps) => {
+	const lockup = (
+		<>
+			{logo ? <span className={styles.logoGlyph}>{logo}</span> : null}
+			{wordmark ? <span className={styles.logoWordmark}>{wordmark}</span> : null}
+		</>
+	);
+
+	return (
+		<div {...rest} className={classNames(styles.logo, className)}>
+			{href ? (
+				<a className={styles.logoLockup} href={href} aria-label={locale?.homeLinkLabel} onClick={onLogoClick}>
+					{lockup}
+				</a>
+			) : (
+				<span className={styles.logoLockup}>{lockup}</span>
+			)}
+
+			{appsMenu}
+
+			{!appsMenu && onAppsClick ? (
+				<DsButtonV3
+					variant="tertiary"
+					color="light"
+					size="small"
+					icon="apps"
+					aria-label={locale?.appsButtonLabel ?? DEFAULT_LOCALE.appsButtonLabel}
+					onClick={onAppsClick}
+				/>
+			) : null}
+		</div>
+	);
+};
+
+const Breadcrumb = ({ className, ...rest }: DsTopBarNavigationBreadcrumbProps) => (
+	<div {...rest} className={classNames(styles.breadcrumb, className)} />
+);
+
+/** Reserved zone between the breadcrumb trail and the actions. Empty by design today. */
+const Center = ({ className, ...rest }: DsTopBarNavigationCenterProps) => (
+	<div {...rest} className={classNames(styles.center, className)} />
+);
+
+const Actions = ({ className, ...rest }: DsTopBarNavigationActionsProps) => (
+	<div {...rest} className={classNames(styles.actions, className)} />
+);
+
+const Notifications = ({ count = 0, locale, ...rest }: DsTopBarNavigationNotificationsProps) => {
+	const hasCount = count > 0;
+	const label = hasCount
+		? (locale?.notificationsButtonLabelWithCount ?? DEFAULT_LOCALE.notificationsButtonLabelWithCount)(count)
+		: (locale?.notificationsButtonLabel ?? DEFAULT_LOCALE.notificationsButtonLabel);
+
+	return (
+		<DsButtonV3 {...rest} variant="tertiary" size="small" icon="notifications_active" aria-label={label}>
+			{/*
+				Always rendered so DsButtonV3 never switches to its icon-only geometry,
+				which would re-pad the bell when the count clears.
+			*/}
+			<span className={styles.notificationsBadge} aria-hidden data-empty={hasCount ? undefined : ''}>
+				{count > notificationCountCap ? `${String(notificationCountCap)}+` : count}
+			</span>
+		</DsButtonV3>
+	);
+};
+
+const UserMenu = ({
+	className,
+	name,
+	src,
+	children,
+	open,
+	positioning,
+	locale,
+	onOpenChange,
+	onSelect,
+	...rest
+}: DsTopBarNavigationUserMenuProps) => (
+	<DsDropdownMenu.Root
+		open={open}
+		// Merged, not replaced: a caller who only overrides `gutter` keeps `bottom-end`, which is
+		// what stops the menu from spilling past the right edge of the bar.
+		positioning={{ ...DEFAULT_USER_MENU_POSITIONING, ...positioning }}
+		onOpenChange={onOpenChange}
+		onSelect={onSelect}
+	>
+		<DsDropdownMenu.Trigger asChild>
+			<button
+				{...rest}
+				type="button"
+				className={classNames(styles.userMenuTrigger, className)}
+				aria-label={(locale?.userMenuButtonLabel ?? DEFAULT_LOCALE.userMenuButtonLabel)(name)}
+			>
+				<DsAvatar className={styles.userMenuAvatar} name={name} src={src} size="regular" type="circle" />
+				<span className={styles.userMenuCaret}>
+					<DsIcon icon="arrow_drop_down" size="small" aria-hidden />
+				</span>
+			</button>
+		</DsDropdownMenu.Trigger>
+		<DsDropdownMenu.Content>{children}</DsDropdownMenu.Content>
+	</DsDropdownMenu.Root>
+);
+
+DsTopBarNavigationRoot.displayName = 'DsTopBarNavigation';
+Logo.displayName = 'DsTopBarNavigation.Logo';
+Breadcrumb.displayName = 'DsTopBarNavigation.Breadcrumb';
+Center.displayName = 'DsTopBarNavigation.Center';
+Actions.displayName = 'DsTopBarNavigation.Actions';
+Notifications.displayName = 'DsTopBarNavigation.Notifications';
+UserMenu.displayName = 'DsTopBarNavigation.UserMenu';
+
+const DsTopBarNavigation = Object.assign(DsTopBarNavigationRoot, {
+	Logo,
+	Breadcrumb,
+	Center,
+	Actions,
+	Notifications,
+	UserMenu,
+});
+
+export default DsTopBarNavigation;

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.types.ts

@@ -0,0 +1,117 @@
+import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';
+import type { DsDropdownMenuPositioning } from '../ds-dropdown-menu';
+
+/** Count above which the notification badge collapses to `<cap>+`. */
+export const notificationCountCap = 99;
+
+export type DsTopBarNavigationProps = ComponentPropsWithRef<'div'>;
+
+export interface DsTopBarNavigationLogoProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+	/**
+	 * Brand glyph rendered at 32px before the wordmark. Kept as a slot, so the bar stays
+	 * tenant-neutral — no brand asset ships with the design system.
+	 */
+	logo?: ReactNode;
+	/**
+	 * Brand wordmark rendered beside the glyph. Styled with the heading font; pass a node
+	 * when the mark needs custom kerning.
+	 */
+	wordmark?: ReactNode;
+	/**
+	 * Turns the glyph and wordmark into a link to the platform home.
+	 */
+	href?: string;
+	locale?: {
+		/**
+		 * Accessible name for the logo link. Only applied when `href` is set; useful when the
+		 * wordmark is an image rather than text.
+		 */
+		homeLinkLabel?: string;
+		/**
+		 * @default 'Apps'
+		 */
+		appsButtonLabel?: string;
+	};
+	/**
+	 * Fires on the logo link itself, not the surrounding zone. Call `preventDefault` here to
+	 * hand navigation to a client-side router instead of letting the browser reload the document.
+	 */
+	onLogoClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+	/**
+	 * Renders the app-switcher button. Omit to hide the button entirely. Ignored when
+	 * `appsMenu` is set.
+	 */
+	onAppsClick?: () => void;
+	/**
+	 * Takes over the app-switcher slot with your own control — pass a `DsMainMenu` to open the
+	 * app grid from the brand zone. The node is rendered as-is, so it owns its own trigger,
+	 * open state, and positioning.
+	 */
+	appsMenu?: ReactNode;
+}
+
+export type DsTopBarNavigationBreadcrumbProps = ComponentPropsWithRef<'div'>;
+
+export type DsTopBarNavigationCenterProps = ComponentPropsWithRef<'div'>;
+
+export type DsTopBarNavigationActionsProps = ComponentPropsWithRef<'div'>;
+
+export interface DsTopBarNavigationNotificationsProps extends Omit<
+	ComponentPropsWithRef<'button'>,
+	'children' | 'aria-label' | 'color'
+> {
+	/**
+	 * Unread count. `0` or omitted renders the bell with no badge; anything above
+	 * `notificationCountCap` collapses to a capped label.
+	 */
+	count?: number;
+	locale?: {
+		/**
+		 * Accessible name when there are no unread notifications.
+		 * @default 'Notifications'
+		 */
+		notificationsButtonLabel?: string;
+		/**
+		 * Accessible name when unread notifications exist. Receives the uncapped count.
+		 * @default (count) => `Notifications, ${count} unread`
+		 */
+		notificationsButtonLabelWithCount?: (count: number) => string;
+	};
+}
+
+export interface DsTopBarNavigationUserMenuProps extends Omit<
+	ComponentPropsWithRef<'button'>,
+	'children' | 'aria-label' | 'onSelect'
+> {
+	/**
+	 * Drives the avatar initials and its accessible name.
+	 */
+	name: string;
+	/**
+	 * Avatar photo URL. Omit, or let it fail to load, to fall back to initials.
+	 */
+	src?: string;
+	/**
+	 * Menu entries — `DsDropdownMenu.Item`, `.Separator`, `.ItemGroup` and friends.
+	 */
+	children?: ReactNode;
+	/**
+	 * Open state for controlled usage.
+	 */
+	open?: boolean;
+	/**
+	 * Placement and offset of the menu. Defaults to `bottom-end` so the menu stays inside the
+	 * viewport when the trigger sits against the right edge of the bar.
+	 */
+	positioning?: DsDropdownMenuPositioning;
+	locale?: {
+		/**
+		 * Accessible name for the trigger. Receives `name`; the default distinguishes the
+		 * control from the avatar's own name tooltip.
+		 * @default (name) => `Account menu for ${name}`
+		 */
+		userMenuButtonLabel?: (name: string) => string;
+	};
+	onOpenChange?: (open: boolean) => void;
+	onSelect?: (value: string) => void;
+}

package/src/components/ds-top-bar-navigation/index.ts

@@ -0,0 +1,2 @@
+export { default as DsTopBarNavigation } from './ds-top-bar-navigation';
+export * from './ds-top-bar-navigation.types';

package/src/index.ts

@@ -2,7 +2,9 @@ export * from './components/ds-alert-banner';
 export * from './components/ds-autocomplete';
 export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
+export * from './components/ds-bot-button';
 export * from './components/ds-breadcrumb';
+export * from './components/ds-bulk-actions';
 export * from './components/ds-button';
 export * from './components/ds-button-v3';
 export * from './components/ds-card';
@@ -23,14 +25,17 @@ export * from './components/ds-dialog';
 export * from './components/ds-divider';
 export * from './components/ds-drawer';
 export * from './components/ds-dropdown-menu';
+export * from './components/ds-empty-state';
 export * from './components/ds-expandable-text-input';
 export * from './components/ds-file-upload';
 export * from './components/ds-filter-status-icon';
 export * from './components/ds-form-control';
 export * from './components/ds-grid';
 export * from './components/ds-icon';
+export * from './components/ds-illustration';
 export * from './components/ds-key-value-pair';
 export * from './components/ds-loader';
+export * from './components/ds-main-menu';
 export * from './components/ds-modal';
 export * from './components/ds-number-input';
 export * from './components/ds-panel';
@@ -64,6 +69,7 @@ export * from './components/ds-time-picker';
 export * from './components/ds-toast';
 export * from './components/ds-toggle';
 export * from './components/ds-tooltip';
+export * from './components/ds-top-bar-navigation';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-user-card';

package/src/utils/use-is-horizontally-overflowing.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export const useIsHorizontallyOverflowing = <T extends HTMLElement = HTMLElement>(content?: string) => {
+	const [element, setElement] = useState<T | null>(null);
+	const [measuredOverflow, setMeasuredOverflow] = useState(false);
+
+	useEffect(() => {
+		if (!element || !content) {
+			return;
+		}
+
+		const measure = () => {
+			setMeasuredOverflow(element.scrollWidth > element.clientWidth);
+		};
+
+		measure();
+
+		const resizeObserver = new ResizeObserver(measure);
+		resizeObserver.observe(element);
+
+		// document.fonts is missing in jsdom; `'fonts' in document` (not optional chaining) satisfies TS.
+		const fonts = 'fonts' in document ? document.fonts : undefined;
+		fonts?.addEventListener('loadingdone', measure);
+
+		return () => {
+			resizeObserver.disconnect();
+			fonts?.removeEventListener('loadingdone', measure);
+		};
+	}, [content, element]);
+
+	return {
+		ref: setElement,
+		isOverflowing: Boolean(content) && measuredOverflow,
+	};
+};

package/src/components/ds-site-node/hooks/use-is-overflowing.ts

@@ -1,31 +0,0 @@
-import { useLayoutEffect, useRef, useState } from 'react';
-
-export const useIsOverflowing = <T extends HTMLElement = HTMLElement>(text: string | undefined) => {
-	const ref = useRef<T>(null);
-	const [isOverflowing, setIsOverflowing] = useState(false);
-
-	useLayoutEffect(() => {
-		const element = ref.current;
-		if (!element) {
-			return;
-		}
-
-		const measure = () => setIsOverflowing(element.scrollWidth > element.clientWidth);
-		measure();
-
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-
-		const frame = requestAnimationFrame(measure);
-		document.fonts.ready.then(measure).catch(() => undefined);
-		document.fonts.addEventListener('loadingdone', measure);
-
-		return () => {
-			cancelAnimationFrame(frame);
-			observer.disconnect();
-			document.fonts.removeEventListener('loadingdone', measure);
-		};
-	}, [text]);
-
-	return { ref, isOverflowing };
-};

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.module.scss

@@ -1,112 +0,0 @@
-@use '../../../../styles/typography';
-
-.bulkActionsContainer {
-	position: absolute;
-	bottom: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-	background-color: var(--color-dap-gray-050);
-	border-radius: 8px;
-	box-shadow: 0 4px 12px #0445cc66;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	border-radius: 8px;
-	overflow: hidden;
-	animation-duration: 0.3s;
-	animation-timing-function: ease-out;
-	animation-fill-mode: forwards;
-
-	&.entering {
-		animation-name: slideUpFadeIn;
-	}
-
-	&.exiting {
-		animation-name: slideDownFadeOut;
-	}
-}
-
-.bulkActionsContent {
-	display: flex;
-	align-items: center;
-	padding-right: 6px;
-	padding-left: 6px;
-}
-
-.selectedCountContainer {
-	background-color: var(--color-dap-blue-600);
-	display: flex;
-	align-items: center;
-	padding: 6px 22px;
-}
-
-.selectedCountBadge {
-	color: var(--color-dap-gray-050);
-	margin: 0;
-}
-
-.bulkActionsInfo {
-	color: var(--color-dap-gray-600);
-	text-wrap: nowrap;
-	padding-left: 8px;
-	padding-right: 56px;
-}
-
-.bulkActionsActions {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	> .actionButton {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: var(--3xs);
-		border-right: 1px solid var(--color-dap-gray-400);
-		width: 68px;
-		height: 48px;
-		border-radius: 0;
-	}
-
-	> .actionButton:first-child {
-		border-left: 1px solid var(--color-dap-gray-400);
-	}
-}
-
-.escapeButtonContent {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	color: var(--color-dap-gray-600);
-	gap: 2px !important;
-	width: 36px;
-	padding-left: 4px;
-
-	&:hover {
-		color: var(--color-dap-gray-500);
-	}
-}
-
-@keyframes slideUpFadeIn {
-	0% {
-		opacity: 0;
-		transform: translate(-50%, 100%);
-	}
-	100% {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-}
-
-@keyframes slideDownFadeOut {
-	0% {
-		opacity: 1;
-		transform: translate(-50%, 0);
-	}
-	100% {
-		opacity: 0;
-		transform: translate(-50%, 100%);
-	}
-}

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.tsx

@@ -1,67 +0,0 @@
-import type React from 'react';
-import { useEffect, useState } from 'react';
-import classnames from 'classnames';
-import { DsButton } from '../../../ds-button';
-import { DsIcon } from '../../../ds-icon';
-import styles from './ds-table-bulk-actions.module.scss';
-import type { BulkActionsProps } from './ds-table-bulk-actions.types';
-import { DsTypography } from '../../../ds-typography';
-
-const DsTableBulkActions: React.FC<BulkActionsProps> = ({ numSelectedRows, actions, onClearSelection }) => {
-	const [isRendered, setIsRendered] = useState(false);
-	const [animationClass, setAnimationClass] = useState('');
-
-	useEffect(() => {
-		if (numSelectedRows > 0) {
-			setIsRendered(true);
-			setAnimationClass(styles.entering);
-		} else if (isRendered) {
-			setAnimationClass(styles.exiting);
-			const timer = setTimeout(() => {
-				setIsRendered(false);
-				setAnimationClass('');
-			}, 300);
-			return () => clearTimeout(timer);
-		}
-	}, [numSelectedRows, isRendered]);
-
-	if (!isRendered) {
-		return null;
-	}
-
-	return (
-		<div className={classnames(styles.bulkActionsContainer, animationClass)}>
-			<div className={styles.selectedCountContainer}>
-				<DsTypography variant="heading1" className={styles.selectedCountBadge}>
-					{numSelectedRows}
-				</DsTypography>
-			</div>
-			<div className={styles.bulkActionsContent}>
-				<DsTypography variant="body-md-semi-bold" className={styles.bulkActionsInfo}>
-					Items selected
-				</DsTypography>
-
-				<div className={styles.bulkActionsActions}>
-					{actions.map((action, index) => (
-						<button key={index} type="button" className={styles.actionButton} onClick={action.onClick}>
-							<DsIcon icon={action.icon} />
-							<DsTypography variant="body-xs-md">{action.label}</DsTypography>
-						</button>
-					))}
-				</div>
-
-				<DsButton
-					variant="borderless"
-					size="small"
-					color="neutral-2"
-					contentClassName={styles.escapeButtonContent}
-					onClick={onClearSelection}
-				>
-					<DsIcon icon="close" />
-				</DsButton>
-			</div>
-		</div>
-	);
-};
-
-export default DsTableBulkActions;

package/src/components/ds-table/components/ds-table-bulk-actions/ds-table-bulk-actions.types.ts

@@ -1,41 +0,0 @@
-import type { IconType } from '../../../ds-icon';
-
-/**
- * Represents a bulk action that can be performed on selected table rows
- */
-export interface Action {
-	/**
-	 * Icon to be displayed for the action
-	 */
-	icon: IconType;
-
-	/**
-	 * Label text for the action
-	 */
-	label: string;
-
-	/**
-	 * Function to be called when the action is clicked
-	 */
-	onClick: () => void;
-}
-
-/**
- * Props for the bulk actions component
- */
-export interface BulkActionsProps {
-	/**
-	 * Number of rows currently selected in the table
-	 */
-	numSelectedRows: number;
-
-	/**
-	 * Array of actions to be displayed in the bulk actions bar
-	 */
-	actions: Action[];
-
-	/**
-	 * Function to be called when the selection should be cleared
-	 */
-	onClearSelection: () => void;
-}

package/src/components/ds-table/components/ds-table-bulk-actions/index.ts

@@ -1,2 +0,0 @@
-export { default as DsTableBulkActions } from './ds-table-bulk-actions';
-export * from './ds-table-bulk-actions.types';