@kiva/kv-components 3.58.0 → 3.59.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.59.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.58.0...@kiva/kv-components@3.59.0) (2024-03-04)
+
+
+### Features
+
+* replies count added to reply commenting button ([#359](https://github.com/kiva/kv-ui-elements/issues/359)) ([87e4b01](https://github.com/kiva/kv-ui-elements/commit/87e4b01022641e774203274a0b3a353d1b2a37bc))
+
+
+
+
+
 # [3.58.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.57.0...@kiva/kv-components@3.58.0) (2024-03-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.58.0",
+  "version": "3.59.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "b2375c3684b25f0b94ed8cda48e2871564467ce4"
+  "gitHead": "26d0e3f17353ef2a4f9a634a22ea335789a0252d"
 }

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

@@ -12,6 +12,14 @@ describe('KvCommentsReplyButton', () => {
 		expect(replyButton).toBeDefined();
 	});
 
+	it('should render number of replies', () => {
+		const { getByTestId } = render(KvCommentsReplyButton, { props: { numberOfReplies: 6 } });
+		const replyCount = getByTestId('reply-count');
+
+		expect(replyCount).toBeDefined();
+		expect(replyCount).toHaveTextContent(6);
+	});
+
 	it('should emit click event when clicked', async () => {
 		const { getByRole, emitted } = render(KvCommentsReplyButton);
 		const replyButton = getByRole('button', { name: 'Reply' });

package/vue/KvCommentsListItem.vue

@@ -40,11 +40,13 @@
 				<p
 					v-if="numberOfLikes"
 					data-testid="like-count"
+					class="tw-font-medium"
 				>
 					{{ numberOfLikes }}
 				</p>
 			</div>
 			<kv-comments-reply-button
+				:number-of-replies="numberOfReplies"
 				@click="replyClick"
 			/>
 		</div>
@@ -188,6 +190,8 @@ export default {
 
 		const numberOfLikes = computed(() => comment?.value?.children_counts?.like ?? 0);
 
+		const numberOfReplies = computed(() => comment?.value?.children_counts?.like ?? 0);
+
 		return {
 			hideInput,
 			showInput,
@@ -203,6 +207,7 @@ export default {
 			childComments,
 			isLiked,
 			numberOfLikes,
+			numberOfReplies,
 		};
 	},
 };

package/vue/KvCommentsReplyButton.vue

@@ -17,7 +17,12 @@
 				fill="#1C1B1F"
 			/>
 		</svg>
-
+		<span
+			v-if="numberOfReplies"
+			data-testid="reply-count"
+		>
+			{{ numberOfReplies }}
+		</span>
 		<span>
 			Reply
 		</span>
@@ -27,6 +32,15 @@
 <script>
 export default {
 	name: 'KvCommentsReplyButton',
+	props: {
+		/**
+		 * The number of replies to the comment.
+		 */
+		numberOfReplies: {
+			type: Number,
+			default: 0,
+		},
+	},
 	emits: [
 		'click',
 	],

package/vue/stories/KvCommentsReplyButton.stories.js

@@ -0,0 +1,23 @@
+import KvCommentsReplyButton from '../KvCommentsReplyButton.vue';
+
+export default {
+	title: 'KvCommentsReplyButton',
+	component: KvCommentsReplyButton,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsReplyButton },
+		setup() { return { args: templateArgs }; },
+		template: `
+				<KvCommentsReplyButton v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const ReplyCount = story({ numberOfReplies: 6 });