@drivenets/design-system 0.0.1

package/src/components/ds-system-status/ds-system-status.tsx

@@ -0,0 +1,33 @@
+import type React from 'react';
+import classNames from 'classnames';
+import styles from './ds-system-status.module.scss';
+import type { DsSystemStatusProps } from './ds-system-status.types';
+
+/**
+ * @deprecated This component is deprecated. Use `DsStatusBadge` instead.
+ * @see {@link ../ds-status-badge/ds-status-badge} for the replacement component.
+ */
+const defaultLabels: Record<DsSystemStatusProps['status'], string> = {
+	healthy: 'HEALTHY',
+	neutral: 'NEUTRAL',
+	error: 'ERROR',
+	'in-progress': 'IN PROGRESS',
+	pending: 'PENDING',
+	alert: 'ALERT',
+	disabled: 'DISABLED',
+};
+
+/**
+ * @deprecated This component is deprecated. Use `DsStatusBadge` instead.
+ * @see {@link ../ds-status-badge/ds-status-badge} for the replacement component.
+ */
+const DsSystemStatus: React.FC<DsSystemStatusProps> = ({ status, label, className }) => {
+	return (
+		<div className={classNames(styles.container, styles[status], className)}>
+			<span className={styles.dot} />
+			<span className={styles.label}>{label || defaultLabels[status]}</span>
+		</div>
+	);
+};
+
+export default DsSystemStatus;

package/src/components/ds-system-status/ds-system-status.types.tsx

@@ -0,0 +1,37 @@
+/**
+ * @deprecated This type is deprecated. Use `DsStatusBadge` and its related types instead.
+ * @see {@link ../ds-status-badge/ds-status-badge} for the replacement component.
+ */
+export const systemStatuses = [
+	'healthy',
+	'neutral',
+	'error',
+	'in-progress',
+	'pending',
+	'alert',
+	'disabled',
+] as const;
+
+/**
+ * @deprecated This type is deprecated. Use `DsStatus` from `ds-status-badge` instead.
+ */
+export type SystemStatus = (typeof systemStatuses)[number];
+
+/**
+ * @deprecated This interface is deprecated. Use `DsStatusBadgeProps` from `ds-status-badge` instead.
+ * @see {@link ../ds-status-badge/ds-status-badge.types} for the replacement interface.
+ */
+export interface DsSystemStatusProps {
+	/**
+	 * The status of the system
+	 */
+	status: SystemStatus;
+	/**
+	 * The label to be displayed
+	 */
+	label?: string;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+}

package/src/components/ds-system-status/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * @deprecated DsSystemStatus is deprecated. Use DsStatusBadge instead.
+ * @see {@link ../ds-status-badge} for the replacement component.
+ */
+export { default as DsSystemStatus } from './ds-system-status';
+/**
+ * @deprecated These types are deprecated. Use DsStatusBadge types instead.
+ * @see {@link ../ds-status-badge} for the replacement types.
+ */
+export * from './ds-system-status.types';

package/src/components/ds-table/components/core-table/core-table.module.scss

@@ -0,0 +1,32 @@
+.table {
+	width: 100%;
+	caption-side: bottom;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	border-collapse: separate;
+	border-spacing: 0;
+}
+
+.tableFooter {
+	background-color: rgba(241, 245, 249, 0.5);
+	font-weight: 500;
+}
+
+.tableHead {
+	&:has([role='checkbox']) {
+		padding-right: 0;
+	}
+}
+
+.tableCell {
+	&:has([role='checkbox']) {
+		padding-right: 0;
+	}
+}
+
+.tableCaption {
+	margin-top: 1rem;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	color: rgb(100, 116, 139);
+}

package/src/components/ds-table/components/core-table/core-table.tsx

