@kiva/kv-components 3.55.0 → 3.55.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.55.0",
+  "version": "3.55.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "ecd01faa5db8db12e79b243f311a264616a23e7d"
+  "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

@@ -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' });
@@ -74,7 +86,7 @@ describe('KvCommentsAdd', () => {
 
 	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 textInput = getByPlaceholderText('Add a comment...');
 		const commentButton = getByRole('button', { name: 'Comment' });
 		const TEST_INPUT = 'test test';
 

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,23 +19,44 @@ describe('KvCommentsList', () => {
 		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
 	});
 
-	it('should emit comment events', async () => {
-		const { getAllByRole, getByRole, emitted } = renderList({ comments });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+	it('should emit like reaction events', async () => {
+		const { getAllByRole, emitted } = renderList({ comments });
 		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 }]]);
-		getByRole('button', { name: 'Comment' });
+		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,7 +1,8 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import KvCommentsListItem, { LIKE_COMMENT_EVENT } 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];
 
@@ -11,9 +12,12 @@ const renderComment = (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', () => {
@@ -22,25 +26,50 @@ describe('KvCommentsListItem', () => {
 	});
 
 	it('should handle like button click', async () => {
-		const { getByRole, emitted } = renderComment({ comment });
-		const likeButton = getByRole('button', { name: 'Like' });
+		const { getAllByRole, emitted } = renderComment({ comment });
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 
 		await userEvent.click(likeButton);
 
-		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{
+		expect(emitted()[ADD_REACTION_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 });
-		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);
+
+		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

@@ -12,11 +12,11 @@ describe('KvCommentsReplyButton', () => {
 		expect(replyButton).toBeDefined();
 	});
 
-	it('should emit true value when clicked as not liked', async () => {
+	it('should emit click event when clicked', async () => {
 		const { getByRole, emitted } = render(KvCommentsReplyButton);
-		const likeButton = getByRole('button', { name: 'Reply' });
+		const replyButton = getByRole('button', { name: 'Reply' });
 
-		await userEvent.click(likeButton);
+		await userEvent.click(replyButton);
 
 		expect(emitted()[CLICK_EVENT]).toEqual([[]]);
 	});

package/vue/KvCommentsAdd.vue

@@ -24,8 +24,9 @@
 				: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">
@@ -57,6 +58,7 @@ export const ADD_COMMENT_EVENT = 'add-comment';
 export const HIDE_INPUT_EVENT = 'hide-input';
 
 export default {
+	name: 'KvCommentsAdd',
 	components: {
 		KvButton,
 		KvTextInput,

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,20 +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"
-			@[REPLY_COMMENT_EVENT]="handleClick"
-			@[LIKE_COMMENT_EVENT]="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
 		 */
@@ -28,15 +54,14 @@ export default {
 			default: () => {},
 		},
 	},
+	emits: [ADD_REACTION_EVENT],
 	setup(_props, { emit }) {
-		const handleClick = (payload) => {
-			emit(payload.reaction, { ...payload });
+		const handleReaction = (payload) => {
+			emit(ADD_REACTION_EVENT, payload);
 		};
 
 		return {
-			handleClick,
-			REPLY_COMMENT_EVENT,
-			LIKE_COMMENT_EVENT,
+			handleReaction,
 		};
 	},
 };

package/vue/KvCommentsListItem.vue

@@ -1,24 +1,30 @@
 <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
@@ -28,10 +34,10 @@
 			<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="onClick(REPLY_COMMENT_EVENT, $event)"
+				@click="replyClick"
 			/>
 		</div>
 		<div
@@ -40,25 +46,30 @@
 		>
 			<kv-comments-add
 				ref="commentsAddRef"
-				user-mention
-				@add-comment="onClick(REPLY_COMMENT_EVENT, $event)"
+				: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="latestChildren"
+			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>
@@ -66,10 +77,16 @@
 </template>
 
 <script>
-import { ref, nextTick } from 'vue-demi';
+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';
@@ -82,6 +99,27 @@ export default {
 		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
 		 */
@@ -96,37 +134,46 @@ export default {
 			type: Number,
 			default: 0,
 		},
-		/**
-		 * Comment is liked by current user
-		 */
-		isLiked: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	emits: [
-		REPLY_COMMENT_EVENT,
-		LIKE_COMMENT_EVENT,
+		ADD_REACTION_EVENT,
 	],
 	setup(props, { emit }) {
+		const {
+			comment,
+			userPublicId,
+		} = toRefs(props);
+
 		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();
-				});
-			}
+		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);
 
-			emit(reaction, {
+		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; };
@@ -135,24 +182,17 @@ export default {
 			hideInput,
 			showInput,
 			commentsAddRef,
-			onClick,
+			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

@@ -1,10 +1,9 @@
 <!-- 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"
+		@click="$emit('click')"
 	>
 		<svg
 			width="14"
@@ -26,24 +25,10 @@
 </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/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',
+	},
+);