@kiva/kv-components 3.56.1 → 3.57.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.57.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.56.1...@kiva/kv-components@3.57.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* test failed because of whitespaces in value ([4591e93](https://github.com/kiva/kv-ui-elements/commit/4591e932a9c785f97019f47a8d7899142b2c1204))
+
+
+### Features
+
+* show number of likes ([c088fae](https://github.com/kiva/kv-ui-elements/commit/c088fae443da391871ef1783e64712d306b84007))
+
+
+
+
+
 ## [3.56.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.56.0...@kiva/kv-components@3.56.1) (2024-03-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.56.1",
+  "version": "3.57.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "a4c0454e23210ca7c03c8d0a4b09b910f21fa35f"
+  "gitHead": "6241a3deffa7ef7e581a09a1c371240884e5f269"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -141,7 +141,10 @@ const comments = {
 								},
 							],
 						},
-						children_counts: {},
+						children_counts: {
+							comment: 1,
+							like: 1,
+						},
 					},
 					{
 						created_at: '2024-02-01T20:11:23.931133Z',

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

@@ -26,11 +26,13 @@ describe('KvCommentsListItem', () => {
 	});
 
 	it('should handle like button click', async () => {
-		const { getAllByRole, emitted } = renderComment({ comment });
+		const { getAllByRole, emitted, getByTestId } = renderComment({ comment });
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+		const likeCount = getByTestId('like-count');
 
 		await userEvent.click(likeButton);
 
+		expect(likeCount).toHaveTextContent(1);
 		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
 			id: comment.id,
 			isChild: true,

package/vue/KvCommentsList.vue

@@ -10,7 +10,7 @@
 			:user-display-name="userDisplayName"
 			:user-public-id="userPublicId"
 			:is-liked="comment.is_liked"
-			class="tw-mb-2"
+			class="tw-mb-2 tw-not-prose"
 			@add-reaction="handleReaction"
 		/>
 	</div>

package/vue/KvCommentsListItem.vue

@@ -31,11 +31,19 @@
 			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="addReaction(LIKE_COMMENT_EVENT, $event)"
-			/>
+			<div class="tw-flex tw-items-center tw-gap-0.5">
+				<kv-comments-heart-button
+					:is-small="true"
+					:is-liked="isLiked"
+					@click="addReaction(LIKE_COMMENT_EVENT, $event)"
+				/>
+				<p
+					v-if="numberOfLikes"
+					data-testid="like-count"
+				>
+					{{ numberOfLikes }}
+				</p>
+			</div>
 			<kv-comments-reply-button
 				@click="replyClick"
 			/>
@@ -178,6 +186,8 @@ export default {
 
 		const hideInput = () => { showInput.value = false; };
 
+		const numberOfLikes = computed(() => comment?.value?.children_counts?.like ?? 0);
+
 		return {
 			hideInput,
 			showInput,
@@ -192,6 +202,7 @@ export default {
 			authorName,
 			childComments,
 			isLiked,
+			numberOfLikes,
 		};
 	},
 };