@@ -0,0 +1,83 @@
+import type { HTMLAttributes, Ref, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import styles from './core-table.module.scss';
+
+type TableProps = HTMLAttributes<HTMLTableElement> & { ref?: Ref<HTMLTableElement> };
+
+function Table({ className, ref, ...props }: TableProps) {
+	return <table ref={ref} className={classnames(styles.table, className)} {...props} />;
+}
+
+Table.displayName = 'Table';
+
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement> & {
+	ref?: Ref<HTMLTableSectionElement>;
+};
+
+function TableHeader({ className, ref, ...props }: TableHeaderProps) {
+	return <thead ref={ref} className={classnames(styles.tableHeader, className)} {...props} />;
+}
+
+TableHeader.displayName = 'TableHeader';
+
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & {
+	ref?: Ref<HTMLTableSectionElement>;
+};
+
+function TableBody({ className, ref, ...props }: TableBodyProps) {
+	return <tbody ref={ref} className={classnames(styles.tableBody, className)} {...props} />;
+}
+
+TableBody.displayName = 'TableBody';
+
+type TableFooterProps = HTMLAttributes<HTMLTableSectionElement> & {
+	ref?: Ref<HTMLTableSectionElement>;
+};
+
+function TableFooter({ className, ref, ...props }: TableFooterProps) {
+	return <tfoot ref={ref} className={classnames(styles.tableFooter, className)} {...props} />;
+}
+
+TableFooter.displayName = 'TableFooter';
+
+type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+	ref?: Ref<HTMLTableRowElement>;
+};
+
+function TableRow({ className, ref, ...props }: TableRowProps) {
+	return <tr ref={ref} className={classnames(styles.tableRow, className)} {...props} />;
+}
+
+TableRow.displayName = 'TableRow';
+
+type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
+	ref?: Ref<HTMLTableCellElement>;
+};
+
+function TableHead({ className, ref, ...props }: TableHeadProps) {
+	return <th ref={ref} className={classnames(styles.tableHead, className)} {...props} />;
+}
+
+TableHead.displayName = 'TableHead';
+
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
+	ref?: Ref<HTMLTableCellElement>;
+};
+
+function TableCell({ className, ref, ...props }: TableCellProps) {
+	return <td ref={ref} className={classnames(styles.tableCell, className)} {...props} />;
+}
+
+TableCell.displayName = 'TableCell';
+
+type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement> & {
+	ref?: Ref<HTMLTableCaptionElement>;
+};
+
+function TableCaption({ className, ref, ...props }: TableCaptionProps) {
+	return <caption ref={ref} className={classnames(styles.tableCaption, className)} {...props} />;
+}
+
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };

package/src/components/ds-table/components/core-table/index.ts

@@ -0,0 +1 @@
+export * from './core-table';

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

@@ -0,0 +1,115 @@
+@use '../../../../styles/typography';
+
+.bulkActionsContainer {
+	position: fixed;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: var(--white);
+	border-radius: 8px;
+	box-shadow: 0 4px 12px #0445cc66;
+	z-index: 1000;
+	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(--action-cta1);
+	display: flex;
+	align-items: center;
+	padding: 6px 22px;
+}
+
+.selectedCountBadge {
+	color: var(--white);
+	margin: 0;
+}
+
+.bulkActionsInfo {
+	color: var(--neutral-2);
+	text-wrap: nowrap;
+	padding-left: 8px;
+	padding-right: 56px;
+}
+
+.bulkActionsActions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+
+	> .actionButton {
+		border-right: 1px solid var(--neutral-6);
+		width: 68px;
+		height: 48px;
+		border-radius: 0;
+
+		> .actionButtonContent {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 4px;
+		}
+	}
+
+	> .actionButton:first-child {
+		border-left: 1px solid var(--neutral-6);
+	}
+}
+
+.escapeButtonContent {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	color: var(--neutral-2);
+	gap: 2px !important;
+	width: 36px;
+	padding-left: 4px;
+
+	&:hover {
+		color: var(--neutral-4);
+	}
+}
+
+@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

@@ -0,0 +1,70 @@
+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';
+
+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}>
+				<h3 className={classnames(styles.selectedCountBadge, styles.bold)}>{numSelectedRows}</h3>
+			</div>
+			<div className={styles.bulkActionsContent}>
+				<span className={styles.bulkActionsInfo}>items selected</span>
+
+				<div className={styles.bulkActionsActions}>
+					{actions.map((action, index) => (
+						<DsButton
+							key={index}
+							variant="borderless"
+							size="small"
+							className={styles.actionButton}
+							contentClassName={styles.actionButtonContent}
+							onClick={action.onClick}
+						>
+							<DsIcon icon={action.icon} />
+							<span className={(styles['p-s'], styles.medium)}>{action.label}</span>
+						</DsButton>
+					))}
+				</div>
+
+				<DsButton
+					variant="borderless"
+					size="small"
+					color="neutral-2"
+					contentClassName={styles.escapeButtonContent}
+					onClick={onClearSelection}
+				>
+					<DsIcon icon="close" />
+					<span className={(styles['p-s'], styles.medium)}>Esc</span>
+				</DsButton>
+			</div>
+		</div>
+	);
+};
+
+export default DsTableBulkActions;

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

@@ -0,0 +1,41 @@
+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

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

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.module.scss

@@ -0,0 +1,53 @@
+@use '../../../../styles/typography';
+
+.tableCellEllipsis {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-break: break-word;
+}
+
+.lastCell {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	height: 100%;
+	flex: 1;
+
+	.cellActions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+}
+
+.rowActionIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: none;
+	cursor: pointer;
+	transition: background 0.15s;
+	color: var(--color-icon-secondary);
+
+	&.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	&:hover,
+	&:focus-within {
+		background: var(--color-background-action-hover-weak);
+		color: var(--color-font-action);
+	}
+}
+
+.secondaryActionsTrigger {
+	margin-inline-start: var(--spacing-sm);
+}

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.tsx

