@drivenets/design-system 0.9.1 → 0.11.0

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

@@ -1,12 +1,38 @@
 import type { CommentMessage, CommentAuthor } from '../../../ds-comment-card';
 
 export interface DsCommentThreadProps {
+	/**
+	 * Ordered list of messages in the thread, from oldest to newest.
+	 */
 	messages: CommentMessage[];
+	/**
+	 * Author of the top-level comment. Used to visually distinguish their messages
+	 * from replies by other participants.
+	 */
 	commentAuthor: CommentAuthor;
+	/**
+	 * The user currently viewing the thread. Used to decide which messages the viewer
+	 * can edit or delete.
+	 */
 	currentUser?: CommentAuthor;
+	/**
+	 * Called when a message is edited. Receives the message id and the new content.
+	 */
 	onEditMessage?: (messageId: string, newContent: string) => void;
+	/**
+	 * Called when a message is deleted. Receives the message id.
+	 */
 	onDeleteMessage?: (messageId: string) => void;
+	/**
+	 * Called when a message is marked as unread. Receives the message id.
+	 */
 	onMarkUnread?: (messageId: string) => void;
+	/**
+	 * Called when a message is resolved. Receives the message id.
+	 */
 	onResolved?: (messageId: string) => void;
+	/**
+	 * Additional CSS class name applied to the thread root
+	 */
 	className?: string;
 }

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

@@ -7,8 +7,8 @@ $transition-duration: 0.2s;
 
 .threadItem {
 	display: flex;
-	gap: var(--spacing-lg);
-	padding: var(--spacing-sm) var(--spacing-standard);
+	gap: var(--lg);
+	padding: var(--sm) var(--standard);
 	position: relative;
 
 	&:hover {
@@ -48,17 +48,17 @@ $transition-duration: 0.2s;
 	width: $avatar-size;
 	height: $avatar-size;
 	border-radius: $border-radius-circle;
-	background: var(--color-background-tertiary);
+	background: var(--background-tertiary);
 	font-size: $avatar-fallback-font-size;
 	font-weight: var(--font-weight-semi-bold);
-	color: var(--color-font-main);
+	color: var(--font-main);
 	text-transform: uppercase;
 }
 
 .content {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	flex: 1;
 	min-width: 0;
 }
@@ -66,29 +66,29 @@ $transition-duration: 0.2s;
 .header {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	height: $header-height;
 }
 
 .authorName {
-	font-size: var(--font-size-md);
+	font-size: var(--body-font-size-md);
 	font-weight: var(--font-weight-semi-bold);
-	line-height: var(--line-height-md);
-	color: var(--color-font-main);
+	line-height: var(--body-line-height-md);
+	color: var(--font-main);
 }
 
 .timestamp {
-	font-size: var(--font-size-md);
+	font-size: var(--body-font-size-md);
 	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-md);
-	color: var(--color-font-secondary);
+	line-height: var(--body-line-height-md);
+	color: var(--font-secondary);
 }
 
 .message {
-	font-size: var(--font-size-sm);
+	font-size: var(--body-font-size-sm);
 	font-weight: var(--font-weight-regular);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-main);
+	line-height: var(--body-line-height-small);
+	color: var(--font-main);
 	word-wrap: break-word;
 	white-space: pre-wrap;
 }
@@ -96,7 +96,7 @@ $transition-duration: 0.2s;
 .actions {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	opacity: 0;
 	transition: opacity $transition-duration ease;
 }
