@soul-refiner/design-system 0.2.40 → 0.2.42

package/dist/components/surfaces/comment/comment.d.ts

@@ -3,7 +3,7 @@ export interface CommentProps {
     content: string;
     createdDate: Date;
     hasMoreReplies?: boolean;
-    onComment: (comment: string) => void;
+    onComment: (comment: string, id?: string) => void;
     onReact: (reaction: string) => void;
     onShowReplies?: () => void;
     reactions?: Record<string, number>;

package/dist/components/surfaces/comment/comment.js

@@ -36,7 +36,7 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
     const handleToggleCommentInput = () => setShowCommentInput((prev) => !prev);
     const handleToggleReplies = () => {
         onShowReplies && onShowReplies();
-        setShowReplies((prev) => !prev);
+        setShowReplies(true);
     };
     const createdTime = abbrTimeBeforeDate(createdDate);
     const reactionElements = reactions &&
@@ -51,7 +51,8 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
             if (!React.isValidElement(reply))
                 return null;
             const key = reply.props?.id;
-            return (React.createElement(ReplyWrapper, { "$isNotLastReply": index !== _replies.length - 1, key: key },
+            const hasLine = index !== _replies.length - 1 || hasMoreReplies;
+            return (React.createElement(ReplyWrapper, { "$hasLine": hasLine, key: key },
                 reply,
                 React.createElement(ReplyIndicator, null)));
         });
@@ -71,14 +72,14 @@ export const Comment = ({ content, createdDate, hasMoreReplies, onComment, onRea
                     showPicker && (React.createElement(PickerWrapper, null,
                         React.createElement(Picker, { data: emojis, onEmojiSelect: handleReaction, onClickOutside: handlePickerBlur, maxFrequentRows: 1, navPosition: "none", previewPosition: "none", perLine: 9, theme: "auto" }))))),
             hasReplies && toggleShowReplies && (React.createElement(RepliesWrapper, null, replyElements)),
-            hasMoreReplies ||
-                (!toggleShowReplies && hasReplies && (React.createElement(RepliesWrapper, null,
-                    React.createElement(ReplyWrapper, { "$isNotLastReply": false },
-                        React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" },
-                            "show ",
-                            replies && replies.length ? 'more' : '',
-                            " replies"),
-                        React.createElement(ReplyIndicator, null))))),
+            !toggleShowReplies && !hasMoreReplies && hasReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show replies"),
+                    React.createElement(ReplyIndicator, null)))),
+            hasMoreReplies && (React.createElement(RepliesWrapper, null,
+                React.createElement(ReplyWrapper, { "$hasLine": false },
+                    React.createElement(Button, { onClick: handleToggleReplies, size: "small", sx: "color: var(--color-grey-3);", type: "text" }, "show more replies"),
+                    React.createElement(ReplyIndicator, null)))),
             toggleShowCommentInput && (React.createElement(CommentWrapper, { onSubmit: handleCommentSubmit },
                 React.createElement(TextInput, { bg: "var(--color-grey-10)", placeholder: "Write a reply", onChange: handleCommentChange, value: comment }))))));
 };
@@ -137,7 +138,7 @@ const RepliesWrapper = styled.div `
 `;
 const ReplyWrapper = styled.div `
   position: relative;
-  ${({ $isNotLastReply }) => $isNotLastReply
+  ${({ $hasLine }) => $hasLine
     ? `
     &::before {
       content: "";
@@ -150,16 +151,19 @@ const ReplyWrapper = styled.div `
 `;
 const ReplyIndicator = styled.div `
   position: absolute;
-  top: 0;
+  top: -12px;
   left: -28px;
   width: 28px;
-  height: 16px;
+  height: 32px;
   border-bottom-left-radius: 16px;
   border: 2px solid var(--color-grey-9);
   border-top: none;
   border-right: none;
 `;
 const CommentWrapper = styled.form `
+  label {
+    margin-bottom: 16px;
+  }
   label > div {
     box-shadow: var(--elevation-6);
     border-radius: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.40",
+  "version": "0.2.42",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {