@kiva/kv-components 3.52.1 → 3.54.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 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)
+
+
+### Bug Fixes
+
+* indentation in item component ([30aee02](https://github.com/kiva/kv-ui-elements/commit/30aee02d3c2e58c7c98fe6a58689a9824f56ef60))
+* optional chaining for comment object ([bac9ba1](https://github.com/kiva/kv-ui-elements/commit/bac9ba199970966564bfab7d6a2e64bb92fea286))
+* revert profile image and small fixes ([fc8cf74](https://github.com/kiva/kv-ui-elements/commit/fc8cf7440fb355fbfee0e8acfb2a849dd6513a11))
+* using more accurate data for components ([043f1c2](https://github.com/kiva/kv-ui-elements/commit/043f1c2d47a5d22157785b9d972246823572e4fd))
+
+
+### Features
+
+* provisional comment list and item components ([642745c](https://github.com/kiva/kv-ui-elements/commit/642745ce1359e5cc9e3d98d122f26728b3dffda0))
+
+
+
+
+
 ## [3.52.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.52.0...@kiva/kv-components@3.52.1) (2024-02-01)
 
 

package/package.json

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

package/tests/fixtures/mockFeedActivityData.js

@@ -0,0 +1,80 @@
+const comments = {
+	duration: '6.42ms',
+	results: [
+		{
+			actor: {
+				created_at: '2024-02-01T19:48:26.890734Z',
+				updated_at: '2024-02-01T19:48:26.890734Z',
+				id: '123',
+				data: {},
+			},
+			foreign_id: 'CHALLENGE#test-challenge-id',
+			id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+			latest_reactions: {
+				comment: [
+					{
+						created_at: '2024-02-01T20:12:31.398932Z',
+						updated_at: '2024-02-01T20:12:31.398932Z',
+						id: 'dade3812-6aa0-4c32-90ea-2366dab178a1',
+						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'another guest comment',
+						},
+						parent: '',
+						latest_children: {},
+						children_counts: {},
+					},
+					{
+						created_at: '2024-02-01T20:11:23.931133Z',
+						updated_at: '2024-02-01T20:11:23.931133Z',
+						id: '3de615bb-0d48-4a69-9004-141ee26985eb',
+						user_id: '1de650a5-b12f-4d20-b46c-6e15b0722141',
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'test as visitor',
+						},
+						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_id: '123',
+						user: {
+							created_at: '2024-02-01T19:48:26.890734Z',
+							updated_at: '2024-02-01T19:48:26.890734Z',
+							id: '123',
+							data: {},
+						},
+						kind: 'comment',
+						activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
+						data: {
+							text: 'asd',
+						},
+						parent: '',
+						latest_children: {},
+						children_counts: {},
+					},
+				],
+			},
+			latest_reactions_extra: {
+				comment: {
+					next: '',
+				},
+			},
+			object: 'test-challenge-id',
+			origin: null,
+			target: '',
+			time: '2024-02-01T17:54:24.932762',
+			verb: 'CHALLENGE',
+		},
+	],
+};
+
+export default comments;

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

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import ListComponent from '../../../../vue/KvCommentsList.vue';
+import activityFeed from '../../../fixtures/mockFeedActivityData';
+import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
+
+const renderList = (props = {}) => {
+	return render(ListComponent, { props });
+};
+
+const comments = activityFeed.results[0].latest_reactions;
+
+describe('KvCommentsList', () => {
+	it('should render comments component', async () => {
+		const { container } = renderList({ comments });
+
+		const { id } = comments.comment[0];
+		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
+	});
+
+	it('should emit comment events', async () => {
+		const { getAllByRole, emitted } = renderList({ comments });
+		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+		const firstComment = comments.comment[0];
+
+		const TEST_OBJ = {
+			userId: firstComment.user_id,
+			id: firstComment.id,
+			isChild: true,
+		};
+
+		await userEvent.click(replyButton);
+		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, value: true }]]);
+	});
+});

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

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import KvCommentsListItem from '../../../../vue/KvCommentsListItem.vue';
+import activityFeed from '../../../fixtures/mockFeedActivityData';
+
+const comment = activityFeed.results[0].latest_reactions.comment[0];
+
+const handleClick = jest.fn();
+
+const renderComment = (props = {}) => {
+	return render(KvCommentsListItem, { props });
+};
+
+describe('KvCommentsListItem', () => {
+	it('should render defaults', () => {
+		const { getByRole } = renderComment({ comment });
+		getByRole('button', { name: 'Reply' });
+		getByRole('button', { name: 'Like' });
+	});
+
+	it('should render comment text', () => {
+		const { getByText } = renderComment({ comment });
+		getByText(comment.data.text);
+	});
+
+	it('should handle like button click', async () => {
+		const { getByRole } = renderComment({ comment, handleClick });
+		const likeButton = getByRole('button', { name: 'Like' });
+
+		await userEvent.click(likeButton);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('should handle reply button click', async () => {
+		const { getByRole } = renderComment({ comment, handleClick });
+		const replyButton = getByRole('button', { name: 'Reply' });
+
+		await userEvent.click(replyButton);
+
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+});

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/KvCommentsContainer.vue

@@ -5,17 +5,26 @@
 			:user-display-name="userDisplayName"
 			@add-comment="comment"
 		/>
+		<kv-comments-list
+			v-if="comments"
+			:comments="comments"
+			@[REPLY_COMMENT_EVENT]="comment"
+			@[LIKE_COMMENT_EVENT]="comment"
+		/>
 	</div>
 </template>
 
 <script>
 import KvCommentsAdd from './KvCommentsAdd.vue';
+import KvCommentsList from './KvCommentsList.vue';
+import { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
 
 export const ADD_COMMENT_EVENT = 'add-comment';
 
 export default {
 	components: {
 		KvCommentsAdd,
+		KvCommentsList,
 	},
 	props: {
 		/**
@@ -32,13 +41,24 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Object,
+			default: () => {},
+		},
 	},
 	setup(_props, { emit }) {
 		const comment = (commentValue) => {
 			emit(ADD_COMMENT_EVENT, commentValue);
+			emit(REPLY_COMMENT_EVENT, commentValue);
+			emit(LIKE_COMMENT_EVENT, commentValue);
 		};
 		return {
 			comment,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
 		};
 	},
 };

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

@@ -0,0 +1,38 @@
+<template>
+	<div>
+		<KvCommentsListItem
+			v-for="comment in comments.comment"
+			:id="comment.id"
+			:key="comment.id"
+			:nest-level="1"
+			:comment="comment"
+			:is-liked="comment.is_liked"
+			:handle-click="handleClick"
+		/>
+	</div>
+</template>
+
+<script>
+
+import KvCommentsListItem, { REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT } from './KvCommentsListItem.vue';
+
+export default {
+	components: { KvCommentsListItem },
+	props: {
+		/**
+		 * Activity comments
+		 */
+		comments: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	methods: {
+		handleClick(payload) {
+			if ([REPLY_COMMENT_EVENT, LIKE_COMMENT_EVENT].includes(payload.reaction)) {
+				this.$emit(payload.reaction, { ...payload });
+			}
+		},
+	},
+};
+</script>

package/vue/KvCommentsListItem.vue

@@ -0,0 +1,133 @@
+<template>
+	<div>
+		<div
+			class="tw-flex tw-items-center tw-gap-1"
+		>
+			<img
+				v-if="profileImage"
+				class="
+					data-hj-suppress
+					tw-inline-block
+					tw-w-3.5
+					tw-h-3.5
+					tw-rounded-full
+					tw-overflow-hidden
+					tw-object-fill
+				"
+				:src="profileImage"
+				alt="picture"
+			>
+			<p>
+				{{ text }}
+			</p>
+		</div>
+		<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"
+		>
+			<p
+				v-for="nested_comment in latestChildren"
+				:key="nested_comment.id"
+				class="tw-ml-3"
+			>
+				<kv-comments-list-item
+					:comment="nested_comment"
+					:is-liked="nested_comment.is_liked"
+					:nest-level="nestLevel + 1"
+					:handle-click="handleClick"
+				/>
+			</p>
+		</div>
+	</div>
+</template>
+
+<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,
+		KvCommentsHeartButton,
+	},
+	props: {
+		/**
+		 * Activity comment
+		 */
+		comment: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * The nest level of the comment
+		 */
+		nestLevel: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Comment is liked by current user
+		 */
+		isLiked: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * The function to call when a reaction is clicked
+		 */
+		handleClick: {
+			type: Function,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		const onClick = (reaction, value) => {
+			props.handleClick({
+				reaction,
+				id: props.comment?.id ?? null,
+				userId: props.comment?.user_id ?? null,
+				isChild: true,
+				value,
+			});
+		};
+
+		return {
+			onClick,
+			REPLY_COMMENT_EVENT,
+			LIKE_COMMENT_EVENT,
+		};
+	},
+	computed: {
+		text() {
+			return this.comment?.data?.text ?? '';
+		},
+		userId() {
+			return this.comment?.user_id ?? null;
+		},
+		latestChildren() {
+			return this.comment?.latest_children ?? null;
+		},
+		profileImage() {
+			return this.comment?.user_picture ?? '';
+		},
+	},
+};
+</script>

package/vue/stories/KvCommentsContainer.stories.js

@@ -1,4 +1,5 @@
 import KvCommentsContainer from '../KvCommentsContainer.vue';
+import comments from '../../tests/fixtures/mockFeedActivityData';
 
 export default {
 	title: 'KvCommentsContainer',
@@ -20,4 +21,4 @@ const story = (args) => {
 	return template;
 };
 
-export const Default = story({});
+export const Default = story({ comments });

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

package/vue/stories/KvCommentsList.stories.js

@@ -0,0 +1,24 @@
+import KvCommentsList from '../KvCommentsList.vue';
+import activityFeed from '../../tests/fixtures/mockFeedActivityData';
+
+export default {
+	title: 'KvCommentsList',
+	component: KvCommentsList,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsList },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvCommentsList v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const comments = activityFeed.results[0].latest_reactions;
+
+export const Default = story({ comments });

package/vue/stories/KvCommentsListItem.stories.js

@@ -0,0 +1,24 @@
+import KvCommentsListItem from '../KvCommentsListItem.vue';
+import activityFeed from '../../tests/fixtures/mockFeedActivityData';
+
+export default {
+	title: 'KvCommentsListItem',
+	component: KvCommentsListItem,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsListItem },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvCommentsListItem v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const comment = activityFeed.results[0].latest_reactions.comment[0];
+
+export const Default = story({ comment });