@@ -112,9 +112,9 @@ $transition-duration: 0.2s;
 
 .editActions {
 	display: flex;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	justify-content: flex-end;
-	margin-top: var(--spacing-xs);
+	margin-top: var(--xs);
 }
 
 .dropdownContent {

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

@@ -1,15 +1,53 @@
 import type { CommentAuthor } from '../../../ds-comment-card';
 
 export interface DsThreadItemProps {
+	/**
+	 * Stable identifier for the message. Passed to callbacks to identify which
+	 * message the user acted on.
+	 */
 	id: string;
+	/**
+	 * Author of the message
+	 */
 	author: CommentAuthor;
+	/**
+	 * Text content of the message
+	 */
 	content: string;
+	/**
+	 * Timestamp when the message was created
+	 */
 	createdAt: Date;
+	/**
+	 * Whether this message was posted by the author of the top-level comment.
+	 * Styled slightly differently from replies by other participants.
+	 * @default false
+	 */
 	isCommentAuthorMessage?: boolean;
+	/**
+	 * Whether the current viewer can edit or delete this message. Typically true
+	 * only when the viewer is the message's author.
+	 * @default false
+	 */
 	canModify?: boolean;
+	/**
+	 * Called when the viewer saves an edit. Receives the message id and the new content.
+	 */
 	onEdit?: (messageId: string, newContent: string) => void;
+	/**
+	 * Called when the viewer deletes the message. Receives the message id.
+	 */
 	onDelete?: (messageId: string) => void;
+	/**
+	 * Called when the viewer marks the message as unread. Receives the message id.
+	 */
 	onMarkUnread?: (messageId: string) => void;
+	/**
+	 * Called when the viewer resolves the message. Receives the message id.
+	 */
 	onResolved?: (messageId: string) => void;
+	/**
+	 * Additional CSS class name applied to the item root
+	 */
 	className?: string;
 }

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

@@ -19,8 +19,8 @@ $transition-duration: 0.2s;
 	display: flex;
 	flex-direction: column;
 	width: $bubble-width-thread;
-	background: var(--color-background);
-	border: $border-width solid var(--color-primary-700-default);
+	background: var(--background);
+	border: $border-width solid var(--primary-700-default);
 	border-radius: $bubble-border-radius-pill;
 	box-shadow: 0 6px 13px 0 rgba(4, 69, 204, 0.2);
 	overflow: hidden;
@@ -31,19 +31,19 @@ $transition-duration: 0.2s;
 		padding $transition-duration ease;
 
 	&.actionRequired {
-		border-color: var(--color-background-warning-strong);
+		border-color: var(--background-warning-strong);
 	}
 }
 
 .initial {
 	width: $bubble-width-initial;
 	border-width: $border-width;
-	padding: var(--spacing-sm) var(--spacing-standard);
+	padding: var(--sm) var(--standard);
 	border-radius: $bubble-border-radius-pill;
 
 	.inputArea {
 		padding: 0;
-		gap: var(--spacing-xs);
+		gap: var(--xs);
 		align-items: center;
 	}
 
@@ -57,12 +57,12 @@ $transition-duration: 0.2s;
 	.textarea {
 		padding: 0;
 		min-height: $input-min-height-initial;
-		line-height: var(--line-height-sm);
+		line-height: var(--body-line-height-small);
 		overflow: hidden;
 		resize: none;
 
 		&::placeholder {
-			color: var(--color-font-disabled);
+			color: var(--font-disabled);
 		}
 	}
 }
@@ -70,12 +70,12 @@ $transition-duration: 0.2s;
 .typing {
 	width: $bubble-width-typing;
 	border-width: $border-width;
-	padding: var(--spacing-sm) var(--spacing-standard) 0;
+	padding: var(--sm) var(--standard) 0;
 	border-radius: $bubble-border-radius-pill;
 
 	.inputArea {
-		padding: 0 0 var(--spacing-sm);
-		border-bottom: $border-width solid var(--color-border-secondary);
+		padding: 0 0 var(--sm);
+		border-bottom: $border-width solid var(--border-secondary);
 	}
 
 	.inputWrapper {
@@ -93,14 +93,14 @@ $transition-duration: 0.2s;
 	flex-direction: column;
 
 	.inputArea {
-		border-top: $border-width solid var(--color-border-secondary);
-		padding: var(--spacing-xs) var(--spacing-standard);
+		border-top: $border-width solid var(--border-secondary);
+		padding: var(--xs) var(--standard);
 		flex-shrink: 0;
 	}
 
 	.inputWrapper {
-		background: var(--color-background);
-		padding: var(--spacing-xs) var(--spacing-sm);
+		background: var(--background);
+		padding: var(--xs) var(--sm);
 		border-radius: $bubble-border-radius-standard;
 		min-height: $input-min-height-thread;
 	}
@@ -110,9 +110,9 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-standard) var(--spacing-xs);
-	border-bottom: $border-width solid var(--color-border);
+	gap: var(--xs);
+	padding: var(--xs) var(--standard) var(--xs);
+	border-bottom: $border-width solid var(--border);
 	flex-shrink: 0;
 }
 
