@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-toggle-filter-data/ds-toggle-filter-data.module.scss

@@ -0,0 +1,69 @@
+.pill {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--4xs);
+	height: var(--lg);
+	padding: var(--4xs) var(--xs);
+	border: 1px solid var(--border);
+	border-radius: 9999px;
+	background: var(--background);
+	color: var(--font-main);
+	cursor: pointer;
+	transition-property: background, border-color, box-shadow, color;
+	transition-timing-function: ease-out;
+	transition-duration: 0.2s;
+
+	&:hover {
+		background: var(--background-action-hover-weak);
+		border-color: var(--border-field-hover);
+	}
+
+	&:focus-visible {
+		outline: none;
+		border-color: var(--border-field-hover);
+		background: var(--background-action-hover-weak);
+		box-shadow: inset 0 0 0 1px var(--border-field-hover);
+	}
+
+	&.active {
+		border-color: var(--border-action-primary);
+		background: var(--background-secondary-hover);
+
+		&:hover,
+		&:focus-visible {
+			border-color: var(--border-action-primary-hover);
+			background: var(--background-action-secondary-hover);
+		}
+
+		&:focus-visible {
+			box-shadow: inset 0 0 0 1px var(--border-action-primary-hover);
+		}
+
+		&:disabled {
+			border-color: var(--border-disabled);
+			background: var(--background-secondary);
+		}
+	}
+
+	&:disabled {
+		border-color: var(--border-disabled);
+		background: var(--background-action-hover-weak);
+		color: var(--font-disabled);
+		box-shadow: none;
+		cursor: not-allowed;
+
+		.value {
+			color: var(--font-disabled);
+		}
+	}
+}
+
+.label,
+.value {
+	flex-shrink: 0;
+}
+
+.value {
+	color: var(--font-secondary);
+}

package/src/components/ds-toggle-filter-data/ds-toggle-filter-data.tsx

@@ -0,0 +1,55 @@
+import type { MouseEvent } from 'react';
+import classNames from 'classnames';
+import styles from './ds-toggle-filter-data.module.scss';
+import type { DsToggleFilterDataProps } from './ds-toggle-filter-data.types';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * @summary Data pill that toggles on and off, pairing a label with its value, for filter rows
+ * above a table or list.
+ *
+ * Internal to the filters component and not exported from the package.
+ *
+ * A real `<button type="button">`, so `aria-pressed`, Enter/Space activation, the disabled state
+ * and the focus ring are all native. Selection is controlled: the pill reports the next `active`
+ * value through `onActiveChange` and never toggles itself.
+ */
+const DsToggleFilterData = ({
+	ref,
+	label,
+	value,
+	active,
+	disabled = false,
+	className,
+	style,
+	onActiveChange,
+	onClick,
+}: DsToggleFilterDataProps) => {
+	const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+		onClick?.(event);
+		onActiveChange?.(!active);
+	};
+
+	return (
+		<button
+			ref={ref}
+			type="button"
+			className={classNames(styles.pill, { [styles.active]: active }, className)}
+			style={style}
+			disabled={disabled}
+			aria-pressed={active}
+			onClick={handleClick}
+		>
+			<DsTypography variant="body-xs-md" className={styles.label}>
+				{label}
+			</DsTypography>
+			<DsTypography variant="body-xs-reg" className={styles.value}>
+				{value}
+			</DsTypography>
+		</button>
+	);
+};
+
+DsToggleFilterData.displayName = 'DsToggleFilterData';
+
+export default DsToggleFilterData;

