@kiva/kv-components 3.54.0 → 3.55.1

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.55.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.55.0...@kiva/kv-components@3.55.1) (2024-02-29)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+# [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.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "b29d4c7e40f229ac09c7f68c377741af7d068158"
+  "gitHead": "c8fdabba600d0e9b03143a90a2d8681abde09adb"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -16,26 +16,151 @@ const comments = {
 						created_at: '2024-02-01T20:12:31.398932Z',
 						updated_at: '2024-02-01T20:12:31.398932Z',
 						id: 'dade3812-6aa0-4c32-90ea-2366dab178a1',
-						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
 						kind: 'comment',
 						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
 						data: {
 							text: 'another guest comment',
 						},
+						user: {
+							data: {
+								publicLenderId: 'Nathan2352',
+								name: 'Nathan',
+								image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+							},
+						},
 						parent: '',
-						latest_children: {},
+						latest_children: {
+							like: [
+								{
+									created_at: '2024-02-28T20:04:21.445272Z',
+									updated_at: '2024-02-28T20:04:21.445272Z',
+									id: '290a6c07-143a-416e-b016-ac0d9ac8ad91',
+									user: {
+										created_at: '2024-02-28T19:09:54.093757Z',
+										updated_at: '2024-02-28T19:09:54.093757Z',
+										data: {
+											publicLenderId: 'Jess1234',
+											name: 'Jess',
+											image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+										},
+									},
+									kind: 'like',
+									activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+									data: {},
+									parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
+									latest_children: {},
+									children_counts: {},
+								},
+							],
+							comment: [
+								{
+									created_at: '2024-02-28T20:04:21.445272Z',
+									updated_at: '2024-02-28T20:04:21.445272Z',
+									id: '290a6c07-143a-416e-b016-ac0d9ac8ad92',
+									user: {
+										data: {
+											publicLenderId: 'Casey1234',
+											name: 'Casey',
+											image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+										},
+									},
+									kind: 'comment',
+									activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+									data: {
+										text: 'child comment',
+									},
+									parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
+									latest_children: {
+										comment: [
+											{
+												created_at: '2024-02-28T20:04:21.445272Z',
+												updated_at: '2024-02-28T20:04:21.445272Z',
+												id: '290a6c07-143a-416e-b016-ac0d9ac8ad93',
+												user: {
+													data: {
+														publicLenderId: 'Sarah1234',
+														name: 'Sarah',
+														image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+													},
+												},
+												kind: 'comment',
+												activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+												data: {
+													text: 'child comment reply',
+												},
+												parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
+												latest_children: {},
+												children_counts: {},
+											},
+										],
+									},
+									children_counts: {},
+								},
+								{
+									created_at: '2024-02-28T20:04:21.445272Z',
+									updated_at: '2024-02-28T20:04:21.445272Z',
+									id: '290a6c07-143a-416e-b016-ac0d9ac8ad90',
+									user: {
+										data: {
+											publicLenderId: 'Sophie1234',
+											name: 'Sophie',
+											image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+										},
+									},
+									kind: 'comment',
+									activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+									data: {
+										text: 'second child comment',
+									},
+									parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
+									latest_children: {
+										like: [
+											{
+												created_at: '2024-02-28T20:04:21.445272Z',
+												updated_at: '2024-02-28T20:04:21.445272Z',
+												id: '290a6c07-143a-416e-b016-ac0d9ac8ad99',
+												user: {
+													created_at: '2024-02-28T19:09:54.093757Z',
+													updated_at: '2024-02-28T19:09:54.093757Z',
+													data: {
+														publicLenderId: 'Jess1234',
+														name: 'Jess',
+														image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+													},
+												},
+												kind: 'like',
+												activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+												data: {},
+												parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
+												latest_children: {},
+												children_counts: {},
+											},
+										],
+									},
+									children_counts: {},
+								},
+							],
+						},
 						children_counts: {},
 					},
 					{
 						created_at: '2024-02-01T20:11:23.931133Z',
 						updated_at: '2024-02-01T20:11:23.931133Z',
 						id: '3de615bb-0d48-4a69-9004-141ee26985eb',
-						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
 						kind: 'comment',
 						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
 						data: {
 							text: 'test as visitor',
 						},
+						user: {
+							created_at: '2024-02-28T19:09:54.093757Z',
+							updated_at: '2024-02-28T19:09:54.093757Z',
+							data: {
+								publicLenderId: 'Lauren1234',
+								name: '',
+								image: '',
+							},
+						},
 						parent: '',
 						latest_children: {},
 						children_counts: {},
@@ -45,17 +170,19 @@ const comments = {
 						created_at: '2024-02-01T20:06:46.651764Z',
 						updated_at: '2024-02-01T20:06:46.651764Z',
 						id: 'e1db4420-159e-4ba2-aab9-704d1cc56dae',
-						user_id: '123',
 						user: {
-							created_at: '2024-02-01T19:48:26.890734Z',
-							updated_at: '2024-02-01T19:48:26.890734Z',
-							id: '123',
-							data: {},
+							created_at: '2024-02-28T19:09:54.093757Z',
+							updated_at: '2024-02-28T19:09:54.093757Z',
+							data: {
+								publicLenderId: 'Todd1234',
+								name: 'Todd',
+								image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
+							},
 						},
 						kind: 'comment',
 						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
 						data: {
-							text: 'asd',
+							text: 'comment test forever!',
 						},
 						parent: '',
 						latest_children: {},

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 });
@@ -9,7 +9,7 @@ const renderCommentsAdd = (props = {}) => {
 describe('KvCommentsAdd', () => {
 	it('should render defaults', () => {
 		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		getByPlaceholderText('Add a comment to this loan...');
+		getByPlaceholderText('Add a comment...');
 		getByRole('button', { name: 'Cancel' });
 		getByRole('button', { name: 'Comment' });
 	});
@@ -25,7 +25,7 @@ describe('KvCommentsAdd', () => {
 
 	it('should enable comment button when text entered', async () => {
 		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const textInput = getByPlaceholderText('Add a comment...');
 		const commentButton = getByRole('button', { name: 'Comment' });
 
 		expect(commentButton.disabled).toBeTruthy();
@@ -41,7 +41,7 @@ describe('KvCommentsAdd', () => {
 
 	it('should clear text when cancel clicked', async () => {
 		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const textInput = getByPlaceholderText('Add a comment...');
 		const cancelButton = getByRole('button', { name: 'Cancel' });
 
 		await userEvent.type(textInput, 'test');
@@ -52,7 +52,7 @@ describe('KvCommentsAdd', () => {
 
 	it('should emit value when comment clicked', async () => {
 		const { getByPlaceholderText, getByRole, emitted } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const textInput = getByPlaceholderText('Add a comment...');
 		const commentButton = getByRole('button', { name: 'Comment' });
 		const TEST_INPUT = 'test test';
 
@@ -63,6 +63,18 @@ describe('KvCommentsAdd', () => {
 		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
 	});
 
+	it('should emit value when enter key pressed', async () => {
+		const { getByPlaceholderText, emitted } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment...');
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		userEvent.keyboard('{enter}');
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
+	});
+
 	it('should not emit empty value when comment clicked', async () => {
 		const { getByRole, emitted } = renderCommentsAdd();
 		const commentButton = getByRole('button', { name: 'Comment' });
@@ -71,4 +83,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...');
+		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/KvCommentsContainer.spec.js

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import Container from '../../../../vue/KvCommentsContainer.vue';
+import Container, { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 import { ADD_COMMENT_ID, ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
 
 const renderContainer = (props = {}) => {
@@ -15,7 +15,7 @@ describe('KvCommentsContainer', () => {
 
 	it('should emit comment', async () => {
 		const { getByPlaceholderText, getByRole, emitted } = renderContainer();
-		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const textInput = getByPlaceholderText('Add a comment...');
 		const commentButton = getByRole('button', { name: 'Comment' });
 		const TEST_INPUT = 'test test';
 
@@ -23,6 +23,11 @@ describe('KvCommentsContainer', () => {
 
 		await userEvent.click(commentButton);
 
-		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
+			id: null,
+			isChild: false,
+			reaction: ADD_COMMENT_EVENT,
+			value: TEST_INPUT,
+		}]]);
 	});
 });

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

@@ -4,7 +4,7 @@ import KvCommentsHeartButton from '../../../../vue/KvCommentsHeartButton.vue';
 
 const CLICK_EVENT = 'click';
 
-describe('KvCommentsListItem', () => {
+describe('KvCommentsHeartButton', () => {
 	it('should render defaults', () => {
 		const { getByRole } = render(KvCommentsHeartButton);
 		const likeButton = getByRole('button', { name: 'Like' });

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import ListComponent from '../../../../vue/KvCommentsList.vue';
 import activityFeed from '../../../fixtures/mockFeedActivityData';
 import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
+import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const renderList = (props = {}) => {
 	return render(ListComponent, { props });
@@ -18,22 +19,44 @@ describe('KvCommentsList', () => {
 		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
 	});
 
-	it('should emit comment events', async () => {
+	it('should emit like reaction events', async () => {
 		const { getAllByRole, emitted } = renderList({ comments });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 		const firstComment = comments.comment[0];
 
 		const TEST_OBJ = {
-			userId: firstComment.user_id,
+			id: firstComment.id,
+			isChild: true,
+		};
+
+		await userEvent.click(likeButton);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);
+	});
+
+	it('should emit reply reaction events', async () => {
+		const {
+			getAllByRole,
+			getByRole,
+			getByPlaceholderText,
+			emitted,
+		} = renderList({ comments });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+		const firstComment = comments.comment[0];
+
+		const TEST_OBJ = {
 			id: firstComment.id,
 			isChild: true,
 		};
 
 		await userEvent.click(replyButton);
-		expect(emitted()[REPLY_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT }]]);
+		const commentButton = getByRole('button', { name: 'Comment' });
 
-		await userEvent.click(likeButton);
-		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);
+		const textInput = getByPlaceholderText('Add a comment...');
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT, value: TEST_INPUT }]]);
 	});
 });

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

@@ -1,21 +1,23 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import KvCommentsListItem from '../../../../vue/KvCommentsListItem.vue';
+import KvCommentsListItem, { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
 import activityFeed from '../../../fixtures/mockFeedActivityData';
+import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const comment = activityFeed.results[0].latest_reactions.comment[0];
 
-const handleClick = jest.fn();
-
 const renderComment = (props = {}) => {
 	return render(KvCommentsListItem, { props });
 };
 
 describe('KvCommentsListItem', () => {
 	it('should render defaults', () => {
-		const { getByRole } = renderComment({ comment });
-		getByRole('button', { name: 'Reply' });
-		getByRole('button', { name: 'Like' });
+		const { getAllByRole } = renderComment({ comment });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+
+		expect(likeButton).toBeDefined();
+		expect(replyButton).toBeDefined();
 	});
 
 	it('should render comment text', () => {
@@ -24,20 +26,50 @@ describe('KvCommentsListItem', () => {
 	});
 
 	it('should handle like button click', async () => {
-		const { getByRole } = renderComment({ comment, handleClick });
-		const likeButton = getByRole('button', { name: 'Like' });
+		const { getAllByRole, emitted } = renderComment({ comment });
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 
 		await userEvent.click(likeButton);
 
-		expect(handleClick).toHaveBeenCalledTimes(1);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
+			id: comment.id,
+			isChild: true,
+			reaction: LIKE_COMMENT_EVENT,
+			value: true,
+		}]]);
 	});
 
 	it('should handle reply button click', async () => {
-		const { getByRole } = renderComment({ comment, handleClick });
-		const replyButton = getByRole('button', { name: 'Reply' });
+		const { getAllByRole, getByRole } = renderComment({ comment });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 
 		await userEvent.click(replyButton);
+		getByRole('button', { name: 'Comment' });
+	});
+
+	it('should emit reply reaction events', async () => {
+		const {
+			getAllByRole,
+			getByRole,
+			getByPlaceholderText,
+			emitted,
+		} = renderComment({ comment });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+
+		const TEST_OBJ = {
+			id: comment.id,
+			isChild: true,
+		};
+
+		await userEvent.click(replyButton);
+		const commentButton = getByRole('button', { name: 'Comment' });
+
+		const textInput = getByPlaceholderText('Add a comment...');
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
 
-		expect(handleClick).toHaveBeenCalledTimes(1);
+		await userEvent.click(commentButton);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT, value: TEST_INPUT }]]);
 	});
 });

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 click event when clicked', async () => {
+		const { getByRole, emitted } = render(KvCommentsReplyButton);
+		const replyButton = getByRole('button', { name: 'Reply' });
+
+		await userEvent.click(replyButton);
+
+		expect(emitted()[CLICK_EVENT]).toEqual([[]]);
+	});
+});

package/vue/KvCommentsAdd.vue

@@ -22,9 +22,11 @@
 			</div>
 			<kv-text-input
 				:id="ADD_COMMENT_ID"
+				ref="input"
 				v-model="addCommentValue"
-				placeholder="Add a comment to this loan..."
+				placeholder="Add a comment..."
 				class="data-hj-suppress tw-grow"
+				@keyup.enter="comment"
 			/>
 		</div>
 		<div class="tw-flex tw-py-0.5 tw-gap-0.5">
@@ -53,8 +55,10 @@ 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 {
+	name: 'KvCommentsAdd',
 	components: {
 		KvButton,
 		KvTextInput,
@@ -74,27 +78,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/KvCommentsContainer.vue

@@ -3,13 +3,15 @@
 		<kv-comments-add
 			:user-image-url="userImageUrl"
 			:user-display-name="userDisplayName"
-			@add-comment="comment"
+			@add-comment="handleReaction"
 		/>
 		<kv-comments-list
 			v-if="comments"
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			:user-public-id="userPublicId"
 			:comments="comments"
-			@[REPLY_COMMENT_EVENT]="comment"
-			@[LIKE_COMMENT_EVENT]="comment"
+			@add-reaction="handleReaction"
 		/>
 	</div>
 </template>
@@ -17,11 +19,12 @@
 <script>
 import KvCommentsAdd from './KvCommentsAdd.vue';
 import KvCommentsList from './KvCommentsList.vue';
-import { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
 
 export const ADD_COMMENT_EVENT = 'add-comment';
+export const ADD_REACTION_EVENT = 'add-reaction';
 
 export default {
+	name: 'KvCommentsContainer',
 	components: {
 		KvCommentsAdd,
 		KvCommentsList,
@@ -41,6 +44,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * Activity comments
 		 */
@@ -49,16 +59,24 @@ export default {
 			default: () => {},
 		},
 	},
+	emits: [ADD_REACTION_EVENT],
 	setup(_props, { emit }) {
-		const comment = (commentValue) => {
-			emit(ADD_COMMENT_EVENT, commentValue);
-			emit(REPLY_COMMENT_EVENT, commentValue);
-			emit(LIKE_COMMENT_EVENT, commentValue);
+		const handleReaction = (reactionPayload) => {
+			let payload;
+			if (reactionPayload.value === undefined) {
+				payload = {
+					reaction: ADD_COMMENT_EVENT,
+					id: null,
+					isChild: false,
+					value: reactionPayload,
+				};
+			} else {
+				payload = reactionPayload;
+			}
+			emit(ADD_REACTION_EVENT, payload);
 		};
 		return {
-			comment,
-			REPLY_COMMENT_EVENT,
-			LIKE_COMMENT_EVENT,
+			handleReaction,
 		};
 	},
 };

package/vue/KvCommentsHeartButton.vue

@@ -1,7 +1,8 @@
 <template>
 	<button
 		aria-label="Like"
-		@click="changeState"
+		class="tw-flex tw-flex-col tw-justify-center"
+		@click="$emit('click', !isLiked);"
 	>
 		<kv-material-icon
 			:icon="icon"
@@ -39,7 +40,7 @@ export default {
 	emits: [
 		'click',
 	],
-	setup(props, { emit }) {
+	setup(props) {
 		const {
 			isSmall,
 			isLiked,
@@ -54,14 +55,9 @@ export default {
 			return className;
 		});
 
-		const changeState = () => {
-			emit('click', !isLiked.value);
-		};
-
 		return {
 			icon,
 			classState,
-			changeState,
 		};
 	},
 };

package/vue/KvCommentsList.vue

@@ -6,19 +6,46 @@
 			:key="comment.id"
 			:nest-level="1"
 			:comment="comment"
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			:user-public-id="userPublicId"
 			:is-liked="comment.is_liked"
-			:handle-click="handleClick"
+			class="tw-mb-2"
+			@add-reaction="handleReaction"
 		/>
 	</div>
 </template>
 
 <script>
 
-import KvCommentsListItem, { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
+import KvCommentsListItem from './KvCommentsListItem.vue';
+import { ADD_REACTION_EVENT } from './KvCommentsContainer.vue';
 
 export default {
+	name: 'KvCommentsList',
 	components: { KvCommentsListItem },
 	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * Activity comments
 		 */
@@ -27,12 +54,15 @@ export default {
 			default: () => {},
 		},
 	},
-	methods: {
-		handleClick(payload) {
-			if ([REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT].includes(payload.reaction)) {
-				this.$emit(payload.reaction, { ...payload });
-			}
-		},
+	emits: [ADD_REACTION_EVENT],
+	setup(_props, { emit }) {
+		const handleReaction = (payload) => {
+			emit(ADD_REACTION_EVENT, payload);
+		};
+
+		return {
+			handleReaction,
+		};
 	},
 };
 </script>

package/vue/KvCommentsListItem.vue

@@ -1,54 +1,75 @@
 <template>
 	<div>
-		<div
-			class="tw-flex tw-items-center tw-gap-1"
-		>
-			<img
-				v-if="profileImage"
-				class="
-					data-hj-suppress
-					tw-inline-block
-					tw-w-3.5
-					tw-h-3.5
-					tw-rounded-full
-					tw-overflow-hidden
-					tw-object-fill
-				"
-				:src="profileImage"
-				alt="picture"
-			>
+		<div>
+			<div class="tw-flex tw-items-center tw-gap-1">
+				<img
+					v-if="authorImage"
+					class="
+						data-hj-suppress
+						tw-inline-block
+						tw-w-3.5
+						tw-h-3.5
+						tw-rounded-full
+						tw-overflow-hidden
+						tw-object-fill
+					"
+					:src="authorImage"
+					alt="picture"
+				>
+				<p
+					v-if="authorName"
+					class="tw-font-medium"
+				>
+					{{ authorName }}
+				</p>
+			</div>
 			<p>
-				{{ text }}
+				{{ commentText }}
 			</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)"
+				@click="addReaction(LIKE_COMMENT_EVENT, $event)"
+			/>
+			<kv-comments-reply-button
+				@click="replyClick"
 			/>
-			<kv-button
-				variant="ghost"
-				class="tw-font-medium"
-				@click="onClick(REPLY_COMMENT_EVENT)"
-			>
-				Reply
-			</kv-button>
 		</div>
 		<div
-			v-if="latestChildren"
+			v-if="showInput"
+			class="tw-w-full"
+		>
+			<kv-comments-add
+				ref="commentsAddRef"
+				:user-image-url="userImageUrl"
+				:user-display-name="userDisplayName"
+				:is-reply="true"
+				class="tw-ml-3"
+				@add-comment="addReaction(REPLY_COMMENT_EVENT, $event)"
+				@hide-input="hideInput"
+			/>
+		</div>
+		<div
+			v-if="childComments"
 			class="tw-my-1"
 		>
 			<p
-				v-for="nested_comment in latestChildren"
+				v-for="nested_comment in childComments"
 				:key="nested_comment.id"
 				class="tw-ml-3"
 			>
 				<kv-comments-list-item
+					:user-image-url="userImageUrl"
+					:user-display-name="userDisplayName"
+					:user-public-id="userPublicId"
 					:comment="nested_comment"
-					:is-liked="nested_comment.is_liked"
 					:nest-level="nestLevel + 1"
-					:handle-click="handleClick"
+					@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
 				/>
 			</p>
 		</div>
@@ -56,8 +77,16 @@
 </template>
 
 <script>
-import KvButton from './KvButton.vue';
+import {
+	ref,
+	nextTick,
+	computed,
+	toRefs,
+} from 'vue-demi';
+import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
 import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
+import KvCommentsAdd from './KvCommentsAdd.vue';
+import { ADD_REACTION_EVENT } from './KvCommentsContainer.vue';
 
 export const REPLY_COMMENT_EVENT = 'reply-comment';
 export const LIKE_COMMENT_EVENT = 'like-comment';
@@ -65,10 +94,32 @@ export const LIKE_COMMENT_EVENT = 'like-comment';
 export default {
 	name: 'KvCommentsListItem',
 	components: {
-		KvButton,
+		KvCommentsReplyButton,
 		KvCommentsHeartButton,
+		KvCommentsAdd,
 	},
 	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The ID for the user
+		 */
+		userPublicId: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * Activity comment
 		 */
@@ -83,51 +134,65 @@ export default {
 			type: Number,
 			default: 0,
 		},
-		/**
-		 * Comment is liked by current user
-		 */
-		isLiked: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The function to call when a reaction is clicked
-		 */
-		handleClick: {
-			type: Function,
-			default: () => ({}),
-		},
 	},
-	setup(props) {
-		const onClick = (reaction, value) => {
-			props.handleClick({
+	emits: [
+		ADD_REACTION_EVENT,
+	],
+	setup(props, { emit }) {
+		const {
+			comment,
+			userPublicId,
+		} = toRefs(props);
+
+		const showInput = ref(false);
+		const commentsAddRef = ref(null);
+
+		const commentText = computed(() => comment?.value?.data?.text ?? '');
+		const authorImage = computed(() => comment?.value?.user?.data?.image ?? '');
+		const authorName = computed(() => comment?.value?.user?.data?.name ?? '');
+		const childComments = computed(() => comment?.value?.latest_children?.comment ?? null);
+		const childLikes = computed(() => comment?.value?.latest_children?.like ?? []);
+		const likedObject = computed(() => childLikes.value.find((child) => child.user.data.publicLenderId === userPublicId.value)); // eslint-disable-line max-len
+		const isLiked = computed(() => likedObject.value !== undefined);
+
+		const replyClick = () => {
+			showInput.value = !showInput.value;
+			nextTick(() => {
+				if (showInput.value) commentsAddRef.value.$refs.input.focus();
+			});
+		};
+
+		const addReaction = (reaction, value) => {
+			const payload = {
 				reaction,
-				id: props.comment?.id ?? null,
-				userId: props.comment?.user_id ?? null,
+				id: comment?.value?.id ?? null,
 				isChild: true,
 				value,
-			});
+			};
+			if (reaction === LIKE_COMMENT_EVENT && !value) {
+				payload.id = likedObject.value.id;
+			}
+
+			emit(ADD_REACTION_EVENT, payload);
 		};
 
+		const hideInput = () => { showInput.value = false; };
+
 		return {
-			onClick,
+			hideInput,
+			showInput,
+			commentsAddRef,
+			replyClick,
+			addReaction,
 			REPLY_COMMENT_EVENT,
 			LIKE_COMMENT_EVENT,
+			ADD_REACTION_EVENT,
+			commentText,
+			authorImage,
+			authorName,
+			childComments,
+			isLiked,
 		};
 	},
-	computed: {
-		text() {
-			return this.comment?.data?.text ?? '';
-		},
-		userId() {
-			return this.comment?.user_id ?? null;
-		},
-		latestChildren() {
-			return this.comment?.latest_children ?? null;
-		},
-		profileImage() {
-			return this.comment?.user_picture ?? '';
-		},
-	},
 };
 </script>

package/vue/KvCommentsReplyButton.vue

@@ -0,0 +1,34 @@
+<!-- eslint-disable max-len -->
+<template>
+	<button
+		aria-label="Reply"
+		class="tw-font-medium tw-flex tw-items-center tw-gap-x-0.5"
+		@click="$emit('click')"
+	>
+		<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>
+export default {
+	name: 'KvCommentsReplyButton',
+	emits: [
+		'click',
+	],
+};
+</script>

package/vue/stories/KvCommentsContainer.stories.js

@@ -1,5 +1,5 @@
 import KvCommentsContainer from '../KvCommentsContainer.vue';
-import comments from '../../tests/fixtures/mockFeedActivityData';
+import activityFeed from '../../tests/fixtures/mockFeedActivityData';
 
 export default {
 	title: 'KvCommentsContainer',
@@ -21,4 +21,15 @@ const story = (args) => {
 	return template;
 };
 
+const comments = activityFeed.results[0].latest_reactions;
+
 export const Default = story({ comments });
+
+export const UserData = story(
+	{
+		comments,
+		userDisplayName: 'Jess',
+		userImageUrl: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+		userPublicId: 'Jess1234',
+	},
+);

package/vue/stories/KvCommentsList.stories.js

@@ -22,3 +22,12 @@ const story = (args) => {
 const comments = activityFeed.results[0].latest_reactions;
 
 export const Default = story({ comments });
+
+export const UserData = story(
+	{
+		comments,
+		userDisplayName: 'Jess',
+		userImageUrl: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+		userPublicId: 'Jess1234',
+	},
+);

package/vue/stories/KvCommentsListItem.stories.js

@@ -19,6 +19,18 @@ const story = (args) => {
 	return template;
 };
 
-const comment = activityFeed.results[0].latest_reactions.comment[0];
+const comment = activityFeed.results[0].latest_reactions.comment[1];
+const childComments = activityFeed.results[0].latest_reactions.comment[0];
 
 export const Default = story({ comment });
+
+export const ChildComments = story({ comment: childComments });
+
+export const UserData = story(
+	{
+		comment: childComments,
+		userDisplayName: 'Jess',
+		userImageUrl: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+		userPublicId: 'Jess1234',
+	},
+);