@drivenets/design-system 0.1.0 → 0.3.0

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

@@ -0,0 +1,130 @@
+import { useRef, useState } from 'react';
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import DsIcon from '../../../ds-icon/ds-icon';
+import type { IconType } from '../../../ds-icon';
+import { DsTooltip } from '../../../ds-tooltip';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import type { DsTabsTabProps } from '../../ds-tabs.types';
+import styles from './ds-tabs-tab.module.scss';
+
+export const DsTabsTab = ({
+	value,
+	disabled,
+	icon,
+	label,
+	badge,
+	menuActionItems,
+	onMenuActionSelect,
+	tooltip,
+	className,
+	style,
+	children,
+}: DsTabsTabProps) => {
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const menuTriggerRef = useRef<HTMLDivElement>(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+
+	const hasMenuActions = menuActionItems && menuActionItems.length > 0;
+
+	const handleMenuActionSelect = (actionValue: string) => {
+		onMenuActionSelect?.(actionValue);
+		setMenuOpen(false);
+	};
+
+	const tabContent = (
+		<Tabs.Trigger
+			ref={triggerRef}
+			value={value}
+			disabled={disabled}
+			className={classNames(styles.tabItem, className)}
+			style={style}
+		>
+			{children ? (
+				children
+			) : (
+				<>
+					{icon && (
+						<div className={styles.icon}>
+							<DsIcon icon={icon} size="tiny" />
+						</div>
+					)}
+					{label && <span className={styles.label}>{label}</span>}
+					{badge !== undefined && <div className={styles.badge}>{badge}</div>}
+					{hasMenuActions && (
+						<div
+							ref={menuTriggerRef}
+							className={styles.menuTrigger}
+							onClick={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								setMenuOpen(!menuOpen);
+							}}
+							onKeyDown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.stopPropagation();
+									e.preventDefault();
+									setMenuOpen(!menuOpen);
+								}
+							}}
+							role="button"
+							tabIndex={0}
+							aria-label="Open menu"
+							aria-expanded={menuOpen}
+						>
+							<DsIcon
+								icon={(menuOpen ? 'arrow_drop_up' : 'arrow_drop_down') satisfies IconType}
+								size="tiny"
+							/>
+						</div>
+					)}
+				</>
+			)}
+		</Tabs.Trigger>
+	);
+
+	const menuDropdown = menuActionItems && menuActionItems.length > 0 && (
+		<DsDropdownMenu.Root
+			open={menuOpen}
+			onOpenChange={setMenuOpen}
+			onSelect={handleMenuActionSelect}
+			positioning={{
+				placement: 'bottom-start',
+				gutter: 4,
+				getAnchorRect: () => menuTriggerRef.current?.getBoundingClientRect() ?? null,
+			}}
+		>
+			<DsDropdownMenu.Trigger asChild>
+				<div style={{ display: 'none' }} aria-hidden="true" />
+			</DsDropdownMenu.Trigger>
+			<DsDropdownMenu.Content className={styles.menuContent}>
+				{menuActionItems.map((item) => (
+					<DsDropdownMenu.Item
+						key={item.value}
+						value={item.value}
+						disabled={item.disabled}
+						className={styles.menuItem}
+					>
+						<span className={styles.menuItemLabel}>{item.label}</span>
+					</DsDropdownMenu.Item>
+				))}
+			</DsDropdownMenu.Content>
+		</DsDropdownMenu.Root>
+	);
+
+	if (tooltip) {
+		return (
+			<>
+				<DsTooltip content={tooltip}>{tabContent}</DsTooltip>
+				{menuDropdown}
+			</>
+		);
+	}
+
+	return (
+		<>
+			{tabContent}
+			{menuDropdown}
+		</>
+	);
+};

package/src/components/ds-tabs/components/ds-tabs-tab/index.ts

@@ -0,0 +1 @@
+export { DsTabsTab } from './ds-tabs-tab';

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

@@ -0,0 +1,14 @@
+.root {
+	display: flex;
+	width: 100%;
+
+	&[data-orientation='vertical'] {
+		flex-direction: row;
+		gap: var(--spacing-lg);
+	}
+
+	&[data-orientation='horizontal'] {
+		flex-direction: column;
+		gap: 0;
+	}
+}

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

