@kiva/kv-components 3.53.0 → 3.54.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.54.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.53.0...@kiva/kv-components@3.54.0) (2024-02-28)
+
+
+### Features
+
+* kvcommentsheartbutton added for comments stuff ([#346](https://github.com/kiva/kv-ui-elements/issues/346)) ([57303da](https://github.com/kiva/kv-ui-elements/commit/57303daec80222c199556b296d720462265e53ac))
+
+
+
+
+
 # [3.53.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.52.1...@kiva/kv-components@3.53.0) (2024-02-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.53.0",
+  "version": "3.54.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "f9f7231aa673a793c38ed14e55977ecb1d9dc89b"
+  "gitHead": "b29d4c7e40f229ac09c7f68c377741af7d068158"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -39,6 +39,7 @@ const comments = {
 						parent: '',
 						latest_children: {},
 						children_counts: {},
+						is_liked: true,
 					},
 					{
 						created_at: '2024-02-01T20:06:46.651764Z',

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

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import KvCommentsHeartButton from '../../../../vue/KvCommentsHeartButton.vue';
+
+const CLICK_EVENT = 'click';
+
+describe('KvCommentsListItem', () => {
+	it('should render defaults', () => {
+		const { getByRole } = render(KvCommentsHeartButton);
+		const likeButton = getByRole('button', { name: 'Like' });
+
+		expect(likeButton).toBeDefined();
+	});
+
+	it('should emit true value when clicked as not liked', async () => {
+		const { getByRole, emitted } = render(KvCommentsHeartButton);
+		const likeButton = getByRole('button', { name: 'Like' });
+
+		await userEvent.click(likeButton);
+
+		expect(emitted()[CLICK_EVENT]).toEqual([[true]]);
+	});
+
+	it('should emit false value when clicked as liked', async () => {
+		const { getByRole, emitted } = render(KvCommentsHeartButton, { props: { isLiked: true } });
+		const likeButton = getByRole('button', { name: 'Like' });
+
+		await userEvent.click(likeButton);
+
+		expect(emitted()[CLICK_EVENT]).toEqual([[false]]);
+	});
+});

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

@@ -34,6 +34,6 @@ describe('KvCommentsList', () => {
 		expect(emitted()[REPLY_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT }]]);
 
 		await userEvent.click(likeButton);
-		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT }]]);
+		expect(emitted()[LIKE_COMMENT_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);
 	});
 });

package/vue/KvButton.vue