@@ -126,32 +126,32 @@ $transition-duration: 0.2s;
 .headerInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .commentId {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-secondary);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-secondary);
 }
 
 .actionRequiredBadge {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-warning);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-warning);
 	font-weight: var(--font-weight-regular);
 }
 
 .headerRight {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .headerActions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	opacity: 0;
 	transition: opacity $transition-duration ease;
 
@@ -163,24 +163,24 @@ $transition-duration: 0.2s;
 .inputArea {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .inputWrapper {
 	display: flex;
 	align-items: center;
 	flex: 1;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 	min-height: $input-min-height-thread;
 }
 
 .searchIcon {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
 .infoIcon {
-	color: var(--color-font-main);
+	color: var(--font-main);
 	flex-shrink: 0;
 }
 
@@ -191,15 +191,15 @@ $transition-duration: 0.2s;
 	padding: 0;
 	border: none;
 	background: transparent;
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
 	font-family: inherit;
-	color: var(--color-font-main);
+	color: var(--font-main);
 	resize: none;
 	overflow-y: auto;
 
 	&::placeholder {
-		color: var(--color-font-disabled);
+		color: var(--font-disabled);
 	}
 
 	&:focus {
@@ -215,7 +215,7 @@ $transition-duration: 0.2s;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--color-background-tertiary);
+		background: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius-pill;
 	}
 }
@@ -224,7 +224,7 @@ $transition-duration: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: var(--spacing-xs) 0;
+	padding: var(--xs) 0;
 
 	> :last-child {
 		margin-left: auto;
@@ -246,18 +246,18 @@ $transition-duration: 0.2s;
 .dropdownItem {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
-	padding: var(--spacing-xs) var(--spacing-sm);
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-main);
+	gap: var(--xs);
+	padding: var(--xs) var(--sm);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-main);
 	cursor: pointer;
 
 	&:hover {
-		background: var(--color-background-secondary);
+		background: var(--background-secondary);
 	}
 
 	&.danger {
-		color: var(--color-font-danger);
+		color: var(--font-error);
 	}
 }

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

@@ -2,27 +2,105 @@ import type { CSSProperties, ReactNode, Ref } from 'react';
 import type { CommentAuthor, CommentData } from '../ds-comment-card';
 
 export interface DsCommentBubbleProps {
+	/**
+	 * Ref forwarded to the bubble root element
+	 */
 	ref?: Ref<HTMLDivElement>;
+	/**
+	 * Existing comment thread rendered inside the bubble. Omit to render an empty
+	 * bubble for composing a new comment.
+	 */
 	comment?: CommentData;
+	/**
+	 * The user currently viewing the bubble. Used to decide whether thread messages
+	 * can be edited or deleted by the viewer.
+	 */
 	currentUser?: CommentAuthor;
+	/**
+	 * Hide the "action required" checkbox and the associated visual highlight.
+	 * @default false
+	 */
 	hideActionRequired?: boolean;
+	/**
+	 * Whether the comment is flagged as requiring action. Drives the action-required
+	 * highlight and the checkbox state.
+	 * @default false
+	 */
 	actionRequired?: boolean;
+	/**
+	 * Called when the "action required" checkbox is toggled. Receives the new checked state.
+	 */
 	onActionRequiredChange?: (checked: boolean) => void;
+	/**
+	 * Current value of the reply / new-comment textarea (controlled)
+	 */
 	value?: string;
+	/**
+	 * Called whenever the textarea value changes. Receives the new string value.
+	 */
 	onValueChange?: (value: string) => void;
+	/**
+	 * Called when the user submits the textarea content (clicks send or presses Enter).
+	 * Receives the message content and the current action-required flag.
+	 */
 	onSend?: (content: string, actionRequired: boolean) => void;
+	/**
+	 * Called when the bubble should be dismissed (e.g., clicking outside an empty bubble
+	 * or pressing the close affordance).
+	 */
 	onClose?: () => void;
+	/**
+	 * Called when the user resolves the top-level comment from the bubble header menu.
+	 */
 	onResolve?: () => void;
+	/**
+	 * Called when the user toggles the top-level comment's action-required flag from
+	 * the bubble header menu.
+	 */
 	onToggleActionRequired?: () => void;
+	/**
+	 * Called when the user forwards the top-level comment from the bubble header menu.
+	 */
 	onForward?: () => void;
+	/**
+	 * Called when the user marks the top-level comment as unread from the bubble header menu.
+	 */
 	onMarkUnread?: () => void;
+	/**
+	 * Called when the user copies a link to the top-level comment.
+	 */
 	onCopyLink?: () => void;
+	/**
+	 * Called when the user deletes the top-level comment.
+	 */
 	onDelete?: () => void;
+	/**
+	 * Called when a thread message is edited. Receives the message id and the new content.
+	 */
 	onEditMessage?: (messageId: string, newContent: string) => void;
+	/**
+	 * Called when a thread message is deleted. Receives the message id.
+	 */
 	onDeleteMessage?: (messageId: string) => void;
+	/**
+	 * Called when a thread message is marked as unread. Receives the message id.
+	 */
 	onMessageMarkUnread?: (messageId: string) => void;
+	/**
+	 * Called when a thread message is resolved. Receives the message id.
+	 */
 	onMessageResolved?: (messageId: string) => void;
+	/**
+	 * Optional reference chip shown in the bubble header. A string is rendered as a
+	 * `DsTag` with a sell icon; any other `ReactNode` is rendered verbatim.
+	 */
 	referenceTag?: ReactNode;
+	/**
+	 * Additional CSS class name applied to the bubble root
+	 */
 	className?: string;
+	/**
+	 * Inline styles applied to the bubble root
+	 */
 	style?: CSSProperties;
 }

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