@@ -0,0 +1,95 @@
+import { type Cell, flexRender } from '@tanstack/react-table';
+import classnames from 'classnames';
+import { DsIcon } from '../../../ds-icon';
+import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import styles from './ds-table-cell.module.scss';
+import type { DsTableCellProps } from './ds-table-cell.types';
+
+const DsDefaultTableCell = <TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) => {
+	return (
+		<div className={styles.tableCellEllipsis}>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+		</div>
+	);
+};
+
+export const DsTableCell = <TData, TValue>({
+	row,
+	cell,
+	primaryRowActions = [],
+	secondaryRowActions = [],
+}: DsTableCellProps<TData, TValue>) => {
+	if (primaryRowActions.length || secondaryRowActions.length) {
+		const hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));
+		return (
+			<div className={styles.lastCell}>
+				<DsDefaultTableCell cell={cell} />
+				<div className={styles.cellActions}>
+					{primaryRowActions.map((action, i) => {
+						const isDisabled = action.disabled?.(row.original);
+						const label = typeof action.label === 'function' ? action.label(row.original) : action.label;
+						return (
+							<button
+								key={i}
+								type="button"
+								className={classnames(styles.rowActionIcon, { [styles.disabled]: isDisabled })}
+								title={action.tooltip || label}
+								onClick={(e) => {
+									e.stopPropagation();
+
+									if (isDisabled) {
+										return;
+									}
+									action.onClick(row.original);
+								}}
+								tabIndex={isDisabled ? -1 : 0}
+								aria-label={label}
+								aria-disabled={isDisabled}
+							>
+								<DsIcon icon={action.icon} size="tiny" />
+							</button>
+						);
+					})}
+					{hasSecondaryRowActions && (
+						<DsDropdownMenu.Root>
+							<DsDropdownMenu.Trigger
+								className={classnames(styles.rowActionIcon, styles.secondaryActionsTrigger)}
+								aria-label="More actions"
+								asChild
+							>
+								<button
+									type="button"
+									title="More actions"
+									aria-label="More actions"
+									onClick={(e) => e.stopPropagation()}
+								>
+									<DsIcon icon="more_vert" size="tiny" />
+								</button>
+							</DsDropdownMenu.Trigger>
+							<DsDropdownMenu.Content>
+								{secondaryRowActions.map((action, i) => {
+									const label =
+										typeof action.label === 'function' ? action.label(row.original) : action.label;
+									const isDisabled = action.disabled?.(row.original);
+									return (
+										<DsDropdownMenu.Item
+											key={i}
+											value={label}
+											disabled={isDisabled}
+											onClick={(e) => e.stopPropagation()}
+											onSelect={() => action.onClick(row.original)}
+										>
+											{action.icon && <DsIcon icon={action.icon} />}
+											<span>{label}</span>
+										</DsDropdownMenu.Item>
+									);
+								})}
+							</DsDropdownMenu.Content>
+						</DsDropdownMenu.Root>
+					)}
+				</div>
+			</div>
+		);
+	}
+	return <DsDefaultTableCell cell={cell} />;
+};

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -0,0 +1,67 @@
+import type { Cell, Row } from '@tanstack/react-table';
+import type { IconType } from '../../../ds-icon';
+
+/**
+ * Represents an action that can be performed on a single row
+ */
+export interface RowAction<TData> {
+	/**
+	 * Icon to be displayed for the action
+	 */
+	icon: IconType;
+
+	/**
+	 * Label text for the action
+	 */
+	label: string | ((row: TData) => string);
+
+	/**
+	 * Optional tooltip text to show on hover
+	 */
+	tooltip?: string;
+
+	/**
+	 * Optional function to determine if the action should be disabled for a specific row
+	 */
+	disabled?: (row: TData) => boolean;
+
+	/**
+	 * Function to be called when the action is clicked, receives the row data as parameter
+	 */
+	onClick: (row: TData) => void;
+}
+
+/**
+ * Represents a secondary action that can be performed on a single row
+ */
+export type SecondaryRowAction<TData> = Omit<RowAction<TData>, 'icon'> & {
+	/**
+	 * Optional icon to be displayed for the action
+	 */
+	icon?: IconType;
+};
+
+/**
+ * Props for the table cell component
+ */
+export interface DsTableCellProps<TData, TValue> {
+	/**
+	 * The row data from the table
+	 */
+	row: Row<TData>;
+
+	/**
+	 * The cell data from the table
+	 */
+	cell: Cell<TData, TValue>;
+
+	/**
+	 * Primary actions to be shown on each row (on hover)
+	 */
+	primaryRowActions?: RowAction<TData>[];
+
+	/**
+	 * Secondary actions to be shown in a dropdown on each row (on hover)
+	 */
+	secondaryRowActions?: SecondaryRowAction<TData>[];
+}

package/src/components/ds-table/components/ds-table-cell/index.ts

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