@kiva/kv-components 3.51.0 → 3.52.1

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.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)
+
+
+### Bug Fixes
+
+* add back in comments container ([36a8a97](https://github.com/kiva/kv-ui-elements/commit/36a8a979aac47c425e32d87cd13160ad68b913cf))
+* another tweak to how events emitted ([029367a](https://github.com/kiva/kv-ui-elements/commit/029367aeb1f38151a7d36e0a2246b82b14489cb3))
+* minor test fix ([c95c486](https://github.com/kiva/kv-ui-elements/commit/c95c4866d05b2e711e8895868d72ddc6bb5b7a43))
+* remove unneeded comment container ([71365b0](https://github.com/kiva/kv-ui-elements/commit/71365b0f6628d1d280f9fbd2b0adbad8688fd57c))
+
+
+
+
+
+# [3.52.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.51.0...@kiva/kv-components@3.52.0) (2024-01-31)
+
+
+### Bug Fixes
+
+* added missing suppression classes ([5d04867](https://github.com/kiva/kv-ui-elements/commit/5d048672f078d2d229372e37b896c9be025457d9))
+
+
+### Features
+
+* add comments add component ([1bf5fc3](https://github.com/kiva/kv-ui-elements/commit/1bf5fc388fee61a63f49775a15b50728c140a569))
+
+
+
+
+
 # [3.51.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.50.0...@kiva/kv-components@3.51.0) (2024-01-25)
 
 

package/package.json

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

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

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import CommentsAdd, { ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
+
+const renderCommentsAdd = (props = {}) => {
+	return render(CommentsAdd, { props });
+};
+
+describe('KvCommentsAdd', () => {
+	it('should render defaults', () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		getByPlaceholderText('Add a comment to this loan...');
+		getByRole('button', { name: 'Cancel' });
+		getByRole('button', { name: 'Comment' });
+	});
+
+	it('should render user info', () => {
+		const { getByAltText, getByText } = renderCommentsAdd({
+			userImageUrl: 'test.com',
+			userDisplayName: 'User',
+		});
+		getByAltText('Lender');
+		getByText('User');
+	});
+
+	it('should enable comment button when text entered', async () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+
+		expect(commentButton.disabled).toBeTruthy();
+
+		await userEvent.type(textInput, 'test');
+
+		expect(commentButton.disabled).toBeFalsy();
+
+		await userEvent.clear(textInput);
+
+		expect(commentButton.disabled).toBeTruthy();
+	});
+
+	it('should clear text when cancel clicked', async () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const cancelButton = getByRole('button', { name: 'Cancel' });
+
+		await userEvent.type(textInput, 'test');
+		await userEvent.click(cancelButton);
+
+		expect(textInput.value).toBe('');
+	});
+
+	it('should emit value when comment clicked', async () => {
+		const { getByPlaceholderText, getByRole, emitted } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
+	});
+
+	it('should not emit empty value when comment clicked', async () => {
+		const { getByRole, emitted } = renderCommentsAdd();
+		const commentButton = getByRole('button', { name: 'Comment' });
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toBe(undefined);
+	});
+});

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

@@ -1,18 +1,28 @@
 import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import Container from '../../../../vue/KvCommentsContainer.vue';
+import { ADD_COMMENT_ID, ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
 
 const renderContainer = (props = {}) => {
 	return render(Container, { props });
 };
 
 describe('KvCommentsContainer', () => {
-	it('should render without activity ID', async () => {
-		const component = renderContainer();
-		component.getByText('Activity ID missing');
+	it('should render comments add component', async () => {
+		const { container } = renderContainer();
+		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(1);
 	});
 
-	it('should render with activity ID', async () => {
-		const component = renderContainer({ activityId: 'asd' });
-		component.getByText('Comment functionality coming soon!');
+	it('should emit comment', async () => {
+		const { getByPlaceholderText, getByRole, emitted } = renderContainer();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
 	});
 });

package/vue/KvCommentsAdd.vue

@@ -0,0 +1,120 @@
+<template>
+	<div class="tw-flex tw-flex-col">
+		<div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-0.5 md:tw-gap-1">
+			<div class="tw-flex tw-items-center tw-gap-1">
+				<img
+					v-if="userImageUrl"
+					:src="userImageUrl"
+					alt="Lender"
+					class="
+						data-hj-suppress
+						tw-inline-block
+						tw-w-3.5
+						tw-h-3.5
+						tw-rounded-full
+						tw-overflow-hidden
+						tw-object-fill
+					"
+				>
+				<div class="data-hj-suppress tw-font-medium">
+					{{ userDisplayName }}
+				</div>
+			</div>
+			<kv-text-input
+				:id="ADD_COMMENT_ID"
+				v-model="addCommentValue"
+				placeholder="Add a comment to this loan..."
+				class="data-hj-suppress tw-grow"
+			/>
+		</div>
+		<div class="tw-flex tw-py-0.5 tw-gap-0.5">
+			<kv-button
+				variant="ghost"
+				class="tw-ml-auto"
+				@click="cancel"
+			>
+				Cancel
+			</kv-button>
+			<kv-button
+				variant="ghost"
+				:state="commentButtonState"
+				@click="comment"
+			>
+				Comment
+			</kv-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, ref } from 'vue-demi';
+import KvButton from './KvButton.vue';
+import KvTextInput from './KvTextInput.vue';
+
+export const ADD_COMMENT_ID = 'add-comment-value';
+export const ADD_COMMENT_EVENT = 'add-comment';
+
+export default {
+	components: {
+		KvButton,
+		KvTextInput,
+	},
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [ADD_COMMENT_EVENT],
+	setup(_props, { emit }) {
+		const addCommentValue = ref('');
+
+		const commentButtonState = computed(() => (addCommentValue.value ? '' : 'disabled'));
+
+		const cancel = () => {
+			addCommentValue.value = '';
+		};
+
+		const comment = () => {
+			emit(ADD_COMMENT_EVENT, addCommentValue.value);
+		};
+
+		return {
+			ADD_COMMENT_ID,
+			addCommentValue,
+			commentButtonState,
+			cancel,
+			comment,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+>>> input {
+	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
+}
+
+>>> input:focus {
+	@apply tw-border-tertiary;
+	box-shadow: none;
+}
+
+>>> button > span {
+	@apply tw-min-h-0;
+}
+
+>>> button > span > span {
+	@apply tw-py-0 tw-px-0.5;
+}
+</style>

package/vue/KvCommentsContainer.vue

@@ -1,28 +1,45 @@
 <template>
 	<div>
-		<h3>Comment Container Placeholder</h3>
-		<p v-if="activityId">
-			Comment functionality coming soon!
-		</p>
-		<p
-			v-else
-			class="tw-text-desert-rose"
-		>
-			Activity ID missing
-		</p>
+		<kv-comments-add
+			:user-image-url="userImageUrl"
+			:user-display-name="userDisplayName"
+			@add-comment="comment"
+		/>
 	</div>
 </template>
 
 <script>
+import KvCommentsAdd from './KvCommentsAdd.vue';
+
+export const ADD_COMMENT_EVENT = 'add-comment';
+
 export default {
+	components: {
+		KvCommentsAdd,
+	},
 	props: {
 		/**
-		 * The activity ID for the comments
+		 * The full URL for the user image
 		 */
-		activityId: {
+		userImageUrl: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(_props, { emit }) {
+		const comment = (commentValue) => {
+			emit(ADD_COMMENT_EVENT, commentValue);
+		};
+		return {
+			comment,
+		};
 	},
 };
 </script>

package/vue/stories/KvCommentsAdd.stories.js

@@ -0,0 +1,32 @@
+import KvCommentsAdd from '../KvCommentsAdd.vue';
+
+export default {
+	title: 'KvCommentsAdd',
+	component: KvCommentsAdd,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsAdd },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 800px;">
+				<KvCommentsAdd v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const UserName = story({
+	userDisplayName: 'User',
+});
+
+export const UserInfo = story({
+	userImageUrl: 'https://via.placeholder.com/50x50',
+	userDisplayName: 'User',
+});

package/vue/stories/KvCommentsContainer.stories.js

@@ -11,7 +11,9 @@ const story = (args) => {
 		components: { KvCommentsContainer },
 		setup() { return { args: templateArgs }; },
 		template: `
-			<KvCommentsContainer v-bind="args" />
+			<div style="max-width: 800px;">
+				<KvCommentsContainer v-bind="args" />
+			</div>
 		`,
 	});
 	template.args = args;
@@ -19,5 +21,3 @@ const story = (args) => {
 };
 
 export const Default = story({});
-
-export const Activity = story({ activityId: 'asd' });