@@ -8,9 +8,9 @@ $transition-duration: 0.2s;
 .card {
 	display: flex;
 	width: 100%;
-	border: $border-width solid var(--color-border);
-	border-radius: var(--spacing-3xs);
-	background: var(--color-background);
+	border: $border-width solid var(--border);
+	border-radius: var(--3xs);
+	background: var(--background);
 	overflow: hidden;
 	cursor: pointer;
 	text-align: left;
@@ -20,8 +20,8 @@ $transition-duration: 0.2s;
 		box-shadow $transition-duration ease;
 
 	&:hover {
-		background: var(--color-background-action-hover-weak);
-		border-color: var(--color-border);
+		background: var(--background-action-hover-weak);
+		border-color: var(--border);
 		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 
 		.actions {
@@ -36,10 +36,10 @@ $transition-duration: 0.2s;
 .sideColor {
 	width: $side-color-width;
 	flex-shrink: 0;
-	background: var(--color-background-info-strong);
+	background: var(--background-info-strong);
 
 	&.actionRequired {
-		background: var(--color-background-warning-strong);
+		background: var(--background-warning-strong);
 	}
 }
 
@@ -53,57 +53,57 @@ $transition-duration: 0.2s;
 .header {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
-	padding-bottom: var(--spacing-3xs);
+	gap: var(--3xs);
+	padding: var(--xs) var(--standard);
+	padding-bottom: var(--3xs);
 }
 
 .headerTop {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 }
 
 .headerLeft {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-	gap: var(--spacing-sm);
+	gap: var(--sm);
 	min-width: 0;
 }
 
 .commentInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
+	gap: var(--xs);
 }
 
 .commentId {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
-	color: var(--color-font-secondary);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
+	color: var(--font-secondary);
 }
 
 .authorInfo {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-xs);
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-sm);
+	gap: var(--xs);
+	font-size: var(--body-font-size-sm);
+	line-height: var(--body-line-height-small);
 }
 
 .authorName {
-	color: var(--color-font-main);
+	color: var(--font-main);
 }
 
 .timestamp {
-	color: var(--color-font-secondary);
+	color: var(--font-secondary);
 }
 
 .actions {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-3xs);
+	gap: var(--3xs);
 	opacity: 0;
 	visibility: hidden;
 	transition:
@@ -118,12 +118,12 @@ $transition-duration: 0.2s;
 		}
 
 		&:hover {
-			background: var(--color-background-action-hover-weak) !important;
-			background-color: var(--color-background-action-hover-weak) !important;
+			background: var(--background-action-hover-weak) !important;
+			background-color: var(--background-action-hover-weak) !important;
 
 			> * {
-				background: var(--color-background-action-hover-weak) !important;
-				background-color: var(--color-background-action-hover-weak) !important;
+				background: var(--background-action-hover-weak) !important;
+				background-color: var(--background-action-hover-weak) !important;
 			}
 		}
 	}
@@ -132,14 +132,14 @@ $transition-duration: 0.2s;
 .body {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-3xs);
-	padding: var(--spacing-xs) var(--spacing-standard);
+	gap: var(--3xs);
+	padding: var(--xs) var(--standard);
 }
 
 .message {
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-xs);
-	color: var(--color-font-main);
+	font-size: var(--body-font-size-xs);
+	line-height: var(--body-line-height-xs);
+	color: var(--font-main);
 	word-wrap: break-word;
 
 	&.truncated {
@@ -152,9 +152,9 @@ $transition-duration: 0.2s;
 }
 
 .replyCount {
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-xs);
-	color: var(--color-font-secondary);
+	font-size: var(--body-font-size-xs);
+	line-height: var(--body-line-height-xs);
+	color: var(--font-secondary);
 }
 
 .dropdownContent {