@kiva/kv-components 3.53.0 → 3.55.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 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)
+
+
+### Features
+
+* kvcommentsheartbutton added for comments stuff ([#346](https://github.com/kiva/kv-ui-elements/issues/346)) ([57303da](https://github.com/kiva/kv-ui-elements/commit/57303daec80222c199556b296d720462265e53ac))
+
+
+
+
+
 # [3.53.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.52.1...@kiva/kv-components@3.53.0) (2024-02-26)
 
 

package/package.json

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

package/tests/fixtures/mockFeedActivityData.js

@@ -39,6 +39,7 @@ const comments = {
 						parent: '',
 						latest_children: {},
 						children_counts: {},
+						is_liked: true,
 					},
 					{
 						created_at: '2024-02-01T20:06:46.651764Z',

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/KvCommentsHeartButton.spec.js

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

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,8 +32,9 @@ 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 }]]);
+		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/KvButton.vue

@@ -53,14 +53,14 @@ export default {
 	props: {
 		/**
 		 * Use if linking to a Vue route
-		 * */
+		 */
 		to: {
 			type: [String, Object],
 			default: null,
 		},
 		/**
 		 * Use if linking to an external link or old-stack page
-		 * */
+		 */
 		href: {
 			type: String,
 			default: null,
@@ -68,7 +68,7 @@ export default {
 		/**
 		 * The behavior of the button when used in an HTML form.
 		 * `button (default), submit, reset`
-		 * */
+		 */
 		type: {
 			type: String,
 			default: 'button',
@@ -79,7 +79,7 @@ export default {
 		/**
 		 * Appearance of the button
 		 * `primary (default), secondary, danger, link, ghost`
-		 * */
+		 */
 		variant: {
 			type: String,
 			default: 'primary',
@@ -90,7 +90,7 @@ export default {
 		/**
 		 * State of the button
 		 * `'' (default), active, disabled, loading`
-		 * */
+		 */
 		state: {
 			type: String,
 			default: '',

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/KvCommentsHeartButton.vue

@@ -0,0 +1,74 @@
+<template>
+	<button
+		aria-label="Like"
+		@click="changeState"
+	>
+		<kv-material-icon
+			:icon="icon"
+			:class="classState"
+		/>
+	</button>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import { mdiHeart, mdiHeartOutline } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvCommentsHeartButton',
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Use if small icon is needed
+		 */
+		isSmall: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Use if icon is liked
+		 */
+		isLiked: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			isSmall,
+			isLiked,
+		} = toRefs(props);
+
+		const icon = computed(() => (isLiked.value ? mdiHeart : mdiHeartOutline));
+
+		const classState = computed(() => {
+			let className = isSmall.value ? 'tw-w-2.5 tw-h-2.5' : 'tw-w-3 tw-h-3';
+			className += isLiked.value ? ' filled' : '';
+
+			return className;
+		});
+
+		const changeState = () => {
+			emit('click', !isLiked.value);
+		};
+
+		return {
+			icon,
+			classState,
+			changeState,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.filled >>> svg {
+    fill: #F60059;
+}
+</style>

package/vue/KvCommentsList.vue

@@ -6,7 +6,9 @@
 			:key="comment.id"
 			:nest-level="1"
 			:comment="comment"
-			:handle-click="handleClick"
+			:is-liked="comment.is_liked"
+			@[REPLY_COMMENT_EVENT]="handleClick"
+			@[LIKE_COMMENT_EVENT]="handleClick"
 		/>
 	</div>
 </template>
@@ -26,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,21 +21,30 @@
 				{{ text }}
 			</p>
 		</div>
-
-		<kv-button
-			variant="ghost"
-			class="tw-font-medium"
-			@click="onClick(REPLY_COMMENT_EVENT)"
+		<div
+			v-if="nestLevel < 3"
+			class="tw-flex tw-items-center tw-gap-x-2"
 		>
-			Reply
-		</kv-button>
-		<kv-button
-			variant="ghost"
-			class="tw-font-medium"
-			@click="onClick(LIKE_COMMENT_EVENT)"
+			<kv-comments-heart-button
+				:is-small="true"
+				:is-liked="isLiked"
+				@click="onClick(LIKE_COMMENT_EVENT, $event)"
+			/>
+			<kv-comments-reply-button
+				@click="onClick(REPLY_COMMENT_EVENT, $event)"
+			/>
+		</div>
+		<div
+			v-if="showInput"
+			class="tw-w-full"
 		>
-			Like
-		</kv-button>
+			<kv-comments-add
+				ref="commentsAddRef"
+				user-mention
+				@add-comment="onClick(REPLY_COMMENT_EVENT, $event)"
+				@hide-input="hideInput"
+			/>
+		</div>
 		<div
 			v-if="latestChildren"
 			class="tw-my-1"
@@ -47,6 +56,7 @@
 			>
 				<kv-comments-list-item
 					:comment="nested_comment"
+					:is-liked="nested_comment.is_liked"
 					:nest-level="nestLevel + 1"
 					:handle-click="handleClick"
 				/>
@@ -56,14 +66,21 @@
 </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';
 
 export default {
 	name: 'KvCommentsListItem',
-	components: { KvButton },
+	components: {
+		KvCommentsReplyButton,
+		KvCommentsHeartButton,
+		KvCommentsAdd,
+	},
 	props: {
 		/**
 		 * Activity comment
@@ -80,24 +97,44 @@ export default {
 			default: 0,
 		},
 		/**
-		 * The function to call when a reaction is clicked
+		 * Comment is liked by current user
 		 */
-		handleClick: {
-			type: Function,
-			default: () => ({}),
+		isLiked: {
+			type: Boolean,
+			default: false,
 		},
 	},
-	setup(props) {
-		const onClick = (reaction) => {
-			props.handleClick({
+	emits: [
+		REPLY_COMMENT_EVENT,
+		LIKE_COMMENT_EVENT,
+	],
+	setup(props, { emit }) {
+		const showInput = ref(false);
+		const commentsAddRef = ref(null);
+
+		const onClick = (reaction, value) => {
+			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,
 				isChild: true,
+				value,
 			});
 		};
 
+		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>

package/vue/stories/KvCommentsHeartButton.stories.js

@@ -0,0 +1,25 @@
+import KvCommentsHeartButton from '../KvCommentsHeartButton.vue';
+
+export default {
+	title: 'KvCommentsHeartButton',
+	component: KvCommentsHeartButton,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsHeartButton },
+		setup() { return { args: templateArgs }; },
+		template: `
+				<KvCommentsHeartButton v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const IsSmall = story({ isSmall: true });
+
+export const IsLiked = story({ isLiked: true });