@@ -0,0 +1,46 @@
+import { Tabs } from '@ark-ui/react/tabs';
+import classNames from 'classnames';
+import { DsTabsList } from './components/ds-tabs-list';
+import { DsTabsTab } from './components/ds-tabs-tab';
+import { DsTabsContent } from './components/ds-tabs-content';
+import type { DsTabsProps } from './ds-tabs.types';
+import styles from './ds-tabs.module.scss';
+
+const DsTabsRoot = ({
+	value,
+	defaultValue,
+	onValueChange,
+	orientation = 'horizontal',
+	size = 'medium',
+	className,
+	style,
+	children,
+}: DsTabsProps) => {
+	const handleValueChange = (details: { value: string | null }) => {
+		onValueChange?.(details.value);
+	};
+
+	return (
+		<Tabs.Root
+			orientation={orientation}
+			value={value}
+			defaultValue={defaultValue}
+			onValueChange={handleValueChange}
+			activationMode="manual"
+			lazyMount
+			unmountOnExit
+			className={classNames(styles.root, className)}
+			style={style}
+			data-size={size}
+		>
+			{children}
+		</Tabs.Root>
+	);
+};
+
+export const DsTabs = {
+	Root: DsTabsRoot,
+	List: DsTabsList,
+	Tab: DsTabsTab,
+	Content: DsTabsContent,
+};

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

@@ -0,0 +1,97 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IconType } from '../ds-icon';
+
+export type DsTabsSize = 'medium' | 'small';
+export type DsTabsOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Menu action item configuration
+ */
+export interface DsTabsMenuActionItem {
+	/** Unique value for the action */
+	value: string;
+	/** Display label */
+	label: string;
+	/** Whether the action is disabled */
+	disabled?: boolean;
+}
+
+export interface DsTabsProps {
+	/** Current active tab value */
+	value?: string;
+	/** Default tab value for uncontrolled mode */
+	defaultValue?: string;
+	/** Callback when tab changes */
+	onValueChange?: (value: string | null) => void;
+	/** Tab orientation */
+	orientation?: DsTabsOrientation;
+	/** Tab size variant */
+	size?: DsTabsSize;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Children components */
+	children: ReactNode;
+}
+
+export interface DsTabsListProps {
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Children components (DsTabsTab) */
+	children: ReactNode;
+}
+
+type DsTabsTabBaseProps = {
+	/** Unique value for this tab */
+	value: string;
+	/** Menu action items to display in dropdown */
+	menuActionItems?: DsTabsMenuActionItem[];
+	/** Callback when a menu action is selected */
+	onMenuActionSelect?: (value: string) => void;
+	/** Tooltip text to show on hover */
+	tooltip?: string;
+	/** Disabled state */
+	disabled?: boolean;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+};
+
+export type DsTabsTabProps = DsTabsTabBaseProps &
+	(
+		| {
+				/** Custom children (overrides default rendering) */
+				children: ReactNode;
+				/** Tab label text */
+				label?: never;
+				/** Leading icon name (Material Icons) or SVG component */
+				icon?: never;
+				/** Badge count or text */
+				badge?: never;
+		  }
+		| {
+				/** Custom children (overrides default rendering) */
+				children?: never;
+				/** Tab label text */
+				label?: string;
+				/** Leading icon name (Material Icons) or SVG component */
+				icon?: IconType;
+				/** Badge count or text */
+				badge?: string | number;
+		  }
+	);
+
+export interface DsTabsContentProps {
+	/** Value matching the tab this content belongs to */
+	value: string;
+	/** Custom className */
+	className?: string;
+	/** Custom styles */
+	style?: CSSProperties;
+	/** Content to display */
+	children: ReactNode;
+}

package/src/components/ds-tabs/index.ts

@@ -0,0 +1,2 @@
+export { DsTabs } from './ds-tabs';
+export type * from './ds-tabs.types';

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

