@heliux-org/design-system-core 0.0.121 → 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);
+        }
     }
 }

package/src/components/NewTable/__stories__/NewTable.stories.tsx

@@ -1947,8 +1947,6 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
     []
   );
 
-  const itemsPerPageOptions = [30, 100, 150];
-
   const table = useLeafyGreenTable<TableStoryDataType>({
     containerRef: tableContainerRef,
     data,
@@ -1958,11 +1956,6 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
     selectCurrentPageOnly: false,
     onUnselectAll: () => {
       console.log('All rows have been unselected');
-    },
-    initialState: {
-      pagination: {
-        pageSize: itemsPerPageOptions[0],
-      }
     }
   });
 
@@ -1978,7 +1971,6 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
         table={table}
         withPagination={true}
         paginationProps={{
-          itemsPerPageOptions: itemsPerPageOptions,
           numTotalItems: data.length,
         }}
       >

package/src/components/NewTable/components/newComponents/pagination/Pagination.tsx

@@ -21,8 +21,8 @@ const DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 25, 50];
 function Pagination<T extends number>({
   id: idProp,
   className,
-  itemsPerPageOptions = DEFAULT_ITEMS_PER_PAGE_OPTIONS as Array<T>,
   itemsPerPage = DEFAULT_ITEMS_PER_PAGE_OPTIONS[0] as T,
+  itemsPerPageOptions = DEFAULT_ITEMS_PER_PAGE_OPTIONS as Array<T>,
   onItemsPerPageOptionChange,
   currentPage = 1,
   onCurrentPageOptionChange,

package/src/components/NewTable/components/useLeafyGreenTable/useLeafyGreenTable.tsx

@@ -32,7 +32,6 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
   hoverIcon,
   selectCurrentPageOnly = false,
   onUnselectAll, 
-  initialState,
   ...rest
 }: LeafyGreenTableOptions<T, V>): LeafyGreenTable<T> => {
   const [rowSelection, setRowSelection] = useState<{ [key: string]: boolean }>({});
@@ -171,7 +170,6 @@ const useLeafyGreenTable = <T extends LGRowData, V extends unknown = unknown>({
     getSubRows: (row) => row.subRows,
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: withPagination ? getPaginationRowModel() : undefined,
-    initialState: initialState ? initialState : undefined,
     state: { rowSelection },
     onRowSelectionChange: setRowSelection,
     columnResizeMode,