@@ -53,14 +53,14 @@ export default {
 	props: {
 		/**
 		 * Use if linking to a Vue route
-		 * */
+		 */
 		to: {
 			type: [String, Object],
 			default: null,
 		},
 		/**
 		 * Use if linking to an external link or old-stack page
-		 * */
+		 */
 		href: {
 			type: String,
 			default: null,
@@ -68,7 +68,7 @@ export default {
 		/**
 		 * The behavior of the button when used in an HTML form.
 		 * `button (default), submit, reset`
-		 * */
+		 */
 		type: {
 			type: String,
 			default: 'button',
@@ -79,7 +79,7 @@ export default {
 		/**
 		 * Appearance of the button
 		 * `primary (default), secondary, danger, link, ghost`
-		 * */
+		 */
 		variant: {
 			type: String,
 			default: 'primary',
@@ -90,7 +90,7 @@ export default {
 		/**
 		 * State of the button
 		 * `'' (default), active, disabled, loading`
-		 * */
+		 */
 		state: {
 			type: String,
 			default: '',

package/vue/KvCommentsHeartButton.vue

@@ -0,0 +1,74 @@
+<template>
+	<button
+		aria-label="Like"
+		@click="changeState"
+	>
+		<kv-material-icon
+			:icon="icon"
+			:class="classState"
+		/>
+	</button>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import { mdiHeart, mdiHeartOutline } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvCommentsHeartButton',
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Use if small icon is needed
+		 */
+		isSmall: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Use if icon is liked
+		 */
+		isLiked: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'click',
+	],
+	setup(props, { emit }) {
+		const {
+			isSmall,
+			isLiked,
+		} = toRefs(props);
+
+		const icon = computed(() => (isLiked.value ? mdiHeart : mdiHeartOutline));
+
+		const classState = computed(() => {
+			let className = isSmall.value ? 'tw-w-2.5 tw-h-2.5' : 'tw-w-3 tw-h-3';
+			className += isLiked.value ? ' filled' : '';
+
+			return className;
+		});
+
+		const changeState = () => {
+			emit('click', !isLiked.value);
+		};
+
+		return {
+			icon,
+			classState,
+			changeState,
+		};
+	},
+};
+</script>
+
+<style scoped>
+.filled >>> svg {
+    fill: #F60059;
+}
+</style>

package/vue/KvCommentsList.vue

@@ -6,6 +6,7 @@
 			:key="comment.id"
 			:nest-level="1"
 			:comment="comment"
+			:is-liked="comment.is_liked"
 			:handle-click="handleClick"
 		/>
 	</div>

package/vue/KvCommentsListItem.vue

@@ -21,21 +21,20 @@
 				{{ text }}
 			</p>
 		</div>
-
-		<kv-button
-			variant="ghost"
-			class="tw-font-medium"
-			@click="onClick(REPLY_COMMENT_EVENT)"
-		>
-			Reply
-		</kv-button>
-		<kv-button
-			variant="ghost"
-			class="tw-font-medium"
-			@click="onClick(LIKE_COMMENT_EVENT)"
-		>
-			Like
-		</kv-button>
+		<div class="tw-flex tw-items-center tw-gap-x-0.5">
+			<kv-comments-heart-button
+				:is-small="true"
+				:is-liked="isLiked"
+				@click="onClick(LIKE_COMMENT_EVENT, $event)"
+			/>
+			<kv-button
+				variant="ghost"
+				class="tw-font-medium"
+				@click="onClick(REPLY_COMMENT_EVENT)"
+			>
+				Reply
+			</kv-button>
+		</div>
 		<div
 			v-if="latestChildren"
 			class="tw-my-1"
@@ -47,6 +46,7 @@
 			>
 				<kv-comments-list-item
 					:comment="nested_comment"
+					:is-liked="nested_comment.is_liked"
 					:nest-level="nestLevel + 1"
 					:handle-click="handleClick"
 				/>
@@ -57,13 +57,17 @@
 
 <script>
 import KvButton from './KvButton.vue';
+import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
 
 export const REPLY_COMMENT_EVENT = 'reply-comment';
 export const LIKE_COMMENT_EVENT = 'like-comment';
 
 export default {
 	name: 'KvCommentsListItem',
-	components: { KvButton },
+	components: {
+		KvButton,
+		KvCommentsHeartButton,
+	},
 	props: {
 		/**
 		 * Activity comment
@@ -79,6 +83,13 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		/**
+		 * Comment is liked by current user
+		 */
+		isLiked: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * The function to call when a reaction is clicked
 		 */
@@ -88,12 +99,13 @@ export default {
 		},
 	},
 	setup(props) {
-		const onClick = (reaction) => {
+		const onClick = (reaction, value) => {
 			props.handleClick({
 				reaction,
 				id: props.comment?.id ?? null,
 				userId: props.comment?.user_id ?? null,
 				isChild: true,
+				value,
 			});
 		};
 

package/vue/stories/KvCommentsHeartButton.stories.js

@@ -0,0 +1,25 @@
+import KvCommentsHeartButton from '../KvCommentsHeartButton.vue';
+
+export default {
+	title: 'KvCommentsHeartButton',
+	component: KvCommentsHeartButton,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsHeartButton },
+		setup() { return { args: templateArgs }; },
+		template: `
+				<KvCommentsHeartButton v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const IsSmall = story({ isSmall: true });
+
+export const IsLiked = story({ isLiked: true });