@kiva/kv-components 3.54.0 → 3.55.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.55.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.54.0...@kiva/kv-components@3.55.0) (2024-02-29)
+
+
+### Bug Fixes
+
+* input width ([2489339](https://github.com/kiva/kv-ui-elements/commit/2489339c622ac45739bcc1eefc0a69837f90b841))
+* when to send hide event and test not recognizing vue3 ([c3941a7](https://github.com/kiva/kv-ui-elements/commit/c3941a7a73a439846e6abf16b6dd0b29fa0e36f7))
+
+
+### Features
+
+* adding input for comment reply ([b18edf0](https://github.com/kiva/kv-ui-elements/commit/b18edf0ecd300f622379d160237fd750cf117fa1))
+* update tests and remove handleClick for emits ([fc3c586](https://github.com/kiva/kv-ui-elements/commit/fc3c58667248fb4e44bb0a7558f6c88f97f299b1))
+
+
+
+
+
 # [3.54.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.53.0...@kiva/kv-components@3.54.0) (2024-02-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.54.0",
+  "version": "3.55.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "b29d4c7e40f229ac09c7f68c377741af7d068158"
+  "gitHead": "ecd01faa5db8db12e79b243f311a264616a23e7d"
 }

package/tests/unit/specs/components/KvCommentsAdd.spec.js

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import CommentsAdd, { ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
+import CommentsAdd, { ADD_COMMENT_EVENT, HIDE_INPUT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
 
 const renderCommentsAdd = (props = {}) => {
 	return render(CommentsAdd, { props });
@@ -71,4 +71,26 @@ describe('KvCommentsAdd', () => {
 
 		expect(emitted()[ADD_COMMENT_EVENT]).toBe(undefined);
 	});
+
+	it('should emit close event when it replies a comment', async () => {
+		const { getByRole, emitted, getByPlaceholderText } = renderCommentsAdd({ isReply: true });
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[HIDE_INPUT_EVENT]).toEqual([[]]);
+	});
+
+	it('should emit close event when it clicks cancel on reply', async () => {
+		const { getByRole, emitted } = renderCommentsAdd({ isReply: true });
+		const cancelButton = getByRole('button', { name: 'Cancel' });
+
+		await userEvent.click(cancelButton);
+
+		expect(emitted()[HIDE_INPUT_EVENT]).toEqual([[]]);
+	});
 });

package/tests/unit/specs/components/KvCommentsList.spec.js

@@ -19,7 +19,7 @@ describe('KvCommentsList', () => {
 	});
 
 	it('should emit comment events', async () => {
-		const { getAllByRole, emitted } = renderList({ comments });
+		const { getAllByRole, getByRole, emitted } = renderList({ comments });
 		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 		const firstComment = comments.comment[0];
@@ -32,6 +32,7 @@ describe('KvCommentsList', () => {
 
 		await userEvent.click(replyButton);
 		expect(emitted()[REPLY_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT }]]);
+		getByRole('button', { name: 'Comment' });
 
 		await userEvent.click(likeButton);
 		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);

package/tests/unit/specs/components/KvCommentsListItem.spec.js

@@ -1,12 +1,10 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import KvCommentsListItem from '../../../../vue/KvCommentsListItem.vue';
+import KvCommentsListItem, { LIKE_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
 import activityFeed from '../../../fixtures/mockFeedActivityData';
 
 const comment = activityFeed.results[0].latest_reactions.comment[0];
 
-const handleClick = jest.fn();
-
 const renderComment = (props = {}) => {
 	return render(KvCommentsListItem, { props });
 };
@@ -24,20 +22,25 @@ describe('KvCommentsListItem', () => {
 	});
 
 	it('should handle like button click', async () => {
-		const { getByRole } = renderComment({ comment, handleClick });
+		const { getByRole, emitted } = renderComment({ comment });
 		const likeButton = getByRole('button', { name: 'Like' });
 
 		await userEvent.click(likeButton);
 
-		expect(handleClick).toHaveBeenCalledTimes(1);
+		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{
+			id: comment.id,
+			isChild: true,
+			reaction: LIKE_COMMENT_EVENT,
+			userId: comment.user_id,
+			value: true,
+		}]]);
 	});
 
 	it('should handle reply button click', async () => {
-		const { getByRole } = renderComment({ comment, handleClick });
+		const { getByRole } = renderComment({ comment });
 		const replyButton = getByRole('button', { name: 'Reply' });
 
 		await userEvent.click(replyButton);
-
-		expect(handleClick).toHaveBeenCalledTimes(1);
+		getByRole('button', { name: 'Comment' });
 	});
 });

package/tests/unit/specs/components/KvCommentsReplyButton.spec.js

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import KvCommentsReplyButton from '../../../../vue/KvCommentsReplyButton.vue';
+
+const CLICK_EVENT = 'click';
+
+describe('KvCommentsReplyButton', () => {
+	it('should render defaults', () => {
+		const { getByRole } = render(KvCommentsReplyButton);
+		const replyButton = getByRole('button', { name: 'Reply' });
+
+		expect(replyButton).toBeDefined();
+	});
+
+	it('should emit true value when clicked as not liked', async () => {
+		const { getByRole, emitted } = render(KvCommentsReplyButton);
+		const likeButton = getByRole('button', { name: 'Reply' });
+
+		await userEvent.click(likeButton);
+
+		expect(emitted()[CLICK_EVENT]).toEqual([[]]);
+	});
+});

package/vue/KvCommentsAdd.vue

@@ -22,6 +22,7 @@
 			</div>
 			<kv-text-input
 				:id="ADD_COMMENT_ID"
+				ref="input"
 				v-model="addCommentValue"
 				placeholder="Add a comment to this loan..."
 				class="data-hj-suppress tw-grow"
@@ -53,6 +54,7 @@ import KvTextInput from './KvTextInput.vue';
 
 export const ADD_COMMENT_ID = 'add-comment-value';
 export const ADD_COMMENT_EVENT = 'add-comment';
+export const HIDE_INPUT_EVENT = 'hide-input';
 
 export default {
 	components: {
@@ -74,27 +76,45 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Whether or not the comment is a reply
+		 */
+		isReply: {
+			type: Boolean,
+			default: false,
+		},
 	},
-	emits: [ADD_COMMENT_EVENT],
-	setup(_props, { emit }) {
+	emits: [ADD_COMMENT_EVENT, HIDE_INPUT_EVENT],
+	setup(props, { emit }) {
 		const addCommentValue = ref('');
+		const input = ref(null);
 
 		const commentButtonState = computed(() => (addCommentValue.value ? '' : 'disabled'));
 
 		const cancel = () => {
 			addCommentValue.value = '';
+			if (props.isReply) {
+				emit(HIDE_INPUT_EVENT);
+			}
 		};
 
 		const comment = () => {
 			emit(ADD_COMMENT_EVENT, addCommentValue.value);
+			addCommentValue.value = '';
+			if (props.isReply) {
+				emit(HIDE_INPUT_EVENT);
+			}
 		};
 
+		const focus = () => input.value.focus();
+
 		return {
 			ADD_COMMENT_ID,
 			addCommentValue,
 			commentButtonState,
 			cancel,
 			comment,
+			focus,
 		};
 	},
 };

package/vue/KvCommentsList.vue

@@ -7,7 +7,8 @@
 			:nest-level="1"
 			:comment="comment"
 			:is-liked="comment.is_liked"
-			:handle-click="handleClick"
+			@[REPLY_COMMENT_EVENT]="handleClick"
+			@[LIKE_COMMENT_EVENT]="handleClick"
 		/>
 	</div>
 </template>
@@ -27,12 +28,16 @@ export default {
 			default: () => {},
 		},
 	},
-	methods: {
-		handleClick(payload) {
-			if ([REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT].includes(payload.reaction)) {
-				this.$emit(payload.reaction, { ...payload });
-			}
-		},
+	setup(_props, { emit }) {
+		const handleClick = (payload) => {
+			emit(payload.reaction, { ...payload });
+		};
+
+		return {
+			handleClick,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
+		};
 	},
 };
 </script>

package/vue/KvCommentsListItem.vue

@@ -21,19 +21,29 @@
 				{{ text }}
 			</p>
 		</div>
-		<div class="tw-flex tw-items-center tw-gap-x-0.5">
+		<div
+			v-if="nestLevel < 3"
+			class="tw-flex tw-items-center tw-gap-x-2"
+		>
 			<kv-comments-heart-button
 				:is-small="true"
 				:is-liked="isLiked"
 				@click="onClick(LIKE_COMMENT_EVENT, $event)"
 			/>
-			<kv-button
-				variant="ghost"
-				class="tw-font-medium"
-				@click="onClick(REPLY_COMMENT_EVENT)"
-			>
-				Reply
-			</kv-button>
+			<kv-comments-reply-button
+				@click="onClick(REPLY_COMMENT_EVENT, $event)"
+			/>
+		</div>
+		<div
+			v-if="showInput"
+			class="tw-w-full"
+		>
+			<kv-comments-add
+				ref="commentsAddRef"
+				user-mention
+				@add-comment="onClick(REPLY_COMMENT_EVENT, $event)"
+				@hide-input="hideInput"
+			/>
 		</div>
 		<div
 			v-if="latestChildren"
@@ -56,8 +66,10 @@
 </template>
 
 <script>
-import KvButton from './KvButton.vue';
+import { ref, nextTick } from 'vue-demi';
+import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
 import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
+import KvCommentsAdd from './KvCommentsAdd.vue';
 
 export const REPLY_COMMENT_EVENT = 'reply-comment';
 export const LIKE_COMMENT_EVENT = 'like-comment';
@@ -65,8 +77,9 @@ export const LIKE_COMMENT_EVENT = 'like-comment';
 export default {
 	name: 'KvCommentsListItem',
 	components: {
-		KvButton,
+		KvCommentsReplyButton,
 		KvCommentsHeartButton,
+		KvCommentsAdd,
 	},
 	props: {
 		/**
@@ -90,17 +103,24 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		/**
-		 * The function to call when a reaction is clicked
-		 */
-		handleClick: {
-			type: Function,
-			default: () => ({}),
-		},
 	},
-	setup(props) {
+	emits: [
+		REPLY_COMMENT_EVENT,
+		LIKE_COMMENT_EVENT,
+	],
+	setup(props, { emit }) {
+		const showInput = ref(false);
+		const commentsAddRef = ref(null);
+
 		const onClick = (reaction, value) => {
-			props.handleClick({
+			if (reaction === REPLY_COMMENT_EVENT) {
+				showInput.value = true;
+				nextTick(() => {
+					commentsAddRef.value.$refs.input.focus();
+				});
+			}
+
+			emit(reaction, {
 				reaction,
 				id: props.comment?.id ?? null,
 				userId: props.comment?.user_id ?? null,
@@ -109,7 +129,12 @@ export default {
 			});
 		};
 
+		const hideInput = () => { showInput.value = false; };
+
 		return {
+			hideInput,
+			showInput,
+			commentsAddRef,
 			onClick,
 			REPLY_COMMENT_EVENT,
 			LIKE_COMMENT_EVENT,

package/vue/KvCommentsReplyButton.vue

@@ -0,0 +1,49 @@
+<!-- eslint-disable max-len -->
+<template>
+	<button
+		ref="replyButton"
+		aria-label="Reply"
+		class="tw-font-medium tw-flex tw-items-center tw-gap-x-0.5"
+		@click="handleClick"
+	>
+		<svg
+			width="14"
+			height="11"
+			viewBox="0 0 14 11"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.87502 5.12499L4.91669 7.16666C5.06946 7.31943 5.14585 7.49652 5.14585 7.69791C5.14585 7.8993 5.06946 8.0797 4.91669 8.23911C4.76391 8.38525 4.58683 8.45832 4.38544 8.45832C4.18405 8.45832 4.00696 8.38193 3.85419 8.22916L0.520854 4.89582C0.368076 4.7481 0.291687 4.57575 0.291687 4.37878C0.291687 4.18181 0.368076 4.00693 0.520854 3.85416L3.85419 0.520823C4.00696 0.368045 4.18521 0.291656 4.38892 0.291656C4.59261 0.291656 4.76853 0.368045 4.91669 0.520823C5.06946 0.668976 5.14585 0.8449 5.14585 1.04859C5.14585 1.2523 5.06946 1.43055 4.91669 1.58332L2.87502 3.62499H10C11.1067 3.62499 12.05 4.01499 12.83 4.79499C13.61 5.57499 14 6.51832 14 7.62499V9.87499C14 10.0875 13.9286 10.2656 13.7857 10.4094C13.6427 10.5531 13.4657 10.625 13.2544 10.625C13.0432 10.625 12.8646 10.5531 12.7188 10.4094C12.5729 10.2656 12.5 10.0875 12.5 9.87499V7.62499C12.5 6.93055 12.257 6.34027 11.7709 5.85416C11.2847 5.36805 10.6945 5.12499 10 5.12499H2.87502Z"
+				fill="#1C1B1F"
+			/>
+		</svg>
+
+		<span>
+			Reply
+		</span>
+	</button>
+</template>
+
+<script>
+import { ref } from 'vue-demi';
+
+export default {
+	name: 'KvCommentsReplyButton',
+	emits: [
+		'click',
+	],
+	setup(_props, { emit }) {
+		const replyButton = ref(null);
+
+		const handleClick = () => {
+			emit('click');
+		};
+
+		return {
+			replyButton,
+			handleClick,
+		};
+	},
+};
+</script>