@kiva/kv-components 3.60.0 → 3.62.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.62.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.61.0...@kiva/kv-components@3.62.0) (2024-03-05)
+
+
+### Bug Fixes
+
+* add comment regarding inject ([7a98c3b](https://github.com/kiva/kv-ui-elements/commit/7a98c3b017c9472c14ef0a26fdad53864aaf3ada))
+* add provide to commenting stories ([01c1e53](https://github.com/kiva/kv-ui-elements/commit/01c1e5305cda4d2885afa1c4a4784630e7a6047d))
+
+
+### Features
+
+* update reply to match other commenting buttons ([6ad68a3](https://github.com/kiva/kv-ui-elements/commit/6ad68a3ddcce48089d12bd473f8fa3bfd7c30b5f))
+
+
+
+
+
+# [3.61.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.60.0...@kiva/kv-components@3.61.0) (2024-03-04)
+
+
+### Features
+
+* fetchlenderinfo method injected to comment item component ([#362](https://github.com/kiva/kv-ui-elements/issues/362)) ([2aba5e0](https://github.com/kiva/kv-ui-elements/commit/2aba5e0837d57eec77f2d1bee48ca2c3c127c1d4))
+
+
+
+
+
 # [3.60.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.59.1...@kiva/kv-components@3.60.0) (2024-03-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.60.0",
+  "version": "3.62.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "30d18f082b47330947b701d87edb26ea5e65d4ac"
+  "gitHead": "444a69ad972d2eaef7f19c3ca99467aa2d157be7"
 }

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

@@ -6,7 +6,20 @@ import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvComme
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const renderList = (props = {}) => {
-	return render(ListComponent, { props });
+	return render(ListComponent,
+		{
+			props,
+			// provide function for vue 2 testing
+			provide: {
+				fetchLenderInfo: () => Promise.resolve({}),
+			},
+			// provide function for vue 3 testing
+			global: {
+				provide: {
+					fetchLenderInfo: () => Promise.resolve({}),
+				},
+			},
+		});
 };
 
 const comments = activityFeed.results[0].latest_reactions;

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

@@ -7,7 +7,20 @@ import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 const comment = activityFeed.results[0].latest_reactions.comment[0];
 
 const renderComment = (props = {}) => {
-	return render(KvCommentsListItem, { props });
+	return render(KvCommentsListItem,
+		{
+			props,
+			// provide function for vue 2 testing
+			provide: {
+				fetchLenderInfo: () => Promise.resolve({}),
+			},
+			// provide function for vue 3 testing
+			global: {
+				provide: {
+					fetchLenderInfo: () => Promise.resolve({}),
+				},
+			},
+		});
 };
 
 describe('KvCommentsListItem', () => {

package/vue/KvCommentsListItem.vue

@@ -83,6 +83,8 @@ import {
 	nextTick,
 	computed,
 	toRefs,
+	onMounted,
+	inject,
 } from 'vue-demi';
 import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
 import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
@@ -149,10 +151,14 @@ export default {
 
 		const showInput = ref(false);
 		const commentsAddRef = ref(null);
+		const authorInfo = ref();
 
 		const commentText = computed(() => comment?.value?.data?.text ?? '');
-		const authorImage = computed(() => comment?.value?.user?.data?.image ?? '');
-		const authorName = computed(() => comment?.value?.user?.data?.name ?? '');
+
+		const authorId = computed(() => comment?.value?.user?.data?.publicLenderId ?? '');
+		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
@@ -185,6 +191,16 @@ export default {
 
 		const numberOfReplies = computed(() => comment?.value?.children_counts?.comment ?? 0);
 
+		// The fetchLenderInfo method must be provided in the parent component
+		const fetchLenderInfo = inject('fetchLenderInfo');
+
+		onMounted(async () => {
+			if (authorId.value) {
+				const authorData = await fetchLenderInfo(authorId.value);
+				authorInfo.value = authorData;
+			}
+		});
+
 		return {
 			hideInput,
 			showInput,

package/vue/KvCommentsReplyButton.vue

@@ -1,8 +1,8 @@
 <!-- eslint-disable max-len -->
 <template>
-	<button
+	<kv-button
+		variant="ghost"
 		aria-label="Reply"
-		class="tw-font-medium tw-flex tw-items-center tw-gap-x-0.5"
 		@click="$emit('click')"
 	>
 		<svg
@@ -24,14 +24,19 @@
 			{{ numberOfReplies }}
 		</span>
 		<span>
-			Reply
+			reply
 		</span>
-	</button>
+	</kv-button>
 </template>
 
 <script>
+import KvButton from './KvButton.vue';
+
 export default {
 	name: 'KvCommentsReplyButton',
+	components: {
+		KvButton,
+	},
 	props: {
 		/**
 		 * The number of replies to the comment.
@@ -46,3 +51,17 @@ export default {
 	],
 };
 </script>
+
+<style lang="postcss" scoped>
+>>> span {
+	@apply tw-min-h-0;
+}
+
+>>> span > span {
+	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
+}
+
+>>> svg {
+	@apply tw-mx-0.5;
+}
+</style>

package/vue/stories/KvCommentsContainer.stories.js

@@ -6,11 +6,20 @@ export default {
 	component: KvCommentsContainer,
 };
 
+const TEST_USER_NAME = 'Jess';
+const TEST_USER_IMAGE = 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg';
+
 const story = (args) => {
 	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvCommentsContainer },
 		setup() { return { args: templateArgs }; },
+		provide: {
+			fetchLenderInfo: () => Promise.resolve({
+				name: TEST_USER_NAME,
+				image: { url: TEST_USER_IMAGE },
+			}),
+		},
 		template: `
 			<div style="max-width: 800px;">
 				<KvCommentsContainer v-bind="args" />
@@ -28,8 +37,8 @@ export const Default = story({ comments });
 export const UserData = story(
 	{
 		comments,
-		userDisplayName: 'Jess',
-		userImageUrl: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+		userDisplayName: TEST_USER_NAME,
+		userImageUrl: TEST_USER_IMAGE,
 		userPublicId: 'Jess1234',
 	},
 );

package/vue/stories/KvCommentsList.stories.js

@@ -5,12 +5,20 @@ export default {
 	title: 'KvCommentsList',
 	component: KvCommentsList,
 };
+const TEST_USER_NAME = 'Jess';
+const TEST_USER_IMAGE = 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg';
 
 const story = (args) => {
 	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvCommentsList },
 		setup() { return { args: templateArgs }; },
+		provide: {
+			fetchLenderInfo: () => Promise.resolve({
+				name: TEST_USER_NAME,
+				image: { url: TEST_USER_IMAGE },
+			}),
+		},
 		template: `
 			<KvCommentsList v-bind="args" />
 		`,
@@ -26,8 +34,8 @@ export const Default = story({ comments });
 export const UserData = story(
 	{
 		comments,
-		userDisplayName: 'Jess',
-		userImageUrl: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+		userDisplayName: TEST_USER_NAME,
+		userImageUrl: TEST_USER_IMAGE,
 		userPublicId: 'Jess1234',
 	},
 );

package/vue/stories/KvCommentsListItem.stories.js

@@ -6,11 +6,20 @@ export default {
 	component: KvCommentsListItem,
 };
 
+const TEST_USER_NAME = 'Jess';
+const TEST_USER_IMAGE = 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg';
+
 const story = (args) => {
 	const template = (templateArgs, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { KvCommentsListItem },
 		setup() { return { args: templateArgs }; },
+		provide: {
+			fetchLenderInfo: () => Promise.resolve({
+				name: TEST_USER_NAME,
+				image: { url: TEST_USER_IMAGE },
+			}),
+		},
 		template: `
 			<KvCommentsListItem v-bind="args" />
 		`,
@@ -29,8 +38,8 @@ 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',
+		userDisplayName: TEST_USER_NAME,
+		userImageUrl: TEST_USER_IMAGE,
 		userPublicId: 'Jess1234',
 	},
 );