@heliux-org/design-system-core 0.0.120 → 0.0.122

package/src/components/Comments/Comments.tsx

@@ -3,11 +3,14 @@ import React, { useCallback, useState } from 'react';
 import './comments.scss';
 import Avatar from '../Avatar/Avatar';
 import TextAreaField from '../TextAreaField/TextAreaField';
-import { ButtonType } from '../Button';
 import Flex from '../Flex/Flex';
 import { AvatarType } from '../Avatar';
 import Button from '../Button/Button';
 import { FlexAlign, FlexDirection, FlexGap } from '../Flex';
+import Info from '../Icon/Icons/components/Info';
+import Text from '../Text/Text';
+import Icon from '../Icon/Icon';
+import Attach from '../Icon/Icons/components/Attach';
 
 export interface CommentProps {
     text: string;
@@ -25,6 +28,9 @@ export interface User {
 export interface CommentFormProps {
     currentUser: User;
     onCommentSubmitted: (text: string) => Promise<boolean>;
+    isLabel?: boolean;
+    label?: { status: "external" | "internal" };
+    onClickAttachment?: () => void;
 }
 
 export interface CommentsProps extends CommentFormProps {
@@ -32,20 +38,20 @@ export interface CommentsProps extends CommentFormProps {
 }
 
 
-export function Comments({ comments, currentUser, onCommentSubmitted }: CommentsProps) {
+export function Comments({ comments, currentUser, onCommentSubmitted, isLabel = false, label, onClickAttachment }: CommentsProps) {
     return (
         <div className={'comments'}>
-            <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} />
             {comments.length > 0 && (
-                <Flex direction={FlexDirection.COLUMN} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH}>
-                    {comments.map((comment, i) => <Comment {...comment} key={i} />)}
+                <Flex direction={FlexDirection.COLUMN} style={{ marginBottom: "var(--spacing-large)" }} gap={FlexGap.MEDIUM} align={FlexAlign.STRETCH}>
+                    {comments.map((comment, i) => <Comment {...comment} currentUser={currentUser} key={i} />)}
                 </Flex>
             )}
+            <CommentForm onCommentSubmitted={onCommentSubmitted} currentUser={currentUser} isLabel={isLabel} label={label}  onClickAttachment={onClickAttachment} />
         </div>
     );
 }
 
-export function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProps) {
+export function CommentForm({ onCommentSubmitted, currentUser, isLabel = false, label, onClickAttachment }: CommentFormProps) {
     const [isWaiting, setIsWaiting] = useState<boolean>(false);
     const [text, setText] = useState<string>('');
 
@@ -60,12 +66,40 @@ export function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProp
     }, [onCommentSubmitted]);
     return (
         <div className={'comments-top'}>
-            <h3 className={'comments-header'}>Comments</h3>
+            <Flex gap={Flex.gaps.SMALL}>
+                {isLabel && label.status === "internal" && (
+                    <>
+                        <Icon
+                            iconType={Icon.type.SVG}
+                            style={{ color: "#757575" }}
+                            icon={Info}
+                            iconSize={20}
+                            clickable={false}
+                        />
+                        <Text type={Text.types.TEXT1} color={Text.colors.SECONDARY}>
+                            This is an internal conversation
+                        </Text>
+                    </>
+                )}
+                {isLabel && label.status === "external" && (
+                    <>
+                        <Icon
+                            iconType={Icon.type.SVG}
+                            style={{ color: "#FF0020" }}
+                            icon={Info}
+                            iconSize={20}
+                            clickable={false}
+                        />
+                        <Text type={Text.types.TEXT1} style={{ color: "#BB0018" }}>
+                            This is an external conversation
+                        </Text>
+                    </>
+                )}
+            </Flex>
             <TextAreaField
                 disabled={isWaiting}
-                title={`${currentUser.name} | Add a comment`}
                 onChange={setText}
-                placeholder={'Add a comment'}
+                placeholder={'What’s on your mind...'}
                 rows={2}
                 value={text}
             />
@@ -73,35 +107,38 @@ export function CommentForm({ onCommentSubmitted, currentUser }: CommentFormProp
                 <Button
                     disabled={!text || isWaiting}
                     onClick={() => onSubmit(text)}
-                    size={'small'}
-                    kind={ButtonType.SECONDARY}
+                    size={Button.sizes.SMALL}
+                    style={{ width: "100%" }}
                 >
-                    Submit Comment
+                    Send
                 </Button>
             </div>
+            <Button
+                onClick={onClickAttachment}
+                size={Button.sizes.SMALL}
+                kind={Button.kinds.TERTIARY}
+                style={{ marginTop: "var(--spacing-small)" }}
+            >
+                <Icon iconType={Icon.type.SVG} style={{ color: "#375D81", transform: "rotate(30deg)" }} icon={Attach} iconSize={17} clickable={false} />
+                <Text type={Text.types.TEXT2} style={{ color: "#375D81", marginTop: "2px" }}>Attachment</Text>
+            </Button>
         </div>
     );
 }
 
-export function Comment({ author, commentedAt, label, text }: CommentProps) {
+export function Comment({ author, commentedAt, label, text, currentUser }: { currentUser: User } & CommentProps) {
     return (
         <Flex direction={FlexDirection.COLUMN} align={FlexAlign.STRETCH} className={'comment'}>
             <Flex direction={FlexDirection.ROW} gap={FlexGap.SMALL} className={'comment-data'}>
                 {!!label && (
-                    <div className={'comment-label'}>
-                        {label}
-                    </div>
+                    <Text className={'comment-label'} type={Text.types.TEXT2}>{label}</Text>
                 )}
                 <div className={'comment-user'}>
                     {author && <UserCard user={author} />}
                 </div>
-                <div className={'comment-date'}>
-                    {commentedAt.toLocaleDateString()}
-                </div>
+                <Text className={'comment-date'} color={Text.colors.SECONDARY} type={Text.types.TEXT2}>{commentedAt.toLocaleString()}</Text>
             </Flex>
-            <div className={'comment-text'}>
-                {text}
-            </div>
+            <Text className={`comment-text ${currentUser.id === author.id && "comment-currentUser"}`} type={Text.types.TEXT1}>{text}</Text>
         </Flex>
     );
 }
@@ -116,7 +153,7 @@ export function UserCard({ user }: { user: User }) {
                 text={toInitials(user.name)}
             />
             <div className={'comment-user-name'}>
-                {user.name}
+                <Text type={Text.types.TEXT2} weight={Text.weights.BOLD}>{user.name}</Text>
             </div>
         </Flex>
     );

package/src/components/Comments/comments.scss

@@ -15,6 +15,10 @@
             @include vibe-text(text1, normal);
         }
 
+        &-currentUser {
+            background-color: var(--surface-level-200);
+        }
+
         &-label {
             @include vibe-text(text1, normal);
         }
@@ -22,5 +26,10 @@
         &-date {
             @include vibe-text(text1, normal);
         }
+        &-text {
+            padding: 10px;
+            border-radius: 6px 0px 6px 6px;
+            margin-left: var(--spacing-xl);
+        }
     }
 }