@drivenets/design-system 0.7.3 → 0.9.0

package/src/components/ds-button-v3/ds-button-v3.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import { DsIcon, type IconSize } from '../ds-icon';
+import { DsSpinner } from '../ds-spinner';
+import styles from './ds-button-v3.module.scss';
+import type { ButtonV3Size, DsButtonV3Props } from './ds-button-v3.types.ts';
+
+const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
+	large: 'small',
+	medium: 'tiny',
+	small: 'tiny',
+	tiny: 'tiny',
+});
+
+const DsButtonV3 = ({
+	ref,
+	className,
+	style,
+	children,
+	icon,
+	disabled,
+	loading = false,
+	color = 'default',
+	variant = 'primary',
+	size = 'medium',
+	selected = false,
+	type = 'button',
+	...rest
+}: DsButtonV3Props) => {
+	const isIconOnly = icon !== undefined && !children;
+
+	return (
+		<button
+			ref={ref}
+			// eslint-disable-next-line react/button-has-type -- Dynamic by nature of this component
+			type={type}
+			disabled={disabled || loading}
+			aria-busy={loading || undefined}
+			aria-pressed={selected}
+			className={classNames(styles.root, className)}
+			style={style}
+			data-color={color}
+			data-variant={variant}
+			data-size={size}
+			data-selected={selected ? 'true' : undefined}
+			data-icon-only={isIconOnly || undefined}
+			data-loading={loading && !disabled ? '' : undefined}
+			{...rest}
+		>
+			{loading ? <DsSpinner /> : icon && <DsIcon icon={icon} size={iconSizeMap[size]} aria-hidden />}
+			{children}
+		</button>
+	);
+};
+
+export default DsButtonV3;

package/src/components/ds-button-v3/ds-button-v3.types.ts

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, Ref } from 'react';
+import type { IconType } from '../ds-icon';
+
+export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
+export type ButtonV3Variant = (typeof buttonV3Variants)[number];
+
+export const buttonV3Colors = ['default', 'negative', 'light'] as const;
+export type ButtonV3Color = (typeof buttonV3Colors)[number];
+
+export const buttonV3Sizes = ['large', 'medium', 'small', 'tiny'] as const;
+export type ButtonV3Size = (typeof buttonV3Sizes)[number];
+
+export interface DsButtonV3Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+	ref?: Ref<HTMLButtonElement>;
+
+	/**
+	 * - `default` — standard light-UI palette
+	 * - `negative` — destructive / danger palette (red tones)
+	 * - `light` — palette for dark-background surfaces (Figma **Type** onDark)
+	 * @default 'default'
+	 */
+	color?: ButtonV3Color;
+
+	/**
+	 * @default 'primary'
+	 */
+	variant?: ButtonV3Variant;
+
+	/**
+	 * @default 'medium'
+	 */
+	size?: ButtonV3Size;
+
+	/**
+	 * @default false
+	 */
+	selected?: boolean;
+
+	/**
+	 * Leading icon. When set without children, renders as icon-only (square) layout.
+	 */
+	icon?: IconType;
+
+	/**
+	 * Shows a spinner as the leading element and disables interaction.
+	 * @default false
+	 */
+	loading?: boolean;
+}

package/src/components/ds-button-v3/index.ts

@@ -0,0 +1,2 @@
+export { default as DsButtonV3 } from './ds-button-v3';
+export * from './ds-button-v3.types';

package/src/components/ds-comment-bubble/ds-comment-bubble.module.scss

@@ -62,7 +62,7 @@ $transition-duration: 0.2s;
 		resize: none;
 
 		&::placeholder {
-			color: var(--color-font-placeholder);
+			color: var(--color-font-disabled);
 		}
 	}
 }
@@ -199,7 +199,7 @@ $transition-duration: 0.2s;
 	overflow-y: auto;
 
 	&::placeholder {
-		color: var(--color-font-placeholder);
+		color: var(--color-font-disabled);
 	}
 
 	&:focus {
@@ -225,6 +225,10 @@ $transition-duration: 0.2s;
 	align-items: center;
 	justify-content: space-between;
 	padding: var(--spacing-xs) 0;
+
+	> :last-child {
+		margin-left: auto;
+	}
 }
 
 .sendButton {

package/src/components/ds-comment-bubble/ds-comment-bubble.tsx

@@ -15,6 +15,7 @@ export const DsCommentBubble = ({
 	ref,
 	comment,
 	currentUser,
+	hideActionRequired = false,
 	actionRequired = false,
 	onActionRequiredChange,
 	value = '',
@@ -96,7 +97,7 @@ export const DsCommentBubble = ({
 			className={classNames(
 				styles.bubble,
 				{
-					[styles.actionRequired]: actionRequired,
+					[styles.actionRequired]: !hideActionRequired && actionRequired,
 					[styles.initial]: isInitialMode,
 					[styles.typing]: isTypingMode,
 					[styles.thread]: hasThread,
@@ -117,7 +118,9 @@ export const DsCommentBubble = ({
 						<div className={styles.headerInfo}>
 							<span className={styles.commentId}>#{comment.numericId}</span>
 							{renderReferenceTag()}
-							{actionRequired && <span className={styles.actionRequiredBadge}>Action required</span>}
+							{!hideActionRequired && actionRequired && (
+								<span className={styles.actionRequiredBadge}>Action required</span>
+							)}
 						</div>
 					</div>
 
@@ -130,9 +133,11 @@ export const DsCommentBubble = ({
 									</DsButton>
 								</DsDropdownMenu.Trigger>
 								<DsDropdownMenu.Content className={styles.dropdownContent}>
-									<DsDropdownMenu.Item value="toggle-action" onClick={onToggleActionRequired}>
-										{actionRequired ? 'Remove action requirement' : 'Require action'}
-									</DsDropdownMenu.Item>
+									{!hideActionRequired && (
+										<DsDropdownMenu.Item value="toggle-action" onClick={onToggleActionRequired}>
+											{actionRequired ? 'Remove action requirement' : 'Require action'}
+										</DsDropdownMenu.Item>
+									)}
 									<DsDropdownMenu.Item value="forward" onClick={onForward}>
 										Forward
 									</DsDropdownMenu.Item>
@@ -205,8 +210,8 @@ export const DsCommentBubble = ({
 				{(isInitialMode || hasThread) && (
 					<DsButton
 						design="v1.2"
-						buttonType="tertiary"
-						size="tiny"
+						buttonType="primary"
+						size="small"
 						disabled={!hasContent}
 						onClick={handleSend}
 						aria-label="Send"
@@ -218,17 +223,19 @@ export const DsCommentBubble = ({
 
 			{showFooter && (
 				<div className={styles.footer}>
-					<DsCheckbox
-						variant="warning"
-						label="Action required"
-						checked={actionRequired}
-						onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
-					/>
+					{!hideActionRequired && (
+						<DsCheckbox
+							variant="warning"
+							label="Action required"
+							checked={actionRequired}
+							onCheckedChange={(checked) => onActionRequiredChange?.(checked === true)}
+						/>
+					)}
 
 					<DsButton
 						design="v1.2"
-						buttonType="tertiary"
-						size="tiny"
+						buttonType="primary"
+						size="small"
 						disabled={!hasContent}
 						onClick={handleSend}
 						aria-label="Send"

package/src/components/ds-comment-bubble/ds-comment-bubble.types.ts

@@ -5,6 +5,7 @@ export interface DsCommentBubbleProps {
 	ref?: Ref<HTMLDivElement>;
 	comment?: CommentData;
 	currentUser?: CommentAuthor;
+	hideActionRequired?: boolean;
 	actionRequired?: boolean;
 	onActionRequiredChange?: (checked: boolean) => void;
 	value?: string;

package/src/components/ds-comments-drawer/components/comments-filter-modal/comments-filter-modal.tsx

@@ -19,7 +19,7 @@ export const CommentsFilterModal = ({
 	availableAuthors,
 	availableLabels,
 }: CommentsFilterModalProps) => {
-	const [selectedTab, setSelectedTab] = useState<string>('statuses');
+	const [selectedTab, setSelectedTab] = useState('statuses');
 
 	const handleStatusToggle = (status: 'unresolved' | 'resolved' | 'action-required', checked: boolean) => {
 		onFiltersChange({

package/src/components/ds-comments-drawer/ds-comments-drawer.tsx

@@ -7,13 +7,7 @@ import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 import { DsTextInput } from '../ds-text-input';
 import { DsTagFilter, type TagFilterItem } from '../ds-tag-filter';
-import {
-	type CommentsFilterState,
-	initialFilterState,
-	applyFilters,
-	filtersToTags,
-	removeTag,
-} from './comments-filters';
+import { initialFilterState, applyFilters, filtersToTags, removeTag } from './comments-filters';
 import { CommentsFilterModal } from './components/comments-filter-modal';
 
 export const DsCommentsDrawer = ({
@@ -36,8 +30,8 @@ export const DsCommentsDrawer = ({
 	style,
 }: DsCommentsDrawerProps) => {
 	const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-	const [pendingFilters, setPendingFilters] = useState<CommentsFilterState>(initialFilterState);
-	const [appliedFilters, setAppliedFilters] = useState<CommentsFilterState>(initialFilterState);
+	const [pendingFilters, setPendingFilters] = useState(initialFilterState);
+	const [appliedFilters, setAppliedFilters] = useState(initialFilterState);
 
 	const authorsMap = new Map<string, string>();
 	const labelsSet = new Set<string>();

package/src/components/ds-date-input/ds-date-input.tsx

@@ -16,10 +16,9 @@ import { DsTypography } from '../ds-typography';
 import styles from './ds-date-input.module.scss';
 
 /**
- * Design system date input component with integrated calendar picker.
- *
- * Supports both single date and date range selection with a single text input field.
- * Features built-in validation, manual text entry, and calendar selection.
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
  */
 const DsDateInput = ({
 	range = false,

package/src/components/ds-date-input/ds-date-input.types.ts

@@ -105,6 +105,8 @@ type DsDateInputBaseProps = Pick<
 };
 
 /**
- * Props for the DsDateInput component
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
  */
 export type DsDateInputProps = DsDateInputBaseProps & DsDateInputRangeProps;

package/src/components/ds-date-input/index.ts

@@ -1,2 +1,12 @@
+/**
+ * @deprecated DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
+ */
 export { default as DsDateInput } from './ds-date-input';
+/**
+ * @deprecated These types are deprecated. Use DsDatePicker or DsDateRangePicker types instead.
+ * @see {@link ../ds-date-picker} for single date selection.
+ * @see {@link ../ds-date-range-picker} for date range selection.
+ */
 export type { DsDateInputProps } from './ds-date-input.types';

package/src/components/ds-date-picker/components/calendar-table.module.scss

@@ -0,0 +1,93 @@
+.table {
+	width: 100%;
+	border-collapse: collapse;
+
+	.tableBody .tableRow .tableCellTrigger:focus-visible {
+		.tableCellTrigger {
+			outline: 2px solid var(--color-background-action-hover);
+			border-radius: var(--spacing-2xs);
+			border-width: 0;
+		}
+	}
+}
+
+.tableHeader {
+	text-align: center;
+	padding: var(--spacing-2xs);
+	color: var(--color-font-secondary);
+	font-weight: var(--font-weight-medium);
+}
+
+.tableRow {
+	&:first-child {
+		.tableCellTrigger {
+			margin-top: var(--spacing-xs);
+		}
+	}
+}
+
+.tableCellTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	user-select: none;
+	-webkit-tap-highlight-color: transparent;
+	outline: none;
+	border-radius: var(--spacing-xs);
+	color: var(--color-font-main);
+	margin: var(--spacing-3xs);
+
+	&:hover:not([data-disabled], [data-selected]) {
+		outline: 1px solid var(--color-border);
+		background: var(--color-background-action-hover-weak);
+	}
+
+	&[data-outside-range] {
+		color: var(--color-font-disabled);
+	}
+
+	&[data-selected] {
+		background: var(--color-background-selected);
+		color: var(--color-font-on-action);
+	}
+
+	&[data-today]:not([data-selected]):hover {
+		border-radius: var(--spacing-xs);
+	}
+
+	&[data-today]:not([data-selected]) {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background-brand);
+		}
+	}
+
+	&[data-today][data-selected] {
+		position: relative;
+
+		&::after {
+			content: '';
+			position: absolute;
+			width: 75%;
+			bottom: 4px;
+			border-bottom: 1px solid var(--color-background);
+		}
+	}
+
+	&[data-disabled] {
+		color: var(--color-font-disabled);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	&[data-unavailable] {
+		text-decoration: line-through;
+		opacity: 0.4;
+	}
+}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.module.scss

@@ -0,0 +1,48 @@
+.viewControl {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: var(--spacing-sm);
+}
+
+.viewTrigger {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: var(--spacing-2xs) var(--spacing-xs);
+	border-radius: var(--spacing-2xs);
+	color: var(--color-font-main);
+	transition: background-color 0.2s;
+
+	&:hover {
+		background: var(--color-background-hover);
+	}
+}
+
+.prevTrigger,
+.nextTrigger {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	padding: var(--spacing-2xs);
+	border-radius: var(--spacing-2xs);
+	color: var(--color-font-secondary);
+	transition: all 0.2s;
+
+	&:hover {
+		background: var(--color-background-hover);
+		color: var(--color-font-main);
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+}

package/src/components/ds-date-picker/components/calendar-view-control/calendar-view-control.tsx

@@ -0,0 +1,20 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import { DsIcon } from '../../../ds-icon';
+import { DsTypography } from '../../../ds-typography';
+import styles from './calendar-view-control.module.scss';
+
+export const CalendarViewControl = () => (
+	<DatePicker.ViewControl className={styles.viewControl}>
+		<DatePicker.PrevTrigger className={styles.prevTrigger}>
+			<DsIcon icon="chevron_left" size="small" />
+		</DatePicker.PrevTrigger>
+		<DatePicker.ViewTrigger className={styles.viewTrigger}>
+			<DsTypography variant="body-md-md" asChild>
+				<DatePicker.RangeText />
+			</DsTypography>
+		</DatePicker.ViewTrigger>
+		<DatePicker.NextTrigger className={styles.nextTrigger}>
+			<DsIcon icon="chevron_right" size="small" />
+		</DatePicker.NextTrigger>
+	</DatePicker.ViewControl>
+);

package/src/components/ds-date-picker/components/calendar-view-control/index.ts

@@ -0,0 +1 @@
+export * from './calendar-view-control';

package/src/components/ds-date-picker/components/day-view/day-view.module.scss

@@ -0,0 +1,12 @@
+$trigger-size: 32px;
+
+.dayView {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.trigger {
+	width: $trigger-size;
+	height: $trigger-size;
+}

package/src/components/ds-date-picker/components/day-view/day-view.tsx

@@ -0,0 +1,45 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './day-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const DayView = ({ children }: { children?: React.ReactNode }) => (
+	<DatePicker.View view="day">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<div className={styles.dayView}>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableHead>
+							<DatePicker.TableRow className={tableStyles.tableRow}>
+								{datePicker.weekDays.map((weekDay, idx) => (
+									<DatePicker.TableHeader key={idx} className={tableStyles.tableHeader}>
+										<DsTypography variant="body-md-md">{weekDay.narrow}</DsTypography>
+									</DatePicker.TableHeader>
+								))}
+							</DatePicker.TableRow>
+						</DatePicker.TableHead>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.weeks.map((week, weekIdx) => (
+								<DatePicker.TableRow key={weekIdx} className={tableStyles.tableRow}>
+									{week.map((day, dayIdx) => (
+										<DatePicker.TableCell key={dayIdx} value={day}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{day.day}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+					{children}
+				</div>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/components/day-view/index.ts

@@ -0,0 +1 @@
+export * from './day-view';

package/src/components/ds-date-picker/components/month-view/index.ts

@@ -0,0 +1 @@
+export { MonthView } from './month-view';

package/src/components/ds-date-picker/components/month-view/month-view.module.scss

@@ -0,0 +1,4 @@
+.trigger {
+	width: 72px;
+	height: 40px;
+}

package/src/components/ds-date-picker/components/month-view/month-view.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './month-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const MonthView = () => (
+	<DatePicker.View view="month">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, rowIdx) => (
+								<DatePicker.TableRow key={rowIdx} className={tableStyles.tableRow}>
+									{months.map((month, monthIdx) => (
+										<DatePicker.TableCell key={monthIdx} value={month.value}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{month.label}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+				</>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/components/year-view/index.ts

@@ -0,0 +1 @@
+export { YearView } from './year-view';

package/src/components/ds-date-picker/components/year-view/year-view.module.scss

@@ -0,0 +1,4 @@
+.trigger {
+	width: 72px;
+	height: 40px;
+}

package/src/components/ds-date-picker/components/year-view/year-view.tsx

@@ -0,0 +1,35 @@
+import { DatePicker } from '@ark-ui/react/date-picker';
+import classNames from 'classnames';
+import { DsTypography } from '../../../ds-typography';
+import styles from './year-view.module.scss';
+import tableStyles from '../calendar-table.module.scss';
+import { CalendarViewControl } from '../calendar-view-control';
+
+export const YearView = () => (
+	<DatePicker.View view="year">
+		<DatePicker.Context>
+			{(datePicker) => (
+				<>
+					<CalendarViewControl />
+					<DatePicker.Table className={tableStyles.table}>
+						<DatePicker.TableBody className={tableStyles.tableBody}>
+							{datePicker.getYearsGrid({ columns: 4 }).map((years, rowIdx) => (
+								<DatePicker.TableRow key={rowIdx} className={tableStyles.tableRow}>
+									{years.map((year, yearIdx) => (
+										<DatePicker.TableCell key={yearIdx} value={year.value}>
+											<DatePicker.TableCellTrigger
+												className={classNames(tableStyles.tableCellTrigger, styles.trigger)}
+											>
+												<DsTypography variant="body-md-md">{year.label}</DsTypography>
+											</DatePicker.TableCellTrigger>
+										</DatePicker.TableCell>
+									))}
+								</DatePicker.TableRow>
+							))}
+						</DatePicker.TableBody>
+					</DatePicker.Table>
+				</>
+			)}
+		</DatePicker.Context>
+	</DatePicker.View>
+);

package/src/components/ds-date-picker/ds-date-picker.module.scss

@@ -0,0 +1,29 @@
+@use '../../styles/shared/dropdown';
+
+.control {
+	display: flex;
+
+	&:not([data-disabled]):where(:hover, :focus-within) {
+		.clearTrigger {
+			visibility: visible;
+		}
+	}
+}
+
+.clearTrigger {
+	visibility: hidden;
+}
+
+.positioner {
+	@include dropdown.dropdown-viewport;
+}
+
+.content {
+	@include dropdown.dropdown-content;
+	padding: var(--spacing-standard);
+	min-width: fit-content;
+}
+
+.timePickerPopoverContent {
+	z-index: dropdown.$dropdown-z-index + 1;
+}