@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-main-menu/components/tile-link/tile-link.tsx

@@ -0,0 +1,85 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { DsIcon } from '../../../ds-icon';
+import { DsTooltip } from '../../../ds-tooltip';
+import { DsTypography } from '../../../ds-typography';
+import { COMING_SOON_TOOLTIP, EXTEND_TOOLTIP } from '../../ds-main-menu.types';
+import styles from '../../ds-main-menu.module.scss';
+import { handleActivatableClick, handleActivatableKeyDown, isNonActivatable } from '../../ds-main-menu.utils';
+import { MenuGraphic } from '../menu-graphic';
+import type { TileLinkProps } from './tile-link.types';
+
+export const TileLink = ({ item, isSelected, onItemSelect, onClose }: TileLinkProps) => {
+	const state = item.state ?? 'default';
+	const nonActivatable = isNonActivatable(state);
+	const tileClassName = classNames(styles.tileLink, {
+		[styles.tileLinkSelected]: isSelected,
+		[styles.tileLinkDisabled]: state === 'disabled',
+		[styles.tileLinkComingSoon]: state === 'comingSoon',
+	});
+
+	const isDisabled = state === 'disabled';
+
+	const commonProps = {
+		className: tileClassName,
+		'aria-current': isSelected ? ('page' as const) : undefined,
+		'aria-disabled': nonActivatable ? true : undefined,
+		tabIndex: isDisabled ? -1 : undefined,
+		onClick: nonActivatable
+			? (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => event.preventDefault()
+			: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+					handleActivatableClick(event, item.id, item.href, onItemSelect, onClose),
+		onKeyDown: nonActivatable
+			? undefined
+			: (event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+					handleActivatableKeyDown(event, item.id, item.href, onItemSelect, onClose),
+	};
+
+	const badgeContent =
+		item.statusBadge !== undefined ? (
+			item.statusBadge
+		) : state === 'comingSoon' ? (
+			<DsIcon icon="handyman" size="tiny" color="main" />
+		) : state === 'extend' ? (
+			<DsIcon icon="open_in_full" size="tiny" color="main" />
+		) : null;
+
+	const badgeTooltip =
+		state === 'comingSoon' ? COMING_SOON_TOOLTIP : state === 'extend' ? EXTEND_TOOLTIP : undefined;
+
+	const badge = badgeContent !== null && <span className={styles.badge}>{badgeContent}</span>;
+
+	const content = (
+		<>
+			<span className={styles.tileIcon}>
+				<MenuGraphic icon={item.icon} svgClassName={styles.graphic} size="extra-large" />
+			</span>
+			<DsTypography
+				variant={isSelected ? 'body-sm-md' : 'body-sm-reg'}
+				className={styles.tileLabel}
+				truncate={2}
+				tooltip
+			>
+				{item.label}
+			</DsTypography>
+			{badge &&
+				(badgeTooltip ? (
+					<DsTooltip content={badgeTooltip} placement="top">
+						{badge}
+					</DsTooltip>
+				) : (
+					badge
+				))}
+		</>
+	);
+
+	return item.href ? (
+		<a href={item.href} {...commonProps}>
+			{content}
+		</a>
+	) : (
+		<button type="button" {...commonProps}>
+			{content}
+		</button>
+	);
+};

package/src/components/ds-main-menu/components/tile-link/tile-link.types.ts

@@ -0,0 +1,8 @@
+import type { DsMainMenuItem, DsMainMenuProps } from '../../ds-main-menu.types';
+
+export interface TileLinkProps {
+	item: DsMainMenuItem;
+	isSelected: boolean;
+	onItemSelect?: DsMainMenuProps['onItemSelect'];
+	onClose: () => void;
+}

package/src/components/ds-main-menu/components/utility-link/index.ts

@@ -0,0 +1 @@
+export * from './utility-link';

package/src/components/ds-main-menu/components/utility-link/utility-link.tsx

@@ -0,0 +1,37 @@
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { DsTypography } from '../../../ds-typography';
+import styles from '../../ds-main-menu.module.scss';
+import { handleActivatableClick, handleActivatableKeyDown } from '../../ds-main-menu.utils';
+import { MenuGraphic } from '../menu-graphic';
+import type { UtilityLinkProps } from './utility-link.types';
+
+export const UtilityLink = ({ link, onItemSelect, onClose }: UtilityLinkProps) => {
+	const commonProps = {
+		className: styles.utilityLink,
+		onClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+			handleActivatableClick(event, link.id, link.href, onItemSelect, onClose),
+		onKeyDown: (event: KeyboardEvent<HTMLAnchorElement | HTMLButtonElement>) =>
+			handleActivatableKeyDown(event, link.id, link.href, onItemSelect, onClose),
+	};
+
+	const content = (
+		<>
+			<span className={styles.utilityIcon}>
+				<MenuGraphic icon={link.icon} svgClassName={styles.graphic} size="small" />
+			</span>
+			<DsTypography variant="body-xs-reg" className={styles.utilityLabel} truncate tooltip>
+				{link.label}
+			</DsTypography>
+		</>
+	);
+
+	return link.href ? (
+		<a href={link.href} {...commonProps}>
+			{content}
+		</a>
+	) : (
+		<button type="button" {...commonProps}>
+			{content}
+		</button>
+	);
+};

package/src/components/ds-main-menu/components/utility-link/utility-link.types.ts

@@ -0,0 +1,7 @@
+import type { DsMainMenuProps, DsMainMenuUtilityLink } from '../../ds-main-menu.types';
+
+export interface UtilityLinkProps {
+	link: DsMainMenuUtilityLink;
+	onItemSelect?: DsMainMenuProps['onItemSelect'];
+	onClose: () => void;
+}

package/src/components/ds-main-menu/ds-main-menu.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=20895-43484
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-main-menu
+// component=DsMainMenu
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsMainMenu
+  trigger={/* header trigger */}
+  items={items}
+  utilityLinks={utilityLinks}
+  selectedId={selectedId}
+  onItemSelect={onItemSelect}
+/>`,
+	imports: ["import { DsMainMenu } from '@drivenets/design-system';"],
+	id: 'ds-main-menu',
+	metadata: { nestable: false },
+} satisfies figma.Template;

package/src/components/ds-main-menu/ds-main-menu.module.scss

@@ -0,0 +1,349 @@
+$z-index: 1000;
+$tile-size: 92px;
+$badge-size: 24px;
+$utility-min-height: 28px;
+$utility-icon-size: 20px;
+$transition-duration: 0.2s;
+$focus-outline-width: 2px;
+$disabled-icon-opacity: 0.55;
+$shadow: 0 6px 18px rgb(4 69 204 / 30%);
+$expanded-card-width: 290px;
+$icon-size: 42px;
+
+@mixin interactive-surface {
+	background: var(--background-action-secondary-hover);
+	color: var(--font-action);
+}
+
+@mixin expanded-surface {
+	background: var(--background-action-secondary-hover);
+}
+
+.root {
+	--ds-main-menu-z-index: #{$z-index};
+
+	position: relative;
+	z-index: var(--ds-main-menu-z-index);
+	display: flex;
+	flex-direction: column;
+	width: max-content;
+	padding: var(--sm) var(--lg);
+	border-radius: var(--4xs);
+	background: var(--background);
+	box-shadow: $shadow;
+}
+
+.grid {
+	display: grid;
+	gap: var(--sm);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	&[data-variant='compact'] {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	&[data-variant='expanded'] {
+		grid-template-columns: repeat(2, $expanded-card-width);
+	}
+}
+
+.tile {
+	position: relative;
+}
+
+.tileLink {
+	position: relative;
+	box-sizing: content-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--xs);
+	width: $tile-size;
+	height: $tile-size;
+	padding: var(--standard);
+	border: none;
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-secondary);
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		color $transition-duration ease,
+		box-shadow $transition-duration ease;
+
+	&:hover:not(:disabled):not([aria-disabled='true']) {
+		@include interactive-surface;
+	}
+
+	&:active:not(:disabled):not([aria-disabled='true']) {
+		@include interactive-surface;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include interactive-surface;
+
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: -$focus-outline-width;
+	}
+}
+
+.tileLinkSelected {
+	@include interactive-surface;
+
+	box-shadow: inset 0 0 0 1px var(--border-action-primary);
+}
+
+.tileLinkDisabled {
+	background: var(--background);
+	box-shadow: none;
+	color: var(--font-disabled);
+	cursor: not-allowed;
+
+	.tileIcon {
+		opacity: $disabled-icon-opacity;
+	}
+}
+
+.tileLinkComingSoon {
+	cursor: not-allowed;
+}
+
+.tileIcon {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $icon-size;
+	height: $icon-size;
+}
+
+.graphic {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.tileLabel {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	text-align: center;
+	padding: 0 var(--3xs);
+}
+
+.badge {
+	position: absolute;
+	z-index: 1;
+	top: var(--xs);
+	right: var(--xs);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $badge-size;
+	height: $badge-size;
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+}
+
+.expandedItem {
+	position: relative;
+}
+
+.expandedLink {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--standard);
+	width: 100%;
+	padding: var(--md) var(--xl);
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		box-shadow $transition-duration ease;
+
+	&:hover:not([aria-disabled='true']) {
+		@include expanded-surface;
+	}
+
+	&:active:not([aria-disabled='true']) {
+		@include expanded-surface;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include expanded-surface;
+
+		outline: $focus-outline-width solid var(--border-action-primary);
+		outline-offset: -$focus-outline-width;
+	}
+}
+
+.expandedLinkSelected {
+	@include expanded-surface;
+
+	box-shadow: inset 0 0 0 1px var(--border-action-primary);
+}
+
+.expandedLinkDisabled {
+	background: var(--background);
+	box-shadow: none;
+	color: var(--font-disabled);
+	cursor: not-allowed;
+
+	.expandedIcon {
+		opacity: $disabled-icon-opacity;
+	}
+}
+
+.expandedLinkComingSoon {
+	cursor: not-allowed;
+}
+
+.expandedIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $icon-size;
+	height: $icon-size;
+	color: inherit;
+}
+
+.expandedText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	width: 100%;
+	word-break: break-word;
+}
+
+.expandedDescription {
+	color: var(--font-secondary);
+}
+
+.expandedAction {
+	position: absolute;
+	z-index: 1;
+	top: var(--md);
+	right: var(--xl);
+	display: flex;
+	align-items: center;
+	height: $icon-size;
+}
+
+.expandedActionBadge {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $badge-size;
+	height: $badge-size;
+	border: 1px solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
+	color: var(--font-main);
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--xs);
+	margin-top: var(--xs);
+}
+
+.utilityList {
+	display: flex;
+	gap: var(--xs);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.utilityItem {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+.utilityLink {
+	display: flex;
+	align-items: center;
+	gap: var(--xs);
+	width: 100%;
+	min-height: $utility-min-height;
+	padding: var(--3xs) var(--xs);
+	border: $focus-outline-width solid transparent;
+	border-radius: var(--3xs);
+	background: transparent;
+	color: var(--font-secondary);
+	text-align: left;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		background-color $transition-duration ease,
+		color $transition-duration ease,
+		border-color $transition-duration ease;
+
+	&:hover {
+		@include interactive-surface;
+	}
+
+	&:active {
+		@include interactive-surface;
+
+		border-color: var(--border-action-primary);
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@include interactive-surface;
+
+		border-color: var(--border-action-primary);
+	}
+}
+
+.utilityIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: $utility-icon-size;
+	height: $utility-icon-size;
+	flex-shrink: 0;
+	color: inherit;
+}
+
+.utilityLabel {
+	min-width: 0;
+}
+
+// Reset the DsPopover.Panel container so the nav's own visual styles (bg, shadow, radius) render,
+// and size it to the menu content instead of DsPopover's fixed default width.
+.panel {
+	background: transparent !important;
+	box-shadow: none !important;
+	width: max-content !important;
+	min-width: max-content !important;
+}

package/src/components/ds-main-menu/ds-main-menu.tsx

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import classNames from 'classnames';
+import { DsDivider } from '../ds-divider';
+import { DsPopover } from '../ds-popover';
+import { ExpandedItem } from './components/expanded-item';
+import { TileLink } from './components/tile-link';
+import { UtilityLink } from './components/utility-link';
+import type { DsMainMenuProps } from './ds-main-menu.types';
+import styles from './ds-main-menu.module.scss';
+
+const DsMainMenu = ({
+	trigger,
+	items,
+	utilityLinks,
+	variant = 'compact',
+	selectedId,
+	onItemSelect,
+	className,
+	style,
+	ref,
+	'aria-label': ariaLabel = 'Main menu',
+	side = 'bottom',
+	align = 'start',
+	gutter = 8,
+	getAnchorElement,
+	open: openProp,
+	onOpenChange,
+}: DsMainMenuProps) => {
+	const isControlled = openProp !== undefined;
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = isControlled ? openProp : internalOpen;
+
+	const handleOpenChange = (nextOpen: boolean) => {
+		if (!isControlled) {
+			setInternalOpen(nextOpen);
+		}
+
+		onOpenChange?.(nextOpen);
+	};
+
+	const closePanel = () => handleOpenChange(false);
+
+	return (
+		<DsPopover.Root
+			open={open}
+			side={side}
+			align={align}
+			gutter={gutter}
+			getAnchorElement={getAnchorElement}
+			onOpenChange={handleOpenChange}
+		>
+			<DsPopover.Trigger>{trigger}</DsPopover.Trigger>
+			<DsPopover.Panel className={styles.panel}>
+				<nav
+					ref={ref}
+					className={classNames(styles.root, className)}
+					style={style}
+					aria-label={ariaLabel}
+					data-variant={variant}
+				>
+					<ul className={styles.grid} data-variant={variant}>
+						{items.map((item) => (
+							<li key={item.id} className={variant === 'expanded' ? styles.expandedItem : styles.tile}>
+								{variant === 'expanded' ? (
+									<ExpandedItem
+										item={item}
+										isSelected={item.id === selectedId}
+										onItemSelect={onItemSelect}
+										onClose={closePanel}
+									/>
+								) : (
+									<TileLink
+										item={item}
+										isSelected={item.id === selectedId}
+										onItemSelect={onItemSelect}
+										onClose={closePanel}
+									/>
+								)}
+							</li>
+						))}
+					</ul>
+					{utilityLinks.length > 0 && (
+						<div className={styles.footer}>
+							<DsDivider />
+							<ul className={styles.utilityList}>
+								{utilityLinks.map((link) => (
+									<li key={link.id} className={styles.utilityItem}>
+										<UtilityLink link={link} onItemSelect={onItemSelect} onClose={closePanel} />
+									</li>
+								))}
+							</ul>
+						</div>
+					)}
+				</nav>
+			</DsPopover.Panel>
+		</DsPopover.Root>
+	);
+};
+
+DsMainMenu.displayName = 'DsMainMenu';
+
+export default DsMainMenu;

package/src/components/ds-main-menu/ds-main-menu.types.ts

@@ -0,0 +1,86 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { DsPopoverAlign, DsPopoverSide } from '../ds-popover';
+import type { IconType } from '../ds-icon';
+
+export const mainMenuItemStates = ['default', 'disabled', 'comingSoon', 'extend'] as const;
+export type DsMainMenuItemState = (typeof mainMenuItemStates)[number];
+
+export const mainMenuVariants = ['compact', 'expanded'] as const;
+export type DsMainMenuVariant = (typeof mainMenuVariants)[number];
+
+export interface DsMainMenuItem {
+	id: string;
+	label: string;
+	/**
+	 * Tile graphic. Material/custom icon name (`'speed'`) or an SVG component for branded marks.
+	 */
+	icon: IconType;
+	/**
+	 * Supporting copy shown beneath the label in the `'expanded'` variant. Ignored in `'compact'`.
+	 */
+	description?: string;
+	href?: string;
+	state?: DsMainMenuItemState;
+	/**
+	 * Element rendered in the top-right badge slot. When omitted, a default badge is shown for
+	 * `'comingSoon'` (wrench icon) and `'extend'` (fullscreen icon). Pass `null` to suppress it.
+	 */
+	statusBadge?: ReactElement | null;
+}
+
+export interface DsMainMenuUtilityLink {
+	id: string;
+	label: string;
+	/** Leading graphic. Material/custom icon name or an SVG component. */
+	icon: IconType;
+	href?: string;
+}
+
+export interface DsMainMenuProps {
+	/** Single focusable element that toggles the menu panel. */
+	trigger: ReactNode;
+	items: DsMainMenuItem[];
+	utilityLinks: DsMainMenuUtilityLink[];
+	/**
+	 * Layout of the menu items. `'compact'` renders square icon tiles in a grid;
+	 * `'expanded'` renders wide cards with an icon, heading, and `description`.
+	 * Chosen once per menu — the two layouts are never mixed.
+	 * @default 'compact'
+	 */
+	variant?: DsMainMenuVariant;
+	/** Currently selected app tile. Matched against `items[].id`. */
+	selectedId?: string;
+	onItemSelect?: (id: string) => void;
+	/** Accessible name for the navigation landmark. */
+	'aria-label'?: string;
+	className?: string;
+	style?: CSSProperties;
+	ref?: Ref<HTMLElement>;
+	/**
+	 * Preferred side of the trigger to render the panel against.
+	 * @default 'bottom'
+	 */
+	side?: DsPopoverSide;
+	/**
+	 * Alignment of the panel along the trigger edge.
+	 * @default 'start'
+	 */
+	align?: DsPopoverAlign;
+	/**
+	 * Gap in pixels between the trigger and the panel.
+	 * @default 8
+	 */
+	gutter?: number;
+	/**
+	 * Returns the element the panel should position against instead of the trigger.
+	 * Useful when the trigger lives in a sidebar and the panel should open beside the content area.
+	 */
+	getAnchorElement?: () => HTMLElement | null;
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Fires when the popover opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+}
+
+export const COMING_SOON_TOOLTIP = 'Coming soon — this app is still under construction';
+export const EXTEND_TOOLTIP = 'Click to open the app';