@kiva/kv-components 3.68.0 → 3.69.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.69.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.68.1...@kiva/kv-components@3.69.0) (2024-03-27)
+
+
+### Features
+
+* adjust comment components for chat product ([077a8ff](https://github.com/kiva/kv-ui-elements/commit/077a8fffbd8df44ee91ce2cf97b7f460fdbc1b49))
+
+
+
+
+
+## [3.68.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.68.0...@kiva/kv-components@3.68.1) (2024-03-26)
+
+
+### Bug Fixes
+
+* activity feed item bg should be white ([b60cc9d](https://github.com/kiva/kv-ui-elements/commit/b60cc9d25cd397836d805461f7795092e3a1d187))
+
+
+
+
+
 # [3.68.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.67.0...@kiva/kv-components@3.68.0) (2024-03-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.68.0",
+  "version": "3.69.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "aa300cb6a0301e340f4e953268a0b86b2db27176"
+  "gitHead": "c6fecd3138c173aca7e5b8f7f14e907b107612f4"
 }

package/tests/fixtures/mockCommentsData.js

@@ -0,0 +1,36 @@
+export const publicLenderId = 'Jess1234';
+
+export const comments = [
+	{
+		id: 'a86167d1-8222-42a8-a53b-e16d3955efa8',
+		publicLenderId,
+		children: {
+			comment: [
+				{
+					id: '7634a90c-04a8-457b-9849-2ac48d3f44e0',
+					publicLenderId,
+					children: {
+						comment: [],
+						like: [
+							{
+								publicLenderId,
+							},
+						],
+					},
+					text: 'First reply',
+				},
+			],
+			like: [
+				{
+					publicLenderId,
+				},
+			],
+		},
+		text: 'First comment',
+	},
+	{
+		id: '2507fcb5-12c8-4b1c-aedc-822492021584',
+		publicLenderId,
+		text: 'Second comment',
+	},
+];

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

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import ListComponent from '../../../../vue/KvCommentsList.vue';
-import comments from '../../../fixtures/mockFeedActivityData';
+import { comments } from '../../../fixtures/mockCommentsData';
 import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 

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

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import KvCommentsListItem, { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
-import comments from '../../../fixtures/mockFeedActivityData';
+import { comments } from '../../../fixtures/mockCommentsData';
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const comment = comments[0];
@@ -52,7 +52,7 @@ describe('KvCommentsListItem', () => {
 
 		await userEvent.click(openRepliesButton);
 
-		const childComment = getAllByText(comment.latest_children.comment[0].text)[0];
+		const childComment = getAllByText(comment.children.comment[0].text)[0];
 
 		expect(childComment).toBeDefined();
 	});

package/vue/KvCommentsList.vue

@@ -4,7 +4,6 @@
 			v-for="comment in comments"
 			:id="comment.id"
 			:key="comment.id"
-			:nest-level="1"
 			:comment="comment"
 			:user-image-url="userImageUrl"
 			:user-display-name="userDisplayName"

package/vue/KvCommentsListItem.vue

@@ -18,10 +18,7 @@
 				{{ commentText }}
 			</p>
 		</div>
-		<div
-			v-if="nestLevel < 3"
-			class="tw-flex tw-items-center tw-gap-x-1"
-		>
+		<div 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
 					:is-small="true"
@@ -38,7 +35,7 @@
 				</p>
 			</div>
 			<kv-comments-reply-button
-				v-if="userPublicId"
+				v-if="userPublicId && nestLevel === 0"
 				@click="replyClick"
 			/>
 		</div>
@@ -74,15 +71,15 @@
 			</button>
 			<div v-if="repliesOpened">
 				<div
-					v-for="nested_comment in childComments"
-					:key="nested_comment.id"
+					v-for="childComment in childComments"
+					:key="childComment.id"
 					class="tw-ml-3"
 				>
 					<kv-comments-list-item
 						:user-image-url="userImageUrl"
 						:user-display-name="userDisplayName"
 						:user-public-id="userPublicId"
-						:comment="nested_comment"
+						:comment="childComment"
 						:nest-level="nestLevel + 1"
 						@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
 					/>
@@ -178,9 +175,9 @@ export default {
 		const authorImage = computed(() => authorInfo?.value?.image?.url ?? '');
 		const authorName = computed(() => authorInfo?.value?.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 childComments = computed(() => comment?.value?.children?.comment ?? null);
+		const childLikes = computed(() => (comment?.value?.children?.like ?? []));
+		const likedObject = computed(() => childLikes.value.find((l) => l.publicLenderId === userPublicId.value));
 		const isLiked = computed(() => likedObject.value !== undefined);
 
 		const replyClick = () => {
@@ -206,9 +203,9 @@ export default {
 
 		const hideInput = () => { showInput.value = false; };
 
-		const numberOfLikes = computed(() => comment?.value?.children_counts?.like ?? 0);
+		const numberOfLikes = computed(() => comment?.value?.children?.like?.length ?? 0);
 
-		const numberOfReplies = computed(() => comment?.value?.children_counts?.comment ?? 0);
+		const numberOfReplies = computed(() => comment?.value?.children?.comment?.length ?? 0);
 
 		const toggleReplies = () => { repliesOpened.value = !repliesOpened.value; };
 

package/vue/KvInlineActivityCard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-sm"
+		class="tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-sm tw-bg-white"
 	>
 		<KvUserAvatar
 			:lender-image-url="lenderImageUrl"

package/vue/stories/KvCommentsContainer.stories.js

@@ -1,5 +1,5 @@
 import KvCommentsContainer from '../KvCommentsContainer.vue';
-import comments from '../../tests/fixtures/mockFeedActivityData';
+import { publicLenderId, comments } from '../../tests/fixtures/mockCommentsData';
 
 export default {
 	title: 'KvCommentsContainer',
@@ -37,6 +37,6 @@ export const UserData = story(
 		comments,
 		userDisplayName: TEST_USER_NAME,
 		userImageUrl: TEST_USER_IMAGE,
-		userPublicId: 'Jess1234',
+		userPublicId: publicLenderId,
 	},
 );

package/vue/stories/KvCommentsList.stories.js

@@ -1,5 +1,5 @@
 import KvCommentsList from '../KvCommentsList.vue';
-import comments from '../../tests/fixtures/mockFeedActivityData';
+import { publicLenderId, comments } from '../../tests/fixtures/mockCommentsData';
 
 export default {
 	title: 'KvCommentsList',
@@ -34,6 +34,6 @@ export const UserData = story(
 		comments,
 		userDisplayName: TEST_USER_NAME,
 		userImageUrl: TEST_USER_IMAGE,
-		userPublicId: 'Jess1234',
+		userPublicId: publicLenderId,
 	},
 );

package/vue/stories/KvCommentsListItem.stories.js

@@ -1,5 +1,5 @@
 import KvCommentsListItem from '../KvCommentsListItem.vue';
-import comments from '../../tests/fixtures/mockFeedActivityData';
+import { publicLenderId, comments } from '../../tests/fixtures/mockCommentsData';
 
 export default {
 	title: 'KvCommentsListItem',
@@ -40,6 +40,6 @@ export const UserData = story(
 		comment: childComments,
 		userDisplayName: TEST_USER_NAME,
 		userImageUrl: TEST_USER_IMAGE,
-		userPublicId: 'Jess1234',
+		userPublicId: publicLenderId,
 	},
 );

package/vue/stories/KvCommentsReplyButton.stories.js

@@ -19,5 +19,3 @@ const story = (args) => {
 };
 
 export const Default = story({});
-
-export const ReplyCount = story({ numberOfReplies: 6 });

package/tests/fixtures/mockFeedActivityData.js

@@ -1,155 +0,0 @@
-const comments = [
-	{
-		created_at: '2024-02-01T20:12:31.398932Z',
-		updated_at: '2024-02-01T20:12:31.398932Z',
-		id: 'dade3812-6aa0-4c32-90ea-2366dab178a1',
-		kind: 'comment',
-		activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
-		text: 'another guest comment',
-		user: {
-			publicLenderId: 'Nathan2352',
-			name: 'Nathan',
-			image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
-		},
-		parent: '',
-		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',
-						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',
-					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: {
-						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',
-					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: {
-									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',
-								text: 'child comment reply',
-								parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
-								latest_children: {},
-								children_counts: {},
-							},
-						],
-					},
-					children_counts: {
-						comment: 1,
-					},
-				},
-				{
-					created_at: '2024-02-28T20:04:21.445272Z',
-					updated_at: '2024-02-28T20:04:21.445272Z',
-					id: '290a6c07-143a-416e-b016-ac0d9ac8ad90',
-					user: {
-						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',
-					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',
-									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',
-								parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
-								latest_children: {},
-								children_counts: {},
-							},
-						],
-					},
-					children_counts: {},
-				},
-			],
-		},
-		children_counts: {
-			comment: 1,
-			like: 1,
-		},
-	},
-	{
-		created_at: '2024-02-01T20:11:23.931133Z',
-		updated_at: '2024-02-01T20:11:23.931133Z',
-		id: '3de615bb-0d48-4a69-9004-141ee26985eb',
-		kind: 'comment',
-		activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
-		text: 'test as visitor',
-		user: {
-			created_at: '2024-02-28T19:09:54.093757Z',
-			updated_at: '2024-02-28T19:09:54.093757Z',
-			publicLenderId: 'Lauren1234',
-			name: '',
-			image: '',
-		},
-		parent: '',
-		latest_children: {},
-		children_counts: {},
-		is_liked: true,
-	},
-	{
-		created_at: '2024-02-01T20:06:46.651764Z',
-		updated_at: '2024-02-01T20:06:46.651764Z',
-		id: 'e1db4420-159e-4ba2-aab9-704d1cc56dae',
-		user: {
-			created_at: '2024-02-28T19:09:54.093757Z',
-			updated_at: '2024-02-28T19:09:54.093757Z',
-			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',
-		text: 'comment test forever!',
-		parent: '',
-		latest_children: {},
-		children_counts: {},
-	},
-];
-
-export default comments;