@@ -0,0 +1,112 @@
+@use '../../styles/typography';
+
+.tag {
+	--transition-duration: 200ms;
+
+	display: inline-flex;
+	outline: 2px solid transparent;
+	align-items: center;
+	border-radius: 4px;
+	cursor: default;
+	overflow: hidden;
+	position: relative;
+	padding: var(--spacing-3xs) var(--spacing-xs);
+	background: var(--color-background);
+	border: 1px solid var(--color-border-contrast);
+	transition-property:
+		background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
+		opacity, visibility;
+	transition-timing-function: ease-out;
+	transition-duration: var(--transition-duration);
+
+	&.clickable {
+		cursor: pointer;
+
+		&:hover {
+			background: var(--color-background-secondary);
+			border-color: var(--color-border-action-secondary-hover);
+		}
+
+		&:focus-visible {
+			outline-color: var(--color-border-action-secondary);
+		}
+	}
+
+	&.selected {
+		background: var(--color-background-selected-weak) !important;
+		border-color: var(--color-border-action-primary) !important;
+
+		&:focus-visible {
+			outline-color: var(--color-border-action-primary);
+		}
+
+		.deleteButton {
+			outline-color: var(--color-border-action-primary);
+		}
+	}
+
+	&.include {
+		.variantIcon {
+			color: var(--color-icon-secondary);
+		}
+	}
+
+	&.exclude {
+		.variantIcon {
+			color: var(--color-icon-danger);
+		}
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		color: var(--color-font-disabled);
+		background: var(--color-background);
+		border-color: var(--color-border-contrast);
+
+		.label {
+			color: var(--color-font-disabled);
+		}
+
+		.variantIcon {
+			color: var(--color-font-disabled);
+		}
+	}
+
+	.deleteButton {
+		opacity: 0;
+		visibility: hidden;
+		max-width: 0;
+		display: flex;
+		outline-color: var(--color-border-action-secondary);
+		user-select: none;
+		transition-property:
+			background, border-color, width, max-width, color, fill, stroke, opacity, transform, outline-color,
+			visibility, margin-left;
+		transition-timing-function: ease-out;
+		transition-duration: var(--transition-duration);
+		color: var(--color-icon-secondary);
+
+		&:hover {
+			background: var(--color-background-action-secondary-hover);
+		}
+	}
+
+	&:hover:not(.disabled) .deleteButton,
+	&:focus-within:not(.disabled) .deleteButton,
+	&.selected:not(.disabled) .deleteButton {
+		opacity: 1;
+		visibility: visible;
+		max-width: 50px;
+		margin-left: var(--spacing-3xs);
+	}
+}
+
+.label {
+	@include typography.ellipsis;
+}
+
+.icon {
+	flex-shrink: 0;
+	display: flex;
+	margin-right: var(--spacing-3xs);
+}

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

