@kiva/kv-components 3.65.2 → 3.66.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.66.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.65.2...@kiva/kv-components@3.66.0) (2024-03-20)
+
+
+### Features
+
+* collapsable replies list added to commenting component ([#373](https://github.com/kiva/kv-ui-elements/issues/373)) ([612a880](https://github.com/kiva/kv-ui-elements/commit/612a8806ffd74411a774f6bdf5efb30e877abaa1))
+
+
+
+
+
 ## [3.65.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.65.1...@kiva/kv-components@3.65.2) (2024-03-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.65.2",
+  "version": "3.66.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "8456bf17419af8cadd38b05d7e8efaaa8b9ee76d"
+  "gitHead": "89fc529c0f6af234c6996d5556aab15e369093d5"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -94,7 +94,9 @@ const comments = {
 											},
 										],
 									},
-									children_counts: {},
+									children_counts: {
+										comment: 1,
+									},
 								},
 								{
 									created_at: '2024-02-28T20:04:21.445272Z',

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

@@ -46,6 +46,17 @@ describe('KvCommentsListItem', () => {
 		getByText(comment.data.text);
 	});
 
+	it('should render child comment text if replies list opened', async () => {
+		const { getAllByText, getAllByRole } = renderComment({ comment });
+		const openRepliesButton = getAllByRole('button', { name: '1 reply' })[0];
+
+		await userEvent.click(openRepliesButton);
+
+		const childComment = getAllByText(comment.latest_children.comment[0].data.text)[0];
+
+		expect(childComment).toBeDefined();
+	});
+
 	it('should not handle like button click for guest user', async () => {
 		const { getAllByRole, emitted, getByTestId } = renderComment({ comment });
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];

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

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

@@ -20,7 +20,7 @@
 		</div>
 		<div
 			v-if="nestLevel < 3"
-			class="tw-flex tw-items-center tw-gap-x-2"
+			class="tw-flex tw-items-center tw-gap-x-1"
 		>
 			<div class="tw-flex tw-items-center tw-gap-0.5">
 				<kv-comments-heart-button
@@ -39,7 +39,6 @@
 			</div>
 			<kv-comments-reply-button
 				v-if="userPublicId"
-				:number-of-replies="numberOfReplies"
 				@click="replyClick"
 			/>
 		</div>
@@ -61,25 +60,40 @@
 			v-if="childComments"
 			class="tw-my-1"
 		>
-			<p
-				v-for="nested_comment in childComments"
-				:key="nested_comment.id"
-				class="tw-ml-3"
+			<button
+				v-if="numberOfReplies"
+				class="tw-ml-3 tw-text-action tw-font-medium tw-mb-1 tw-flex tw-items-center"
+				@click="toggleReplies"
 			>
-				<kv-comments-list-item
-					:user-image-url="userImageUrl"
-					:user-display-name="userDisplayName"
-					:user-public-id="userPublicId"
-					:comment="nested_comment"
-					:nest-level="nestLevel + 1"
-					@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
+				<kv-material-icon
+					class="tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease"
+					:class="{ 'tw-rotate-180' : repliesOpened }"
+					:icon="mdiChevronDown"
 				/>
-			</p>
+				{{ numberOfReplies }} {{ numberOfReplies > 1 ? 'replies' : 'reply' }}
+			</button>
+			<div v-if="repliesOpened">
+				<div
+					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"
+						:nest-level="nestLevel + 1"
+						@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+import { mdiChevronDown } from '@mdi/js';
 import {
 	ref,
 	nextTick,
@@ -88,6 +102,7 @@ import {
 	onMounted,
 	inject,
 } from 'vue-demi';
+import KvMaterialIcon from './KvMaterialIcon.vue';
 import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
 import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
 import KvCommentsAdd from './KvCommentsAdd.vue';
@@ -104,6 +119,7 @@ export default {
 		KvCommentsHeartButton,
 		KvCommentsAdd,
 		KvUserAvatar,
+		KvMaterialIcon,
 	},
 	props: {
 		/**
@@ -154,6 +170,7 @@ export default {
 		const showInput = ref(false);
 		const commentsAddRef = ref(null);
 		const authorInfo = ref();
+		const repliesOpened = ref(false);
 
 		const commentText = computed(() => comment?.value?.data?.text ?? '');
 
@@ -193,6 +210,8 @@ export default {
 
 		const numberOfReplies = computed(() => comment?.value?.children_counts?.comment ?? 0);
 
+		const toggleReplies = () => { repliesOpened.value = !repliesOpened.value; };
+
 		// The fetchLenderInfo method must be provided in the parent component
 		const fetchLenderInfo = inject('fetchLenderInfo');
 
@@ -219,6 +238,9 @@ export default {
 			isLiked,
 			numberOfLikes,
 			numberOfReplies,
+			repliesOpened,
+			toggleReplies,
+			mdiChevronDown,
 		};
 	},
 };

package/vue/KvCommentsReplyButton.vue

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