@drivenets/design-system 0.18.0 → 0.19.0

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';