@kiva/kv-components 3.56.1 → 3.58.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.58.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.57.0...@kiva/kv-components@3.58.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* fallback to kiva logo if no image or name ([74cdc90](https://github.com/kiva/kv-ui-elements/commit/74cdc900a8c1f9783771a7428f2722f59f5edf09))
+
+
+### Features
+
+* port avatar component from cps to cover different avatar situations ([036506f](https://github.com/kiva/kv-ui-elements/commit/036506f7680646c8e432af1842fb55851a5c6b2c))
+
+
+
+
+
+# [3.57.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.56.1...@kiva/kv-components@3.57.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* test failed because of whitespaces in value ([4591e93](https://github.com/kiva/kv-ui-elements/commit/4591e932a9c785f97019f47a8d7899142b2c1204))
+
+
+### Features
+
+* show number of likes ([c088fae](https://github.com/kiva/kv-ui-elements/commit/c088fae443da391871ef1783e64712d306b84007))
+
+
+
+
+
 ## [3.56.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.56.0...@kiva/kv-components@3.56.1) (2024-03-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.56.1",
+  "version": "3.58.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "a4c0454e23210ca7c03c8d0a4b09b910f21fa35f"
+  "gitHead": "b2375c3684b25f0b94ed8cda48e2871564467ce4"
 }

package/tests/fixtures/mockFeedActivityData.js

@@ -141,7 +141,10 @@ const comments = {
 								},
 							],
 						},
-						children_counts: {},
+						children_counts: {
+							comment: 1,
+							like: 1,
+						},
 					},
 					{
 						created_at: '2024-02-01T20:11:23.931133Z',

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

@@ -26,11 +26,13 @@ describe('KvCommentsListItem', () => {
 	});
 
 	it('should handle like button click', async () => {
-		const { getAllByRole, emitted } = renderComment({ comment });
+		const { getAllByRole, emitted, getByTestId } = renderComment({ comment });
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+		const likeCount = getByTestId('like-count');
 
 		await userEvent.click(likeButton);
 
+		expect(likeCount).toHaveTextContent(1);
 		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
 			id: comment.id,
 			isChild: true,

package/tests/unit/specs/utils/imageUtils.spec.js

@@ -0,0 +1,29 @@
+import { isLegacyPlaceholderAvatar, randomizedUserAvatarClass } from '../../../../utils/imageUtils';
+
+describe('imageUtils.ts', () => {
+	describe('isLegacyPlaceholderAvatar', () => {
+		it('should return true when filename is default kiva user avatar.', () => {
+			expect(isLegacyPlaceholderAvatar('726677.jpg')).toBe(true);
+			expect(isLegacyPlaceholderAvatar('315726.jpg')).toBe(true);
+			expect(isLegacyPlaceholderAvatar('4d844ac2c0b77a8a522741b908ea5c32.jpg')).toBe(true);
+			expect(isLegacyPlaceholderAvatar('726677.png')).toBe(true);
+			expect(isLegacyPlaceholderAvatar('315726.gif')).toBe(true);
+			expect(isLegacyPlaceholderAvatar('4d844ac2c0b77a8a522741b908ea5c32.png')).toBe(true);
+		});
+
+		it('should return false when filename is not default kiva user avatar.', () => {
+			expect(isLegacyPlaceholderAvatar('')).toBe(false);
+			expect(isLegacyPlaceholderAvatar('test')).toBe(false);
+			expect(isLegacyPlaceholderAvatar('123abc.jpg')).toBe(false);
+		});
+	});
+
+	describe('randomizedUserAvatarClass', () => {
+		it('should return random classes', () => {
+			const class1 = randomizedUserAvatarClass();
+
+			expect(class1).toContain('tw-text-');
+			expect(class1).toContain('tw-bg-');
+		});
+	});
+});

package/utils/imageUtils.js

@@ -0,0 +1,43 @@
+/**
+ * Determines if the users avatar is the default legacy placeholder image from the monolith.
+ * The legacy avatars are found exclusively at the following urls:
+ * <domain>/img/<size param>/726677.jpg
+ * <domain>/img/<size param>/315726.jpg
+ * for images from Fastly, urls, like: <domain>/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg
+ * are the default placeholder image.
+ *
+ * @param filename The filename of the avatar
+ * @returns Whether the file is a legacy placeholder image
+ */
+export function isLegacyPlaceholderAvatar(filename) {
+	// if filename is empty or undefined, return false
+	if (!filename) {
+		return false;
+	}
+	// convert filename to string if it is a number
+	let filenameCleaned = filename.toString();
+	// remove file extension from filename if it exists
+	if (filenameCleaned.includes('.')) {
+		[filenameCleaned] = filenameCleaned.split('.');
+	}
+	const defaultProfileIds = ['726677', '315726', '4d844ac2c0b77a8a522741b908ea5c32'];
+	return defaultProfileIds.includes(filenameCleaned);
+}
+
+/**
+ * Returns a class string to style a user avatar
+ * @returns Random user avatar class string
+ */
+export function randomizedUserAvatarClass() {
+	const userCardStyleOptions = [
+		{ color: 'tw-text-action', bg: 'tw-bg-brand-100' },
+		{ color: 'tw-text-black', bg: 'tw-bg-brand-100' },
+		{ color: 'tw-text-white', bg: 'tw-bg-action' },
+		{ color: 'tw-text-brand-100', bg: 'tw-bg-action' },
+		{ color: 'tw-text-primary-inverse', bg: 'tw-bg-action' },
+		{ color: 'tw-text-white', bg: 'tw-bg-black' },
+		{ color: 'tw-text-action', bg: 'tw-bg-black' },
+	];
+	const randomStyle = userCardStyleOptions[Math.floor(Math.random() * userCardStyleOptions.length)];
+	return `${randomStyle.color} ${randomStyle.bg}`;
+}

package/vue/KvCommentsList.vue

@@ -10,7 +10,7 @@
 			:user-display-name="userDisplayName"
 			:user-public-id="userPublicId"
 			:is-liked="comment.is_liked"
-			class="tw-mb-2"
+			class="tw-mb-2 tw-not-prose"
 			@add-reaction="handleReaction"
 		/>
 	</div>

package/vue/KvCommentsListItem.vue

@@ -31,11 +31,19 @@
 			v-if="nestLevel < 3"
 			class="tw-flex tw-items-center tw-gap-x-2"
 		>
-			<kv-comments-heart-button
-				:is-small="true"
-				:is-liked="isLiked"
-				@click="addReaction(LIKE_COMMENT_EVENT, $event)"
-			/>
+			<div class="tw-flex tw-items-center tw-gap-0.5">
+				<kv-comments-heart-button
+					:is-small="true"
+					:is-liked="isLiked"
+					@click="addReaction(LIKE_COMMENT_EVENT, $event)"
+				/>
+				<p
+					v-if="numberOfLikes"
+					data-testid="like-count"
+				>
+					{{ numberOfLikes }}
+				</p>
+			</div>
 			<kv-comments-reply-button
 				@click="replyClick"
 			/>
@@ -178,6 +186,8 @@ export default {
 
 		const hideInput = () => { showInput.value = false; };
 
+		const numberOfLikes = computed(() => comment?.value?.children_counts?.like ?? 0);
+
 		return {
 			hideInput,
 			showInput,
@@ -192,6 +202,7 @@ export default {
 			authorName,
 			childComments,
 			isLiked,
+			numberOfLikes,
 		};
 	},
 };

package/vue/KvUserAvatar.vue

@@ -0,0 +1,132 @@
+<template>
+	<div
+		class="data-hj-suppress"
+		:class="{ 'tw-w-3': isSmall, 'tw-w-6': !isSmall }"
+	>
+		<!-- User is anonymous or data is missing -->
+		<div
+			v-if="isAnonymousUser"
+			class="
+				tw-rounded-full
+				tw-bg-brand
+				tw-inline-flex tw-align-center tw-justify-center
+			"
+			:class="{ 'tw-w-3 tw-h-3': isSmall, 'tw-w-6 tw-h-6': !isSmall }"
+		>
+			<!-- Kiva K logo -->
+			<!-- eslint-disable max-len -->
+			<svg
+				class="tw-h-full tw-text-brand"
+				:class="{ 'tw-w-3 tw-h-3': isSmall }"
+				width="25"
+				height="37"
+				viewBox="0 0 25 37"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z"
+					fill="white"
+				/>
+				<path
+					d="M10.1143 23.2751C21.9428 23.2751 24.6857 13.2126 24.6857 11.4626H23.6571C11.8286 11.4626 9.08569 21.5251 9.08569 23.2751H10.1143Z"
+					fill="white"
+				/>
+				<path
+					d="M9.08569 24.2376C9.08569 26.0751 11.1428 36.3126 23.8285 36.3126H24.8571C24.8571 34.4751 22.8 24.2376 10.1143 24.2376H9.08569Z"
+					fill="white"
+				/>
+			</svg>
+			<!-- eslint-enable max-len -->
+		</div>
+		<!-- User is not anonymous and has an image -->
+		<div
+			v-else-if="!isLegacyPlaceholderAvatar(imageFilename) && imageFilename"
+		>
+			<img
+				:src="lenderImageUrl"
+				alt="Image of lender"
+				class="tw-rounded-full tw-inline-block"
+				:class="{ 'tw-w-3 tw-h-3': isSmall, 'tw-w-6 tw-h-6': !isSmall }"
+			>
+		</div>
+		<!-- User is not anonymous and does not have an image -->
+		<div
+			v-else-if="isLegacyPlaceholderAvatar(imageFilename) || !imageFilename"
+			class="
+				tw-rounded-full
+				tw-inline-flex tw-align-center tw-justify-center
+			"
+			:class="avatarClass()"
+		>
+			<!-- First Letter of lender name -->
+			<span class="tw-self-center">
+				{{ lenderNameFirstLetter }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import { isLegacyPlaceholderAvatar, randomizedUserAvatarClass } from '../utils/imageUtils';
+
+export default {
+	name: 'KvUserAvatar',
+	props: {
+		/**
+		 * The name of the lender
+		 */
+		lenderName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The image of the lender
+		 */
+		lenderImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The image of the lender
+		 */
+		isSmall: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			lenderName,
+			lenderImageUrl,
+			isSmall,
+		} = toRefs(props);
+
+		const isAnonymousUser = computed(() => {
+			return (lenderName.value === '' && lenderImageUrl.value === '') || lenderName.value === 'Anonymous';
+		});
+
+		const avatarClass = () => {
+			const smallClass = isSmall?.value ? 'tw-w-3 tw-h-3 tw-text-h4' : 'tw-w-6 tw-h-6 tw-text-h2';
+			return `${randomizedUserAvatarClass()} ${smallClass}`;
+		};
+
+		const imageFilename = computed(() => {
+			return lenderImageUrl?.value?.split('/').pop() ?? '';
+		});
+
+		const lenderNameFirstLetter = computed(() => {
+			return lenderName?.value?.substring(0, 1).toUpperCase();
+		});
+
+		return {
+			isAnonymousUser,
+			avatarClass,
+			imageFilename,
+			lenderNameFirstLetter,
+			isLegacyPlaceholderAvatar,
+		};
+	},
+};
+</script>

package/vue/stories/KvUserAvatar.stories.js

@@ -0,0 +1,47 @@
+import KvUserAvatar from '../KvUserAvatar.vue';
+
+export default {
+	title: 'KvUserAvatar',
+	component: KvUserAvatar,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvUserAvatar },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<KvUserAvatar v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Roger',
+});
+
+export const NoImage = story({
+	lenderImageUrl: '',
+	lenderName: 'Roger',
+});
+
+export const Anonymous = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Anonymous',
+});
+
+export const DefaultProfile = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+	lenderName: 'Default Profile',
+});
+
+export const IsSmall = story({
+	lenderImageUrl: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+	lenderName: 'Roger',
+	isSmall: true,
+});
+
+export const Fallback = story();