package/src/components/ds-toggle-filter-data/ds-toggle-filter-data.types.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+
+export interface DsToggleFilterDataProps {
+	/**
+	 * Ref to the pill element
+	 */
+	ref?: Ref<HTMLButtonElement>;
+	/**
+	 * Emphasized leading segment naming the data the pill filters on
+	 */
+	label: ReactNode;
+	/**
+	 * Secondary-colored trailing segment, typically the count the `label` refers to
+	 */
+	value: ReactNode;
+	/**
+	 * Whether the pill is toggled on. Controlled — pair it with `onActiveChange` and re-render with
+	 * the next value. Surfaced as `aria-pressed`, which stays exposed while `disabled`.
+	 */
+	active: boolean;
+	/**
+	 * Whether the pill is disabled. Neither callback fires while set.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply
+	 */
+	style?: CSSProperties;
+	/**
+	 * Called on click and on keyboard activation with the next `active` value
+	 */
+	onActiveChange?: (active: boolean) => void;
+	/**
+	 * Called with the raw click event, before `onActiveChange`. Observational only — it cannot veto
+	 * the toggle.
+	 */
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-toggle-filter-data/index.ts

@@ -0,0 +1 @@
+export { default as DsToggleFilterData } from './ds-toggle-filter-data';

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

@@ -1,5 +1,13 @@
 @use '../../styles/typography';
 
+.positioner {
+	// Zag marks the *content* pointer-transparent when the tooltip is not
+	// interactive, but leaves this wrapper clickable — so an open tooltip swallows
+	// clicks meant for whatever it overlaps. Interactive content re-enables itself
+	// with `pointer-events: auto`, which still applies under a `none` parent.
+	pointer-events: none;
+}
+
 .tooltip {
 	--arrow-size: 7px;
 	color: var(--font-on-action);

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

@@ -14,6 +14,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 	children,
 	placement = 'top',
 	disabled = false,
+	interactive = false,
+	openDelay = OPEN_DELAY_MS,
+	closeDelay = CLOSE_DELAY_MS,
 	getAnchorRect,
 	slotProps,
 }) => {
@@ -23,8 +26,9 @@ const DsTooltip: FC<DsTooltipProps> = ({
 
 	return (
 		<Tooltip.Root
-			openDelay={OPEN_DELAY_MS}
-			closeDelay={CLOSE_DELAY_MS}
+			interactive={interactive}
+			openDelay={openDelay}
+			closeDelay={closeDelay}
 			disabled={disabled}
 			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
 			lazyMount
@@ -32,7 +36,7 @@ const DsTooltip: FC<DsTooltipProps> = ({
 		>
 			<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
 			<Portal>
-				<Tooltip.Positioner>
+				<Tooltip.Positioner className={styles.positioner}>
 					<Tooltip.Content
 						className={classNames(styles.tooltip, slotProps?.content?.className)}
 						style={slotProps?.content?.style}

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

@@ -44,6 +44,23 @@ export interface DsTooltipProps {
 	 * When true the trigger renders but the tooltip never opens.
 	 */
 	disabled?: boolean;
+	/**
+	 * When true, content is pointer-reachable and the tooltip stays open while the
+	 * pointer is over it. Pair with a non-zero `closeDelay` (e.g. 150) so the pointer
+	 * can travel from the trigger onto the content; `0` can lose that handoff.
+	 * @default false
+	 */
+	interactive?: boolean;
+	/**
+	 * Milliseconds after pointer enter or focus before the tooltip opens.
+	 * @default 200
+	 */
+	openDelay?: number;
+	/**
+	 * Milliseconds after pointer leave before the tooltip closes.
+	 * @default 0
+	 */
+	closeDelay?: number;
 	/**
 	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
 	 * each reposition. Return `null` to fall back to the trigger.

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

@@ -0,0 +1,35 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=9543-40942
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-top-bar-navigation
+// component=DsTopBarNavigation
+//
+// `DsTopBarNavigationV1` maps to the `DsTopBarNavigation` compound component. Figma models the
+// bar as a fixed 920px left frame with an absolutely-positioned breadcrumb; in code the zones
+// are flex (`.Logo` fixed-basis, `.Breadcrumb` shrinkable, `.Center` reserved, `.Actions`
+// pinned right), so none of that geometry maps to props.
+//
+// The brand glyph and wordmark are consumer slots — no brand asset ships with the design
+// system — so they are emitted as placeholders. Figma's `DsBotButtonV1` maps to `DsBotButton`,
+// which is connected separately in `ds-bot-button/ds-bot-button.figma.ts`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTopBarNavigation>
+	<DsTopBarNavigation.Logo logo={<img src="/brand-mark.svg" alt="" />} wordmark="DAP" href="/" onAppsClick={() => {}} />
+	<DsTopBarNavigation.Breadcrumb>
+		<DsBreadcrumb items={[]} />
+	</DsTopBarNavigation.Breadcrumb>
+	<DsTopBarNavigation.Center />
+	<DsTopBarNavigation.Actions>
+		<DsTopBarNavigation.Notifications count={13} onClick={() => {}} />
+		<DsBotButton />
+		<DsTopBarNavigation.UserMenu name="Full Name">
+			<DsDropdownMenu.Item value="profile">Profile</DsDropdownMenu.Item>
+		</DsTopBarNavigation.UserMenu>
+	</DsTopBarNavigation.Actions>
+</DsTopBarNavigation>`,
+	imports: [
+		"import { DsTopBarNavigation, DsBotButton, DsBreadcrumb, DsDropdownMenu } from '@drivenets/design-system';",
+	],
+	id: 'ds-top-bar-navigation',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-top-bar-navigation/ds-top-bar-navigation.module.scss

@@ -0,0 +1,150 @@
+$focus-outline-width: 2px;
+$disabled-avatar-opacity: 0.55;
+
+.root {
+	--ds-top-bar-navigation-height: 54px;
+	--ds-top-bar-navigation-logo-min-width: 174px;
+	--ds-top-bar-navigation-logo-glyph-size: 32px;
+	--ds-top-bar-navigation-wordmark-font-size: 24px;
+	--ds-top-bar-navigation-breadcrumb-offset: var(--lg);
+	--ds-top-bar-navigation-zone-gap: var(--lg);
+	--ds-top-bar-navigation-badge-size: 16px;
+	--ds-top-bar-navigation-caret-size: 20px;
+
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: var(--ds-top-bar-navigation-height);
+	padding-right: var(--md);
+	border-bottom: 1px solid var(--border);
+	background: var(--background);
+}
+
+.logo {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	gap: var(--sm);
+	align-self: stretch;
+	min-width: var(--ds-top-bar-navigation-logo-min-width);
+	padding: 0 var(--lg);
+	background: var(--background-primary);
+	color: var(--font-on-action);
+}
+
+.logoLockup {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	color: inherit;
+	text-decoration: none;
+}
+
+.logoGlyph {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-logo-glyph-size);
+	height: var(--ds-top-bar-navigation-logo-glyph-size);
+}
+
+.logoWordmark {
+	font-family: var(--font-family-heading);
+	font-size: var(--ds-top-bar-navigation-wordmark-font-size);
+	font-weight: var(--font-weight-bold);
+	white-space: nowrap;
+}
+
+.breadcrumb {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+	margin-left: var(--ds-top-bar-navigation-breadcrumb-offset);
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.center {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	gap: var(--standard);
+	margin-inline-start: auto;
+	padding-inline-start: var(--ds-top-bar-navigation-zone-gap);
+}
+
+.notificationsBadge {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: var(--ds-top-bar-navigation-badge-size);
+	height: var(--ds-top-bar-navigation-badge-size);
+	padding: 0 var(--3xs);
+	border-radius: 9999px;
+	background: var(--background-error);
+	color: var(--font-on-action);
+	font-size: var(--body-font-size-xs);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--body-line-height-xs);
+
+	&[data-empty] {
+		display: none;
+	}
+}
+
+.userMenuTrigger {
+	display: flex;
+	align-items: center;
+	gap: var(--3xs);
+	padding: 0;
+	border: none;
+	border-radius: var(--3xs);
+	background: transparent;
+	color: var(--font-main);
+	cursor: pointer;
+
+	// Nested for the extra class of specificity: `DsAvatar` paints its own `background-color`
+	// and `color` from a single-class rule, so a standalone `.userMenuAvatar` ties with it and
+	// bundle order picks the winner.
+	.userMenuAvatar {
+		background-color: var(--light-buttons-tertiary);
+		color: var(--font-main);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: $focus-outline-width;
+	}
+
+	&:disabled {
+		color: var(--font-disabled);
+		cursor: not-allowed;
+
+		// The caret follows `color`; the avatar sets its own fill and text color above, so
+		// neither inherits the disabled tone — dim the whole lockup instead.
+		.userMenuAvatar {
+			opacity: $disabled-avatar-opacity;
+		}
+	}
+}
+
+.userMenuCaret {
+	display: flex;
+	flex-shrink: 0;
+	width: var(--ds-top-bar-navigation-caret-size);
+	height: var(--ds-top-bar-navigation-caret-size);
+}

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;