@@ -0,0 +1,124 @@
+import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
+import classNames from 'classnames';
+import styles from './ds-tag.module.scss';
+import type { DsTagProps } from './ds-tag.types';
+import { DsIcon } from '../ds-icon';
+import { DsTypography } from '../ds-typography';
+
+/**
+ * Design system Tag component
+ */
+const DsTag = ({
+	ref,
+	label,
+	className,
+	style = {},
+	size = 'medium',
+	selected = false,
+	variant = 'default',
+	disabled = false,
+	locale = {},
+	onClick,
+	onDelete,
+	slots,
+	...rest
+}: DsTagProps) => {
+	const tagClass = classNames(
+		styles.tag,
+		{
+			[styles.clickable]: onClick !== undefined && !disabled,
+			[styles.selected]: selected && !disabled,
+			[styles.include]: variant === 'include',
+			[styles.exclude]: variant === 'exclude',
+			[styles.disabled]: disabled,
+		},
+		className,
+	);
+
+	const handleDeleteClick = (event: MouseEvent<HTMLElement>) => {
+		event.stopPropagation();
+		onDelete?.(event);
+	};
+
+	const handleKeyDownTag = (event: KeyboardEvent<HTMLElement>) => {
+		if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onClick(event as KeyboardEvent<HTMLDivElement>);
+
+			return;
+		}
+
+		if (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+
+	const handleKeyDownDelete = (event: KeyboardEvent<HTMLElement>) => {
+		event.stopPropagation();
+
+		if (onDelete && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onDelete(event);
+		}
+	};
+
+	const handleClick = (event: MouseEvent<HTMLElement>) => {
+		if (onClick) {
+			event.preventDefault();
+			onClick(event as MouseEvent<HTMLDivElement>);
+		}
+	};
+
+	let iconVariant: 'do_not_disturb_on' | 'check_circle' | null = null;
+
+	if (variant === 'include') {
+		iconVariant = 'check_circle';
+	}
+
+	if (variant === 'exclude') {
+		iconVariant = 'do_not_disturb_on';
+	}
+
+	return (
+		<div
+			ref={ref as Ref<HTMLDivElement>}
+			className={tagClass}
+			style={style}
+			onClick={disabled ? undefined : handleClick}
+			onKeyDown={disabled ? undefined : handleKeyDownTag}
+			role={onClick || onDelete ? 'button' : undefined}
+			tabIndex={disabled || (!onClick && !onDelete) ? undefined : 0}
+			aria-label={typeof label === 'string' ? label : undefined}
+			aria-pressed={onClick && selected && !disabled ? 'true' : undefined}
+			aria-disabled={disabled}
+			{...rest}
+		>
+			{(slots?.icon || iconVariant) && (
+				<span className={classNames(styles.icon)}>
+					{slots?.icon ??
+						(iconVariant && (
+							<DsIcon icon={iconVariant} size="tiny" className={classNames(styles.variantIcon)} />
+						))}
+				</span>
+			)}
+			<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
+				{label}
+			</DsTypography>
+			{onDelete && !disabled && (
+				<button
+					type="button"
+					className={styles.deleteButton}
+					onClick={handleDeleteClick}
+					onKeyDown={handleKeyDownDelete}
+					aria-label={locale.deleteAriaLabel ?? 'Delete tag'}
+					tabIndex={0}
+				>
+					<DsIcon icon="close" size="tiny" />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default DsTag;

package/src/components/ds-tag/ds-tag.types.tsx

@@ -0,0 +1,67 @@
+import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
+
+export const tagSizes = ['medium', 'small'] as const;
+export type TagSize = (typeof tagSizes)[number];
+
+export const tagVariants = ['default', 'include', 'exclude'] as const;
+export type TagVariant = (typeof tagVariants)[number];
+
+export interface DsTagProps {
+	/**
+	 * Ref to the tag element
+	 */
+	ref?: Ref<HTMLElement>;
+	/**
+	 * The label text to display in the tag
+	 */
+	label: ReactNode;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Locale object (you can pass custom strings for localization)
+	 */
+	locale?: {
+		deleteAriaLabel?: string;
+	};
+	/**
+	 * Additional styles to apply to the component
+	 */
+	style?: CSSProperties;
+	/**
+	 * Optional click handler, if not present Tag will not be in "clickable" state
+	 */
+	onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Callback function when the delete icon is clicked
+	 */
+	onDelete?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+	/**
+	 * Size of the tag
+	 * @default 'medium'
+	 */
+	size?: TagSize;
+	/**
+	 * Whether the tag is in a selected/pressed state
+	 * @default false
+	 */
+	selected?: boolean;
+	/**
+	 * Variant of the tag
+	 * @default 'default'
+	 */
+	variant?: TagVariant;
+	/**
+	 * Whether the tag is disabled
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	slots?: {
+		/**
+		 * Icon to display at the start of the input
+		 */
+		icon?: ReactNode;
+	};
+}

package/src/components/ds-tag/index.tsx

@@ -0,0 +1,2 @@
+export { default as DsTag } from './ds-tag';
+export type { TagSize, TagVariant, DsTagProps } from './ds-tag.types';

package/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -0,0 +1,72 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+	padding: var(--spacing-xs) var(--spacing-standard);
+	background: var(--color-background-selected-weak);
+	border: 1px solid var(--color-outline-weak);
+	border-radius: var(--spacing-3xs);
+	max-height: 88px; // hardcoded value required in the design
+	overflow: hidden;
+
+	&.expanded {
+		max-height: none;
+	}
+}
+
+.row1 {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: var(--spacing-xs);
+	flex-shrink: 0;
+}
+
+.row2 {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: var(--spacing-xs);
+	flex-wrap: wrap;
+}
+
+.label {
+	color: var(--color-font-secondary);
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+
+.expandTag {
+	cursor: pointer;
+	flex-shrink: 0;
+}
+
+.itemCheckbox {
+	display: flex;
+	align-items: center;
+}
+
+.clearContent {
+	background: transparent !important;
+}
+
+.clearButton {
+	margin-left: auto;
+	padding: 0;
+	flex-shrink: 0;
+}
+
+// Hidden container for measuring element widths
+// Must render all elements to get accurate measurements
+.measurementContainer {
+	pointer-events: none;
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-xs);
+
+	// Ensure it doesn't affect layout
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	visibility: hidden;
+}