@kiva/kv-components 3.61.0 → 3.62.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 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)
 
 

package/package.json

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

package/vue/KvCommentsListItem.vue

@@ -191,6 +191,7 @@ 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 () => {

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',
 	},
 );