@kiva/kv-components 3.57.0 → 3.59.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.59.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.58.0...@kiva/kv-components@3.59.0) (2024-03-04)
+
+
+### Features
+
+* replies count added to reply commenting button ([#359](https://github.com/kiva/kv-ui-elements/issues/359)) ([87e4b01](https://github.com/kiva/kv-ui-elements/commit/87e4b01022641e774203274a0b3a353d1b2a37bc))
+
+
+
+
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.57.0",
+  "version": "3.59.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "6241a3deffa7ef7e581a09a1c371240884e5f269"
+  "gitHead": "26d0e3f17353ef2a4f9a634a22ea335789a0252d"
 }

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

@@ -12,6 +12,14 @@ describe('KvCommentsReplyButton', () => {
 		expect(replyButton).toBeDefined();
 	});
 
+	it('should render number of replies', () => {
+		const { getByTestId } = render(KvCommentsReplyButton, { props: { numberOfReplies: 6 } });
+		const replyCount = getByTestId('reply-count');
+
+		expect(replyCount).toBeDefined();
+		expect(replyCount).toHaveTextContent(6);
+	});
+
 	it('should emit click event when clicked', async () => {
 		const { getByRole, emitted } = render(KvCommentsReplyButton);
 		const replyButton = getByRole('button', { name: 'Reply' });

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

@@ -40,11 +40,13 @@
 				<p
 					v-if="numberOfLikes"
 					data-testid="like-count"
+					class="tw-font-medium"
 				>
 					{{ numberOfLikes }}
 				</p>
 			</div>
 			<kv-comments-reply-button
+				:number-of-replies="numberOfReplies"
 				@click="replyClick"
 			/>
 		</div>
@@ -188,6 +190,8 @@ export default {
 
 		const numberOfLikes = computed(() => comment?.value?.children_counts?.like ?? 0);
 
+		const numberOfReplies = computed(() => comment?.value?.children_counts?.like ?? 0);
+
 		return {
 			hideInput,
 			showInput,
@@ -203,6 +207,7 @@ export default {
 			childComments,
 			isLiked,
 			numberOfLikes,
+			numberOfReplies,
 		};
 	},
 };

package/vue/KvCommentsReplyButton.vue

@@ -17,7 +17,12 @@
 				fill="#1C1B1F"
 			/>
 		</svg>
-
+		<span
+			v-if="numberOfReplies"
+			data-testid="reply-count"
+		>
+			{{ numberOfReplies }}
+		</span>
 		<span>
 			Reply
 		</span>
@@ -27,6 +32,15 @@
 <script>
 export default {
 	name: 'KvCommentsReplyButton',
+	props: {
+		/**
+		 * The number of replies to the comment.
+		 */
+		numberOfReplies: {
+			type: Number,
+			default: 0,
+		},
+	},
 	emits: [
 		'click',
 	],

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/KvCommentsReplyButton.stories.js

@@ -0,0 +1,23 @@
+import KvCommentsReplyButton from '../KvCommentsReplyButton.vue';
+
+export default {
+	title: 'KvCommentsReplyButton',
+	component: KvCommentsReplyButton,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsReplyButton },
+		setup() { return { args: templateArgs }; },
+		template: `
+				<KvCommentsReplyButton v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const ReplyCount = story({ numberOfReplies: 6 });

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